---
version: alpha
name: Dawn
description: Warm emotional minimalism — a cream canvas washed in sunrise peach and amber, soft geometric sans headlines, generous rounding, and glowing circular motifs that make an AI mental-health companion feel calm, safe, and human.

colors:
  # Canvas + ink
  background: "#fdf8f3"
  surface: "#ffffff"
  surface-warm: "#fbeee3"
  ink: "#241c17"
  ink-secondary: "#6b5f55"
  ink-muted: "#9a8d80"

  # Brand — sunrise warmth
  primary: "#ef6a3d"
  primary-hover: "#d9582e"
  amber: "#f4a259"
  peach: "#fbd0b5"
  glow: "#fce3cf"

  # Borders + lines
  border: "#ece0d4"
  border-strong: "#dccab9"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#fdf8f3"

  # Functional tint
  surface-soft: "#f7efe6"

typography:
  display-hero:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.0px
  sub-heading:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px
  caption:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 112px

rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 28px
  2xl: 40px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 28px
    borderColor: "{colors.border}"
  card-warm:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 28px
    borderColor: "{colors.peach}"
  testimonial-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 14px 20px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
  pill-tag:
    backgroundColor: "{colors.glow}"
    textColor: "{colors.primary-hover}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 16px
---

# Dawn Design System

## Overview

Dawn is an AI mental-health companion, and its website is built to feel like the moment its name describes — first light, warmth returning, the day still soft. The entire system rests on a cream canvas (`{colors.background}`) rather than clinical white, immediately signaling that this is a place for feeling rather than transacting. Warm peach, amber, and a confident sunrise orange (`{colors.primary}`) wash through the page in gradient halos and glowing circular motifs, while the ink (`{colors.ink}`) is a dark warm brown instead of cold charcoal. Nothing here is sharp or corporate; every surface is rounded, every transition gentle.

Typography carries the calm. Headlines use a soft geometric sans (Poppins-class) at large sizes with mild negative tracking — enough to feel modern and intentional without the aggressive compression of a developer brand. The voice is conversational and reassuring ("Your mind is always on"), so the type stays open and readable, with generous line-height that lets the copy breathe. There is no monospace voice; Dawn is emotional, not technical.

The signature move is light itself. Circular SVG motifs (`circle-1` through `circle-9`), glowing halo effects around portraits, and warm sunlight gradients recur throughout, turning the page into a visual metaphor for emotional warmth and safety. Cards and pills lean on heavy rounding (`{rounded.xl}`, `{rounded.pill}`) and soft warm borders rather than hard shadows. Color is used to comfort, not to alarm — the orange appears on CTAs and accents, never as a warning.

**Key Characteristics:**
- Cream canvas (`{colors.background}`) instead of clinical white — warmth as a baseline
- Sunrise palette: peach, amber, and a confident orange primary (`{colors.primary}`)
- Warm brown ink (`{colors.ink}`) rather than cold black — softer contrast
- Soft geometric sans (Poppins-class) with mild negative tracking on headlines
- Heavy, friendly rounding everywhere — pill buttons, `{rounded.xl}` cards
- Glowing circular motifs and halo gradients as recurring emotional cues
- No monospace, no hard chrome — the system reads human, not technical

## Colors

### Canvas & Ink
- **Cream Canvas** (`{colors.background}`): The warm off-white page background.
- **Surface White** (`{colors.surface}`): Card and input surfaces that lift slightly off the cream.
- **Warm Surface** (`{colors.surface-warm}`): Peachy tinted panels and badge backgrounds.
- **Warm Ink** (`{colors.ink}`): Primary text — a dark warm brown, never cold black.
- **Secondary Ink** (`{colors.ink-secondary}`): Body and supporting copy.
- **Muted Ink** (`{colors.ink-muted}`): Captions, placeholder text, metadata.

### Brand — Sunrise Warmth
- **Dawn Orange** (`{colors.primary}`): Primary CTAs, key accents, links.
- **Orange Hover** (`{colors.primary-hover}`): Pressed/hover state of the primary.
- **Amber** (`{colors.amber}`): Gradient mid-tone, secondary accent glow.
- **Peach** (`{colors.peach}`): Soft accent borders, gradient highlights.
- **Glow** (`{colors.glow}`): The palest warm tint for halo washes and tags.

### Borders & Lines
- **Border** (`{colors.border}`): Default hairline on cards and dividers.
- **Border Strong** (`{colors.border-strong}`): Input outlines, secondary button edges.

## Typography

### Font Family
- **Primary**: `Poppins`, with fallbacks `Arial, sans-serif` — a soft geometric sans standing in for Dawn's friendly headline face.
- **No monospace voice**: Dawn is an emotional product; technical type would break the calm.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 56px hero — warm, confident, mild negative tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, feature intros |
| `card-title` | Card and feature headings |
| `body-large` | Lead paragraphs, hero subtitles |
| `body` | Standard reading text |
| `body-small` | Supporting UI text |
| `button-ui` | Buttons and nav links |
| `eyebrow` | Uppercase tracked labels, badges |
| `caption` | Metadata, tags, fine print |

### Principles
- **Open and reassuring**: Generous line-height (1.6) on body keeps copy calm and readable.
- **Mild compression on display only**: Negative tracking stays gentle (-1.6px at hero) — modern, never urgent.
- **Two weights, soft roles**: 400 for reading, 500–600 for headings and interactive emphasis. No heavy 700 chrome.
- **Tracked eyebrows**: Small labels use positive letter-spacing (1.2px) for a quiet, editorial cadence.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large jumps to `{spacing.3xl}` and `{spacing.4xl}` for the airy vertical breathing room between sections.

