Design a light-mode web interface screen: architectural dual-canvas studio workspace framing high-end agency outputs through stark tonal shifts and razor-sharp typographic discipline.
LAYOUT
The screen uses a fixed 240px carbon sidebar on the left, flanked by an expansive fluid content viewport. The content flows rhythmically: a daylight administrative hero featuring an asymmetrical right-hand media stack, followed by a tight row of modular category cards. The interface then abruptly transitions into a commanding full-bleed dark showcase grid, before returning to a luminous dual-column layout covering service lists, a 4-step process timeline, and a quote row.
PALETTE (use these exact hex values)
- #0e1017 — Sidebar Carbon: Permanent navigation drawer background framing the entire left viewport.
- #ffffff — Canvas Light: Dominant background for hero, service explorations, and process review sections.
- #111216 — Vault Obsidian: Full-width exhibition container anchoring the featured project showcase grid.
- #3b5bfd — Ultramarine Primary: Primary action buttons, active navigation indicators, and editorial emphasis text.
- #111827 — Text Primary Dark: High-contrast headings and body text within light canvas sections.
- #f9fafb — Text Primary Light: High-contrast titles and metrics displayed over obsidian exhibition surfaces.
- #6b7280 — Text Muted Light: Secondary labels, timestamps, and descriptive subtitles across light surfaces.
- #9ca3af — Text Muted Dark: Supporting descriptions and case study category badges on dark surfaces.
- #e5e7eb — Border Subtle: Hairline card outlines, horizontal dividers, and icon boundaries on light canvas.
- #232630 — Border Dark: Dividers and perimeter containment strokes within the dark project showcase.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Satoshi), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 44px display. Tracking -0.02em on headings, +0.06em on microcaps. The typographic tone is authoritative, Swiss-inspired, and distinctly architectural. Plus Jakarta Sans (or Inter) provides clean, clinical precision with wide apertures and disciplined geometric forms. It operates simultaneously as an enterprise software interface font and a luxury agency editorial headline system, effortlessly bridging utility and prestige.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1440px container, comfortable density.
DEPTH
Depth is created purely through hard tonal contrast and fine 1px borders rather than diffuse drop shadows. White and dark cards rely on perimeter strokes (#e5e7eb and #232630) to establish layer boundaries against base planes. Floating elements in the hero collage employ subtle, tight 8px-spread ambient blur to simulate physical paper stacks without feeling skeuomorphic.
IMAGERY
Imagery is high-end, tactile, and studio-lit, focusing on premium physical packaging (cosmetics, matcha tins, apparel tags) alongside clean UI screenshots and studio portraits. Visuals should always feature realistic lighting, clean matte textures, and minimal background clutter. Cartoon illustrations, saturated gradient mockups, or low-resolution lifestyle stock are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the abrupt 'light canvas to obsidian exhibition' jump paired with split-cell case study tiles (left cell: metadata + text, right cell: photorealistic product artifact). Without this dramatic sectional polarity, the interface would collapse into either a standard generic dashboard or a standard portfolio site.
MUST
- Reserve the vibrant ultramarine (#3b5bfd) exclusively for primary CTA buttons and key emphasis typography.
- Use stark 100% full-width contrast blocks to separate standard documentation from project showcases.
- Set all section category tags in uppercase tracking (+0.08em) at 11px or 12px sizes.
- Pair every case study brief directly with full-bleed product or packaging imagery.
AVOID
- Do not introduce intermediate grey midtones as canvas backgrounds; keep transitions sharp between white and obsidian.
- Do not apply heavy multi-layered drop shadows; keep elevation flat with 1px structural hairline borders.
- Do not use warm or saturated accent colors that compete with the single ultramarine highlight.
- Do not round card corners past 16px; this destroys the architectural, editorial character.
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 中尝试 
