Design a light-mode web interface screen: sun-drenched creator commerce wrapped in editorial serif warmth and warm ceramic earth tones.
LAYOUT
The page follows a structured vertical cadence centered inside a 1200px container with 96px gaps. It opens with an asymmetrical 60/40 hero block where the left typography stack balances a high-impact cut-out portrait on the right. Below, a full-width 4-item horizontal feature bar provides a clean pause. The page then expands into a symmetrical two-column card showcase, followed by an asymmetrical multi-layered proof block, finally terminating in a grounded, full-width dark slate callout bar.
PALETTE (use these exact hex values)
- #FDFBF7 — Canvas Cream: Global background color across the page conveying warmth and luxury.
- #FFFFFF — Surface White: Card containers, floating stat pills, and input background surfaces.
- #1E2A38 — Deep Slate: Bottom newsletter banner surface providing heavy visual foundation.
- #BF5B3E — Terracotta Clay: Primary CTA buttons, hero backdrop graphic, and italicized headline emphasis.
- #1F2024 — Charcoal Black: Main headlines, hero display titles, and strong typographic callouts.
- #736C66 — Earthy Taupe: Body copy, subheaders, feature descriptions, and passive link text.
- #5C7C93 — Muted Slate: Secondary category badges, icon backgrounds, and secondary submit actions.
- #4E775F — Sage Green: Checklist icon circles and positive trendline indicators.
- #EDE8DF — Warm Border: Subtle card outlines, divider lines, and button perimeter strokes.
TYPOGRAPHY
Typeface Playfair Display (or Canela, Ogg, Cormorant Garamond), weights 400/600. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 24px heading, 36px heading-lg, 60px display. Tracking -0.02em. The typography balances heritage luxury with contemporary clarity. Playfair Display delivers high-fashion editorial confidence with its sculpted stroke contrast and sweeping italic terminals, ideal for creator monetization and aesthetic authority. Plus Jakarta Sans supplies neutral, hyper-legible operational grounding for user interfaces, buttons, and metrics. For open-source web deployment, pairing Playfair Display with Plus Jakarta Sans reproduces this exact editorial aesthetic without commercial licensing.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Elevation is intentionally restrained to mimic printed luxury editorial stationery. Instead of diffuse multi-layered drop shadows, depth is achieved through delicate 1px borders (#EDE8DF) and high-contrast surface transitions between cream, pure white, and deep slate. When floating widgets appear over photos, they utilize a gossamer-soft shadow: 0 10px 25px -5px rgba(31, 32, 36, 0.08).
IMAGERY
Photography is warm-toned, sun-drenched, and aspirational, highlighting lifestyle creators, natural beach light, terracotta architectural interiors, and cozy workspaces. Images are either contained in 16px rounded rectangular cards or integrated as transparent cut-out portraits that overlap warm solid architectural arch shapes. High-tech 3D renders, stock illustrations, and cold blue corporate photos are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The signature visual motif is the 'Terracotta Editorial Accent': a large serif headline where the second clause is broken into a flowing, warm terracotta italic phrase ('At scale.', 'powerful', 'brand-together'), paired directly with an organic arch background behind photography. Misusing this by italicizing entire paragraphs or changing the terracotta to a saturated orange completely strips the design of its high-end creator aura.
MUST
- Always set the primary canvas to warm cream #FDFBF7 rather than plain pure white.
- Use Playfair Display italic in warm terracotta #BF5B3E for key emotionally resonant headline words.
- Maintain generous 96px vertical spacing between distinct content sections.
- Keep card corners consistently set to 16px radius with subtle 1px #EDE8DF borders.
AVOID
- Do not use harsh #000000 black; rely on warm charcoal #1F2024 for all primary typography.
- Never apply high-contrast drop shadows; rely on crisp 1px borders and soft 4-8% opacity blurs.
- Avoid using cold blues or neon colors; strictly adhere to earthy terracotta, sage, and slate.
- Do not italicize entire headlines—only italicize select emphasis words (1-2 words maximum).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2064:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
