Design a light-mode web interface screen: an editorial luxury workspace pairing warm filmic aesthetics with crisp digital utility.
LAYOUT
The page is anchored by a permanent 220px dark navigation sidebar on the left and a continuous light workspace. The main view opens with a split hero: left-aligned editorial typography and action buttons alongside layered imagery on the right. Directly below lies a wide, full-bleed dark feature block holding analytical cards, followed by a flexible multi-column editorial grid for resources.
PALETTE (use these exact hex values)
- #131c26 — Sidebar Obsidian: Deep blue-black surface anchoring the persistent left-hand navigation bar and system identity.
- #fcfcfd — Canvas Off-White: Primary workspace background creating an open, expansive editorial canvas.
- #17202a — Surface Dark: Background for featured promo cards, marketing blocks, and embedded analytical modules.
- #f7f2ed — Parchment Warm: Underlay cards and organic backdrop accents behind featured hero photography.
- #2c62eb — Electric Cobalt: Primary CTAs, active states, key icons, and high-priority action triggers.
- #111827 — Ink Charcoal: Primary editorial headings, section titles, and high-emphasis data points.
- #6b7280 — Slate Muted: Body copy, supporting captions, input placeholders, and inactive navigational labels.
- #bef264 — Growth Chartreuse: Positive metrics indicators, progress fills, and status pips inside dark cards.
TYPOGRAPHY
Typeface Canela (or Playfair Display, Ogg, IvyMode), weights 400/500. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 52px display. Tracking -0.02em at display, -0.01em at headings. The voice is confident, cultured, and romantic yet professionally grounded. The high-contrast serif evokes traditional print publishing and independent monographs, while the neutral sans-serif communicates digital capability and precision. If Canela or Ogg is unavailable, Playfair Display paired with Plus Jakarta Sans offers an accessible commercial equivalent.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created primarily through flat graphic layering rather than heavy drop shadows. High-radius surfaces overlap one another—such as floating white badges hovering over photographs with delicate 0 8px 24px rgba(0,0,0,0.06) shadows. Background colored panels (#f7f2ed) provide structural depth underneath hero photography without any blur.
IMAGERY
Imagery follows high-end lifestyle, architecture, ceramics, and warm portraiture shot on natural 35mm film tones. Colors in imagery lean toward terracotta, warm linen, soft sunlight, and muted botanicals. Hyper-vibrant 3D renders or generic corporate stock photos are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The layered editorial hero cluster: a warm parchment backing plate offset behind a rounded lifestyle photograph, crowned with a floating white template badge and an italicized serif title. It transforms a standard software dashboard into an art director's moodboard.
MUST
- Pair roman and italic serif weights within the same headline lockup for emotional cadence.
- Use warm, human, film-grade photography with natural light to counter digital stiffness.
- Maintain high contrast by confining dark slate surfaces (#17202a) to discrete feature cards.
- Apply 8px border radii consistently to buttons, inputs, and minor UI badges.
AVOID
- Never use serif fonts for body copy, micro-labels, metrics, or table data.
- Avoid cold, corporate blue gradients; keep the palette anchored in film warmth and cobalt.
- Do not drop shadows indiscriminately; use crisp borders or flat overlapping surface planes.
- Never shrink display serif headings below 28px where editorial grace is lost.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1536:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
