Design a light-mode web interface screen: scandinavian functionalism grounded by earthen terracotta accents and warm architectural whitespace.
LAYOUT
The page structure employs a strict 12-column rhythm bounded to a maximum width of 1320px with generous margins. A slim utility announcement sits atop the main header, flowing directly into an asymmetric two-panel hero section. Below, a bento-style feature mosaic shifts the rhythm before giving way to a muted brand logo bar and an orderly four-column product grid.
PALETTE (use these exact hex values)
- #F8F7F5 — Canvas Sand: Primary page background providing a warm, non-glare editorial base.
- #FFFFFF — Surface Pure White: Product card cards, dropdowns, and circular slider control backgrounds.
- #BD4B37 — Brand Terracotta: Primary CTAs, notification badges, active tab underlines, and highlight promo cards.
- #1A1A1A — Deep Obsidian: Headings, logo mark, primary prices, and high-emphasis labels.
- #767676 — Slate Muted: Body copy, struck-through regular prices, breadcrumb navigation, and category tags.
- #EBEAE6 — Earthen Border: Product card boundaries, vertical header dividers, and grid lines.
- #407153 — Badge Forest Green: Small status pills indicating new product arrivals.
- #E5A93C — Star Ochre: Star rating review glyphs on product listing cards.
TYPOGRAPHY
Typeface Jost (or DM Sans, Plus Jakarta Sans, Futura), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.02em for headings, 0.08em for uppercase metadata. The typographic tone is architectural, rational, and modern, anchored by a geometric sans-serif similar to Jost or DM Sans. Strict hierarchy balances confident 48px bold headlines with delicate 11px uppercase category badges spaced at 0.12em. This pairing conveys quiet luxury, functional utility, and contemporary design rigor without needing decorative serif flourishes.
GEOMETRY & SPACING
Corner radii — cards 6px, links 2px, inputs 4px, buttons 6px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1320px container, airy density.
DEPTH
Depth is communicated almost exclusively through planar layering and tonal surface contrast rather than physical drop shadows. White cards sit cleanly upon a warmer #F8F7F5 foundation with razor-thin 1px borders (#EBEAE6). Where elevation is required, such as circular pagination arrow buttons, an imperceptible 0 4px 12px rgba(0,0,0,0.06) blur is utilized.
IMAGERY
Photography emphasizes Nordic minimalism: natural daylight studio lighting, clean cut-out items on uniform off-white backdrops, and muted apparel colorways. Models look candid, approachable, and refined, wearing contemporary casual streetwear or tailored separates. Overly dramatic flash photography, chaotic outdoor locations, or hyper-saturated lifestyle compositions are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the 'Terracotta Punctuation'—a tiny terracotta period (#BD4B37) terminating the brand wordmark that cascades into active pagination rings, category indicators, and singular feature blocks. It gives an otherwise disciplined, monochromatic Scandinavian layout an identifiable designer signature. It must be used sparingly; applying it to secondary body copy or multiple competing buttons destroys its role as a beacon.
MUST
- Keep all photography cut out on pure neutral or daylight studio backgrounds.
- Restrict the terracotta red (#BD4B37) strictly to high-conversion focal points.
- Preserve open vertical spacing of at least 80px between major merchandising sections.
- Use geometric sans-serif typography with restrained 11px uppercase tracking for metadata.
AVOID
- Do not introduce pure black backgrounds or harsh saturated neon accent colors.
- Never make cards or buttons pill-shaped except for the carousel navigation circles.
- Avoid heavy drop shadows; rely on 1px subtle surface borders for separation.
- Do not remove the distinctive terracotta dot from the primary brand title.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1728:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