### Grid & Container
- Max content width approximately 1140px, centered
- Hero: centered single column over a warm halo gradient
- Feature and testimonial sections: 2–3 column grids that collapse to single column on mobile
- Continuous testimonial narrative blocks rather than rigid cards

### Whitespace Philosophy
- **Calm emptiness**: Large vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) gives the page room to breathe — quiet, unhurried.
- **Warmth fills the gaps**: Where Vercel-style systems use pure white space, Dawn lets soft gradient glows occupy negative space.
- **Soft separation**: Sections divide via warm hairlines (`{colors.border}`) and color washes, not hard rules.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow on cream | Page background, text blocks |
| Hairline | 1px `{colors.border}` | Default cards, dividers |
| Soft Lift | Diffuse warm shadow (low opacity) | Surface cards on cream |
| Glow | Radial peach/amber halo | Hero, portraits, decorative circles |

**Shadow Philosophy**: Dawn avoids hard, cool shadows. Depth comes from a white surface lifting gently off the cream canvas plus soft warm-tinted diffuse shadows. The real depth cue is light — radial glows (`{colors.glow}`, `{colors.peach}`) that feel like sunrise rather than elevation.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small inline containers |
| `md` | 14px | Inputs, compact elements |
| `lg` | 20px | Testimonial cards |
| `xl` | 28px | Standard feature cards |
| `2xl` | 40px | Large panels, image frames |
| `pill` | 9999px | Buttons, badges, tags, inputs |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Dawn Orange fill, white text, full pill. The repeated "Get early access" CTA.
- **`button-secondary`** — White surface with a warm strong border, pill shape.

### Pills & Badges
- **`badge`** — Warm peach surface, orange eyebrow text, full pill.
- **`pill-tag`** — Palest glow background, deep-orange text — used for the Pills/Wait/Talk cycling motif.

### Cards
- **`card`** — White surface on cream, heavy `{rounded.xl}` rounding, hairline border.
- **`card-warm`** — Peach-tinted surface for emphasis blocks.
- **`testimonial-card`** — Softer card for continuous social-proof narrative.

### Inputs
- **`input`** — Pill-shaped white field with a warm strong border; focus shifts the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Cream sticky header, warm ink links, orange pill CTA right-aligned.

### Distinctive Components
- **Circular Glow Motifs**: Rotating circular SVGs and radial peach/amber halos as the core decorative system.
- **Pills / Wait / Talk Cycle**: A cycling pill-tag pattern visualizing the mental-health journey.
- **Halo Portraits**: Clinician and user portraits framed in warm sunlight glow effects.

## Do's and Don'ts

### Do
- Build on the cream canvas (`{colors.background}`), not pure white
- Use warm brown ink (`{colors.ink}`) for text — never cold black
- Reserve Dawn Orange (`{colors.primary}`) for CTAs and accents
- Lean on heavy rounding — pills for actions, `{rounded.xl}` for cards
- Let soft glows and circular motifs fill negative space
- Keep type open and calm with generous line-height

### Don't
- Don't introduce cold grays or clinical white into chrome
- Don't use hard, dark, cool shadows
- Don't use orange as a warning — it's the brand's warmth
- Don't tighten body line-height — the calm depends on the air
- Don't add a monospace/technical voice
- Don't use sharp corners on interactive elements

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked CTAs, reduced section padding |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1140px | Full multi-column layout |
| Large | >1140px | Centered, generous warm margins |

### Touch Targets
- Pill buttons use comfortable 14px vertical padding
- Nav links and CTAs sized for thumb taps
- Tags retain generous horizontal padding

### Collapsing Strategy
- Hero: 56px display scales down, halo gradient simplifies
- Feature/testimonial grids: 3 → 2 → 1 column
- Navigation: links collapse to a menu, CTA persists
- Section spacing: `{spacing.4xl}` relaxes toward `{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Dawn Orange `{colors.primary}`
- Background: Cream `{colors.background}`
- Heading text: Warm ink `{colors.ink}`
- Body text: Secondary ink `{colors.ink-secondary}`
- Border: `{colors.border}`
- Accent glow: `{colors.glow}` / `{colors.peach}`

### Example Component Prompts
- "Create a hero on a cream `{colors.background}` with a soft peach radial glow. Headline at 56px Poppins weight 600, letter-spacing -1.6px, color `{colors.ink}`. Subtitle at 20px weight 400, `{colors.ink-secondary}`. Orange pill CTA (`{colors.primary}`, 9999px radius, 14px 28px padding) reading 'Get early access'."
- "Design a card: white `{colors.surface}` on cream, `{rounded.xl}` (28px) corners, 1px `{colors.border}`, 28px padding. Title 22px Poppins weight 600, body 17px weight 400 in `{colors.ink-secondary}`."
- "Build a pill tag: `{colors.glow}` background, `{colors.primary-hover}` text, full pill, 6px 16px padding, 13px Poppins."

### Iteration Guide
1. Cream over white, warm brown over black — never go cold
2. Orange is warmth, never a warning; keep it on CTAs and accents
3. Heavy rounding is identity — pills for actions, 28px+ for cards
4. Fill empty space with glow, not shadow
5. Keep type open and reassuring — line-height 1.6 on body

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Dawn. Brand names and trademarks belong to their respective owners.