Design a light-mode web interface screen: sculpted agency portfolio balancing warm architectural cream against an immersive midnight-slate project gallery.
LAYOUT
The frame is anchored by a persistent ~180px sidebar on the left, paired with a fluid central-to-right body column that reaches up to 1360px. Content flows rhythmically: top horizontal header utility, followed by an asymmetrical hero pairing text on the left and a vertical photo mockup on the right. A client logo ticker smoothly transitions into an immersive full-bleed dark showcase, concluding with structured service grids, a linear process chain, and an editorial split quote block.
PALETTE (use these exact hex values)
- #fcfbfa — Canvas Light: Primary surface for hero, services, process, and testimonial modules.
- #12161f — Canvas Dark: Inverted contrast surface for the featured case studies and studio metrics strip.
- #ffffff — Sidebar White: Stationary left rail surface housing high-level navigation and utility toggles.
- #1d5cf6 — Electric Cobalt: Primary actionable emphasis, pill buttons, focus states, and key category markers.
- #0f141d — Midnight Ink: Dominant text shade across light surfaces delivering maximum contrast.
- #6b7280 — Muted Slate: Secondary descriptors, navigation labels, and support metadata.
- #e8e6e1 — Hairline Rule: Border dividing sidebar, testimonial boxes, cards, and grid sections.
- #d38e5d — Warm Ochre: Editorial quotation marks and highlighted metric glyphs.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.03em display, 0.08em uppercase tags. The typography communicates disciplined, Swiss-inspired modernity with an editorial gallery restraint. By deploying an unembellished grotesque with tight display tracking and generous sentence casing, headlines feel thoughtful rather than brash. Inter Display or Plus Jakarta Sans are ideal matches, giving crisp geometric junctions that stay sharp on high-density displays.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1180px container, comfortable density.
DEPTH
Depth is strictly graphic and planar rather than atmospheric. The design avoids blurred drop shadows, choosing instead hairline 1px borders (#e8e6e1) and high-contrast surface transitions between light (#fcfbfa) and dark (#12161f) to layer information. Occasional micro-elements like product mockups introduce real-world optical depth within clean bounding boxes.
IMAGERY
Photography emphasizes tangible, physical craft: high-end stationery, editorial tablet devices resting against textured travertine, and minimalist skincare bottles. Imagery features warm natural lighting, gentle cast shadows, and tactile materials (linen, stone, heavy paper). Saturated 3D renders or generic office stock photos would severely clash with this tone.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden, edge-to-edge transition into an inky charcoal band (#12161f) for the project showcase directly in the middle of a warm cream editorial site. It transforms the screen into a digital cinema box, focusing all visual weight onto portfolio thumbnails before returning seamlessly to light utility surfaces.
MUST
- Retain the sharp contrast cut between the warm light canvas (#fcfbfa) and the dark featured gallery (#12161f).
- Keep button border radii compact (6px) rather than fully rounded pills to match the architectural feel.
- Use uppercase tracking (0.08em) for micro-categorisation labels above large headers.
- Ensure all card borders remain ultra-thin 1px outlines without fuzzy ambient drop shadows.
AVOID
- Do not blur or blend the boundary between the light and dark full-width page sections.
- Never substitute heavy drop shadows where delicate hairline strokes (#e8e6e1) are intended.
- Do not switch the typeface to a serif; the editorial poise comes from architectural sans rhythm.
- Avoid centering headers in content zones; maintain strict left-alignment with generous rag.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2144:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
