Prosper Health Design System

Overview

Prosper Health presents a deliberately warm, affirming digital environment designed for autistic adults seeking diagnosis and therapy services. The visual language balances clinical credibility with emotional accessibility — a tension resolved through a cream-warmed canvas ({colors.surface-soft}), deep forest-green brand voltage ({colors.primary}), and a dual-typeface system where serif headlines (Libre Caslon Text) signal editorial trustworthiness while sans-serif UI copy (Figtree) maintains approachable clarity. The dominant mood is calm reassurance: nothing sharp, nothing cold, nothing hurried.

Brand voltage concentrates strategically on conversion-critical surfaces — the {component.button-primary} family uses a lifted teal variant ({colors.primary-bright}, #1c7867) that feels more actionable than the deeper forest green used for structural text and navigation links. This creates a clear visual hierarchy: dark green reads, bright green acts. The hero section deploys this voltage on both the compact nav CTA ({component.button-primary-nav}) and the prominent coverage-checker submit button ({component.button-primary-hero}), establishing a consistent call-to-action grammar before the user scrolls past the fold.

The single typography move defining this system is its refusal of bold weights. Every role — from {typography.display-lg} headlines at 32px down to {typography.body-sm} captions — sits at font-weight: 400. Hierarchy emerges purely through size differential (48px → 36px → 32px → 24px → 17.92px → 14.24px) and the serif/sans binary, not through weight contrast. This restraint communicates gentleness, a core brand value for neurodivergent-sensitive design.

Shape language leans consistently soft. The {rounded.lg} (16px) radius governs the hero form card ({component.form-card}) and all photographic containers, eliminating any sense of institutional rigidity. Even buttons stop at {rounded.sm} (8px) rather than going fully pill-shaped, preserving a grounded, professional silhouette. The only truly circular element is the avatar treatment ({rounded.full}), used sparingly for human imagery where organic geometry reinforces the people-first messaging.

The system contains one notable sub-system dialect: the hero coverage-checker form operates as a self-contained interaction module with its own internal spacing rhythm ({spacing.md} between fields), custom select styling that inverts the typical underline convention (colored text on transparent field), and a hard-shadow button treatment ({extensions.shadows.button-hard}) that gives the CTA tactile presence against the soft-shadowed card container. This form dialect does not propagate to other sections; it's a signature moment specific to the primary conversion path.

Key Characteristics:

• Cream-warm hero band ({colors.surface-soft} — #f7f0e6) differentiates the above-fold experience from the stark white ({colors.canvas}) navigation and footer zones
• Forest-green primary ({colors.primary} — #124e43) serves as both brand identity and primary text color for links, labels, and emphasized UI copy
• Bright-teal CTA buttons ({component.button-primary} using {colors.primary-bright} — #1c7867) provide the sole high-saturation voltage point in the system
• Serif headline typeface ({typography.display-lg}, {typography.title-md}) restricted exclusively to H1/H2 roles; all other text uses Figtree
• Universal font-weight: 400 across every typographic role — no bold, no semibold, no light
• Generous vertical rhythm anchored by {spacing.hero} (96px) section padding and {spacing.xxl} (24px) internal component gaps
• Soft shadow stack ({extensions.shadows.md}) on elevated containers; hard offset shadow ({extensions.shadows.button-hard}) reserved for primary CTAs only
• Photo collage layout with staggered card sizes and {rounded.lg} corners creating organic grid feel

Colors

Brand & Accent

• Primary ({colors.primary} — #124e43): Deep forest green serving as the brand's foundational identity color. Used for logo mark, navigation links on hover, form labels, link text, and structural emphasis throughout body copy.
• Primary Bright ({colors.primary-bright} — #1c7867): Lifted teal-green variant deployed exclusively on interactive conversion elements — the {component.button-primary} family, active form field text, star ratings in trust signals, and icon accents within form inputs. Approximately 40% lighter in value than Primary while retaining the same hue family.
• Primary Hover ({colors.primary-hover} — #0f423a): Darkened state for primary buttons on press/hover. Subtly deeper than base Primary, providing tactile feedback without jarring value shifts.
• Accent ({colors.accent} — #ca9673): Warm tan/terracotta appearing sparingly in the design language, likely used for secondary decorative elements or illustration accents not visible in the current viewport. Functions as the warmth counterpart to the cool greens.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline for navigation bar, form card interior, and presumed footer/background zones. The default "nothing here" surface that carries no temperature bias.
• Surface Soft ({colors.surface-soft} — #f7f0e6): Warm cream-beige defining the hero band background. This is the most distinctive surface token — it bathes the entire above-fold experience in a golden-hour glow that distinguishes Prosper Health from clinical-white healthcare competitors. Approximately 3-4% warm saturation over neutral gray.
• Surface Warm ({colors.surface-warm} — #fffaf5): Even subtler cream variant, nearly white but with detectable warmth. Likely used for alternating section bands below the hero or card hover states.
• Surface Input ({colors.surface-input} — transparent): Form fields render with transparent backgrounds, allowing the parent {component.form-card}'s white surface to show through. Border-bottom or underline treatment (not captured in solid-background tokens) provides the visible field boundary.

Text / Ink

• Ink ({colors.ink} — #475467): Slate blue-gray serving as the workhorse body text color for paragraphs, descriptions, and secondary UI copy. Cool enough to recede behind headlines but saturated enough for comfortable reading at small sizes.
• Body ({colors.body} — #124e43): Matches Primary exactly — the intentional choice to brand-ify body text in key locations (navigation labels, form field values, emphasized statements). Creates visual cohesion when users scan green-to-green.
• Heading Dark ({colors.heading-dark} — #2e2e2e): Near-black charcoal for {typography.display-lg} and {typography.title-md} headline text. Provides maximum contrast against light surfaces without the harshness of true #000000.
• Heading Strong ({colors.heading-strong} — #222222): Slightly softer than Heading Dark, used for navigation link text and UI elements requiring strong-but-not-maximal weight.
• Muted ({colors.muted} — #66667084): Faded gray-blue (note: includes alpha channel in source, normalized here as conceptual token) for truly secondary information — helper text, timestamps, legal disclaimers.
• Muted Medium ({colors.muted-medium} — #474747): Mid-tone gray for the hero subtext ("No waitlists. Most pay less than $80.") and other supporting copy that shouldn't compete with headlines but remains clearly legible.
• Near Black ({colors.near-black} — #101828): Deepest available text color, likely reserved for edge cases requiring maximum density (small print, table headers).
• Off White ({colors.off-white} — #eaecef): Very light gray, used where white text must appear on extremely subtle backgrounds or as disabled-state placeholder approximation.
• On Primary ({colors.on-primary} — #ffffff): Pure white for all text rendered atop {colors.primary} or {colors.primary-bright} backgrounds — button labels, inverted badge text, etc.
• On Dark ({colors.on-dark} — #ffffff): White text for overlays on photography or dark decorative surfaces.

Hairlines & Borders

• Hairline ({colors.hairline} — #eaecef): Extremely light gray for subtle dividers, card inner borders, and input underlines. Nearly invisible against white, functional against cream.
• Border Default ({colors.border-default} — #d9d9d9): Standard medium-light gray for more pronounced boundaries — focus rings, card outer edges, container borders requiring clear visibility.

Semantic

• Success ({colors.success} — #1c7867): Maps to Primary Bright, reinforcing positive outcomes — Trustpilot stars, confirmation states, completed-step indicators.
• Error ({colors.error} — #c13515): Warm red for validation failures, alert banners, and error messaging. Not visible in current viewport but included for system completeness.

Typography

Font Family

Prosper Health employs a two-face typestack optimized for the tension between medical authority and personal warmth:

Libre Caslon Text, Georgia, serif — Reserved exclusively for display and title roles. This transitional serif carries connotations of established publishing, academic rigor, and editorial care. It appears in the hero headline ("Diagnosis and therapy for autistic adults") at {typography.display-lg} (32px) and would appear in subsequent section titles at {typography.title-md} (36px). The font is loaded via Google Fonts CDN with weights 300–700 available, though the system constrains itself to weight 400 only. Fallback to Georgia ensures graceful degradation if web fonts fail.

Figtree WOFF2, Arial, sans-serif — The workhorse face for everything else: navigation, body copy, form labels, buttons, captions, and all UI microcopy. Figtree is a geometric humanist sans-serif with slightly softened terminals and open apertures, chosen for excellent readability across screen sizes and a friendly, contemporary personality that avoids both corporate sterility and casual informality. Loaded as WOFF2 from Prosper Health's own CDN (cdn.prod.website-files.com) in three weights (400, 500, 600), though again the design system uses only weight 400. Fallback to Arial ensures system-font availability.

webflow-icons — Icon font loaded for UI iconography (dropdown carets, hamburger menu). Minimal footprint, used only for interface chrome.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 400 | 1.3 | 0 | Large promotional headlines (not visible in current viewport, inferred for campaign pages) | | {typography.title-md} | 36px | 400 | 1.3 | 0 | Section titles (H2-level) — larger than hero headline due to context | | {typography.display-lg} | 32px | 400 | 1.3 | 0 | Hero headline (H1) — "Diagnosis and therapy for autistic adults" | | {typography.heading-sm} | 24px | 400 | 1.3 | 0 | Subsection headings (H3), feature titles | | {typography.body-lg} | 17.92px | 400 | 1.4 | 0 | Form input text, lead paragraphs, emphasized body copy | | {typography.body-md} | 14.24px | 400 | 1.4 | 0 | Standard body text, card copy, descriptions | | {typography.body-sm} | 13px | 400 | 1.4 | 0 | Captions, metadata, fine print | | {typography.button} | 18px | 400 | 1.25 | 0 | Primary button labels, large CTAs | | {typography.button-small} | 14px | 400 | 1.25 | 0 | Nav bar CTA, compact buttons | | {typography.nav-link} | 18px | 400 | 1.4 | 0 | Navigation menu items | | {typography.label} | 14.24px | 400 | 1.4 | 0 | Form field labels, input placeholders |

Principles

The typography system's governing philosophy is hierarchy through scale alone. By locking every role to font-weight: 400, Prosper Health rejects the industry-standard practice of using weight jumps (400→600→700) to create emphasis. Instead, a carefully calibrated size spectrum (48px→36px→32px→24px→17.92px→14.24px→13px) carries all informational ranking, supplemented by the serif/sans binary that semantically separates "editorial voice" from "interface voice." This decision likely stems from brand strategy: bold weights read as aggressive or urgent to some neurodivergent users, while uniform weight feels calmer and more predictable.

Line heights are uniformly generous — 1.3 for display roles (allowing serif descenders breathing room) and 1.4 for text roles (exceeding WCAG recommendations for dyslexia-friendly spacing). Letter spacing remains at normal (0) everywhere, avoiding the artificial expansion that can harm readability for some readers. The absence of text-transform: uppercase across all tokens further supports accessible, sentence-case communication.

Color plays a secondary hierarchical role: {colors.heading-dark} (#2e2e2e) for headlines vs. {colors.ink} (#475467) for body text creates approximately a 30% value difference even at identical sizes. When form labels render in {colors.body} (matching Primary green), they achieve emphasis through hue contrast rather than weight or size deviation from surrounding text.

Note on Font Substitutes

Libre Caslon Text is available via Google Fonts (weights 300–700). For implementations without Google Fonts access, substitute with Georgia or Times New Roman, accepting slight metric differences. Define CSS variable --font-display: 'Libre Caslon Text', Georgia, serif;.

Figtree is available via Google Fonts (weights 300–600). If unavailable, substitute with Inter (closest geometric-humanist match) or system-ui. Define CSS variable --font-body: 'Figtree', 'Inter', system-ui, sans-serif;. Note that Figtree's 14.24px body size is intentionally non-standard (slightly smaller than the 16px browser default); maintain this exact value during substitution to preserve the system's spatial economy.

Layout

Spacing System

• Base unit: 4px (inferred from token distribution clustering at multiples of 4).
• Tokens: {spacing.xxs} (3px — micro-adjustments, icon offsets), {spacing.xs} (8px — tight internal gaps, icon-to-text), {spacing.sm} (10px — button padding vertical, input padding tweaks), {spacing.md} (12px — form field separation, list item gaps), {spacing.lg} (16px — standard component internal padding), {spacing.xl} (20px — comfortable component margins), {spacing.xxl} (24px — major element separation, card padding), {spacing.section-xl} (32px — subsection breaks), {spacing.section-xxl} (64px — section-to-section vertical rhythm), {spacing.hero} (96px — hero band top/bottom padding).
• Section padding (vertical): {spacing.hero} (96px) — used on the hero band ({component.hero-band}) creating substantial breathing room around the headline-form-photo composition.
• Card internal padding: {spacing.xxl} (24px) — the {component.form-card} uses this generously padded interior to prevent cramped-feeling form interactions.
• Gutters: Inferred 24px ({spacing.xxl}) horizontal gutter between the left form column and right photo collage column within the hero's constrained max-width container.

Grid & Container

• Max content width: 1440px (explicitly set on <main> and <section> elements per extracted container data). Content centers within viewport beyond this width.
• Editorial density: low-to-moderate — the hero presents two columns (form + imagery) with significant white space, suggesting a magazine-like rather than dashboard-like information density.
• Desktop grid behavior: The hero uses an implicit two-column layout (~45% form, ~55% imagery) within the 1440px constraint. Navigation spans full-width with content constrained to ~636px for the menu area (per nav container data).
• Hero column split: Left column holds the {component.form-card} (width estimated 420–480px); right column holds the staggered photo collage (5+ images in masonry-style arrangement).

Whitespace Philosophy

Prosper Health practices generous, intentional emptiness. The 96px hero vertical padding ({spacing.hero}) and 24px card internal padding ({spacing.xxl}) exceed SaaS-platform norms, signaling that this is not a tool to be power-used but a service to be contemplated. Whitespace functions as emotional pacing — room to breathe between the diagnostic promise and the coverage-checking action. The cream surface amplifies this effect: warm negative space feels inviting rather than barren.

Header Architecture

|--------------------------------------------------------------------------------|
| [Logo]   Diagnosis   Therapy   FAQs   Our Team   Quizzes ▼   Blog   Careers   [Log in] [Get Started] |
|================================================================================|

• Flush-left: Prosper Health logo mark (green cross/plus icon + wordmark)
• Center-weighted: Primary navigation links in {typography.nav-link}, evenly spaced
• Flush-right: "Log in" text link (no button treatment) + {component.button-primary-nav} ("Get Started")
• Height: 80px (estimated from padding patterns; exact value inferred from nav structure)
• Bottom border: Thin hairline divider ({colors.hairline}) separating nav from hero
• Background: {colors.canvas} (pure white)

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|   Diagnosis and therapy for                |     [Photo: Woman laughing]       |
|   autistic adults                          |                                    |
|                                            |     [Photo: Woman smiling]         |
|   ┌──────────────────────────┐            |          (largest, central)        |
|   │ 📍 Virginia            ▼│            |                                    |
|   ├──────────────────────────┤            |     [Photo: Man smiling]           |
|   │ 🏥 Insurance carrier    ▼│            |                                    |
|   ├──────────────────────────┤            |     [Photo: Woman thoughtful]      |
|   │  Check my coverage   →  │            |                                    |
|   └──────────────────────────┘            |     [Photo: Man with beard]        |
|                                            |                                    |
|   No waitlists. Most pay less than $80.   |                                    |
|                                                                                |
|                        ★ Trustpilot               ★★★★★                       |
|                     TrustScore 4.8 · 30,000 clients                           |
|================================================================================|

• Background: {colors.surface-soft} (cream #f7f0e6) spanning full viewport width
• Left column: Headline in {typography.display-lg} → Form card ({component.form-card}) with two styled selects → Primary CTA ({component.button-primary-hero}) → Subtext in muted tone
• Right column: Staggered photo collage with 5 images in varying sizes, all with {rounded.lg} corners, largest image centered
• Bottom center: Social proof block with Trustpilot branding and star rating

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} or {colors.surface-soft} direct | Navigation bar, page background, flat bands | | 1 — Hairline | {extensions.shadows.sm} (subtle 1px lift) | Input focus hints, subtle separator enhancement | | 2 — Card | {extensions.shadows.md} (dual-layer soft shadow) | {component.form-card} — the hero form container floats gently above the cream surface | | 3 — Elevated | {extensions.shadows.lg} (deeper spread) | Dropdown panels, modals (inferred) | | Button Hard | {extensions.shadows.button-hard} (5px black offset) | {component.button-primary} variants — creates tactile "pressable" appearance distinguishing CTAs from cards |

Philosophy: Prosper Health employs a layered-realist depth model. Cards don't sit flush against their backgrounds; they float with {extensions.shadows.md} soft shadows that suggest physical paper elevation without the harshness of material-design-style dramatic lifts. Buttons receive special treatment via the hard-offset shadow ({extensions.shadows.button-hard}), making them look like physical keys you could press downward — a subtle affordance cue that differentiates interactive elements from informational containers. The overall effect is gentle layering, never theatrical dimensionality. Shadows are neutral-cool (black-based with low opacity), avoiding colored tints that might clash with the cream-green palette.

Decorative Depth

No gradient washes, pattern overlays, or atmospheric blurs detected in the current viewport. Depth comes exclusively from shadow elevation and the inherent warmth of the {colors.surface-soft} hero background, which creates tonal separation from the {colors.canvas} nav zone without requiring graphical treatment.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Buttons ({component.button-primary} family), small interactive elements | | {rounded.DEFAULT} | 12px | Default component corners, form field outlines (inferred) | | {rounded.md} | 12px | Identical to DEFAULT; consolidated reference | | {rounded.lg} | 16px | Major containers ({component.form-card}), photo cards ({component.photo-card}), content panels | | {rounded.xl} | 16px | Identical to lg for larger-scale applications | | {rounded.pill} | 9999px | Tags, pills (not observed in viewport; included for completeness) | | {rounded.full} | 100% / circle | Avatars, circular icons |

Shape Philosophy: Consistent rounding at the {rounded.lg} (16px) tier for anything housing content or imagery signals approachability over precision. Healthcare interfaces often over-index on sharp corners (conveying clinical sterility) or extreme rounding (conveying consumer-app playfulness); Prosper Health's middle ground suggests "professional warmth." Buttons at {rounded.sm} (8px) are notably less rounded than cards, maintaining a grounded, actionable silhouette that doesn't look toy-like.

Photography Geometry

Images in the hero collage employ rectangular aspect ratios (approximately 4:5 portrait for the largest central image, varying for smaller satellites) with uniform {rounded.lg} (16px) corner rounding. Images do not bleed edge-to-edge; each exists as a contained card floating within the collage grid. The arrangement is intentionally asymmetrical and overlapping — the central/largest image anchors the composition while smaller images cluster around it at staggered offsets, creating visual dynamism that echoes the diversity of the community served. No circular crops or mask shapes observed; all human imagery respects rectangular geometry with rounded corners only.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.select-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary conversion button style, used for the hero's "Check my coverage" CTA. Background {colors.primary-bright} (#1c7867), text {colors.on-primary} (white), type {typography.button} (18px Figtree), rounded {rounded.sm} (8px), padding 16px 40px. Features the distinctive hard-offset shadow {extensions.shadows.button-hard} (black 0px 5px 0px 1px) that makes it appear physically pressable. State variant: {component.button-primary-active} darkens to {colors.primary-hover} on interaction.

{component.button-primary-hero} — A wider-padded instance of the primary button specifically for the coverage-checker form submit. Same color/typography/shadow treatment as {component.button-primary} but with asymmetric horizontal padding (16px 59.2px 16px 35.2px) accommodating an arrow icon suffix. Lives inside {component.form-card} as the terminal interaction.

{component.button-primary-nav} — Compact navigation-bar version of the primary button ("Get Started"). Uses {typography.button-small} (14px) instead of 18px for proportionality within the 80px nav height, with tighter padding 10px 24px. Same {colors.primary-bright} background and {rounded.sm} rounding. Critical conversion entry point positioned at the far-right of {component.top-nav}.

{component.button-primary-active} — Pressed/hover state for all primary button variants. Background shifts to {colors.primary-hover} (#0f423a) — roughly 10% darker than default — providing tactile feedback. All other properties (text color, rounding, shadow) remain stable.

{component.button-primary-disabled} — Disabled/inactive state. Background degrades to {colors.muted} (gray), text becomes {colors.off-white} (very light gray), indicating non-interactivity while preserving button shape recognition.

Cards & Containers

{component.form-card} — The hero section's central interactive container holding the insurance coverage checker. Background {colors.canvas} (white), text {colors.ink}, type {typography.body-md}, rounded {rounded.lg} (16px), padding {spacing.xxl} (24px). Floats on {extensions.shadows.md} dual-layer shadow above the cream hero background, creating clear visual separation. Contains two {component.select-input} instances stacked vertically, one {component.button-primary-hero}, and helper text below.

{component.photo-card} — Individual image containers within the hero's right-column photo collage. Transparent background (images fill completely), text {colors.on-dark} for potential overlay captions (not currently visible), rounded {rounded.lg} (16px) matching the form card. Varying sizes arranged in masonry/staggered grid; the central/largest instance is conceptually {component.photo-card-large}.

{component.hero-band} — Full-viewport-width section container wrapping the entire above-fold experience. Background {colors.surface-soft} (cream #f7f0e6), text defaults to {colors.heading-dark}, padding {spacing.hero} (96px vertically). Establishes the warm tonal zone that differentiates the conversion moment from the neutral white navigation above and (presumed) content sections below.

{component.trustpilot-badge} — Social proof component positioned below the hero columns, center-aligned. Background transparent, text {colors.body} (green matching brand), type {typography.body-md}. Contains the Trustpilot wordmark, star rating visualization ({component.star-rating}), score text ("TrustScore 4.8"), and client count ("30,000 clients"). Functions as credibility reinforcement before scroll.

Inputs & Forms

{component.select-input} — Custom-styled dropdown selector for "Virginia" (location) and "Insurance carrier" fields. Background {colors.surface-input} (transparent — shows parent card's white), text {colors.primary-bright} (teal green — unusually colored for input values, creating brand cohesion), type {typography.body-lg} (17.92px — larger than standard body for touch-friendliness), padding 0px 12px 10px 30px (left-padding accommodates inline icon). Rounded {rounded.DEFAULT} (12px) though actual visible shape depends on underline/border rendering not fully extractable from background-only data. State variant: {component.select-input-focus} maintains same properties with added focus-ring treatment.

{component.select-input-focus} — Active/focus state for form selects. Properties mirror {component.select-input}; implementation should add {colors.border-default} outline or {colors.hairline} bottom-border indication per accessibility conventions. Color remains {colors.primary-bright} to preserve brand consistency even in focused state.

{component.select-label} — Text label preceding each select input (the "Virginia" and "Insurance carrier" readable text). Background transparent, text {colors.body} (forest green — matches primary brand color for semantic labeling), type {typography.label} (14.24px Figtree). Positioned above or adjacent to {component.select-input} with {spacing.xs} (8px) gap.

Navigation

{component.top-nav} — Fixed or sticky header spanning full viewport width. Background {colors.canvas} (white), text {colors.heading-strong} (#222222) for links, type {typography.nav-link} (18px), height 80px (inferred). Contains logo mark left, navigation links center-distributed, utility actions right. Terminates with thin {colors.hairline} bottom border separating it from {component.hero-band}.

{component.nav-link} — Individual navigation menu items ("Diagnosis", "Therapy", "FAQs", "Our Team", "Blog", "Careers"). Background transparent, text {colors.heading-strong}, type {typography.nav-link}. Horizontal spacing between items estimated at 24–32px. State variant: {component.nav-link-hover} shifts text to {colors.body} (green) indicating interactivity and brand alignment.

{component.dropdown-toggle} — "Quizzes" navigation item with dropdown indicator (caret). Extends {component.nav-link} with asymmetric padding 20px 40px 20px 0px (extra right-padding for caret icon space). Triggers dropdown panel on click/tap.

{component.logo-mark} — Brand identifier at far-left of {component.top-nav}. Text color {colors.body} (green), renders the cross/plus icon symbol alongside "Prosper Health." wordmark in mixed case. No background, no border — clean type-as-logo treatment.

{component.hamburger-menu} — Mobile navigation toggle (visible in markup though desktop viewport shown). Background transparent, text/color {colors.ink}, size 60px (from padding 18px × ~3.3). Contains hamburger icon lines in webflow-icons font. Only visible at breakpoints collapsing the full nav.

Signature Components

{component.hero-headline} — The H1 "Diagnosis and therapy for autistic adults." Background transparent, text {colors.heading-dark} (#2e2e2e), type {typography.display-lg} (32px Libre Caslon Text). Positioned above {component.form-card} with approximately {spacing.xl} (20px) margin-bottom. Line height 1.3 ensures comfortable reading of the multi-line statement.

{component.hero-subtext} — Supporting line "No waitlists. Most pay less than $80." beneath the form card. Background transparent, text {colors.muted-medium} (#474747), type {typography.body-md} (14.24px). Functions as anxiety-reducing reassurance text, visually de-emphasized relative to headline and form.

{component.star-rating} — Five-star visualization within {component.trustpilot-badge}. Background transparent, text/icon color {colors.success} (matching primary-bright teal). Renders filled star glyphs (likely SVG or icon font) in the brand's green, reinforcing that satisfaction metrics align with brand identity.

{component.footer} — Page-footer container (structure inferred, partially below viewport). Background {colors.canvas} (white), text {colors.muted}, type {typography.body-sm}. Expected to contain sitemap links, legal copy, contact info in reduced visual prominence relative to hero/content sections.

Do's and Don'ts

Do

• Do maintain universal font-weight: 400 across all typography roles — the system's calm voice depends on never using bold or semibold for emphasis; use size and color contrast instead.
• Do apply {colors.surface-soft} (#f7f0e6) as the hero-section background to create the signature warm-zone that separates conversion moments from informational content.
• Do use {colors.primary-bright} (#1c7867) exclusively for interactive elements (buttons, active form text, links on hover) while reserving {colors.primary} (#124e43) for static branding (logo, labels, body emphasis).
• Do apply {rounded.lg} (16px) to all content-housing cards ({component.form-card}, {component.photo-card}) to maintain the approachable, softened container language.
• Do attach {extensions.shadows.button-hard} (5px black offset) to primary CTAs so they appear tactilely "pressable" — this hard shadow is a signature differentiator from the soft shadows used elsewhere.
• Do reserve Libre Caslon Text (via {typography.display-lg}, {typography.title-md}, {typography.display-xl}) for headline-level text only; never use it for body copy, labels, or UI chrome.
• Do implement form select text in {colors.primary-bright} (teal green) rather than standard black/gray — this branded input treatment is a key识别特征 of the coverage checker.
• Do maintain the {spacing.hero} (96px) vertical padding on the hero band; compressing this destroys the contemplative pacing essential to the brand's therapeutic positioning.
• Do use {colors.ink} (#475467) for standard body paragraphs, allowing {colors.heading-dark} (#2e2e2e) to carry exclusive headline duties — this value split prevents visual monotony.
• Do keep the photo collage asymmetrical and staggered when reimplementing the hero imagery zone; rigid grids undermine the organic community representation intended by the layout.
• Do include the Trustpilot social proof block ({component.trustpilot-badge}) below the hero columns, center-aligned, as it provides critical credibility anchoring before users scroll away from the conversion zone.

Don't

• Don't introduce font-weight: 500, 600, or 700 anywhere in the system — if emphasis is needed, increase size by one step (e.g., {typography.body-md} → {typography.body-lg}) or shift color toward {colors.heading-dark}.
• Don't substitute {colors.primary-bright} (#1c7867) with {colors.primary} (#124e43) on buttons — the brighter teal is intentionally more "clickable" visually; the darker green is for reading, not acting.
• Don't apply gradients, blur effects, or glassmorphism to any surface — the design language is flat-with-shadows only; decorative depth would conflict with the clean, trustworthy aesthetic.
• Don't round buttons beyond {rounded.sm} (8px) — pill-shaped CTAs ({rounded.pill}) would make the interface feel consumer-app casual rather than healthcare-professional.
• Don't place {component.form-card} on {colors.canvas} (white) in the hero; it must sit on {colors.surface-soft} (cream) to create the banded visual architecture that guides the eye.
• Don't use text-transform: uppercase on labels, buttons, or navigation — the system relies entirely on sentence-case communication; uppercase would introduce uninvited visual aggression.
• Don't reduce the {component.form-card} internal padding below {spacing.xxl} (24px) — cramped form interiors trigger anxiety counter to the brand's affirming mission.
• Don't replace the hard button shadow ({extensions.shadows.button-hard}) with a soft shadow — the 5px solid black offset is an intentional affordance cue distinguishing actions from containers.
• Don't expand the color palette with purples, blues, or oranges outside the documented tokens — the forest-green + cream + warm-tan triad is tightly controlled; foreign hues dilute brand recognition.
• Don't implement hover states that change button background to a lighter tint — the correct direction is darker ({colors.primary-hover}), simulating physical depression.
• Don't collapse the photo collage into a single image or strict grid on desktop; the varied-size, staggered arrangement is a deliberate composition choice representing community diversity.

Motion & Animation

Transition Tokens

--transition-all: all 0.3s ease;
--transition-color: color 0.3s ease;
--transition-bg: background-color 0.3s ease;
--transition-position: top 0.3s ease;
--transition-transform: transform 0.3s ease;
--transition-base: 0.3s ease;

All transitions share a uniform 300ms duration with ease timing function (equivalent to ease-in-out or cubic-bezier approximating smooth deceleration). This consistency means every state change — color shift, reveal, movement — completes in exactly 0.3 seconds, creating rhythmic predictability valuable for users sensitive to erratic animation timing.

Keyframe Animations

• spin — Continuous 360° rotation, typically applied to loading indicators or carousel navigation icons during activity states.
• scroll — Marquee or auto-scroll behavior, likely used for testimonial carousels or logo ticker strips below the visible viewport.

Interaction Patterns

• Button press feedback: Primary buttons darken to {colors.primary-hover} over 300ms on mousedown/touchstart, with the hard shadow potentially compressing to simulate physical depression.
• Dropdown reveal: {component.dropdown-toggle} triggers panel expansion with top 0.3s ease transition, suggesting a slide-down or fade-in animation from the nav bar.
• Nav link hover: Text color shifts from {colors.heading-strong} to {colors.body} (green) over 300ms, providing clear hover affordance without abrupt snaps.
• Form focus states: Select inputs gain border or underline highlight (color {colors.primary-bright}) on focus, transitioning over 300ms; the existing teal text color may intensify slightly.
• Carousel navigation: Slider arrows (left-arrow-2 class detected) animate image translation with transform 0.3s ease for smooth photo collage transitions if the hero imagery is part of a rotating showcase.
• Hamburger menu transform: On mobile, the hamburger icon likely animates to an "X" close state using the spin keyframe or a morphing path animation.
• Scroll-triggered reveals: Though not explicit in CSS, the 300ms transition budget suggests fade-up or slide-in animations on scroll-into-view for content sections below the hero, implemented via JS IntersectionObserver triggering CSS class toggles.

Imagery Style

• Photography type: Candid lifestyle portraiture featuring real (or realistically depicted) diverse adults in moments of genuine expression — laughing, smiling warmly, thoughtfully posed. No stock-photo stiffness; subjects appear authentically engaged.
• Subject matter: Diverse group of adults representing the autistic community — varied ethnicity, gender presentation, age range (appearing 20s–40s). Each person photographed individually in relatable contexts (casual clothing, indoor settings with natural light).
• Color treatment: Naturalistic, warm-toned photography with slightly desaturated palettes that harmonize with the cream-green brand environment. Skin tones rendered accurately and warmly. One subject wears a mustard-yellow top that subtly resonates with {colors.accent} (tan) and {colors.surface-soft} (cream) without clashing.
• Composition: Varied framing — some head-and-shoulders portraits, some including torso. Central/largest image shows a woman in denim jacket and yellow turtleneck laughing openly (joyful affect); surrounding images show smiles and calm expressions. The collage collectively communicates happiness, comfort, and approachability.
• Role: Imagery supports rather than dominates — the photo collage occupies roughly 50% of hero width but sits right-of-center, ensuring the form (conversion path) receives first reading order. Photos provide emotional proof ("real people this helps") while text provides rational proposition ("diagnosis and therapy").
• Corner treatment: Uniform {rounded.lg} (16px) rounding on all image containers, softening the rectangular frames to match the card system's approachable geometry.
• No illustration or 3D: The system relies entirely on photography for visual interest; no illustrated characters, abstract graphics, or 3D renders detected in the current viewport.

Icon System

• Library: Custom implementation using webflow-icons (Webflow's built-in icon font) for interface chrome, plus likely inline SVGs for brand-specific marks (logo cross/plus symbol, arrow icons in buttons, location pin, building/carrier icons in form fields).
• Specific icons observed:
  • Cross/plus symbol (logo mark) — four-pointed cross in brand green
  • Caret/down-arrow (dropdown indicator) — beside "Quizzes" nav item
  • Arrow/right-chevron — inside "Get Started" and "Check my coverage" buttons
  • Location/pin icon — preceding "Virginia" in location select
  • Building/office icon — preceding "Insurance carrier" in second select
  • Star (filled) — five instances in Trustpilot rating display
  • Hamburger menu lines — three horizontal strokes in mobile nav toggle
• Treatment: Icons predominantly use currentColor inheritance, adopting the text color of their parent component (green in form fields, white on buttons, dark gray in nav). Stroke-based rendering for line icons (carets, arrows, pins); fill-based for solid icons (stars, logo mark).
• Size: Inline icons estimate 16–20px height, proportional to accompanying text (matching {typography.body-md} cap height or slightly exceeding). Button arrows slightly larger (~20px) to fill the 18px button type's visual space.
• Alignment: Icons center-aligned with text baselines; form field icons left-padded at 30px creating consistent indentation for selectable values.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (for marketing-page optimization)
- Styling:        Tailwind CSS v3.4+ (utility-first with design-token theme extension)
- Fonts:           Google Fonts (Libre Caslon Text: weights 400, 600; Figtree: weights 400, 500, 600) + self-hosted WOFF2 fallback
- Animation:      Framer Motion (for scroll-triggered reveals) + vanilla CSS transitions (for state changes)
- Icons:          Lucide React (closest match to observed line-icon style) + custom SVG brand assets
- Component lib:  Radix UI Primitives (for accessible Select/Dropdown foundations) + shadcn/ui (optional, for headless component scaffolding)

Rationale: The site's Webflow origins suggest a component-driven architecture that maps cleanly to React/Next.js. Tailwind's arbitrary-value support accommodates the non-standard font sizes (14.24px, 17.92px) and precise spacing tokens. Radix Select primitives provide the accessible foundation for the custom-styled form dropdowns. Framer Motion handles the scroll-triggered animation patterns implied by the scroll keyframe detection without bloating bundle size for simple transitions.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column hero (form stacks above photos), hamburger nav replaces full menu, form card full-width, photo collage collapses to 2-column or horizontal scroll | | Tablet | 640px – 1023px | Two-column hero maintained but compressed (form ~40%, photos ~60%), navigation may switch to condensed layout or hamburger | | Desktop | 1024px – 1439px | Full design as observed: 1440px max container, two-column hero, full nav visible | | Wide | ≥ 1440px | Container maxes at 1440px centered; hero band extends full-viewport width with content constrained internally |

Touch Targets

• {component.button-primary-nav} ("Get Started"): ~148px × 44px (padding 10px 24px + text) — meets WCAG AAA 44×44 minimum comfortably
• {component.button-primary-hero} ("Check my coverage"): ~200px × 52px (padding 16px 35–59px) — exceeds minimum significantly, easy thumb target
• {component.select-input}: Estimated 48px+ height (from 10px bottom padding + 17.92px font + icon) — adequate for touch selection
• {component.dropdown-toggle} ("Quizzes"): 64px+ hit area (from 40px vertical padding) — generous tap zone
• {component.hamburger-menu}: 60px × 60px (from 18px padding all sides) — exceeds 44×44 minimum, appropriate for mobile primary nav trigger

Collapsing Strategy

• Navigation: Full horizontal menu collapses to {component.hamburger-menu} icon at mobile breakpoint (< 768px inferred), triggering a slide-down or off-canvas panel containing all nav links stacked vertically. "Get Started" CTA moves inside this panel or persists as a compact bar button.
• Hero columns: Two-column layout (form left, photos right) reflows to single-column at mobile breakpoint. Form card ({component.form-card}) rises to top (preserving conversion primacy), photo collage flows beneath, potentially reducing from 5 images to 3–4 or switching to horizontal swipeable row.
• Form card: Maintains full internal padding ({spacing.xxl}) at all breakpoints but reduces horizontal margin to {spacing.lg} (16px) on mobile, preventing edge-touching.
• Typography scaling: {typography.display-lg} (32px) may reduce to 24–28px on mobile to prevent excessive line counts for the headline; {typography.body-md} (14.24px) likely remains unchanged (already optimized for small-screen readability).
• Photo collage: Staggered masonry layout simplifies to uniform grid (2 columns) or single scrolling row on mobile; {rounded.lg} corner rounding preserved regardless of rearrangement.

Image Behavior

• Hero photos: Largest central image scales down proportionally on mobile, maintaining aspect ratio while reducing absolute pixel dimensions to fit narrower column. Surrounding satellite images may hide entirely or reflow into a 2×2 grid below the primary image.
• Lazy loading: All hero images should implement loading="lazy" and/or Intersection Observer-based deferred loading to prioritize the form card's immediate render (conversion path) above photographic embellishment.
• Art direction: Consider serving tighter crop versions (face-focused) on mobile where full-body shots become imperceptibly small; the current viewport shows upper-body compositions that adapt reasonably to width reduction.

Iteration Guide

1. Initialize with token fidelity: Build your landing page scaffold pulling every color, font size, radius, and spacing value from the YAML frontmatter via {section.token} references (e.g., {colors.primary-bright}, {spacing.hero}, {typography.display-lg}). Never hard-code a hex or pixel value that has a corresponding token — this ensures global consistency and enables future theme updates from a single source of truth.

2. Implement the dual-typeface system: Define CSS variables --font-display: 'Libre Caslon Text', Georgia, serif; and --font-body: 'Figtree', 'Inter', system-ui, sans-serif;. Apply --font-display exclusively to {typography.display-xl}, {typography.title-md}, and {typography.display-lg} roles; apply --font-body to absolutely everything else. Violating this segregation breaks the editorial/interface voice distinction.

3. Construct the hero band first: Implement {component.hero-band} with {colors.surface-soft} background and {spacing.hero} vertical padding before adding internal content. This warm foundation is the visual anchor of the entire experience; getting its color and spacing wrong cascades errors through every nested component.

4. Build the form card as a self-contained module: {component.form-card} has its own shadow ({extensions.shadows.md}), padding ({spacing.xxl}), and internal spacing rhythm. Implement it independently with mock content first, verify its floating-elevation appearance against the cream background, then insert it into the hero left-column.

5. Style form inputs as branded selects: The {component.select-input} components use non-standard teal-colored text ({colors.primary-bright}) and generous sizing ({typography.body-lg} at 17.92px). Don't default browser <select> styling; build custom or use Radix Select with these exact color/size tokens. Add the location-pin and building icons as prefix elements with 30px left-spacing.

6. Apply the hard-shadow button treatment: When implementing {component.button-primary} variants, add box-shadow: rgb(0, 0, 0) 0px 5px 0px 1px; (the {extensions.shadows.button-hard} token) as a non-negotiable detail. This 5px black offset is what makes CTAs look pressable vs. generic flat rectangles. Omitting it removes a signature affordance.

7. Implement state variants as separate classes: Create .btn-primary, .btn-primary-active, .btn-primary-disabled as distinct class definitions (not nested :hover/:disabled pseudo-classes within a single rule) to align with the frontmatter's separate-entry pattern. This explicitness aids documentation and testing.

8. Respect the no-bold rule: As you add new text elements (testimonials, feature descriptions, FAQ answers), constrain yourself to font-weight: 400 regardless of semantic importance. If something needs emphasis, bump it up one size in the type scale or shift its color toward {colors.heading-dark}. Bold text literally does not exist in this design system.

9. Run lint validation: After completing your implementation, run npx @google/design.md lint DESIGN.md (or equivalent tooling) to catch broken token references (broken-ref warnings), missing component documentation (orphaned-component warnings), and contrast-ratio violations. Fix all errors before shipping — the linter enforces the spec's integrity guarantees.

10. When in doubt about visual weight: Choose more whitespace over more decoration, choose larger size over heavier weight, choose {colors.primary-bright} (action green) over {colors.primary} (reading green) for anything clickable, and always prefer the cream surface ({colors.surface-soft}) for hero/conversion zones over sterile white (colors.canvas}).

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover color/transform values for {component.nav-link-hover}, {component.button-primary-active} (beyond background darkening), and {component.select-input-focus} (border treatment specifics) were not extractable from static CSS and require designer confirmation or implementation-time best-practice application.
• Loading/skeleton states: No loading indicators, skeleton screens, or pending-state treatments detected in the provided CSS. Form submission loading, image lazy-load placeholders, and async content fetching states must be invented following the system's existing shadow/rounding/color vocabulary.
• Form validation states: Error message styling, invalid-field border treatments (likely {colors.error} red), and success-confirmation post-submit visuals are absent from the current viewport and CSS extraction. These represent critical UX gaps requiring design decisions aligned with the {colors.error} token and {rounded.sm} shape language.
• Below-fold sections: The screenshot captures only the above-fold hero band. Testimonials, features, pricing (if applicable), team profiles, FAQ accordion, and footer structures are undocumented and must be extrapolated from the established token system or obtained from additional page captures.
• Mobile navigation panel: While {component.hamburger-menu} markup exists, the expanded mobile menu's styling (off-canvas slide, fullscreen overlay, or drop-down panel), background color (likely {colors.canvas} or semi-transparent dark), and animation behavior are undetermined.
• Carousel/slider behavior: Detection of scroll keyframe and slider arrow classes implies a rotatable photo collage or testimonial carousel, but the number of slides, autoplay behavior, dot-indicator styling (slider dots mentioned in embedded CSS referencing #F7F0E6), and swipe-gesture responsiveness are unknown.
• Dark mode: The entire system documents a light-mode-only implementation ({extensions.mode}: "light"). No dark-surface tokens, inverted text colors, or darkness-adapted shadow values exist. A dark mode would require inventing a parallel token set (e.g., surface-dark: #1a1a1a, ink-light: #eaeaef) not grounded in extracted data.
• Accessible focus-visible rings: While focus states are referenced ({component.select-input-focus}, {component.text-input-focus}), the exact outline style (color, offset, width) for keyboard navigation indicators is not present in the shadow/radius/color extractions. Recommend implementing 2px solid {colors.primary-bright} outlines with 2px offset as a default conforming to WCAG 2.4.7.
• Pixel-exact cream value uncertainty: The {colors.surface-soft} token (#f7f0e6) was extracted from CSS rgb(247, 240, 230) conversion, but subtle rendering differences between color-picked screenshots and computed stylesheet values may introduce ±1-2 RGB channel variance. Treat this as canonical but prepare for minor visual calibration during implementation QA.