Design a light-mode mobile app interface screen: sun-drenched couture retail framed in pale linen and burnished plum.
LAYOUT
The mobile layout follows a disciplined single-column vertical rhythm anchored by a 16px lateral margin. Progression begins with the minimal brand header, sweeps into an embedded search capsule, and opens into an expansive 360px hero card. Beneath, a four-column category grid feeds into a four-segment value-prop bar, culminating in horizontal product carousels with editorial headers.
PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas: Global application background and negative space between cards
- #F5F3EF — Linen Surface: Background fill for category tiles, search bar, and benefit banner
- #4E252D — Burgundy Plum: Primary hero CTA pill, cart notification badge, and active pagination indicator
- #B59567 — Muted Gold: Wordmark crown insignia and luxury branding accents
- #1C1A18 — Espresso Ink: Headings, logo lettering, primary titles, and high-emphasis icons
- #8C867E — Warm Taupe: Item counts, search placeholder, secondary descriptions, and inactive chevrons
- #E9E6DF — Whisper Border: Delicate stroke on search input and product card outlines
TYPOGRAPHY
Typeface Cormorant Garamond (or Didot, Bodoni MT, Playfair Display), weights 400/500/600. Sizes 9px caption, 10px body-sm, 13px body, 14px subheading, 20px heading, 32px display. Tracking -0.01em at display, 0.05em at caps. The typography conveys refined continental luxury, pairing the architectural classicism of Cormorant Garamond with the pristine, modern geometry of Jost. It references heritage fashion houses like Chloé and Celine, balancing grandeur in headlines with whisper-quiet, tracked utility text. If Cormorant is unavailable, Didot or Bodoni serves as an exact spiritual replacement.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 10px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is created almost entirely without drop shadows, using surface stepping and high-key ambient light in photography instead. The primary plane is pure white (#FFFFFF), while interactive modules sit flat on level-1 warm linen (#F5F3EF). Subtle elevation is implied solely through photographic cast shadows of isolated merchandise within their containers.
IMAGERY
Photography is studio-lit, warm-toned, and heavily curated around shades of ivory, champagne, and cream with soft directional natural light. Hero imagery integrates environmental architectural elements like wainscoting and classical furniture, while category thumbnails feature objects floating cleanly on background-matched studio sweeps. High-saturation, neon, or flash-streetwear photography is strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the warm plum pill button (#4E252D) floating over cream-toned, soft-focus editorial imagery, balanced against the pale linen (#F5F3EF) category pods below. It anchors the interface as haute couture without becoming unapproachable. The signature breaks if the plum is replaced by blue, black, or red, or if the cards lose their gentle 14px rounded curvature.
MUST
- Use letter-spaced uppercase Jost (tracking 0.08em) for all micro UI labels and category titles.
- Restrict deep burgundy (#4E252D) to singular conversion elements like primary CTAs and cart badges.
- Set category and card backgrounds to warm linen (#F5F3EF) rather than stark cold greys.
- Maintain generous vertical whitespace (24px) between distinct thematic sections.
AVOID
- Do not introduce harsh drop shadows; rely on surface color contrast and 1px borders.
- Never render product category images on dark, saturated, or noisy backgrounds.
- Do not use pure black (#000000) for text; always use warm espresso ink (#1C1A18).
- Avoid sharp 0px corners; all card structures must carry a 12px to 18px radius.
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. 在 DraPub 中尝试