---
version: alpha
name: Sunsama
description: A calm daily-planning canvas where a warm amber-to-coral gradient is the singular brand pulse, DM Sans carries every word in a clean sans stack, and generously rounded pill forms wrapped in feather-soft shadows invite reflection over urgency.

colors:
  # Surface / canvas
  background: "#ffffff"          # white page base
  surface: "#ffffff"             # cards, panels
  surface-peach: "#fff7f1"       # warm peach tint on feature panels (was rgba(255,137,28,0.06) — Google format requires hex)
  surface-muted: "#f2f2f2"       # quiet gray for alternating sections
  surface-blue: "#ebeff7"        # cool-tinted price/feature table rows

  # Ink / text — near-black
  ink: "#202228"                 # primary headings and body — the dominant dark
  ink-secondary: "#4c4f56"       # supporting paragraph copy
  ink-muted: "#333333"           # caption-level and link default

  # Brand accent — the amber-to-coral gradient range
  primary: "#ff891c"             # --ss-orange; the amber anchor; CTAs, links, highlights
  primary-hover: "#d97418"       # deepened amber on hover (was rgb(224,119,21) — Google format requires hex)
  primary-coral: "#f06351"       # coral end of the gradient
  on-primary: "#202228"          # dark text on amber fill (brand uses near-black, not white)
  primary-container: "#fff7f1"   # tinted warm background behind outlined badges

  # Gradient stops (used in the signature brand gradient)
  gradient-start: "#ff891c"      # amber start (left/top)
  gradient-end: "#f06351"        # coral end (right/bottom)

  # Semantic
  success: "#4ddb59"             # green checkmark (from border data rgb(77,219,89))
  info: "#519bf0"                # blue informational (from border data rgb(81,155,240))

  # Borders
  border: "#ebeff7"              # hairline cool-tinted divider (high confidence)
  border-muted: "#f2f2f2"        # quiet gray hairline
  border-accent: "#f59549"       # warm amber outline on badge/badge-container

  # Focus
  focus-ring: "#3898ec"          # blue focus ring on inputs (from input focus-state data)

  # Shadow tints (opaque approximations)
  shadow-soft: "#3d4753"         # was rgba(61,71,83,0.05–0.08) — Google format requires hex

typography:
  display-hero:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.16
    letterSpacing: -0.56px
  display:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.16
    letterSpacing: -0.48px
  heading-section:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.44px
  heading-sub:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.36
    letterSpacing: -0.24px
  body-large:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.48
    letterSpacing: -0.24px
  body:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.48
    letterSpacing: -0.18px
  body-small:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.16px
  button-ui:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.14px
  caption:
    fontFamily: "DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.12px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 56px
  4xl: 96px
  5xl: 120px

rounded:
  sm: 10px
  md: 14px
  lg: 20px
  xl: 30px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 10px 22px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-outlined:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 10px 22px
    border: "3px solid {colors.primary}"
  button-outlined-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 10px 22px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-small}"
    rounded: "{rounded.xl}"
    padding: 8px 12px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.focus-ring}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
    border: "1px solid {colors.primary-coral}"
  badge-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 4px 8px
    border: "1px solid {colors.border-accent}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 32px

  link:
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary}"
---

# Sunsama Design System

## Overview

Sunsama's visual language is built around one principle: calming the chaos of modern work. Where most productivity tools blast primary colors and urgent CTAs, Sunsama opens on a white canvas and lets a warm amber-to-coral gradient do all the emotive lifting. The signature gradient — `{colors.gradient-start}` bleeding into `{colors.gradient-end}` — appears as glowing backgrounds, button fills, and inline text highlights, but it never crowds. Between those warm moments the page breathes: wide white sections, near-black `{colors.ink}` headings set in DM Sans, and the kind of quiet top-of-page copy ("Start your Day") that sounds like an invitation rather than a conversion pitch.

DM Sans carries the entire type hierarchy. A single geometric sans family with negative tracking from -0.56px at hero scale down to -0.14px at label size gives every headline a compact, intentional energy without sacrificing warmth. The font choice is approachable rather than corporate — round apertures and a friendly x-height match the product's focus on psychological safety over aggressive performance metrics. At 56px semibold the hero headline is substantial; at 400 weight in body copy, DM Sans opens up to a comfortable 1.48 line height that asks you to slow down.

