Design a light-mode web interface screen: sunlit executive coaching framed with refined terracotta accents and high-trust editorial whitespace.
LAYOUT
The page follows an asymmetric hero grid (left-aligned 55% headline copy, right-aligned 45% natural portrait). Directly below floats an enclosed four-metric horizontal ribbon. The next section reverses the balance with bio text on the left paired with a large vertical portrait on the right, punctuated by an offset floating quote. The layout terminates in a balanced three-column service grid.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Warm White: Primary page background across hero, body sections, and cards
- #F9F8F6 — Warm Cream Tint: Top announcement banner and subtle background variations
- #F6ECE6 — Terracotta Pill Tint: Background for category eyebrow pills and subtle badge highlights
- #BF8266 — Terracotta Rose: Monoline icon strokes, quote marks, eyebrow text, and monogram branding
- #1B65F2 — Electric Cobalt: High-visibility primary action buttons and focused links
- #1A1A1A — Charcoal Black: Primary headings, dominant titles, and core body emphasis
- #5A5C60 — Muted Slate: Subheadings, descriptive paragraphs, and metadata labels
- #EAE5E0 — Neutral Border Gray: Borders enclosing the metrics box, divider lines, and card containers
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, DM Sans, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 34px heading, 48px display. Tracking -0.03em display, 0.05em eyebrow. The geometric sans-serif typeface combines contemporary corporate legibility with friendly, humanist openness through rounded geometry. It conveys executive competence without feeling cold or bureaucratic. When reproducing without Plus Jakarta Sans, Outfit or DM Sans provide the necessary tall x-height and circular rhythm.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 8px, buttons 999px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1200px container, airy density.
DEPTH
Depth is created almost entirely without drop shadows, using 1px borders in #EAE5E0 against pure white to define boundaries. The sole exception is the floating testimonial card overlaying the hero portrait, which utilizes a soft, wide-spread blur (0 14px 36px rgba(30, 20, 10, 0.08)) to cleanly lift off the imagery.
IMAGERY
Photography is editorial, natural-light lifestyle imagery depicting real, authentic working moments. Shots emphasize warm wood desks, neutral interiors, soft linen apparel, and open, smiling expressions. Hard flash, high-contrast studio neon, or generic stock graphics are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of terracotta icon badges (#F6ECE6 pill with #BF8266 strokes) alongside high-voltage cobalt blue pill CTAs (#1B65F2). This tension between earthy warmth and razor-sharp tech utility gives the personal brand both emotional warmth and serious executive weight.
MUST
- Use pill (999px) border-radii exclusively for all buttons and category eyebrows.
- Reserve the vivid cobalt blue (#1B65F2) strictly for primary conversion actions.
- Frame statistics in clean, divided grid cells with fine 1px borders (#EAE5E0).
- Keep photography naturally lit, warm-toned, and editorial without heavy filters.
AVOID
- Never apply the cobalt blue to text paragraphs, backgrounds, or decorative strokes.
- Do not use sharp, 0px square corners on interactive elements or cards.
- Never saturate the background with heavy colors; keep the canvas predominantly white.
- Avoid heavy drop shadows; rely instead on 1px borders (#EAE5E0) for container separation.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1968:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
