Daylight Health Design System

Overview

Daylight Health presents itself as a luminous, emotionally resonant mental health platform built on a foundation of warmth and accessibility. The entire interface rests upon {colors.canvas} — a pale cream tone (#fffbf0) that evokes natural light, parchment, and gentle optimism without veering into clinical sterility. This is not the cold white of a hospital corridor; it is the color of morning light through sheer curtains, deliberately chosen to lower cognitive load for users seeking support during vulnerable moments.

Brand voltage lives selectively across the system. The primary accent {colors.primary} — a soft peach-orange (#f6c389) — appears sparingly: on focused interactive states, subtle glows behind key CTAs, and decorative depth treatments. It never overwhelms; it warms. A more saturated variant {colors.primary-active} (#f7c02b) provides emphasis when needed — think active button states or highlight callouts — while {colors.primary-glow} offers a diffused wash for background energy zones. This restraint ensures that when brand color does appear, it feels intentional rather than decorative.

The typographic system's defining move is its commitment to light weight. Every display role — from {typography.display-xl} down to {typography.title-sm} — renders in font-weight: 300. This is deliberate: light serifs communicate gentleness, openness, and the absence of institutional authority. The headline typeface, Grenette Pro, carries the emotional weight of the brand with its elegant, slightly humanist serifs, while Styreneb Web handles all functional body text with geometric clarity. DM Sans enters exclusively for UI micro-copy: labels, button text, navigation items — anything requiring uppercase treatment or compact information density.

Shape language leans heavily into the extreme roundness spectrum. Buttons achieve true pill geometry via {rounded.full} (15984px), eliminating all angular tension from calls-to-action. Cards employ asymmetric radius strategies — {rounded.lg} on top edges transitioning to zero or {rounded.md} on bottoms — suggesting organic forms rather than manufactured rectangles. Even decorative elements trend toward circular ({rounded.circle} at 1600px) or fully rounded ({rounded.xl} at 100px) treatments. The overall effect is tactile, approachable, and distinctly un-corporate.

Two sub-systems emerge from the architecture: the editorial storytelling dialect (hero sections, testimonial carousels, value propositions) dominated by Grenette Pro at large sizes over generous whitespace; and the utility dialect (navigation, forms, administrative surfaces) where DM Sans and Styreneb Web operate within tighter constraints. These coexist without collision because the color canvas remains constant — every surface, regardless of dialect, returns to {colors.canvas} or one of its warm derivatives.

Key Characteristics

• Canvas is always {colors.canvas} (#fffbf0) — never pure white, never gray-tinged
• Display typography uses exclusively weight 300 across all {typography.display-*} and {typography.title-*} roles
• Brand accent {colors.primary} (#f6c389) applies as glow/shadow before it applies as fill
• All primary CTAs use {component.button-secondary} (canvas-toned pills) rather than solid brand fills
• Corner radii cluster at extremes: {rounded.full} for chrome, {rounded.lg}+ for content cards
• Photography dominates visual hierarchy; illustration plays minimal or no role
• Body text opacity sits at 80% ({colors.body-muted}) for secondary reading to create atmospheric depth
• Shadow layering uses warm undertones (amber/gray casts) rather than neutral black
• Section vertical rhythm follows multiples of 32px, with major breaks at {spacing.section} (64px) and above

Colors

Brand & Accent

• Primary ({colors.primary} — #f6c389): Soft peach-orange serving as the brand's signature voltage color. Used for accent glows, active state backgrounds, and subtle highlights on interactive elements. Never applied as a dominant surface fill.
• Primary Active ({colors.primary-active} — #f7c02b): Saturated golden-amber variant providing higher contrast emphasis. Appears on pressed/hovered button states and focal decorative elements.
• Primary Glow ({colors.primary-glow} — #ffab4): Diffused lemon-yellow wash for background highlight zones, CTA bands, and attention-drawing surface treatments.

Surface

• Canvas ({colors.canvas} — #fffbf0): The foundational page background — a pale warm cream. Every section, card container, and modal ultimately references this tone or a derivative thereof.
• Surface Soft ({colors.surface-soft} — rgba(255, 251, 240, 0.8)): Semi-transparent canvas overlay used for glassmorphic navbar containers, floating elements, and layered panels.
• Surface Warm ({colors.surface-warm} — #f8f0dc): Deeper cream with ochre undertones. Applied to hovered button backgrounds, elevated cards, and secondary surface planes.
• Surface Highlight ({colors.surface-highlight} — #ffab4): Brightest yellow-cream in the system. Reserved for high-energy CTA bands and promotional announcement bars.
• Surface Dark ({colors.surface-dark} — #2c2c2c): Near-black charcoal used exclusively for inverted contexts (loading screen text-on-dark scenarios, footer backgrounds if needed).

Text

• Ink ({colors.ink} — #1b1b1b): Primary text color for headings, navigation, and high-emphasis UI elements. Near-black with no blue undertone.
• Body ({colors.body} — #1a1b1f): Slightly cooler variant of ink for extended body reading passages.
• Body Muted ({colors.body-muted} — rgba(27, 27, 27, 0.8)): 80% opacity ink for descriptive paragraphs, helper text, and secondary narrative content. Creates atmospheric depth without introducing new hues.
• Muted ({colors.muted} — #333333): Medium-dark gray for tertiary text such as timestamps, metadata, and de-emphasized labels.
• On Primary ({colors.on-primary} — #1b1b1b): Text color rendered atop {colors.primary} surfaces. Dark ink satisfies AA contrast requirements against the light peach background.
• On Canvas ({colors.on-canvas} — #fffbf0): Light cream text for rare inverted scenarios (text on dark photo overlays).

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(27, 27, 27, 0.08)): Barely-visible dividers for card boundaries, input underlines, and structural separators. Intentionally subtle to maintain airy feel.
• Hairline Strong ({colors.hairline-strong} — rgba(27, 27, 27, 0.15)): Visible borders for focused inputs, active tabs, and elements requiring clearer containment.

Semantic

• Error ({colors.error} — #c13515): Warm red for form validation failures and system alerts. Maintains the brand's warm color temperature even in error states.
• Success ({colors.success} — #2d6a2d): Forest green for confirmation messages and successful action feedback. Desaturated to avoid jarring vibrancy.

Typography

Font Family

Daylight Health operates on a three-typeface hierarchy with clearly delineated roles:

Grenette Pro serves as the editorial voice — a refined serif with humanist proportions, deployed exclusively for display and headline contexts. It appears at weight 300 only (Light), with italic variants available for emphasis moments. Fallback is "Times New Roman", serif, ensuring graceful degradation. This typeface carries the emotional weight of the brand: its slightly organic letterforms suggest care, thoughtfulness, and human connection — critical attributes for a mental health platform.

Styreneb Web handles all sustained reading: body paragraphs, descriptions, list content, and informational prose. A geometric sans-serif at regular weight (400), it offers excellent legibility at {typography.body-md} (16px) and below. Its neutrality allows Grenette Pro to command attention without competition. Fallback stack includes "Arial", sans-serif.

DM Sans occupies the utility tier: navigation labels, button copy, form field labels, tags, and any text rendered in uppercase or small caps. Its slightly wider proportions and clean terminals suit micro-typography at {typography.caption} (12px) and {typography.button-label} (12px uppercase). Letter-spacing is explicitly increased (+0.04em to +0.06em) for these roles to maintain readability at small sizes.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 300 | 1.1 | -0.01em | Hero statements, campaign-level headlines | | {typography.display-lg} | 51.2px | 300 | 1 | normal | Page H1, major section openers | | {typography.title-md} | 38.4px | 300 | 1.2 | normal | H2 section titles, feature headers | | {typography.title-sm} | 32px | 300 | 1.3 | normal | H3 subsection titles | | {typography.heading-md} | 20px | 500 | 1.4 | 0 | Card titles, feature names (sans-serif) | | {typography.body-md} | 16px | 400 | 1.4 | normal | Paragraph prose, descriptions | | {typography.body-sm} | 14.4px | 400 | 1.5 | normal | Secondary text, captions | | {typography.caption} | 12px | 400 | 1.3 | 0.04em | Labels, tags, metadata (uppercase) | | {typography.button-label} | 12px | 400 | 1.25 | 0.06em | Button text, nav links (uppercase) | | {typography.loader-hed} | 36px | 400 | 1.3 | normal | Preloader/splash message |

Principles

The typography system trusts scale over weight to establish hierarchy. With display roles locked at 300 weight and body text at 400, there is only a single-step weight differential between the largest and smallest type on the page. Instead, dramatic size contrasts (64px → 16px = 4× ratio) carry the structural signal. This choice is philosophically aligned with the brand's therapeutic positioning: lightness conveys lack of aggression, absence of institutional heaviness.

Color-as-hierarchy supplements scale. Headlines render in full-opacity {colors.ink}, while supporting paragraphs drop to {colors.body-muted} at 80% — a subtle but effective demotion that requires no size change. This technique allows adjacent headline/body pairs to maintain proximity without optical confusion.

Uppercase is reserved for UI chrome exclusively. Button labels, navigation links, and tag text transform to uppercase via {typography.button-label} and {typography.caption}, both set in DM Sans with expanded tracking. Editorial content (headlines, body, descriptions) never uses uppercase, preserving the conversational, human-scaled tone.

Line heights are intentionally loose for display type (1.0–1.3 range) to give serifs breathing room, while body text tightens slightly (1.4–1.5) for efficient reading blocks. The {typography.display-lg} role uses an exact 1:1 line-height-to-size ratio (51.2px / 51.2px), creating tight-but-elegantheadline stacking.

Note on Font Substitutes

Grenette Pro and Styreneb Web are proprietary typefaces served via Webflow's CDN. For implementations without access to these files:

• Grenette Pro → Substitute with Libre Baskerville (Google Fonts, weight 300 or 400). Both share a humanist serif DNA with moderate contrast and slightly organic forms. Define as: --font-display: 'Libre Baskerville', 'Georgia', serif;
• Styreneb Web → Substitute with Inter (Google Fonts, weight 400) or DM Sans (weight 400). Styreneb's geometric character maps well to Inter's neutral grotesque structure. Define as: --font-body: 'Inter', 'DM Sans', -apple-system, sans-serif;
• DM Sans → Already available via Google Fonts; no substitution needed.

Always include the original font names in the fallback stack for environments where the CDN may be accessible.

Layout

Spacing System

• Base unit: 8px (with 5px appearing as a secondary granular step for fine adjustments).

• Tokens:

  • {spacing.xxs} (4px): Micro-adjustments, icon internal padding
  • {spacing.xs} (5px): Tight inline gaps, label spacing
  • {spacing.sm} (8px): Icon-text gaps, compact element stacks
  • {spacing.md} (16px): Standard component internal padding, card gutters
  • {spacing.lg} (24px): Element group separation, form field margins
  • {spacing.xl} (32px): Section-internal block spacing, carousel padding
  • {spacing.xxl} (48px): Major content zone breaks
  • {spacing.section} (64px): Vertical section padding standard
  • {spacing.section-lg} (96px): Breathing room between major page segments
  • {spacing.section-xl} (124px): Hero-to-content transitions, footer approaches
  • {spacing.hero-bottom} (128px): Terminal hero bottom padding before next section

• Section padding (vertical): {spacing.section} (64px) for standard content sections; {spacing.section-xl} (124px) for hero and CTA climax zones.

• Card internal padding: {spacing.md} (16px) for text-bearing card footers; image cards use asymmetric padding (top-rounded only).

• Gutters: Desktop grid operates at approximately 24px inter-column gaps; mobile collapses to 16px.

Grid & Container

• Max content width: 1440px for main wrapper, with inner sections extending to 2400px for full-bleed background effects.
• Density choice: Editorial-airy — generous whitespace dominates, particularly in the hero and testimonial zones. Content never crowds the viewport edges.
• Desktop grid behavior: Single-column narrative flow for hero; multi-column horizontal scroll (carousel) for imagery; centered constrained column (~700px) for reading text blocks.
• Hero column split: Asymmetric two-column layout with ~40% width for headline/CTA text block (left) and remaining space for photographic/emotional imagery (right). Text column maxes around 560px comfortable reading width.

Whitespace Philosophy

The system practices aggressive whitespace as emotional architecture. Margins between sections exceed the height of the content they frame. This is not empty space — it is breathing room designed to reduce cognitive load for users already carrying psychological weight. The canvas color {colors.canvas} fills these voids, ensuring "empty" areas still feel warm and intentional rather than incomplete. Dense information clusters (pricing tables, provider directories) would break this pattern if they exist deeper in the site, but the landing-page surface maintains consistent airiness.

Header Architecture

┌──────────────────────────────────────────────────────────────────────┐
│ [☀ Logo]   How It Works  Services  Our Providers  Partner     [GET STARTED] │
│                    Patient Testimonials  Patient Portal              │
│                                                                      │
└─────────────────────────── 1440px max-width ─────────────────────────┘

Navigation uses flush-left logo mark (sun icon), center-weighted menu links with ample horizontal distribution, and flush-right primary CTA ({component.button-secondary}). The navbar container employs {colors.surface-soft} at 80% opacity for a floating glass effect over scrolling content. Height is unconstrained by the extracted data but visually approximates 72–80px.

Hero Section

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│  ┌────────────────────┐  ┌──────────────────────────────────────┐   │
│  │                    │  │  ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐  │   │
│  │   Daylight         │  │  │ Img│ │ Img│ │ Img│ │ Img│ │ Img│  │   │
│  │                    │  │  └────┘ └────┘ └────┘ └────┘ └────┘  │   │
│  │   Have More        │  │                                      │   │
│  │   Good Days        │  │         "More Good Days Ahead..."    │   │
│  │                    │  │                                      │   │
│  │   [body copy]      │  └──────────────────────────────────────┘   │
│  │                    │                                             │
│  │   [BOOK AN APPT]   │                                             │
│  └────────────────────┘                                             │
│                                                                      │
│  padding: 64px 0 128px                                               │
└──────────────────────────────────────────────────────────────────────┘

The hero features a preloader-style intro band ("More Good Days Ahead...") rendered in {typography.loader-hed} above a horizontal image carousel showing diverse individuals and families in candid, joyful moments. Below the imagery, the primary headline ({typography.title-md}) and subheadline ({typography.body-md}) sit left-aligned with a single {component.button-secondary} CTA. The word "Daylight" likely appears as a oversized display watermark or adjacent display element ({typography.display-xl} or larger) — this is partially visible in the screenshot as massive light-colored serif text.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat baseline | No shadow, {colors.canvas} background | Page body, static sections | | 1 — Hairline outline | 1px {colors.hairline} border | Card boundaries, dividers | | 2 — Soft ambient | {shadows.warm-soft} — warm gray cast | Floating cards, elevated panels | | 3 — Neutral lift | {shadows.neutral-subtle} — subtle black | Buttons, dropdowns | | 4 — Brand glow | {shadows.brand-glow} — amber-tinted | Primary CTAs, featured elements | | 5 — Diffused brand | {shadows.brand-diffused} — spread amber | Hovered interactive elements |

The depth philosophy favors warm-toned shadow layering over neutral blacks. Even the most subtle elevation ({shadows.warm-soft}) carries a rgba(196, 191, 180) cast — brownish-gray rather than pure gray — ensuring lifted elements appear to be catching the same warm light as the canvas. When brand color enters the shadow equation ({shadows.brand-glow}, {shadows.brand-diffused}), it does so as a golden-amber halo, suggesting illumination from a warm source.

The system avoids heavy elevation entirely. No modal-level depths (16px+ blur, multi-layer shadows) appear in the current surface. Everything stays within 0–8px blur radius territory, maintaining the lightweight, approachable aesthetic. Color blocking (switching between {colors.canvas} and {colors.surface-warm}) often substitutes for shadow where z-axis separation is needed.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Internal element rounding, badge corners | | {rounded.DEFAULT} / {rounded.md} | 16px | Default card corners, container rounding | | {rounded.lg} | 24px | Image card top edges, prominent content cards | | {rounded.xl} | 100px | Highly rounded feature cards, tag-like surfaces | | {rounded.pill} | 9999px / 100px alternative | Pills, tags, lozenges | | {rounded.full} | 15984px | Buttons — effectively infinite radius for perfect pills | | {rounded.circle} | 1600px | Circular icon containers, avatar placeholders |

The shape vocabulary reveals a strong preference for extreme roundness on interactive elements (buttons at 15984px = perfect pill) combined with moderate roundness on content containers (16–24px). Asymmetric radius patterns appear on image cards: top edges receive {rounded.lg} (24px) while bottom edges square off (0px) or receive smaller {rounded.md} (16px), creating a "photo-with-caption" visual metaphor.

Photography Geometry

Photography is central to Daylight's visual strategy. Images display in horizontal rectangular formats, typically 4:3 or 16:10 aspect ratios within carousel cards. Top corners round to {rounded.lg} (24px); bottoms either match or square off depending on whether caption text sits below. No circular crops or avatar treatments appear in the visible surface. Full-bleed imagery is avoided in favor of contained card frames with internal padding, maintaining the structured, editorial layout language.

Image treatment appears to use natural color photography with warm tonality matching the canvas — no heavy filters, duotones, or graphic overlays. Subjects are real people in authentic lifestyle moments (families interacting, individuals in reflective poses), shot with soft lighting that echoes the brand's gentle aesthetic.

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.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-secondary} — The workhorse CTA for the landing page surface. Renders as a pill-shaped container with {colors.canvas} background and {colors.ink} text. Uses {typography.button-label} (DM Sans, 12px, uppercase, +0.06em letter-spacing) for a refined, understated call-to-action feel. Padding is generous at 16px 24px to ensure comfortable touch targets. Carries {shadows.neutral-subtle} for subtle lift. This is the primary conversion button seen in the nav bar ("GET STARTED") and hero section ("BOOK AN APPOINTMENT"). Active/hover state transitions to {component.button-secondary-hover} with {colors.surface-warm} background.

{component.button-primary} — Solid brand-fill variant using {colors.primary} (#f6c389) background with dark {colors.on-primary} text. Same pill geometry ({rounded.full}) and typography as secondary. Used when maximum emphasis is required — likely for pricing CTAs, emergency contact actions, or final conversion points deeper in the funnel. Active state shifts to {colors.primary-active} (#f7c02b) via {component.button-primary-active}.

{component.button-ghost} — Transparent-background option with {colors.ink} text and optional hairline border. Slightly less rounded ({rounded.pill} at 100px vs. 15984px). Used for tertiary actions, "Learn more" links styled as buttons, and dismiss/close interactions where visual weight must remain minimal.

Navigation

{component.top-nav} — Full-width navigation bar spanning the viewport, internally constrained to 1440px. Background uses {colors.surface-soft} at 80% opacity for a frosted-glass effect over scrolling content below. Contains the sunburst logo mark (left), navigational link array (center), and {component.button-secondary} CTA (right). Height accommodates logo proportions plus vertical padding (~72–80px total).

{component.nav-link} — Individual navigation menu items rendered in {typography.body-sm} (Styreneb Web, 14.4px) with {colors.body-muted} text color at 80% opacity. Padding provides generous click targets. Active/current page state switches to {component.nav-link-active} with full-opacity {colors.ink}.

{component.menu-toggle} — Mobile hamburger/menu button (visible on smaller viewports). Transparent background, {colors.ink} icon, 60×60px touch target. Contains a hamburger icon that animates to X on open (transition handled via JS/class toggle).

Cards & Containers

{component.image-card} — Horizontal photograph container with pronounced top-edge rounding ({rounded.lg} = 24px) and squared bottom edge (0px). No intrinsic background or padding — purely a framing device for carousel imagery. Multiple instances tile horizontally in the hero image strip.

{component.image-card-footer} — Optional text container positioned beneath {component.image-card}, receiving the inverse radius treatment (0px top, {rounded.md} bottom). Background is transparent (inherits page canvas), with {spacing.md} internal padding for caption text.

{component.carousel-container} — Wrapping element for the horizontal image scroll area. Provides {spacing.xl} (32px) vertical padding above/below the image row, establishing breathing room between the "More Good Days Ahead..." preloader text and the main hero content below. Overflow handling enables horizontal scroll/swipe on touch devices.

{component.cta-section} — High-emphasis call-to-action band using {colors.surface-highlight} (#ffab4) as background — the brightest surface in the system. Vertical padding reaches {spacing.section-xl} (124px) for maximum visual weight. Houses centered headline + single button pair. This component creates a climactic conversion moment distinct from the softer hero section.

Typography Components

{component.headline-display} — Oversized brand wordmark or statement text (the visible "Daylight" element). Uses {typography.display-lg} (51.2px, Grenette Pro Light) or potentially larger custom sizing. Color is {colors.ink} at reduced opacity (appears as watermark/light text in the hero composition). This is a signature decorative element, not functional navigation text.

{component.headline-hero} — Primary hero headline ("Have More Good Days"). Set in {typography.title-md} (38.4px, Grenette Pro Light) at full {colors.ink} opacity. Line height of 1.2 keeps multi-line headlines compact yet readable.

{component.subheadline-body} — Supporting paragraph beneath the hero headline. Uses {typography.body-md} (16px, Styreneb Web) at {colors.body-muted} (80% opacity ink) to create clear hierarchy without reducing size. Constrained to ~560px measure for optimal reading comfort.

{component.loader-hed} — Splash/preloader message ("More Good Days Ahead..."). Rendered in {typography.loader-hed} (36px, Grenette Pro weight 400 — notably heavier than other display roles). Centers horizontally above the image carousel during initial page load.

Form Elements

{component.select-input} — Native or custom-styled dropdown selector. Transparent background (no visible fill), {colors.ink} text, {typography.body-sm} (14.4px). Minimal padding (8px 0) suggests underline-only or ghost styling without visible border box. Focus state ({component.select-input-focus}) likely reveals {colors.hairline-strong} underline or brand-color indicator. Used for insurance provider selection, state pickers, or similar utility forms.

Decorative Components

{component.pill-tag} — Small categorical label or status badge. Uses {colors.surface-soft} background with {rounded.pill} (100px) geometry. Internal padding 8px 16px with {typography.caption} (12px DM Sans, uppercase, +0.04em tracking). Examples might include "In-Network", "Available Now", or specialty tags on provider cards.

{component.preloader-overlay} — Full-viewport initial loading state covering all content until resources resolve. Background matches {colors.canvas} exactly. Displays centered {typography.loader-hed} text. May include subtle animation (fade-out) on completion before revealing main {component.hero-band}.

Do's and Don'ts

Do

• Do maintain {colors.canvas} (#fffbf0) as your universal page background — never substitute pure white #ffffff or light gray.
• Do keep all Grenette Pro headlines at font-weight: 300; never bump to 400 or 600 for emphasis — use size or color instead.
• Do apply {rounded.full} (15984px radius) to every button; the pill shape is non-negotiable brand vocabulary.
• Do render secondary body text at {colors.body-muted} (80% opacity) to create atmospheric depth without new color introductions.
• Do use warm-toned shadows ({shadows.warm-soft} with its rgba(196, 191, 180, 0.2) cast) for elevated cards instead of neutral black drops.
• Do reserve uppercase transformation ({typography.button-label}) exclusively for UI chrome — navigation, buttons, tags — never for editorial headlines.
• Do allow generous section padding (minimum {spacing.section} = 64px vertically) between content blocks; the airiness is intentional.
• Do constrain body text columns to ~560px max-width for comfortable reading measures in hero and content sections.
• Do use {typography.caption} (DM Sans 12px, +0.04em tracking) for all label-sized text; never shrink body font below 14px for readability.
• Do apply asymmetric radius to image cards (rounded top, square or less-rounded bottom) to create the "photo + caption" visual metaphor.

Don't

• Don't use {colors.primary} (#f6c389) as a dominant surface fill for large containers; it is an accent/glows color, not a background.
• Don't introduce cool-toned grays or blues into the palette — every color must reference back to the warm cream/orange/ink family.
• Don't bold display typography; if emphasis is needed, increase size (step up from {typography.title-sm} to {typography.title-md}) or switch to {colors.ink} from muted.
• Don't use sharp corners (0px radius) on any user-facing interactive element except where asymmetric card patterns specifically require it.
• Don't place dense text blocks wider than ~700px; the editorial voice requires narrow measures.
• Don't apply drop shadows heavier than {shadows.brand-glow} (blur radius ≤ 16px); the system rejects heavy/modern elevation.
• Don't mix DM Sans into headline or body copy roles; it is strictly a UI-microtype face.
• Don't reduce line-height below 1.2 for display type or 1.4 for body text; the loose rhythm is essential to the light, breathable feel.
• Don't add gradient overlays to photography; images should display in natural color with only the card frame (radius + optional shadow) as treatment.
• Don't implement hover states that change button shape or radius — only background color and shadow should transition.

Motion & Animation

Transition Tokens

--transition-color: color 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
--transition-chrome: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), 
                     color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), 
                     border-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), 
                     opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
--transition-fade: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
--transition-all: all 0.3s ease;

Two distinct easing families appear: a symmetric ease-in-out (cubic-bezier(0.445, 0.05, 0.55, 0.95)) for simple fades and color shifts, and an overshooting ease (cubic-bezier(0.215, 0.61, 0.355, 1)) for interactive chrome (buttons, links) that benefits from slight deceleration warmth. Duration clusters at 300ms (interactive) and 400ms (atmospheric).

Keyframe Animations

• spin — Detected in the stylesheet, likely applied to loading indicators or the preloader icon (sun mark rotation during initial page load).

Interaction Patterns

• Preloader fade-out: The splash overlay ({component.preloader-overlay}) likely opacity-fades to 0 over 400–600ms on DOMContentLoaded or after video/image resources resolve, revealing the hero band beneath.
• Carousel scroll: The horizontal image row supports native scroll or drag-swipe with momentum physics. No auto-play detected; user-driven exploration fits the contemplative brand tone.
• Button state transitions: All buttons transition background-color, color, and box-shadow simultaneously via --transition-chrome (300ms, overshoot easing) on hover/focus/active.
• Nav link underline reveal: Likely implemented as a scale-X transform or width transition from center on hover, using the overshoot easing.
• Menu toggle morph: Hamburger-to-X icon animation on mobile menu open, possibly using CSS transform rotation on pseudo-element bars.
• Shadow elevation lift: Cards and buttons may gain {shadows.brand-glow} or {shadows.elevated} on hover, creating a subtle "lift" effect via shadow transition.
• Focus ring: Form inputs and buttons probably acquire a subtle {colors.hairline-strong} outline or {colors.primary}-tinted box-shadow on keyboard focus, transitioning over 200–300ms.

No parallax, counter-animation, or complex orchestrated sequences detected. Motion philosophy is functional and reassuring — transitions confirm interaction occurred without drawing attention to themselves. The 300ms duration sweet spot feels responsive without feeling snappy/jarring.

Imagery Style

• Photography-forward: The visible hero relies entirely on candid lifestyle photography featuring diverse individuals and families in moments of connection, joy, and reflection.
• Warm natural lighting: Images are shot with soft, directional light that complements the {colors.canvas} palette — no harsh flash, no cool/blue color temperatures.
• Authentic representation: Subjects appear to be real people (not overly stylized stock models) across age ranges and family structures, aligning with mental health accessibility values.
• Horizontal format dominance: Carousel images use landscape orientation (approximately 4:3 or 16:10), filling card containers without cropping heads or critical detail.
• No graphic overlays: Images display cleanly without gradient washes, text-on-photo compositing, or duotone treatment. The frame (card radius + shadow) is the only graphical intervention.
• Candid emotion capture: Visible expressions show genuine smiles, thoughtful gazes, and interpersonal engagement — not posed stock-camera looks.
• Interior/domestic settings: Backgrounds suggest home environments, couches, natural window light — reinforcing the "daylight" concept and therapy-at-home positioning.
• Consistent color grading: Across the image set, warm midtones dominate with slightly lifted shadows, matching the overall brand warmth without identical filtration.
• Image-as-narrative: Photos carry the emotional payload that copy supports; the ratio of image real estate to text real estate is roughly 60:40 in the hero.
• Carousel presentation: Images tile horizontally in a scrollable strip, encouraging browsing and discovery rather than presenting a single hero shot.

Icon System

• Library: Custom SVG (no third-party icon library detected in class names or font references).
• Specific icons observed:
  • Sun/rays burst (logo mark) — the primary brand identifier, appearing top-left in navigation
  • Hamburger menu (three horizontal lines) — mobile navigation toggle
  • Close/X (inferred) — mobile menu dismiss state
  • Possible chevron/arrows (inferred) — carousel navigation controls
• Treatment: Icons appear to use currentColor inheritance, adopting the text color of their parent container (typically {colors.ink}). Stroke-based rendering is likely given the delicate sunburst logo construction.
• Size: Logo mark scales proportionally within the ~48–56px navbar height constraint. Menu toggle icon targets 20–24px within its 60px touch container. Utility icons (if present deeper in the site) would follow 16–20px convention.
• Alignment: Icons center vertically relative to accompanying text (nav links) or stand alone centered within their touch target (menu toggle). No left-aligned icon + right-aligned text patterns detected in the nav.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro for statically-optimized landing pages
- Styling:        Tailwind CSS v4 with custom theme extension (or CSS Modules if avoiding utility-class coupling)
- Fonts:          Self-host WOFF2 files for Grenette Pro + Styreneb Web from Webflow CDN; 
                  DM Sans via Google Fonts `<link>` or self-hosted
- Animation:      Framer Motion (React) or vanilla CSS transitions per the extracted token values
- Icons:          Custom SVG components (sunburst, menu, close) — no icon library dependency
- Component lib:  Radix UI Primitives for accessible dropdowns/selects (if needed); otherwise custom

Rationale: The site's current implementation appears to use Webflow (evidenced by .w-button, .w-nav, Webflow-hosted font URLs, and container naming conventions). For a reimplementation prioritizing performance and developer control, Next.js or Astro provides the static-generation capabilities suited to a marketing landing page. Tailwind CSS efficiently maps the extensive design token system to utility classes, though the highly specific radius values (15984px, 1600px) require arbitrary value syntax or plugin extensions.

Font hosting should prioritize self-hosting the proprietary faces (Grenette Pro, Styreneb Web) to avoid Webflow CDN dependency and reduce layout shift from external font loading. DM Sans can load from Google Fonts CDN or be bundled alongside the others.

Animation complexity is low enough that Framer Motion is optional — vanilla CSS transitions defined as custom properties (per the Transition Tokens section) cover all detected behaviors. Only if scroll-triggered reveals or complex orchestration are added later would a library become justified.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column everything; nav collapses to hamburger; carousel becomes swipeable horizontal scroll with overflow; headline sizes scale down via clamp(); CTA buttons stack vertically | | Tablet | 640px – 1024px | Two-column hero begins (narrower proportions); nav may persist in collapsed mode or show abbreviated links; carousel shows 2–3 cards visible | | Desktop | 1024px – 1440px | Full layout as documented: asymmetric hero split, 5-image carousel visible, expanded nav | | Wide | > 1440px | Container maxes at 1440px with centered alignment; background colors may extend edge-to-edge beyond container |

Touch Targets

• {component.button-secondary}: Effective touch area ~168px × 52px (24px padding × 2 + text) — exceeds 44×44px WCAG AAA minimum comfortably.
• {component.menu-toggle}: 60px × 60px explicit sizing — generously exceeds minimum.
• {component.nav-link}: Approximate 120px × 40px hit area based on padding — adequate for touch.
• {component.select-input}: Native dropdown height ~40px with 8px vertical padding — meets minimum; consider increasing to 48px for mobile.

Collapsing Strategy

• Navigation: Horizontal link array collapses to slide-down drawer triggered by {component.menu-toggle}. Drawer overlays content with semi-transparent backdrop. Logo and CTA button remain visible in header.
• Hero columns: Two-column asymmetrical layout (text left, images right) stacks vertically on mobile — text block moves above image carousel, maintaining reading hierarchy. Headline sizes reduce via fluid typography (font-size: clamp(32px, 5vw, 51.2px)).
• Image carousel: Horizontal scroll with overflow-x: auto and scroll-snap-type: x mandatory for snap-to-card behavior on touch. Shows 1.2 cards visible with peek-edge hinting.
• CTA section: Remains full-width with reduced vertical padding (64px instead of 124px). Centered content column narrows to match mobile viewport.
• Buttons: Maintain pill shape and full padding on mobile; text remains uppercase. Stack vertically if multiple CTAs appear in a group.

Image Behavior

• Hero carousel images maintain aspect ratio and {rounded.lg} top-edge treatment on all breakpoints.
• On mobile, images scale down to show ~1 full card plus ~30% of next card (encouraging swipe discovery).
• No art-direction sources detected (single image asset served at all widths); implement srcset with 1x/2x/3x descriptors for retina optimization.
• Consider lazy-loading carousel images below the fold (2nd card onward) to improve initial paint performance.

Iteration Guide

1. Start with the canvas. Define background-color: {colors.canvas} (#fffbf0) on <html> or <body> immediately. Every subsequent component builds on this thermal baseline. Never override to white.

2. Establish the font stack first. Load Grenette Pro (display), Styreneb Web (body), and DM Sans (UI) via @font-face declarations or <link> tags before painting any text. Define CSS custom properties --font-display, --font-body, --font-ui mapping to the family strings exactly as specified in {typography.*}.fontFamily.

3. Implement the token system exhaustively. Convert every YAML frontmatter entry to CSS custom properties following the pattern --color-{name}: {value}, --space-{name}: {value}, --radius-{name}: {value}, etc. Reference these variables exclusively in component styles — never hard-code hex codes or pixel values that have token equivalents.

4. Build the navigation shell. Implement {component.top-nav} as a fixed/sticky header with the three-zone layout (logo, links, CTA). Use {colors.surface-soft} at 80% opacity for the background. Test mobile collapse early — the hamburger drawer is a complex interaction state.

5. Construct the hero band. Implement {component.hero-band} with its generous vertical padding ({spacing.section} 0 {spacing.hero-bottom}). Build the asymmetric two-column grid (text ~40%, image ~60%). Place {component.headline-hero} and {component.subheadline-body} in the text column; position {component.carousel-container} with its image cards in the visual column.

6. Apply the preloader. Add {component.preloader-overlay} as a fixed-position fullscreen element with {colors.canvas} background and centered {typography.loader-hed} text. Script a fade-out transition (opacity 1→0 over 400ms) after window.onload or a short delay (800–1200ms) to let users absorb the "More Good Days Ahead..." message.

7. Style buttons systematically. Implement {component.button-secondary} first (it's the most frequently used variant). Apply {rounded.full}, {typography.button-label} (uppercase, tracked), and {shadows.neutral-subtle}. Then build {component.button-primary} as the brand-fill variant. Add :hover and :active pseudoclasses referencing the -active component entries.

8. Component variant discipline. Every state variant (hover, active, disabled, focus) lives as a separate CSS class or named component — never nest modifiers inside base component definitions. Follow the frontmatter pattern: button-secondary, button-secondary-hover, button-secondary-disabled.

9. Photography integration. Source or generate placeholder images matching the warm-lifestyle-aesthetic description. Apply {rounded.lg} (24px) to top corners only (use border-radius: 24px 24px 0 0). Wrap each image in {component.image-card}. Ensure alt text reflects the authentic, diverse representation visible in the reference.

10. Validate with linter tooling. Run npx @google/design.md lint DESIGN.md after implementation passes. Check for broken-ref warnings (typos in token paths), contrast-ratio flags (especially {colors.primary} against {colors.on-primary}), and orphaned-tokens (defined but unused tokens indicating incomplete implementation).

Font Setup for Development Environment:

:root {
  /* Typefaces */
  --font-display: 'Grenette Pro', 'Libre Baskerville', 'Times New Roman', serif;
  --font-body: 'Styreneb Web', 'Inter', 'DM Sans', -apple-system, sans-serif;
  --font-ui: 'DM Sans', 'Inter', -apple-system, sans-serif;
  
  /* Critical color tokens */
  --color-canvas: #fffbf0;
  --color-ink: #1b1b1b;
  --color-primary: #f6c389;
  --color-body-muted: rgba(27, 27, 27, 0.8);
}

Substitute 'Libre Baskerville' for Grenette Pro and 'Inter' for Styreneb Web during development if proprietary font files are unavailable. Swap to production fonts before launch.

Known Gaps

• Hover state specifics: While -active and -focus component entries document pressed/focused appearances, exact hover midpoint states (background color shift percentage, shadow intensity change) are inferred rather than extracted. Implementation should test hover transitions between default and active states.
• Loading/skeleton states: No skeleton loaders, shimmer placeholders, or pending-state indicators were extractable from the static screenshot. Design these for image cards (gray placeholder with pulse animation) and form submission states.
• Form validation styling: Beyond {component.select-input-focus}, error states ({colors.error} application, shake animation, icon insertion) and success confirmations are undocumented.
• Dark mode: The system is explicitly light-mode only ({extensions.mode}: "light"). No dark canvas, inverted text, or adjusted brand color values exist. If dark mode is required, a full palette inversion pass is necessary (avoiding simple invert — warm canvas needs a deep navy or charcoal equivalent, not pure black).
• Authenticated/dashboard surfaces: The landing page surface represents the marketing layer only. Provider dashboards, patient portals, scheduling interfaces, and admin panels likely introduce denser layouts, data tables, and additional UI components not captured here.
• Video/animation assets: The presence of a loading-animation-video class and background-video atom in the DOM suggests video content (possibly ambient lifestyle footage or animated brand marks) that cannot be assessed from a static screenshot. File specifications (codec, resolution, autoplay/mute behavior) are unknown.
• Exact shadow values on specific components: While shadow tokens are cataloged, which specific component uses which shadow (e.g., does {component.image-card} get {shadows.warm-soft} or no shadow?) requires implementation judgment based on the elevation level table.
• Footer architecture: The screenshot cuts off before any footer region. Footer background color (likely {colors.canvas} or darker), link organization, legal text styling, and newsletter signup patterns (if present) are undocumentable.
• Accessibility markup specifics: ARIA roles, focus management order, skip-navigation links, and screen-reader-only text patterns are invisible to CSS extraction. Implement semantic HTML and WCAG 2.1 AA compliance independently based on component function.