Design a light-mode mobile app interface screen: quiet luxury mobile retail draped in soft pastel tints, spacious typography, and effortless warmth.
LAYOUT
The vertical rhythm progresses methodically: utility header at top, followed by horizontal category navigation tabs. Next is the primary hero carousel anchored with pagination dots below. Subsequent content flows into distinct horizontal carousels and asymmetric promo grids, each introduced by a section title paired with an inline 'View all' link.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Pure root background for the screen, header, and carousel floating arrow buttons.
- #1E2022 — Obsidian Black: Primary headings, brand wordmark, icon outlines, and high-priority CTA button background.
- #DE7B68 — Terracotta Coral: Subtle luxury accent used for section kickers, active tab indicators, cart badges, and 'View all' links.
- #84888E — Muted Slate: Secondary product counts, inactive navigation tabs, and supporting descriptive body copy.
- #FBF6F3 — Sand Dune Tint: Soft beige tinted background fill for the main hero carousel card.
- #F7F1F7 — Lavender Mist Tint: Pastel card surface fill for the technology category tile.
- #F6F5F3 — Linen Cream Tint: Neutral tinted background for headwear and eyewear category cards.
- #E8F1F5 — Soft Sky Tint: Cool blue background tint for the spring essentials collection banner.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Montserrat), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 18px heading, 24px display. Tracking -0.01em at display, 0.25em at brand wordmark. The typography is clean, geometric, and effortless. Setting the brand logo in widely tracked uppercase transforms a neutral sans-serif into a high-fashion signature. Plus Jakarta Sans or Inter serves as the ideal choice, offering clear numeric tabular figures and precise geometric letterforms that remain crisp on small screens.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 12px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is minimal and strictly functional. The canvas and card wells are entirely flat. The only visible elevation appears on the 36px white circular carousel arrow buttons, which use a subtle diffuse shadow (0px 4px 12px rgba(0, 0, 0, 0.08)) to float cleanly over tinted card surfaces and images.
IMAGERY
Imagery adheres to high-key, pristine fashion photography. Assets are cleanly clipped cutouts of models and individual objects (sunglasses, headphones, beanies, totes) with soft ambient contact shadows beneath them. Cluttered lifestyle backgrounds or low-light environmental photos are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the multi-tonal pastel card array: borderless cards in alternating ultra-soft tints (linen, lilac, cream, and sky) hosting clean cut-out objects. Misusing this by applying saturated colors or adding dark card borders immediately destroys the boutique editorial aesthetic.
MUST
- Use distinct pastel tints (#F7F1F7, #FBF6F3, #E8F1F5) across adjacent cards to separate content without border lines.
- Maintain generous 20px horizontal screen margins for all core section blocks.
- Isolate product shots cleanly with transparent backgrounds and realistic diffuse drop shadows.
- Keep CTA buttons compact with dark obsidian #1E2022 fills and subtle 10px rounded corners.
AVOID
- Do not apply heavy borders or stroked outlines around category and promotional cards.
- Never use saturated, high-contrast primary colors for the card background surfaces.
- Avoid pill-shaped round buttons for primary CTAs; keep the radius calibrated to 10px.
- Do not omit the item count caption beneath category card labels.
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 中尝试 
