Design a dark-mode mobile app interface screen: an intimate midnight salon where celestial wine glows meet champagne serif typography and monochromatic speaker portraits.
LAYOUT
The mobile layout follows a strict vertical narrative stack. It opens with an airy hero banner featuring a left-aligned headline block alongside an ambient right-aligned wireframe graphic, anchored by a prominent pill button and carousel dots. Following this, an announcement section introduces a horizontal snap carousel of speaker cards, followed immediately by a utilitarian full-width call-to-action bar and a split-screen metric card.
PALETTE (use these exact hex values)
- #0B0C11 — Obsidian Base: Primary mobile viewport background and deep structural canvas.
- #14151D — Midnight Charcoal: Card containers, list action rows, and floating surfaces.
- #232532 — Subtle Border: Hairline container outlines, circular icon button rings, and separators.
- #CEB495 — Champagne Gold: Primary pill button background, active pagination indicator, and key dates.
- #C2A585 — Muted Gold: Section category labels, uppercase metadata, and subtle chevron arrows.
- #4A192C — Burgundy Constellation: Ambient wireframe globe glow and thematic hero atmosphere.
- #A42B50 — Vintage Crimson: Header brand mark speech icon backdrop.
- #F6F6F8 — Pure White: Display headings, section titles, and key speaker names.
- #8E8F99 — Atmospheric Gray: Speaker subtitles, paragraph body descriptions, and inactive nav states.
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display,EB Garamond,Cinzel), weights 400/500/600. Sizes 10px caption, 11px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 28px heading-lg, 42px display. Tracking -0.01em at display, 0 at title. The typography evokes the prestige of high-end literary salons and luxury editorial print. The serif display face conveys gravitas, legacy, and intellectual rigor, while the tight, uppercase sans-serif coordinates act like museum placards—informative, restrained, and modern. If Cormorant Garamond is unavailable, Playfair Display provides a suitable high-contrast editorial substitute.
GEOMETRY & SPACING
Corner radii — cards 14px, links 0px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 36px between sections, 390px container, tight density.
DEPTH
Depth is created purely through luminous color contrast and opacity rather than drop shadows. Surface cards in #14151D hover above the #0B0C11 ground using crisp 1px borders in #232532. The hero area derives cinematic depth from an ethereal burgundy wireframe sphere that seems to glow from deep behind the primary headline.
IMAGERY
Photography follows two distinct art directions: speaker portraits are strictly monochrome, closely cropped studio headshots with soft lighting that dissolve into black scrims; event lifestyle photography is full-color, saturated with dramatic stage lighting, crowd excitement, and conference atmosphere, framed tightly in multi-tile grids.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the pairing of a razor-sharp, classical serif headline ('ENGAGE PRAGUE') layered beside a faint, wine-tinted 3D wireframe constellation, grounded by a warm champagne pill button. This specific intersection of classical publishing elegance and digital networked intimacy establishes the summit's high-ticket exclusivity; replacing the wireframe or flattening the serif ruins the mystique.
MUST
- Always pair Cormorant Garamond headlines with uppercase, tracked Inter sans-serif eyebrows.
- Keep speaker imagery strictly black-and-white or high-contrast desaturated monochrome.
- Reserve the champagne gold fill (#CEB495) exclusively for the single primary conversion CTA.
- Apply smooth dark gradient overlays to media cards so typography remains fully legible.
AVOID
- Do not use saturated, full-color headshots for speaker cards; it shatters the editorial calm.
- Never substitute the serif display headings with modern geometric sans or playful scripts.
- Do not use bright white for secondary subtitles; keep them locked to muted gray (#8E8F99).
- Avoid harsh square corners; all cards must feature a consistent 12px to 14px corner radius.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1536:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试