Design a light-mode web interface screen: airy scandinavian catalog clarity punctuated by high-contrast crimson banners and cobalt micro-interactions.
LAYOUT
The page adheres to a 1240px container with strong vertical rhythm spaced at 80px intervals. It initiates with a minimal top utility bar and sticky main header, drops into an asymmetric hero with left-aligned editorial text and right-aligned cut-out model, transitions into a 3-tile bento promo section, passes through a horizontal trust-factor bar and monochrome brand logo strip, and concludes with a 4-column product grid with tabbed filtering.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Global page background and primary card contrast canvas.
- #F7F8FA — Porcelain Gray: Background fill for product cards and neutral promo containers.
- #2B64EC — Cobalt Blue: Primary action buttons, active navigation markers, pagination ring, and category slugs.
- #E62044 — Crimson Blaze: High-urgency smartwatch promo block, discount tags (-45%), and sale price text.
- #2E9D48 — Emerald Leaf: Editorial price highlights and 'New' status badges.
- #181B1F — Charcoal Black: Dominant headlines, product titles, and main interactive text.
- #717784 — Slate Gray: Body descriptions, metadata, inactive links, and trust item captions.
- #EAECEF — Hairline Border: Delicate horizontal dividers and search input strokes.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Gilroy, Sofia Pro, Poppins), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 46px display. Tracking -0.02em at display, 0.05em at uppercase captions. Clean, contemporary, and architectural. The geometric sans-serif (matched closely by Plus Jakarta Sans or Gilroy) balances commercial legibility with European editorial sophistication. Its round forms in body copy keep the brand approachable, while tight display tracking ensures headlines feel anchored and decisive.
GEOMETRY & SPACING
Corner radii — cards 10px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, airy density.
DEPTH
Depth is handled almost entirely through tonal surface layering rather than drop shadows. Pure white canvases are layered with soft #F7F8FA tinted rounded cards to delineate interactive zones. Subtle, low-opacity ambient shadows (0 4px 12px rgba(0,0,0,0.04)) are reserved exclusively for circular slider controls and utility chips.
IMAGERY
Photography consists strictly of high-key isolated studio packshots with transparent shadows, paired with natural-light fashion lifestyle cutouts. Imagery must always remain sharp, uncluttered, and stripped of distracting background noise to respect the Scandinavian minimalist layout.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric bento feature block: pairing an understated, tall #F7F8FA porcelain watch card with an intense crimson #E62044 horizontal smartwatch banner. This breaks the monochromatic calm with sudden high-energy retail urgency without compromising catalog refinement.
MUST
- Keep product cutout backgrounds transparent or seated cleanly on porcelain #F7F8FA surfaces.
- Limit the crimson #E62044 fill to a single featured promotional card per visual viewport.
- Anchor active tabs and key primary CTA buttons with cobalt blue #2B64EC.
- Use uppercase tracking (0.08em) strictly on small 11-12px category indicator labels.
AVOID
- Do not apply heavy drop shadows to product cards; rely solely on #F7F8FA tone separation.
- Do not use crimson for standard navigation links or primary hero CTA buttons.
- Never enclose product cutout images in harsh bordered sub-boxes within cards.
- Do not mix serif display typefaces into this strict geometric sans system.
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 中尝试 
