Dawn

Overview

Dawn is an evidence-based AI mental health companion that delivers 24/7 personalized emotional support through a warm, human-centered interface. The brand serves individuals seeking accessible, judgment-free mental health guidance, and embodies the aesthetic movement of "Warm Minimalism"—a design philosophy that combines clinical clarity with emotional approachability. The UI evokes a sense of calm reassurance: warm gradient backgrounds (cream #fbf3eb to golden #ffcb31 to burnt orange #ff9c31) create an inviting sanctuary, while clean typography and generous whitespace ensure information is never overwhelming. Users feel simultaneously held and empowered.

Dawn's voice is precise yet conversational, evidence-backed yet never clinical. The brand vocabulary emphasizes agency ("your support," "your mind"), immediacy ("24/7," "right when you need it"), and human connection ("created by renowned clinicians"). Tone is calm, never breathless; sentences are direct and warm. Example: "Your mind is always on. Your support should be, too."—a statement that acknowledges struggle while offering gentle, non-judgmental presence.

Colors

The color system centers on a warm, earthy palette that communicates safety and accessibility. Primary (#ffcb31, a soft golden yellow) is the signature accent used on all call-to-action buttons, interactive states, and key brand moments—it's approachable and energizing without being jarring. On-primary text (#321c04, a deep brown) ensures high contrast and readability. Secondary (#1082ec, a professional blue) supports trust and clinical credibility, used sparingly for secondary actions and informational elements. Tertiary (#face9f, a warm peachy tone) adds gentle warmth to supporting UI elements and containers.

The surface stack progresses from the warm cream base (#fbf3eb) through increasingly subtle container layers, allowing for visual hierarchy without harsh contrast. Surface-containe

Typography

The type system pairs Source Serif Pro for headlines and Figtree for body text, creating a sophisticated yet approachable voice. Serif headlines (display at 60px, headline-lg at 40px) convey authority and editorial warmth, while sans-serif body copy (body-md at 16px, body-lg at 18px) ensures clarity and modern accessibility. The weight hierarchy is restrained: headlines use regular weight (400) to avoid heaviness, while labels and buttons use 600 to signal interactivity. Letter-spacing is tight on headlines (-0.02em to -0.01em) to create intimacy, while body text remains neutral (0em) for readability. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm, 12px) when layered over gradient backgrounds to ensure legibility without sacrificing the warm aesthetic. Line heigh

Layout

The layout system uses a 12-column grid with a max-width of 1280px, allowing for flexible, responsive composition. The page rhythm is built on the spacing scale: lg (40px) separates major sections, md (24px) creates breathing room within components, and sm (12px) tightens internal element spacing. The hero section occupies full viewport height with a warm gradient background, establishing immediate emotional tone. Content containers use gutter spacing (24px) on mobile and tablet, expanding to lg (40px) on desktop. Whitespace is intentional and generous—the design avoids cramping, allowing the warm color palette and serif typography to breathe. The container-max (1280px) prevents line lengths from exceeding 80 characters on desktop, supporting readability of body text. Asymmetrical layouts

Elevation & Depth

Visual hierarchy is achieved through subtle layering and soft shadows rather than dramatic depth. Level 1 (Base) is the warm cream background (#fbf3eb), establishing the foundational emotional tone. Level 2 (Standard Cards) uses surface-container (#f3ebe1) with a soft shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to lift content slightly without creating visual separation. Level 3 (Elevated/Modals) uses surface-container-high (#ede5db) with a medium shadow (0 4px 12px rgba(0, 0, 0, 0.08)) for modals, overlays, and primary content containers. All shadows use warm-tinted blacks (rgba(50, 28, 4, 0.08) f

Shapes

The shape philosophy is "Warm Geometric Precision"—rounded corners are used strategically to soften the interface while maintaining clarity. Buttons use full rounding (border-radius: 9999px, or {rounded.full}) to create pill-shaped affordances that feel inviting and clickable. Cards and containers use lg rounding (1rem, or 16px) to balance softness with definition, preventing the interface from feeling overly bubbly. Input fields use DEFAULT rounding (0.5rem, or 8px) for a more grounded, functional appearance. The header uses 1600px border-radius (effectively full rounding on a narrow element)

Components

Action Elements Buttons are the primary interaction mechanism and use full rounding (border-radius: 9999px) with generous padding (16px vertical, 32px horizontal for primary; 8px vertical, 24px horizontal for secondary). Primary buttons (#ffcb31 background, #321c04 text) use label-md typography (14px, 600 weight) and transition to inverse-primary (#ff9c31) on hover with a 200ms ease-in-out timing. Secondary buttons are transparent with a 1px border in secondary color (#1082ec), transitioning to secondary-container (#d4e4f7) on hover. All buttons maintain a minimum height of 40px for touch accessibility and use font-weight: 500 for visual emphasis.

Containers & Surfaces Cards use surface-container (#f3ebe1) background with lg rounding (1rem) and md padding (24px). They cast a soft

Do's and Don'ts

**Do**

• Do use the primary color (#ffcb31) exclusively for call-to-action buttons and interactive focus states—it's the brand's signature accent and should never be diluted or overused.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to create emotional breathing room and reinforce the calm, non-clinical aesthetic.
• Do pair Source Serif Pro headlines with Figtree body text to balance authority with approachability—never reverse this pairing or use serif for body copy.
• Do apply warm-tinted shadows (using rgba(50, 28, 4, 0.08)) instead of pure black to maintain the warm palette even in depth and elevation.
• Do use full rounding (9999px) exclusively on buttons and interactive elements to signal affordance and invite engagement.

**Don't**

• Don't use secondary color (#1082ec) as a primary accent—it's a supporting trust color for secondary actions and informational elements only.
• Don't apply harsh shadows (box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3)) or high-contrast borders; the design relies on subtle, warm layering to convey hierarchy.
• Don't mix serif and sans-serif weights arbitrarily; maintain the established pairing (serif for headlines, sans for body) and use weight (400 for headlines, 600 for labels) to signal hierarchy.
• Don't use pure white (#ffffff) or pure black (#000000) as backgrounds or text colors—always use the warm surface stack (#fbf3eb, #f3ebe1, etc.) and on-surface color (#321c04) to maintain brand warmth.
• Don't exceed a 1280px container max-width or use line lengths longer than 80 characters, as this compromises readability and the intimate, human-centered aesthetic.