Design a light-mode web interface screen: editorial white space meets cinematic low-key photography with sharp cobalt triggers.
LAYOUT
The viewport is organized around a sharp horizontal split: 38% left column reserved for pure white editorial content and 62% right section for the immersive interior scene. A fixed-height top navigation spans across both zones seamlessly, while a rounded white three-column utility dock pins the bottom edge to ground the composition.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary left hero background, top header ground, and bottom docked guarantee panel surface
- #151619 — Obsidian Ground: Dominant deep background shade of the living room photography canvas
- #2D62ED — Cobalt Blue: Primary brand accent used for main CTA buttons, section kickers, category slugs, and line icons
- #111215 — Charcoal Black: Primary headline typography and high-contrast brand mark iconography
- #6C727F — Muted Slate: Secondary descriptive body copy, nav links, and metadata captions
- #F0F2F6 — Numeral Watermark: Ultra-low-contrast stroke or fill for oversized background architectural sequence numbers
- #E7E9EE — Border Grey: Divider lines separating bottom value propositions and navigation bar utility boundaries
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 24px heading, 60px display. Tracking -0.03em at display, 0.12em at uppercase kickers. The typography conveys refined architectural poise through Plus Jakarta Sans, pairing tightly tracked lowercase display titles with generous, open uppercase captions. The tone is restrained, luxurious, and functional, evoking high-end European design journals like Kinfolk or Ark Journal.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1440px container, airy density.
DEPTH
Depth is created through photographic layering and subtle glassmorphic blurs rather than heavy shadows. The primary canvas relies on flat planar contrast between white and near-black surfaces, while interactive overlays use subtle 1px translucent borders and 16px backdrop blur to lift gently off dark upholstery.
IMAGERY
Photography is cinematic, moody, and architectural, captured in low natural light with dark charcoal walls (#151619), deep grey woven textiles, and light oak floorboards. Off-brand imagery includes high-key white-room studio shots, saturated warm sunset interiors, or cluttered spaces with distracting human figures.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric editorial split-screen paired with a giant low-opacity numeral watermark ('01') nested behind a crisp, two-line display headline. It immediately communicates structured storytelling before the user engages with the interactive scene hotspots; misusing it by making the numeral too opaque or crossing the photograph boundary ruins its delicate editorial hierarchy.
MUST
- Reserve Cobalt Blue (#2D62ED) strictly for focal interactive elements, kickers, and feature icons.
- Maintain a clear vertical boundary between the pure white editorial text rail and the dark photography.
- Use oversized numeral watermarks (#F0F2F6) behind headlines at extremely low contrast.
- Pair all link arrows with subtle hover translations (4px rightward) rather than color shifts.
AVOID
- Do not place busy lifestyle imagery or bright outdoor daylight photos on the right canvas.
- Avoid pill-shaped (full circular) borders on main CTA buttons; keep them at an 8px radius.
- Never apply drop shadows to the left-side typography or buttons; maintain crisp flat editorial surfaces.
- Do not let the display headline extend across the boundary into the photographic pane.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
