Design a dark-mode web interface screen: deep navy twilight framing architectural luxury with jewel-toned accents and bespoke typographic clarity.
LAYOUT
The screen uses a two-column foundation: a fixed left sidebar (approx 240px) and a primary content canvas. Inside the canvas, layout moves from a broad global search header into a dominant full-width hero project card, followed by a split section (narrative vs. 2x2 stat grid), concluding with a three-column portfolio card gallery.
PALETTE (use these exact hex values)
- #0c1017 — Canvas Deep: Root background canvas behind navigation and page containers
- #131924 — Surface Elevated: Background for stat tiles, bottom support widget, and secondary panel elements
- #18202f — Surface Hero: Backing container for hero featured project banner
- #1f293d — Border Subtle: Delicate separation borders on cards, inputs, and container partitions
- #3b5bfd — Electric Cobalt: Primary action buttons, active navigation indicator tint, and key callouts
- #ffffff — Text Primary: High-emphasis headings, key metrics, and active states
- #8d99ae — Text Secondary: Body paragraphs, card descriptions, labels, and muted navigation links
- #e76f51 — Stat Coral: Icon container backdrop for team metric card
- #2a9d8f — Stat Teal: Icon container backdrop for clients metric card
- #70a040 — Stat Olive: Icon container backdrop for awards metric card
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 32px heading-lg, 40px display. Tracking -0.03em on display, +0.08em on uppercase tags. The typography conveys refined, Swiss-inspired modernity and architectural authority. Inter or Plus Jakarta Sans provides clean, proportional legibility across micro-labels and massive metrics without feeling cold or sterile. The delicate weight balance gives editorial weight to the studio narrative while functioning as an ultra-legible dashboard.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 48px between sections, 1440px container, comfortable density.
DEPTH
Depth is created through slight tonal surface shifts (#0c1017 to #131924) and hair-thin 1px border outlines (#1f293d) rather than diffuse shadows. Overlapping thumbnail clusters on the hero card introduce subtle physical layering while staying flat and architecturally sharp.
IMAGERY
Photography focuses on high-end interior architecture, tactile materials, directional natural lighting, and curated decor. Imagery must feel quiet, moody, and editorial; high-key commercial stock or oversaturated consumer photography would break the bespoke aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The floating multi-image inset cluster nestled directly into the bottom-right corner of the hero project banner, framed with subtle dark glass borders. It communicates deep visual portfolio context inside a single display hero without cluttering the layout. Misusing it involves placing too many busy images or omitting the subtle border, turning it into a chaotic collage.
MUST
- Anchor high-value CTAs with electric cobalt (#3b5bfd) to preserve immediate visual hierarchy.
- Use uppercase tracking (+0.08em) for micro category labels and section pre-headers.
- Enclose imagery within consistent 16px-20px corner radius containers with 1px border stroke #1f293d.
- Group project metadata into strict three-column key-value sets (Location, Type, Year).
AVOID
- Do not use saturated primary backgrounds for whole cards; restrict pure color to badges and CTAs.
- Never apply harsh white dropshadows or glow filters; stick to 1px #1f293d borders for separation.
- Avoid pure black (#000000); use deep blue-charcoal (#0c1017) to maintain richness.
- Do not mix serif typography into this interface; preserve strict modern neo-grotesque sans consistency.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2336:3520. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
