Design a light-mode web interface screen: scandinavian architectural rigor balancing deep twilight charcoal surfaces against clean gallery-lit white editorial planes.
LAYOUT
The interface is structured by a permanent dark vertical navigation column on the far left that anchors viewport height. The main canvas flows from a dramatic, dark-themed hero visual into a bright gallery-style two-column editorial spread, followed by a continuous 4-unit horizontal stat bar and a 4-column responsive project catalog grid.
PALETTE (use these exact hex values)
- #0e1115 — Twilight Slate: Primary background for the persistent sidebar navigation and immersive hero section
- #f8f9fa — Gallery White: Main canvas background for content sections below the hero fold
- #ffffff — Pure White: Background for statistic cards, project cards, and high-contrast text on dark surfaces
- #c29b63 — Nordic Ochre: Primary interactive button fill, project index tags, and category section labels
- #12151a — Charcoal Black: Primary headline and title text color across light section surfaces
- #6b7280 — Architect Grey: Supporting body copy, secondary metadata, and phone contact information
- #e5e8ed — Hairline Border: Structural outlines for the metrics strip and project card containers
TYPOGRAPHY
Typeface Manrope (or Golos Text, Montserrat, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 32px heading-lg, 48px display. Tracking -0.02em for headings, 0.04em for uppercase metadata. The typographic tone is authoritative, Scandinavian, and engineered. Using a clean geometric sans-serif like Manrope or Golos Text, it balances cold functional architectural notation (metrics, specs, square meters) with dense, confident headlines. Headlines remain tight, heavy, and unembellished.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through planar layering and lighting contrast rather than blur shadows. Cards sit flat against the canvas with hairline 1px strokes (#e5e8ed), while dark hero sections use internal gradient scrims over photography to lift crisp white typography cleanly into the foreground.
IMAGERY
Photography focuses exclusively on premium Scandinavian timber and glass architecture captured during twilight or overcast conditions. Warm tungsten interior illumination spills onto cool outdoor granite, pine needles, and minimalist concrete patios. Bright, over-saturated daylight lifestyle shots with people smiling directly at the camera are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-zone split canvas: a dark twilight architectural hero anchored by a fixed left navigation rail that seamlessly drops into an airy, gallery-white catalog floor. This structure instantly communicates the shift from emotional architectural aspiration to pragmatic construction specs. A common error is softening this contrast with muddy grey mid-tones instead of embracing the absolute dark-to-light boundary.
MUST
- Ground all interactive highlights and section numbering in the signature warm ochre (#c29b63).
- Keep card corners tightly controlled between 6px and 8px to preserve geometric architectural discipline.
- Use uppercase tracking (0.04em to 0.08em) on category tags, project titles, and navigation labels.
- Maintain high-contrast pairing between twilight-dark hero photography and the stark white lower section cards.
AVOID
- Do not introduce soft saturated primary colors like cobalt blue, crimson, or emerald green.
- Avoid pill-shaped round buttons for text CTA actions; maintain architectural 6px rectangular geometry.
- Do not use heavy drop shadows; rely entirely on hairline borders (#e5e8ed) and surface changes for separation.
- Never mix serif typefaces into technical spec lists or property details.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1680:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
