Design a light-mode web interface screen: architectural editorial typography balanced against dramatic monochromatic contrast and restrained cobalt accents.
LAYOUT
The page unfolds as an intentional editorial rhythm starting with a light header and monumental hero staging. It cuts decisively into a monolithic dark obsidian section spanning the core value proposition, four thin-divided feature pillars, and a numerical impact row. The canvas returns to ivory for product exploration, led by an asymmetric dot marker and a four-column category tile sequence.
PALETTE (use these exact hex values)
- #F9F9F8 — Canvas Ivory: Primary background for hero, category catalog, and top navigation.
- #131313 — Obsidian Noir: Contrasting dark background for brand mission statement and feature grid.
- #FFFFFF — Card Pure White: Background for floating hero editorial card and product tile wrappers.
- #2851E3 — Electric Cobalt: Primary action button, category bullet markers, and active navigation indicators.
- #111111 — Text Primary Dark: High-contrast headings, logo glyphs, and body copy on light surfaces.
- #FFFFFF — Text Primary Light: Headline text, category titles, and key numbers on dark surfaces.
- #737373 — Muted Slate: Secondary captions, supporting descriptions, and category count metadata.
- #E5E5E3 — Hairline Border: Subtle bounding lines for category cards and structural dividers.
TYPOGRAPHY
Typeface Didot match (or Playfair Display, Bodoni MT, Cormorant Garamond), weights 400/600. Sizes 10px caption, 11px body-sm, 14px body, 18px subheading, 32px heading, 40px heading-lg, 240px display. Tracking -0.03em display, 0.05em italic accents. The typography creates tension between classical high-fashion legacy and modern architectural precision. High-contrast modern serifs evoke Parisian editorial print (Vogue, Didot tradition), while neutral geometric sans-serifs in tracked uppercase maintain utilitarian clarity. When licensing Didot is impossible, Cormorant Garamond or Bodoni MT serves as a seamless fallback.
GEOMETRY & SPACING
Corner radii — cards 10px, links 0px, inputs 4px, buttons 4px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Depth is handled with severe restraint. Most elements sit completely flat on either the light ivory or dark obsidian base planes. The lone exception is the central hero card, which utilizes an ultra-soft, diffused shadow (0px 20px 48px rgba(0,0,0,0.06)) to hover effortlessly over the flat background lettering.
IMAGERY
Photography follows an art-house editorial direction: monochromatic seascapes, sculptural rock formations, and minimalist still-life studio arrangements on warm neutral plaster. Color palettes within images are limited to bone, ecru, taupe, and deep charcoal. Saturated, high-contrast, or commercial lifestyle shots with busy backgrounds are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the monumental hero sandwich: colossal Didot letterforms ('B' and 'E') sliced in half by a delicate, elevated polaroid-like portrait card. It turns typography into architecture rather than mere text. To implement correctly, the letters must remain static backdrop forms while the card layers distinctly on top via subtle z-index and featherweight elevation.
MUST
- Reserve vibrant royal blue exclusively for purposeful interactive focus points and tiny dot accents.
- Pair ultra-large display serifs directly with tightly tracked, miniature uppercase sans-serif navigation.
- Keep photographic imagery warm, desaturated, or monochromatic to maintain an artisanal luxury feel.
- Use 1px hairline dividers (#262626 or #E5E5E3) to structure content rather than heavy solid borders.
AVOID
- Do not introduce rounded cartoonish buttons; keep corner radii strictly at 4px for CTA elements.
- Never use the accent blue for large background fills or dominant headline text.
- Avoid colorful, busy, or low-contrast lifestyle photography that disrupts the muted palette.
- Do not remove letter spacing from uppercase labels; always track out small sans-serif type.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2496:3312. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
