Design a light-mode web interface screen: an editorial personal brand balancing structured slate typography with warm terracotta arches and playful hand-annotated flourishes.
LAYOUT
The layout progresses with deliberate editorial rhythm down the page: a compact, centered brand navigation header yields to an asymmetric two-column hero section with headline copy on the left and an arched cutout composition on the right. Below, an alternating 2-column storytelling block inverts the visual weight (image left, text right), followed by a restrained monochrome press logo strip bounded by hairline rules. A solid Deep Slate banner creates an abrupt, dramatic conversion pause before terminating in a balanced four-card pathway grid.
PALETTE (use these exact hex values)
- #FAF6F1 — Canvas Cream: Primary background color across the entire page body and card containers
- #FFFFFF — Card Surface White: Background for lower navigation cards and text input fills
- #49657B — Deep Slate Blue: Primary hero CTA background and full-width quiz banner container fill
- #C87D67 — Dusty Terracotta: Secondary buttons, arch framing backdrop, decorative stars, and script accents
- #1E1E1E — Charcoal Ink: Primary headlines, display titles, and prominent navigation typography
- #4A4540 — Muted Body Bark: Narrative paragraph copy, descriptions, and secondary metadata
- #B5C4BD — Sage Mist: Background for floating circular stamp badge in second content section
- #F3E6DF — Pale Peach Pill: Background fill for eyebrow pill tags and icon circular backdrops
TYPOGRAPHY
Typeface Playfair Display (or DM Serif Display, Cormorant Garamond, Ogg), weights 400/600/700. Sizes 11px caption, 13px body-sm, 16px body, 24px subheading, 36px heading, 54px display. Tracking -0.02em at display, -0.01em at headings. The typography evokes an upscale, witty women's magazine through the pairing of high-contrast modern serif headlines and clean geometric sans navigation. The addition of a loose, hand-drawn script injects an intimate, conversational voice ('sizzling slice of pizza', 'welcome!') that prevents the high-fashion serif from feeling aloof. For open-source implementation, Playfair Display and Jost provide an exact structural match.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 0px, buttons 2px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1200px container, airy density.
DEPTH
Depth is communicated strictly through planar layering rather than Gaussian drop shadows. Cutout photography physically layers over architectural colored arches and under circular stamp badges to simulate physical magazine paper collage. Cards sit flat against the base ivory canvas with hairline border boundaries (#EFE8E0) or subtle tone-on-tone surface shifts.
IMAGERY
Photography features crisp, warm-lit studio portraiture with subjects making direct, engaging eye contact while holding props (e.g., podcast microphone, headphones). Figures are silhouetted and layered partially outside geometric backdrops (like terracotta arches and rounded-rect photo cards). Stock imagery or moody desaturated shots would severely conflict with this warm, charismatic brand voice.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of an architectural terracotta arch framing an overlapping cutout portrait, accented by floating four-point stars and a circular text stamp badge. This creates an instantly recognizable 'modern editorial collage' aesthetic. Misuse occurs when the portrait is trapped inside a standard rectangular box or when the star and badge accents are clustered so densely that they clutter readability.
MUST
- Anchor high-conversion primary interactions in Deep Slate Blue (#49657B) to maintain contrast against cream.
- Pair formal serif headlines with casual cursive script highlights for approachable editorial warmth.
- Use 4-point decorative star glyphs and dot-matrix patterns sparingly as atmospheric punctuation.
- Maintain crisp 2px corners on primary buttons while using rounded geometry (16px, pills, arches) for cards and frames.
AVOID
- Do not use pure black (#000000); always favor Charcoal Ink (#1E1E1E) for natural printed warmth.
- Never use generic drop shadows; rely entirely on tint shifts, flat fills, and hairline borders for separation.
- Do not replace the architectural curved arch with standard sharp rectangular image masks.
- Avoid pill-shaped or heavily rounded primary buttons; buttons must stay strictly rectangular with 2px radius.
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 中尝试 
