---
version: alpha
name: Hey Ato
description: Warm wellness minimalism — soft cream canvas, amber-gold accent, and a serif/sans pairing (IvyOra-style display serif over a humanist sans) that reads as calm, caring, and human. Generous rounding, beige hairline borders, and photography-led layouts for an AI health companion built for seniors.

colors:
  # Canvas + ink
  background: "#fffbf2"      # warm cream page canvas
  surface: "#ffffff"         # white cards
  surface-warm: "#fff4e3"    # soft amber-tinted surface
  surface-cream: "#fffdf5"   # near-white warm tint
  ink: "#1a1a1a"             # near-black warm text
  ink-soft: "#2a2a2a"        # secondary text
  ink-muted: "#6b6256"       # warm muted gray-brown

  # Accent — amber/gold brand
  primary: "#f59e0b"         # amber gold — primary accent
  amber-bright: "#ffc107"    # bright gold — highlights, icons
  amber-soft: "#fffbeb"      # palest amber wash

  # Warm neutrals / borders
  border: "#eadec5"          # beige hairline border
  border-soft: "#e6dcc8"     # softer beige divider

  # On-color
  on-primary: "#1a1a1a"      # dark ink on amber (amber too light for white)
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "IvyOra Display, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  display:
    fontFamily: "IvyOra Display, Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "IvyOra Display, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Delight, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Delight, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Delight, system-ui, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Delight, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Delight, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  caption:
    fontFamily: "Delight, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px

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

rounded:
  none: 0px
  sm: 4px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 48px
  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.amber-bright}"
    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}"
  badge:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    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.border-soft}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Hey Ato Design System

## Overview

Hey Ato is an AI health companion built for older adults, and its design system carries the warmth that mission demands. Where most AI products lean cool and technical — blues, blacks, sharp edges — Hey Ato does the opposite: a soft cream canvas (`{colors.background}`), an amber-gold accent (`{colors.primary}`), and a serif/sans type pairing that feels closer to a wellness brand or a friendly letter than a piece of software. The result is calm, human, and unintimidating, which is exactly right for an audience that distrusts cold technology.

The typographic move is the system's signature. Headlines are set in **IvyOra Display**, a high-contrast display serif with elegant, almost editorial proportions, while body and UI text use **Delight**, a soft humanist sans. The serif gives the brand its caring, premium, human voice; the sans keeps the reading experience clean and legible at the larger sizes seniors need. Type runs at relaxed line-heights (1.6 for body) and comfortable sizes, never cramped.

