Design a light-mode web interface screen: serene high-fashion editorial web canvas framed by a clinical, ultra-restrained saas builder chrome.
LAYOUT
The workspace uses a split-screen layout with a fixed 240px utility sidebar on the left and a continuous document editor on the right. The top bar is anchored by breadcrumbs, viewport switchers (desktop/tablet/mobile), and primary publish triggers. The document canvas flows vertically through a hero header, newsletter bar, asymmetric story section, 3-column feature grid, and 4-column product carousel.
PALETTE (use these exact hex values)
- #F8F8F9 — Canvas Background: Outer workspace canvas and subtle section backgrounds
- #FFFFFF — Panel Surface: Sidebar, header, cards, and canvas content background
- #EAEBED — Border Subtle: Hairline 1px dividers, card strokes, and input borders
- #2463EB — Brand Blue: Primary application action buttons, active navigation tints, and feature icons
- #C28274 — Editorial Terracotta: Uppercase tracked category subheadings inside the canvas template
- #111827 — Text Primary: Headlines, navigation links, and primary content copy
- #6B7280 — Text Muted: Secondary copy, descriptive labels, and inactive icon tints
- #22C55E — Live Green: Status indicator dot for live publication status
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Bodoni MT, EB Garamond), weights 400/500. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 32px heading-lg, 44px display. Tracking -0.01em at display, 0 at headline. The typography pairs the architectural, fashion-forward sensibility of Playfair Display with the pristine digital utility of Inter. Playfair provides elegance, authority, and warmth to the lifestyle brand template, while Inter keeps the SaaS tool completely neutral and frictionless. Substituting with Cormorant Garamond and Roboto would retain a similar dynamic.
GEOMETRY & SPACING
Corner radii — cards 6px, links 0px, inputs 4px, buttons 6px. Spacing on a 8px unit, 24px gaps, 72px between sections, 1040px container, comfortable density.
DEPTH
Elevation is intentionally flat across both the app and the canvas. Depth is achieved via crisp 1px hairline borders (#EAEBED) and flat surface contrast rather than diffused box-shadows. The floating canvas effect is suggested solely by the soft contrast between the base neutral frame and the white artboard.
IMAGERY
Photography relies on high-end editorial and lifestyle imagery featuring botanical elements (eucalyptus, protea flowers), neutral textiles (linen throws), and curated workspace objects. Images are softly lit with organic textures, muted earth tones, and no high-vibrancy filters. Incongruous tech graphics or 3D renders would severely break the bespoke aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-aesthetic contrast: the juxtaposition of hyper-modern SaaS chrome (system icons, royal blue badges, rounded buttons) framing a classical, quiet luxury editorial magazine layout (serif headlines, terracotta letterspaced captions, and zero-radius buttons). Commonly misused by bleeding the electric blue into the editorial canvas, which ruins the bespoke atmosphere.
MUST
- Strictly maintain the separation between the software chrome (rounded, utility-focused) and the preview site (sharp, editorial).
- Use warm terracotta (#C28274) exclusively for uppercase category eyebrow labels.
- Keep editorial headlines in high-contrast Playfair Display with tight tracking (-0.01em to -0.02em).
- Retain ample whitespace (at least 64px) between distinct editorial content bands in the document.
AVOID
- Do not apply royal blue (#2463EB) to large headline texts or major editorial elements inside the website canvas.
- Do not round the corners of editorial action buttons; keep them razor-sharp (0px radius).
- Never use saturated or neon tones for editorial content imagery; keep photography desaturated and tactile.
- Do not mix serif fonts into the builder chrome; keep all application UI strictly sans-serif Inter.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2336:3520. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
