Design a light-mode web interface screen: an editorial workbench balancing dark administrative utility with warm ceramic clarity.
LAYOUT
The frame uses an asymmetric master-detail grid: a fixed-width 220px dark navigation sidebar on the left, transitioning into a multi-row content column. The main workspace starts with breadcrumb and user utilities, followed by a wide-margin editorial header with geometric art, a three-step feature checklist, a balanced 3-column choice card array, and ends on a unified completion bar.
PALETTE (use these exact hex values)
- #141518 — Sidebar Obsidian: Deep grounding black for persistent global navigation and pro callout backdrop
- #fcfaf7 — Canvas Porcelain: Warm off-white background mitigating glare across all main dashboard workflows
- #ffffff — Card Pure White: Crisp foreground layer for decision cards and bottom utility actions
- #be5d4a — Terracotta Rust: Primary actionable CTA, option two highlight, and active sidebar item tint
- #e9a263 — Amber Ochre: First choice option accent, badge backgrounds, and warm illustration accents
- #5e9c8b — Eucalyptus Sage: Third choice option accent and final milestone indicators
- #1a1917 — Charcoal Ink: Primary typography for headers, card titles, and high-priority reads
- #6b6762 — Muted Truffle: Secondary instructions, breadcrumbs, descriptions, and passive icon strokes
- #ebe6df — Warm Hairline: Hairline dividers within cards and structural horizontal separation rules
TYPOGRAPHY
Typeface Canela (or Playfair Display, Fraunces, DM Serif Display), weights 400/500. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 36px display. Tracking -0.015em. The typography creates an intellectual, bespoke atmosphere reminiscent of luxury architecture monographs and high-end curation tools. The headline serif feels authoritative and refined, while the neutral sans-serif ensures maximum legibility across dense option descriptions and utility tags. Free alternatives include Fraunces or Playfair Display paired with Inter.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1120px container, comfortable density.
DEPTH
Depth is achieved through flat layering and slight tone shifts rather than prominent cast shadows. The ivory canvas sits forward from the dark sidebar, and pure white cards hover above the canvas supported by delicate 1px warm borders (#ebe6df) and extremely diffused ambient drop-shadows (0 4px 20px rgba(0,0,0,0.03)).
IMAGERY
Visual elements feature geometric abstract constructivism composed of muted circles, semicircles, and dotted grids in terracotta and bone. In-card iconography utilizes fine, monoline vector illustrations rendered inside 64px colored discs. Photographic realism or hyper-detailed 3D assets are completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The floating circular icon crests: 64px chromatic discs (amber, terracotta, sage) centered and offset symmetrically across the top perimeter of crisp white 16px-radius decision cards. Misusing this pattern by fully enclosing the discs inside the card or altering their vertical offset breaks the distinctive atelier silhouette.
MUST
- Anchor the layout with a high-contrast dark sidebar (#141518) juxtaposed with ivory (#fcfaf7).
- Use distinct, low-saturation earth tones (amber, terracotta, sage) to identify card sequences.
- Pair high-contrast display serif typography for titles with utilitarian sans-serif for body.
- Overlap circular icon badges across the top border of comparison cards by exactly 32px.
AVOID
- Do not introduce pure cold grays or stark black (#000000) into the canvas area.
- Do not use heavy box-shadows; let 1px borders and soft tinted fills delineate depth.
- Do not use sans-serif for the main display headline 'Rectangular Choice Template'.
- Do not center-align the main heading or the bottom confirmation tray text.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3616:2272. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
