Design a dark-mode mobile app interface screen: sommelier-grade dark minimalism evoking moody cellar light, aged oak, and reserve vintage presentation.
LAYOUT
The vertical flow begins with an expansive hero section incorporating negative space and bottle scale, followed immediately by an essential four-item utility ribbon. Content then alternates between rich product cards, a 3-column metric card, and horizontal collection carousels, maintaining consistent 20px gaps.
PALETTE (use these exact hex values)
- #0b0c0e — Obsidian Ground: Deepest canvas background behind cards and hero presentation
- #141619 — Charcoal Container: Background for structured content cards, quick-action ribbon, and stat blocks
- #22252b — Muted Slate Border: Thin partition lines and card perimeter definitions
- #c39e6a — Antique Gold: Monogram logo, active indicator dots, ratings, and eyebrow category accents
- #7f6a4e — Warm Bronze: Fill color for high-priority CTA buttons like View Details
- #f4f4f6 — Pure Parchment: Display headings, product titles, and numeric values
- #8c929c — Cellar Gray: Body copy, quick action navigation text, and secondary review tallies
- #9e3838 — Muted Ruby: Status indicator dot for red wine collections
- #7a8545 — Olive Gold: Status indicator dot for white wine collections
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Italianno, EB Garamond), weights 400/500/600. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 22px heading, 32px display. Tracking -0.01em at display, normal at title. The typographic pairing embodies old-world vineyard heritage refined by modern Swiss layout rigor. The serif speaks of cellars, terroir, and vintage labels, while the sharp, tracked sans-serif brings authoritative precision and effortless navigation clarity.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is created entirely through layered tone-on-tone luminance rather than box shadows. Studio lighting on product cutouts and subtle 1px border lines (#22252b) separate foreground cards (#141619) from the darker ambient canvas (#0b0c0e).
IMAGERY
Bottles and luxury gift packaging are presented in crisp, reflective commercial packshot style against dimly lit studio backdrops with subtle matte gradients. Imagery must look tactile, moody, and exclusive; bright lifestyle outdoor photography without dark framing would severely violate the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The deliberate pairing of an antique gold tracked eyebrow, razor-sharp serif headline, and dark studio bottle cutout framed inside a 16px charcoal card with hairline borders. Misusing it involves placing lifestyle imagery inside the card or replacing the gold accents with bright modern neon.
MUST
- Reserve the transitional serif solely for headlines, wine names, and numerical counters.
- Pair every primary serif heading with an uppercase, widely tracked 10px sans-serif eyebrow.
- Use 1px borders (#22252b) to delineate card sections rather than drop shadows.
- Keep product bottle photography isolated with photorealistic studio lighting against dark backgrounds.
AVOID
- Never use pure white (#ffffff) for solid card backgrounds; keep the palette nocturnal.
- Avoid standard high-saturation blue or green utility colors for buttons or links.
- Do not set long multi-line body descriptions in serif type.
- Never apply harsh or colored drop shadows; elevation is planar and defined by borders.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub