Design a light-mode website section: deliberate clinical reassurance meets modern saas efficiency with muted brick accents and grounding carbon foundations.
LAYOUT
The viewport uses an asymmetric two-part upper grid: a large, dominant conversion card on the left occupying approximately 58% width, paired with two vertically stacked benefit cards on the right occupying 42%. Below this light section, the layout transitions to a full-width midnight footer containing an identity summary, four link columns, and an email capture form, finalized by a thin copyright strip.
PALETTE (use these exact hex values)
- #F4F5F7 — Canvas Ground: Background canvas behind upper feature cards and main CTA block
- #FFFFFF — Surface Pure: Upper card backgrounds providing high-contrast separation from ground
- #0F1419 — Footer Carbon: Deep structural base canvas for navigation, sitemap, and secondary capture
- #B83D38 — Terracotta Primary: Primary conversion buttons, logo glyph, text link accents, and newsletter triggers
- #121820 — Text Charcoal: Display headings and primary body copy on light cards
- #5B6471 — Text Slate: Secondary descriptors, feature captions, and micro-trust labels
- #8A94A4 — Footer Text Muted: Column links, disclaimers, and copyright text in footer
- #2563EB — Clinical Blue: Therapist feature icon container and isometric graphic styling
- #15803D — Growth Green: Metric badge and sparkline trend visualization
- #E5E7EB — Subtle Border: Hairline card perimeter borders and icon container outlines
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px display. Tracking -0.02em at display, 0.01em at uppercase. Plus Jakarta Sans delivers an immaculate, modern tone combining geometric clarity with subtle humanist warmth. Its neutral, engineered curves reinforce institutional trust and clinical credibility without feeling cold or bureaucratic. When substituting, Inter or General Sans preserves the strict optical hierarchy and neutral tone.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled through surface layering and hairline borders rather than obvious cast shadows. The white cards use a barely perceptible elevation (0 1px 3px rgba(0,0,0,0.04)) with a crisp 1px border. Graphic elements within cards feature soft layered isometric bevels to suggest tactile physical glass and stacked layers.
IMAGERY
Visual assets are restrained, clinical, and conceptual. Features use crisp isometric layered glass iconography (such as the stacked blue shield) and minimal chart sparklines with numeric tags (+8 hrs). Photographic imagery is avoided in favor of clean diagrams that signal privacy and systematic software integrity.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive terracotta-and-white card block resting above an uncompromising deep carbon footer. To use it correctly, confine the warm brick red strictly to primary calls to action, small badge indicators, and navigation accents, letting expansive white space and crisp hairline borders maintain clinical authority.
MUST
- Anchor high-conversion CTA cards in pure white against a light grey canvas background.
- Reserve the terracotta red (#B83D38) strictly for active conversions and direct brand identity.
- Use subtle 1px borders (#E5E7EB) instead of heavy dropped shadows on white cards.
- Maintain high tracking (0.08em) and uppercase styling on pre-headers and footer category titles.
AVOID
- Do not apply drop shadows with blur radiuses greater than 8px on content cards.
- Do not use saturated, bright crimson red; keep the red tone grounded and brick-tinted.
- Do not mix rounded card radiuses; stick uniformly to 20px for major structural containers.
- Do not use dark backgrounds on clinical content cards; reserve dark values for the footer.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
