Design a light-mode web interface screen: a warm editorial storefront merging tactile bookish typography with sun-drenched terracotta warmth and structured modular grids.
LAYOUT
The page reads as a classic lifestyle editorial catalog. The header contains wide-spaced navigational links surrounding a centered typographic wordmark. A grand hero split-screen pairs bold serif typographic hierarchy on the left with founder photography and vertical action tabs on the right, followed sequentially by a horizontal icon category ribbon, a 4-column product grid, an asymmetrical course showcase, and a streamlined newsletter strip.
PALETTE (use these exact hex values)
- #FAF7F2 — Cream Canvas: Full-width background for hero section and tinted modular card panels.
- #FFFFFF — Pure White: Primary surface for product cards, newsletter wrapper, and main content containers.
- #C35B43 — Terracotta Rust: Primary category pills, active states, eyebrow labels, and high-priority indicators.
- #1C1A19 — Charcoal Black: Primary typography, logos, solid action buttons, and dark UI borders.
- #6E6864 — Earthy Taupe: Secondary descriptive body copy, category subtitles, and inactive nav labels.
- #93A594 — Dusty Sage: Product mockup background for strategy and pitch resources.
- #829EAE — Muted Slate: Product mockup background for web design and digital identity resources.
- #F2EBE1 — Soft Sand: Secondary button fills, inactive hero category tabs, and card background tints.
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Bodoni MT, freight-big-pro), weights 400/600/700. Sizes 11px caption, 12px body-sm, 14px body, 18px subheading, 24px heading, 32px heading-lg, 56px display. Tracking -0.01em at display, normal at heading. The typographic personality is authoritative, personal, and literary. The Didone serif (matching Playfair Display or Bodoni) creates immediate editorial stature reminiscent of luxury print magazines. Montserrat or Century Gothic counters this with clear, modern utility in uppercase metadata, while an organic cursive signature adds an authentic human sign-off from the founder.
GEOMETRY & SPACING
Corner radii — cards 8px, links 0px, inputs 2px, buttons 2px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is deliberately restrained to maintain an editorial print feel. Most depth is created via flat surface layering (white cards resting on warm sand #FAF7F2 backgrounds) paired with delicate 1px border lines (#E8E2D9). Where shadows appear on resource cards, they are ultra-subtle ambient spreads (0 4px 20px rgba(0,0,0,0.04)) ensuring the page never looks like a generic SaaS utility.
IMAGERY
Photography features real human warmth with crisp studio lighting, natural styling, and an uncluttered cut-out portrait layered against an architectural sunburst arch. Product artwork avoids generic stock photos, instead featuring realistic tablet mockups framed inside pastel color swatches, overlaid with paper-emboss style circular badges.
SIGNATURE DETAIL — the thing that makes this design itself
The arch-backed founder hero paired with stacked pill category tabs on the right edge, seamlessly transitioning into pastel-backed digital mockups with scalloped circular seal badges. It instantly establishes a tactile, boutique bookstore feel rather than a software cart.
MUST
- Anchor digital tablet and worksheet mockups within solid pastel color-blocked backdrops.
- Pair classical high-contrast serif headlines with wide-tracked 11-12px uppercase sans-serif metadata.
- Use warm terracotta (#C35B43) sparingly as the primary catalyst for user conversion.
- Keep card corners subtly rounded at 6-8px while leaving input fields and CTAs sharp at 2px.
AVOID
- Never use pure cold grays or stark black-and-white monochromatic palettes.
- Do not render primary page headlines in sans-serif; it destroys the bespoke literary editorial tone.
- Avoid floating product mockups without their contextual colored backing shapes.
- Never apply high-elevation, blurry diffuse drop shadows to cards; rely on fine 1px borders and soft ambient tint.
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 中尝试 