Color is warm throughout. The canvas is a cream off-white rather than pure white, surfaces tint toward amber (`{colors.surface-warm}`), and borders are beige hairlines (`{colors.border}`) rather than gray. The single accent is amber-gold — used for buttons, icons, and highlights. Because amber is too light to carry white text accessibly, primary buttons use dark ink (`{colors.on-primary}`) on the amber fill, a deliberate contrast-safe choice. Shapes are generously rounded (pill buttons, 24px cards), reinforcing the soft, approachable feel.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`), not pure white — softness as a brand value
- Amber-gold accent (`{colors.primary}`) as the single, consistent brand color
- Display serif (IvyOra-style) for headlines + humanist sans (Delight) for body — caring + legible
- Dark ink on amber buttons (amber is too light for white text) — contrast-safe by design
- Beige hairline borders (`{colors.border}`), never cold gray
- Generous rounding: pill buttons, 24px cards — approachable, never sharp
- Relaxed type sizing and line-height for an older audience
- Photography-led, testimonial-rich layouts

## Colors

### Canvas & Ink
- **Cream Background** (`{colors.background}`): The warm off-white page canvas.
- **White Surface** (`{colors.surface}`): Card backgrounds for content that needs to lift off the cream.
- **Warm Surface** (`{colors.surface-warm}`): Amber-tinted surface for feature panels and badges.
- **Cream Surface** (`{colors.surface-cream}`): Near-white warm tint for subtle layering.
- **Ink** (`{colors.ink}`): Near-black warm text for headings and body.
- **Ink Soft** (`{colors.ink-soft}`): Secondary text.
- **Ink Muted** (`{colors.ink-muted}`): Warm gray-brown for captions and metadata.

### Accent
- **Amber Gold** (`{colors.primary}`): The primary brand accent — buttons, links, icons.
- **Bright Gold** (`{colors.amber-bright}`): Brighter highlight, icon fills, hover state.
- **Amber Wash** (`{colors.amber-soft}`): Palest amber tint for backgrounds.

### Warm Neutrals
- **Border** (`{colors.border}`): Beige hairline borders on cards, inputs, and dividers.
- **Border Soft** (`{colors.border-soft}`): Softer beige for inner dividers.

### On-Color
- **On Primary** (`{colors.on-primary}`): Dark ink used on amber fills — amber is too light for white text.
- **On Ink** (`{colors.on-ink}`): White text on dark fills.

## Typography

### Font Family
- **Display / Headings**: `IvyOra Display`, with fallbacks: `Georgia, serif` — a high-contrast editorial serif.
- **Body / UI**: `Delight`, with fallbacks: `system-ui, sans-serif` — a soft humanist sans.
- The serif carries the warm, premium, human voice; the sans handles all reading and interface text.

### 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 serif hero — billboard impact, warm and editorial |
| `display` | Large serif statements |
| `section-heading` | Serif section titles |
| `card-title` | Sans card headings (600) |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text — generous 17px |
| `body-medium` | Navigation, emphasized UI text |
| `button-ui` | Buttons, CTAs |
| `caption` | Metadata, badges, labels |

### Principles
- **Serif for voice, sans for reading**: Headlines in IvyOra Display give the brand its caring, human character; everything readable is Delight sans.
- **Comfortable sizing**: Body runs at 17px+ with 1.6 line-height — generous for an older audience.
- **Restrained weights**: Sans uses 400 (body), 500 (UI), 600 (titles/buttons); the serif stays at 400, letting size and contrast do the work.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with generous large steps (`{spacing.3xl}`, `{spacing.4xl}`) for breathing room between sections.

### Grid & Container
- Centered single-column heroes with large serif headlines
- Photography-led sections — lifestyle imagery of seniors
- Testimonial carousels with rounded profile images
- Trust row of certification badges (SOC 2, HIPAA, ISO 27001)

### Whitespace Philosophy
- **Warm calm**: Generous vertical spacing and cream canvas create an unhurried, reassuring rhythm.
- **Soft separation**: Sections separate via warm surface tints and beige borders, not hard lines.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 4px | Small inline elements |
| `md` | 12px | Inputs, small containers |
| `lg` | 16px | Standard cards |
| `xl` | 24px | Feature cards, panels |
| `2xl` | 48px | Large rounded containers |
| `pill` | 9999px | Buttons, badges, avatars |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Amber-gold fill with dark ink text, full pill radius. The default CTA.
- **`button-secondary`** — White surface with beige border, dark text, pill radius.

### Pills & Badges
- **`badge`** — Warm amber-tinted surface, muted ink text, full pill.

### Cards
- **`card`** — White surface, beige hairline border, 24px radius, generous padding.
- **`card-warm`** — Amber-tinted surface variant for highlighted features.

### Inputs
- **`input`** — White surface, beige border, 12px radius.

### Navigation
- **`nav-bar`** — Cream background, Delight 16px medium links, beige bottom border, amber pill CTA.

## Do's and Don'ts

### Do
- Use the cream canvas (`{colors.background}`), never pure white — warmth is the brand
- Pair IvyOra-style display serif headlines with Delight sans body
- Put dark ink on amber buttons — amber is too light for accessible white text
- Use beige hairline borders (`{colors.border}`), not cold gray
- Round generously — pill buttons, 24px cards
- Size body type generously (17px+) for an older audience

### Don't
- Don't use cool blues or blacks for chrome — this is a warm system
- Don't put white text on the amber accent — it fails contrast
- Don't use sharp corners or tight spacing — softness and calm are the point
- Don't set the serif in heavy weights — keep it at 400 and let contrast carry it
- Don't crowd sections — generous whitespace is part of the reassurance

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked, app-store badges |
| Tablet | 600–1024px | 2-column feature grids |
| Desktop | >1024px | Full layout, side-by-side photography + copy |

### Collapsing Strategy
- Hero serif scales 56px → ~36px, maintaining warm proportions
- Navigation collapses to a menu; amber CTA persists
- Feature cards: multi-column → single column
- Testimonial carousel: shows one card at a time on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Amber Gold `{colors.primary}` with dark ink `{colors.on-primary}`
- Background: Cream `{colors.background}`
- Heading text: Ink `{colors.ink}` in IvyOra Display serif
- Body text: Ink `{colors.ink}` in Delight sans
- Border: Beige `{colors.border}`

### Example Component Prompts
- "Create a hero on cream `{colors.background}`. Headline 56px IvyOra Display serif weight 400, color `{colors.ink}`. Subtitle 20px Delight sans `{colors.ink-soft}`. Amber pill CTA: `{colors.primary}` fill, dark `{colors.on-primary}` text, 9999px radius, 14px 28px padding."
- "Design a card: white `{colors.surface}`, 1px `{colors.border}` border, 24px radius, 28px padding. Title 22px Delight weight 600. Body 17px Delight `{colors.ink}`."
- "Build a warm badge: `{colors.surface-warm}` background, `{colors.ink-muted}` text, 9999px radius, 6px 14px padding, 13px Delight weight 500."

---

## 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 Hey Ato. Brand names and trademarks belong to their respective owners.