Design a dark-mode web interface screen: an architectural darkroom where dense monochromatic hierarchy meets cobalt precision and curated cultural artifacts.
LAYOUT
The workspace uses a rigid two-column layout: a 240px persistent navigation sidebar on the far left, and a multi-tiered responsive content canvas on the right. The main column begins with a utility header, transitions into a generous asymmetrical hero zone (title on the left, three-part metrics on the right), flows into horizontal filter controls, and presents a multi-tiered card hierarchy. The rhythm alternates between 2-column dominant asymmetric cards, a 3-column equal grid, a full-width promotional banner, and a 5-column carousel strip.
PALETTE (use these exact hex values)
- #0c0d11 — Obsidian Ground: Primary screen background and deep canvas tone
- #14161f — Slate Surface: Background fill for cards, search input, newsletter module, and dropdowns
- #08090c — Void Sidebar: Deepest surface tint dedicated to the persistent left navigation pane
- #1e222e — Hairline Border: Delicate borders separating sidebar, header, filters, and container edges
- #2563eb — Cobalt Electric: Call-to-action buttons, active navigation states, featured tags, and highlight dots
- #f05638 — Coral Accent: Editorial accent period punctuating the hero headline
- #ffffff — Pure White: Primary headlines, card titles, active tab labels, and primary icons
- #8e93a6 — Muted Slate: Body summaries, author/date metadata, search placeholder, and inactive navigation links
- #555a6d — Faded Steel: Reading time counters, fine print disclaimers, and subtle iconography
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 20px heading, 24px heading-lg, 42px display. Tracking -0.03em at display, -0.01em at body, 0.02em at caps. The typographic tone is authoritative, intellectual, and design-literate. By deploying a clean geometric sans with tight tracking at display sizes (-0.03em), it achieves an editorial feel reminiscent of high-end design monographs without sacrificing interface utility. For open-source implementation, Plus Jakarta Sans or Inter serves as a direct drop-in replacement.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 36px between sections, 1440px container, comfortable density.
DEPTH
Depth is created entirely through planar luminance differences and fine hairline boundaries rather than blur shadows. Background sits at near-black (#0c0d11), cards sit 8% lighter at slate black (#14161f), and active states are marked by crisp 1px borders (#1e222e). Floating interactive elements, like bookmark icons and directional pills, use translucent dark backdrops without elevation glow.
IMAGERY
Photography focuses on authentic contemporary art, human hands in creative craft, architectural geometries, and minimalist product design. Imagery is rich in natural texture, studio lighting, and desaturated earthy tones with occasional vivid warm splashes (such as ochre or terracotta) that resonate with the dark canvas. Avoid generic corporate stock photos, hyper-vivid saturated vectors, or synthetic 3D renders.
SIGNATURE DETAIL — the thing that makes this design itself
The layout's signature is the high-contrast editorial title lockup featuring the isolated coral punctuation mark ('Design & Culture .') paired alongside an asymmetric metrics summary and the cobalt-tagged hero layout. It transforms what could be a sterile SaaS dashboard into an upscale digital design magazine. Misusing it involves placing colored punctuation on standard body text or applying multiple colored dots across lower-level headings.
MUST
- Retain the distinctive coral period (#f05638) exclusively after major editorial display headers.
- Enforce a strict 1px border (#1e222e) to define surfaces instead of drop shadows.
- Use solid cobalt blue (#2563eb) sparingly for dominant interactive prompts and status badges.
- Preserve muted gray uppercase dates (11px, letter-spacing 0.04em) at the head of every article card.
AVOID
- Never apply colored or heavy drop shadows; cards must rest purely on surface tone contrast.
- Do not use full-saturation white text for body paragraphs; reserve it for titles and active UI states.
- Never introduce colorful gradients across standard cards or background surfaces.
- Avoid sharp right-angled corners; cards, pills, and inputs must use their defined border radii.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1856:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