The geometry is soft and considered. Buttons, badges, and key interactive elements reach for near-pill radii (`{rounded.xl}` at 30px, `{rounded.pill}` for badges) — a vocabulary of rounded forms that communicates approachability and an absence of hard deadlines. Shadows are a single feather-light layer from `{colors.shadow-soft}`: a hairline 1px rise, a 2px spread, a 4px diffuse — barely enough to lift a card off the page. The effect is a planning tool that looks like it could actually slow your heart rate: amber warmth when you need action, white space when you need rest.

**Key Characteristics:**
- White canvas punctuated by a warm amber-to-coral gradient (`{colors.gradient-start}` → `{colors.gradient-end}`) as the singular brand pulse
- Near-black dark ink (`{colors.ink}`, a slightly blue-shifted `#202228`) for headings and body — never pure black
- A single accent gradient used in button fills, inline text highlights, and hero glows — not scattered decoration
- **DM Sans** throughout, 400–600 weight range, consistently negative letter-spacing for quiet authority
- Pill-adjacent radii (`{rounded.xl}` 30px on buttons, `{rounded.pill}` on badges) — soft and inviting
- Feather-soft single-layer shadows (`{colors.shadow-soft}`) — minimal depth, zero drama
- Orange CSS variable (`--ss-orange`) exposed site-wide — brand color is a first-class design token
- Secondary actions use outlined or ghost button styles rather than a competing fill color
- Feature panels sit on a warm peach tint (`{colors.surface-peach}`) that echoes the gradient's amber start
- Minimal motion: 0.2s ease on background-color transitions only — calm over flash
- Inconsolata loaded from Google Fonts (monospace fallback in the typography stack)
- PrimeReact component foundation beneath a custom brand layer

## Colors

### Surface & Canvas
- **White** (`{colors.background}` / `{colors.surface}`): The base page canvas and all card fills. Stays clean.
- **Peach Tint** (`{colors.surface-peach}`): Warm feature panel background; echoes the gradient's amber. Flattened from a 6% amber overlay.
- **Quiet Gray** (`{colors.surface-muted}`): Alternating section fills that rest the eye between feature content.
- **Cool Blue-Gray** (`{colors.surface-blue}`): Price and feature table row headers — the one cool counterpoint to the warm accents.

### Brand Accent — The Gradient Range
- **Amber** (`{colors.primary}`, `--ss-orange`): The anchor CTA color. Button fills, inline text highlights, hover links.
- **Amber Hover** (`{colors.primary-hover}`): Deepened amber on hover; 0.2s ease transition.
- **Coral** (`{colors.primary-coral}`): The gradient's warm endpoint; also used as a standalone badge border and the occasional standalone CTA.
- **Peach Container** (`{colors.primary-container}`): The tinted fill behind filled badges — soft, legible on amber borders.

### Ink / Text
- **Near-Black** (`{colors.ink}`): The dominant heading and body color — a slightly blue-shifted `#202228`.
- **Mid-Gray** (`{colors.ink-secondary}`): Supporting paragraph copy, testimonial attribution.
- **Dim** (`{colors.ink-muted}`): Link defaults, captions, placeholder text.

### Semantic
- **Success Green** (`{colors.success}`): Checkmarks on the "Sunsama turns chaos into clarity" panel.
- **Info Blue** (`{colors.info}`): Informational accents and the input focus-ring's paired context color.

### Borders & Focus
- **Cool Hairline** (`{colors.border}`): The primary structural divider — a cool blue-gray, contrasting gently with the warm accents.
- **Muted Hairline** (`{colors.border-muted}`): Softer gray dividers between sections.
- **Accent Border** (`{colors.border-accent}`): Warm amber outline on the outline-style badge.
- **Focus Ring** (`{colors.focus-ring}`): Blue focus ring on form inputs, keeping focus visually distinct from the warm brand.

### Shadow Tints
- **Soft Shadow** (`{colors.shadow-soft}`): Opaque approximation of the `rgba(61,71,83,0.05–0.08)` feather-light shadow used on all cards.

## Typography

