Design a light-mode web interface screen: quiet studio sunlight filtered through linen, warm paper surfaces, and deliberate serif storytelling.
LAYOUT
The interface is anchored by a persistent 240px left-hand sidebar containing studio brandmark and navigation items, accompanied by a small bottom streak widget. The right canvas features a sticky lightweight top search and profile bar above the content pane. Main content flows sequentially from an overarching editorial hero banner, directly into a three-column course carousel, across a metrics row, and terminates into an earthy sage promotional module.
PALETTE (use these exact hex values)
- #F7F6F2 — Canvas Warm Cream: main page background creating an inviting, tactile studio paper tone
- #FFFFFF — Card Pure Linen: course cards, floating modules, and clean elevated content panels
- #ECEAE3 — Border Sand: structural divider lines, sidebar separation, and card stroke borders
- #1D63ED — Cobalt Ink: primary interactive buttons, active progress indicator fills, and focused links
- #8A8F7C — Muted Sage Khaki: coaching callout banner surface delivering warm organic contrast
- #EFECE6 — Soft Warm Beige: active sidebar nav pills, metric backings, and progress track gutters
- #1E1E1E — Deep Charcoal: headings, display serif titles, and high-emphasis reading copy
- #6C6B66 — Weathered Umber: subheadings, metadata labels, icon strokes, and supporting body copy
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Newsreader, Libre Baskerville), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 22px heading, 28px heading-lg, 42px display. Tracking -0.015em at display, 0 at heading. The typography balances refined editorial authority with quiet contemporary craft. Playfair Display delivers literary, coffee-table book elegance, made personal by italicized cursive connectors. Pairings with Inter provide clean, legible utility for all UI microcopy and dashboards. Newsreader or Libre Baskerville can substitute seamlessly for the display tier without losing character.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 24px, buttons 8px. Spacing on a 4px unit, 24px gaps, 48px between sections, 1440px container, comfortable density.
DEPTH
Depth is created almost entirely through tone shift and paper layering rather than drop shadows. Cards are pure white (#FFFFFF) placed against the warm cream (#F7F6F2) canvas with a light 1px border (#ECEAE3). Where shadows appear, they are diffuse, low-opacity ambient glows (0 4px 20px rgba(0,0,0,0.03)).
IMAGERY
Photography embraces warm, natural studio daylight, quiet domestic interior scenes, ceramic vessels, linen textures, and thoughtful portraiture. Tone is contemplative, organic, and artisanal. Highly saturated corporate stock imagery or dark, techy photography would immediately break the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-editorial, italic-accented serif hero headline paired with an architectural arched image frame against a tranquil olive-sage canvas (#8A8F7C). This elevates what could be a sterile learning management tool into a high-end atelier magazine spread. Misusing it means flattening the imagery into generic 16:9 boxes or replacing the warm olive tone with standard corporate slate.
MUST
- Pair upright serif display headings with elegant italic secondary clauses in editorial headers.
- Use electric cobalt blue (#1D63ED) strictly for direct interactive primary triggers and active progress.
- Keep overall surface backgrounds warm cream (#F7F6F2) rather than stark digital white (#FFFFFF).
- Enclose imagery in architectural arched masks or large 12-16px softened corners.
AVOID
- Never use pure black (#000000); use deep charcoal (#1E1E1E) for high contrast text.
- Do not introduce sharp 0px corners; maintain gentle 8px to 20px curvature throughout.
- Never saturate entire containers with cobalt blue; reserve it purely for buttons and indicators.
- Avoid harsh black drop shadows; rely on soft tone shifts and faint 1px hairline outlines.
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 中尝试 
