Design a light-mode mobile app interface screen: curated high-fashion storefront pairing delicate tinted pastels with bold editorial serif numbering and generous radii.
LAYOUT
The vertical rhythm starts with a restrained 48px top bar, leads into an expansive full-width hero card taking ~50% of the screen height, transitions into a balanced 2-column card grid for secondary collections, and concludes with a section-titled preview row for lookbooks. Horizontal card spacing stays uniform at 12px to 16px.
PALETTE (use these exact hex values)
- #FAF8F5 — Canvas Background: Primary screen canvas providing warm, non-glare off-white contrast behind cards
- #EFEBE4 — Hero Card Tint: Muted warm sand background container for the primary hero carousel item
- #DCE7F0 — Summer Sky Tint: Cool soft blue tint backing the Summer Fall collection tile
- #E4E0EC — Winter Lilac Tint: Gentle periwinkle tint backing the Winter collection tile
- #FFFFFF — Pure White: Background for floating circular action buttons and pagination indicators
- #1C212D — Text Charcoal: Primary heading text, iconography, and title typography
- #757982 — Text Muted Slate: Secondary body copy, subtitles, and section link labels
- #F06A65 — Terracotta Coral: Primary call-to-action pill, hero numeral 01, and active carousel dot
- #3B92D4 — Ocean Azure: Accent tint for the collection 02 numeral
- #7066C6 — Muted Lavender: Accent tint for the collection 03 numeral
TYPOGRAPHY
Typeface Playfair Display (or Didot, Bodoni MT, Cormorant Garamond), weights 600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 22px heading, 28px heading-lg, 64px display. Tracking -0.02em to -0.01em. The voice is that of an exclusive, high-end fashion monograph—poised, cultured, and aspirational. The dramatic contrast of Playfair Display lends heritage and runway credibility, while Inter brings frictionless digital utility and modern precision. If unavailable, Didot paired with SF Pro provides an indistinguishable editorial rhythm.
GEOMETRY & SPACING
Corner radii — cards 28px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is handled almost entirely without elevation, relying on soft pastel surface planar separation against the warm ivory ground. Subtle, diffused drop shadows (blur 12px, alpha < 0.08) are reserved exclusively for interactive floating elements like circular action buttons and the pill CTA.
IMAGERY
Photography consists of studio fashion model portraits with seamless white-to-light-grey studio lighting that organically merges into card fills. Backgrounds are clean and decluttered; any busy outdoor scenes or high-contrast gritty photography would break the minimalist high-fashion atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the pairing of an oversized, colored serif campaign numeral ('01', '02', '03') set directly above an editorial serif title inside a softly tinted, large-radius pastel card. This layout mimics magazine spreads and instantly identifies the collection. Misusing it involves shrinking the numerals to standard body size or using a monospace/sans font.
MUST
- Use distinct pastel background hues (#EFEBE4, #DCE7F0, #E4E0EC) to differentiate separate thematic collections.
- Pair high-contrast editorial serifs for titles with clean, airy geometric sans for descriptive copy.
- Render collection numerals in massive scale with color matching the card's accent palette.
- Maintain generous corner radii (24px to 32px) on all image and content cards.
AVOID
- Never add 1px visible hairline borders to cards; define boundaries purely via surface color shifts.
- Do not use dark, heavy, or textured drop shadows under cards or pills.
- Avoid using bright saturated backgrounds; keep surface tints strictly within desaturated pastel tones.
- Do not render body copy or secondary descriptors in serif typefaces.
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 中尝试