### Font Family
- **Primary**: `DM Sans` — a geometric sans with friendly round apertures, loaded from Google Fonts. Full fallback stack: `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`.
- **Monospace**: `Inconsolata` — loaded via Google Fonts (present in the page's font sources); used sparingly for code-adjacent UI elements.
- **Letter-spacing discipline**: every size from 56px display down to 14px label carries a proportional negative offset (-0.56px to -0.14px), giving the wordmark its compact, purposeful quality. Body text at 16px and button labels are the only spots where tracking relaxes to 0.

### Hierarchy

The full type scale is declared in the `typography:` token block. Reference tokens directly rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | 56px / 600 / -0.56px — the page marquee headline |
| `display` | 48px / 600 — major section headlines |
| `heading-section` | 44px / 600 — feature section openers |
| `heading-sub` | 24px / 600 — sub-section and card titles |
| `body-large` | 24px / 400 — lead paragraph copy beneath hero |
| `body` | 18px / 400 — standard flowing body |
| `body-small` | 16px / 400 — dense feature copy, input text |
| `nav-link` | 16px / 500 — navigation labels |
| `button-ui` | 16px / 400 — button and CTA labels |
| `label` | 14px / 500 — price table labels, UI chips |
| `caption` | 12px / 400 — fine-print, metadata |

### Principles
- **One family, one weight range**: DM Sans from 400 to 600 does everything. No condensed, no italic drama.
- **Negative tracking is a signature**: the consistent proportional negative letter-spacing gives every heading a composed, professional presence without resorting to a heavy weight.
- **Body stays open**: 18px at 1.48 line height in `{typography.body}` — generous enough to encourage reading rather than scanning.
- **Semibold is the ceiling**: 600 is the loudest the system goes. No 700 or 800 weights — calm authority, not assertion.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Sunsama's spacing personality is generous at the macro scale and tidy at the component level: hero and section gaps reach 96-120px (`{spacing.4xl}`–`{spacing.5xl}`), card interiors stay at 16-24px (`{spacing.md}`–`{spacing.lg}`), and the rhythm creates deliberate pauses between content zones.

### Grid & Container
- Max content width approx. 1280px, centered; the hero spans wider with a gradient background bleed
- Feature sections use 2-column layouts (problem/solution panels, feature cards)
- Price table runs a structured grid with alternating cool-tinted header rows (`{colors.surface-blue}`)
- Breakpoints: 479px / 767px / 768px / 991px / 1280px / 1440px — a six-step responsive ladder

### Whitespace Philosophy
- **Breathing sections**: 96-120px vertical gaps between major sections create the sense of a daily planner's page rather than a scroll-trap landing page
- **Warm panels as zoning**: the peach-tinted feature panel (`{colors.surface-peach}`) groups content without hard borders
- **Left-right breathing**: generous horizontal padding in cards and panels — content never crowds the edge

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.border}` hairline only | Most page sections, price rows |
| Subtle (Level 1) | `rgba(61,71,83,0.05) 0 0 0 0, rgba(61,71,83,0.05) 0 1px 0, rgba(61,71,83,0.08) 0 2px 4px` | Resting cards — the dominant card shadow |
| Ambient (Level 2) | `rgba(44,48,52,0.05) 0 3px 10px` | Occasional feature panels, testimonial cards |
| Focus Ring | `0 0 0 3px {colors.focus-ring}` tint | Focused form controls |

**Shadow Philosophy**: Sunsama's elevation vocabulary is intentionally minimal. A single, barely-there three-part shadow — a hairline rise, a 1px step, a 4px soft diffuse — is the only shadow on 95% of surfaces. There is no heavy drop, no tinted gradient shadow, no dramatic lift. The restraint reinforces the product's calm tone: surfaces feel placed rather than floating, grounded rather than urgent.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 10px | Image containers, small thumbnails |
| `md` | 14px | Feature cards, testimonial panels |
| `lg` | 20px | Larger image frames, floating panels |
| `xl` | 30px | Primary and secondary buttons — the signature pill-adjacent form |
| `pill` | 9999px | Badges, tags, section chips |

Sunsama's radius vocabulary skews strongly toward round. The button's 30px corner (`{rounded.xl}`) is the dominant interactive signature — substantially rounder than the typical tech 6-8px, in line with the brand's "daily planner, not command center" tone. Badges extend that logic all the way to pill. The only hard(er) corners are image frames, which hold 10-14px for a softer photo presentation without losing structure.

## Components

The full component spec lives in the `components:` token block. Reference component tokens directly.

### Button Variants
- **`button-primary`** — Amber fill (`{colors.primary}`), near-black text (`{colors.on-primary}`), 30px radius (`{rounded.xl}`), `10px 22px` padding. The "Start for Free" CTA. Hover transitions to `{colors.primary-hover}` at 0.2s ease.
- **`button-outlined`** — White fill, amber 3px border (`{colors.primary}`), same radius. Used for secondary actions like "View integration." Hover tints the fill to `{colors.primary-container}`.
- **`button-ghost`** — White fill, no border, near-black text. Lowest-emphasis action (inline "Read the review" style).

### Cards
- **`card`** — White surface (`{colors.surface}`), 14px radius (`{rounded.md}`), 24px padding, feather-light shadow from `{colors.shadow-soft}`.
- **`card-elevated`** — Same but 20px radius (`{rounded.lg}`) for the prominent testimonial and pricing panels.

### Inputs
- **`input`** — Transparent-over-white fill, near-black text, 20px radius, 8px 12px padding. **`input-focus`** swaps the border to `{colors.focus-ring}` blue — intentionally distinct from the amber brand to signal system control.

### Badges / Tags
- **`badge`** — Warm peach fill (`{colors.primary-container}`) with coral border (`{colors.primary-coral}`), pill radius. The primary section chip ("Features", "Pricing").
- **`badge-outline`** — Transparent fill with amber border (`{colors.border-accent}`), pill radius. Used as inline content tags.

### Navigation
- **`nav-bar`** — White background, near-black labels in `{typography.nav-link}` (500 weight). Logo sits left; CTA button sits right in amber fill.

### Links
- **`link`** — Default dim `{colors.ink-muted}` text, no underline. **`link-hover`** shifts to amber (`{colors.primary}`) via 0.2s ease on background-color/color — the `--ss-orange` variable is the hover destination.

## Do's and Don'ts

### Do
- Use the amber-to-coral gradient (`{colors.gradient-start}` → `{colors.gradient-end}`) for hero glows, primary CTA fills, and inline text highlights — it is the brand's single emotive tool
- Keep buttons at 30px radius (`{rounded.xl}`) or higher — the pill-adjacent form is the signature interactive shape
- Apply the warm peach tint (`{colors.surface-peach}`) to feature panels that need ambient warmth without a full gradient
- Set headings in DM Sans at 600 weight with proportional negative tracking (-0.5px at 48-56px, scaling down)
- Keep shadows to the single feather-light card shadow pattern — no dramatic drops, no brand-tinted glows
- Use `{colors.focus-ring}` blue for input focus states — keeps focus distinct from the warm brand palette
- Ensure the amber CTA (`{colors.primary}`) appears no more than twice per section — scarcity preserves its warmth
- Maintain 96-120px (`{spacing.4xl}`–`{spacing.5xl}`) vertical rhythm between major sections

### Don't
- Don't use raw hex or `rgb()` values for the brand orange — always reference `--ss-orange` / `{colors.primary}` so the system stays in sync
- Don't introduce a competing fill color for CTAs — secondary buttons are outlined or ghost, never a second saturated fill
- Don't sharpen corners below 10px (`{rounded.sm}`) on interactive elements — the rounded vocabulary is what separates Sunsama from productivity tools that feel urgent
- Don't add heavy or brand-tinted shadows — the feather-light single-layer shadow is deliberate; violating it reads as urgency
- Don't use 700+ font weights — 600 semibold is the ceiling; DM Sans at 700 breaks the calm authority the system depends on
- Don't introduce a dark mode surface without auditing every amber/coral token for contrast — the current palette is optimized for light backgrounds
- Don't place the gradient behind large text blocks — it is a background glow and a highlight, not a text-over treatment
- Don't use the success green (`{colors.success}`) or info blue (`{colors.info}`) for decorative purposes — reserve them strictly for status communication

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <479px | Single column; hero type scales 56px → ~28px; CTA goes full-width |
| Mobile | 479–767px | Single column; horizontal nav collapses to hamburger; amber CTA persists |
| Tablet | 768–991px | Two-column feature panels begin; gradient hero narrows |
| Desktop | 992–1280px | Full layout; gradient bleed and side-by-side problem/solution panels |
| Large Desktop | >1280px | Centered max-width container; spacing opens to `{spacing.5xl}` between sections |

### Touch Targets
- Primary buttons at `10px 22px` padding with 30px radius meet comfortable minimum heights for thumb targets on mobile
- Badge chips and nav links maintain minimum tap heights via generous horizontal padding

### Collapsing Strategy
- **Navigation**: horizontal pill-style nav → hamburger or drawer at 991px; the amber "Start for Free" button persists and may go full-width on mobile
- **Hero**: the gradient glow background extends full-width on mobile; copy and product panel stack vertically
- **Feature panels**: the side-by-side problem/solution layout (two columns) collapses to a single stacked column below 768px
- **Price table**: horizontal comparison grid collapses to a single-plan card view on mobile
- **Type**: hero scales from 56px toward 28-32px; negative tracking scales proportionally

### Image Behavior
- Product screenshots and app UI panels stay inside their soft-rounded frames (`{rounded.lg}`) and become full-width below tablet breakpoint
- The radial peach gradient backgrounds on feature panels collapse gracefully to a flat `{colors.surface-peach}` fill on small screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand accent: Amber (`{colors.primary}`) → Coral (`{colors.primary-coral}`) gradient
- Secondary text: Mid-Gray (`{colors.ink-secondary}`)
- Panel tint: Peach (`{colors.surface-peach}`)
- Border: Cool Hairline (`{colors.border}`)
- Primary CTA: Amber (`{colors.primary}`) fill with 30px radius

### Example Component Prompts

- "Build a hero section on white (`{colors.background}`) with a soft radial amber glow (`{colors.primary}` at low opacity) in the upper-right corner. Use a 56px DM Sans headline at weight 600, letter-spacing -0.56px, in near-black (`{colors.ink}`). Highlight a key phrase with the amber-to-coral gradient (`{colors.gradient-start}` → `{colors.gradient-end}`). Place a single CTA button: amber fill (`{colors.primary}`), near-black text, `{rounded.xl}` 30px radius, `10px 22px` padding."
- "Create a primary button: amber fill (`{colors.primary}`), near-black label (`{colors.on-primary}`), DM Sans 400 16px, `{rounded.xl}` 30px radius, `10px 22px` padding. On hover, transition background to `{colors.primary-hover}` over 0.2s ease."
- "Make an outlined secondary button: white fill, 3px amber border (`{colors.primary}`), near-black text (`{colors.ink}`), same `{rounded.xl}` 30px radius. On hover, tint the fill to `{colors.primary-container}`."
- "Design a feature card: white surface (`{colors.surface}`), `{rounded.md}` 14px radius, 24px padding, feather-light shadow (`rgba(61,71,83,0.05) 0 0 0 0, rgba(61,71,83,0.05) 0 1px 0, rgba(61,71,83,0.08) 0 2px 4px`). Heading in DM Sans 600 24px / -0.24px tracking in `{colors.ink}`; body in 18px / 400 in `{colors.ink-secondary}`."
- "Create a section chip / badge: warm peach fill (`{colors.primary-container}`), coral border (`{colors.primary-coral}` 1px), near-black text (`{colors.ink}`), DM Sans 16px / 400, `{rounded.pill}` radius, `8px 16px` padding. Use for section labels like 'Features' or 'Pricing'."
- "Render a pricing table row header: cool blue-gray fill (`{colors.surface-blue}`), near-black text (`{colors.ink}`), DM Sans 14px / 500 (`{typography.label}`). Alternating rows use `{colors.surface}` white. Bottom borders use `{colors.border-muted}`."

### Iteration Guide

1. Start with white (`{colors.background}`) as the full-page canvas. Add warmth selectively: use `{colors.surface-peach}` for a feature panel, not the whole page.
2. The amber-to-coral gradient (`{colors.gradient-start}` → `{colors.gradient-end}`) is the brand's single emotive tool. Use it for the hero CTA button, inline text highlights, and background glows — no more than three appearances per page.
3. Set every heading in DM Sans at weight 600 with proportional negative tracking (use -0.01em as a rule of thumb). Body stays 400 at 1.48 line height.
4. Round all interactive elements to 30px (`{rounded.xl}`) or pill (`{rounded.pill}`) — anything sharper breaks the brand's calm approachability.
5. Secondary actions are outlined (3px amber border) or ghost (no fill, no border) — never a competing saturated fill.
6. Shadows stay feather-light and un-tinted: the three-part `rgba(61,71,83,0.05/0.05/0.08)` stack is the only elevation tool.
7. For dark-section moments, use `{colors.ink}` as the background and white as the text — the amber accent reads well on dark. Never introduce a second brand dark.

---

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