# CLAIR — Design Token Reconciliation
**Version:** 1.0 | **Date:** March 2026 | **Status:** Active
**Canonical Source:** `deliverables/DESIGN-SYSTEM-SPEC.md` (extracted from production Stitch screens, clair-screens-227)
---
## Purpose
Multiple strategy documents, the root CLAUDE.md, and earlier marketing materials reference incorrect color values, outdated token names, and non-canonical typography. This document identifies every discrepancy and provides the authoritative replacement.
All future marketing collateral, campaign assets, landing pages, and code implementations MUST use the canonical tokens below.
---
## Color Token Corrections
### Primary Background
| Token Name | Wrong Value (Used In) | Correct Value | Correct Token |
|------------|----------------------|---------------|---------------|
| Background | `#F5EFE8` (CLAUDE.md, Marketing Strategy) | `#F9F5F1` | background-light |
| App background | `#F5EFE8` (root CLAUDE.md "Background") | `#E6DACD` | latte (outer) / `#F9F5F1` background-light (inner) |
### Primary Accent
| Token Name | Wrong Value (Used In) | Correct Value | Correct Token |
|------------|----------------------|---------------|---------------|
| Primary Accent | `#00D4FF` (CLAUDE.md, Marketing Strategy, demo microsite) | `#4DDCFF` | clinical-blue |
| CTA color | `#00D4FF` (brand design system table) | `#4DDCFF` | clinical-blue |
| Dark mode accent | `#00D4FF` (CLAUDE.md dark mode tokens) | `#4DDCFF` | clinical-blue |
### Success / Verified States
| Token Name | Wrong Value (Used In) | Correct Value | Correct Token |
|------------|----------------------|---------------|---------------|
| Success | `#22C55E` (CLAUDE.md) | `#8C9C78` | matcha |
| Verified green | `#22C55E` (brand design system) | `#8C9C78` | matcha |
### Text Colors
| Token Name | Wrong Value (Used In) | Correct Value | Correct Token |
|------------|----------------------|---------------|---------------|
| Primary Text | `#1A1A1A` (CLAUDE.md) | `#291E18` | obsidian-brown |
| Headings | `#1A1A1A` "pure black" (Marketing Strategy) | `#1a120e` | obsidian-dark |
### Accent / Brand Colors
| Token Name | Wrong Value (Used In) | Correct Value | Correct Token |
|------------|----------------------|---------------|---------------|
| Blush / C-ring | `#FDE8E4` (CLAUDE.md) | `#E6DACD` | latte |
| Logo blush pink | `#FDE8E4` (domain branding spec) | `#E6DACD` | latte |
### Secondary Text / Borders
| Token Name | Wrong Value (Used In) | Correct Value | Correct Token |
|------------|----------------------|---------------|---------------|
| Secondary Text | `#6B7280` (CLAUDE.md) | Use obsidian-brown at reduced opacity or cardboard | `#C9B6A3` cardboard / `#291E18` at 50% opacity |
| Borders | `#3A3A3C` (CLAUDE.md dark mode) | `rgba(201, 182, 163, 0.1)` | border-cardboard/10 |
### Colors NOT in the Design System (Do Not Use)
| Color | Hex | Status |
|-------|-----|--------|
| Violet | `#8B5CF6` | Not in palette — remove from any asset |
| Magenta | `#D946EF` | Not in palette — remove from any asset |
| Tailwind gray-500 | `#6B7280` | Not in palette — use cardboard or obsidian-brown at opacity |
| iOS system gray | `#8E8E93` | Not in palette — use cardboard |
| Pure black | `#000000` | Not in palette — use obsidian-dark `#1a120e` |
| Tailwind red | `#EF4444` | Acceptable for red flag UI states only, not brand usage |
| Tailwind amber | `#F59E0B` | Acceptable for warning UI states only, not brand usage |
---
## Complete Canonical Color Palette
| Token | Hex | Usage |
|-------|-----|-------|
| latte | `#E6DACD` | Body/page background (outer), brand warmth |
| background-light | `#F9F5F1` | App container background |
| surface-white | `#FFFFFF` | Card surfaces |
| clinical-blue | `#4DDCFF` | Primary accent, CTAs, highlights, progress bars |
| matcha | `#8C9C78` | Success states, verified indicators, nature accents |
| obsidian-brown | `#291E18` | Primary body text, dark UI elements |
| obsidian-dark | `#1a120e` | Deepest headings, near-black |
| cardboard | `#C9B6A3` | Borders, muted accents, secondary text backgrounds |
---
## Typography Corrections
### Font Family
| Element | Wrong Value (Used In) | Correct Value |
|---------|----------------------|---------------|
| Primary font | "Inter" (demo microsite, some strategy docs) | **Outfit** (Google Fonts) |
| Fallback | Not specified | Inter, sans-serif |
| Icon font | Not specified | Material Symbols Outlined (Google Fonts) |
### Font Weight Hierarchy
The canonical design system uses **light, airy typography**. Headlines are NOT bold.
| Element | Wrong Practice | Correct Weight |
|---------|---------------|----------------|
| Hero numbers (e.g., "87%") | font-bold (700) | font-extralight (200) |
| Section headings | font-semibold (600) or font-bold (700) | font-light (300) |
| Card titles | font-bold (700) | font-medium (500) |
| Body text | font-normal (400) | font-light (300) |
| Labels/tags | font-normal (400) | font-medium to font-bold (500-700), uppercase, tracking-wide |
| CTA buttons | font-bold (700) | font-semibold (600) |
**Key principle:** If a headline looks bold, it is wrong. The CLAIR aesthetic is defined by ultralight weight at large sizes.
---
## Border Radius Corrections
| Element | Wrong Practice | Correct Value |
|---------|---------------|---------------|
| Cards | rounded-lg (8px) | rounded-2xl (32px) to rounded-3xl (40px) |
| Pills/tags | rounded-md (6px) | rounded-full (9999px) |
| CTA buttons | rounded-md (6px) | rounded-xl (24px) |
| Default | rounded (4px) | rounded-md / 0.75rem (12px) |
---
## Shadow Corrections
All shadows MUST use obsidian-brown tint `rgba(41, 30, 24, ...)`, NOT pure black `rgba(0, 0, 0, ...)`.
| Token | Correct Value |
|-------|---------------|
| soft | `0 10px 40px -10px rgba(41, 30, 24, 0.05)` |
| medium | `0 15px 30px -5px rgba(41, 30, 24, 0.08)` |
| float | `0 8px 20px -6px rgba(41, 30, 24, 0.06)` |
| inner-soft | `inset 0 2px 4px 0 rgba(0, 0, 0, 0.03)` |
---
## CTA Button Specification
| Property | Correct Value |
|----------|---------------|
| Background | `#4DDCFF` (clinical-blue) |
| Text color | `#1a120e` (obsidian-dark) |
| Font weight | font-semibold (600) |
| Border radius | rounded-xl (24px) |
| Shadow | soft |
| Glow effect | `shadow-[0_0_20px_rgba(77,220,255,0.25)]` |
---
## Documents Requiring Updates
| Document | Location | Issues |
|----------|----------|--------|
| Root CLAUDE.md | `/clair_marketing/CLAUDE.md` | All color tokens incorrect, typography not specified |
| .claude/CLAUDE.md | `/clair_marketing/.claude/CLAUDE.md` | References root CLAUDE.md tokens |
| Marketing Strategy | `clair-marketing-gen-assets/CLAIR_Marketing_Strategy.md` | Uses `#00D4FF`, `#F5EFE8`, `#1A1A1A` |
| Demo Microsite | `clair_marketing/clair_demo_microsite/` | Uses `#00D4FF` accent throughout |
| Marketing One-Pager | `marketing_one_pager.md` | Review for color references |
---
*Canonical source of truth: `deliverables/DESIGN-SYSTEM-SPEC.md`*
*CLAIR — Dating, Decoded. | askclair.io | Early Access 2026*