---
version: alpha
name: Cartesia
description: Warm off-white canvas for real-time voice AI — PP Kyoto serif headings, ABC Diatype geometric sans body, single forest-green accent, technical line illustrations, and a quietly assured scholarly tone.

colors:
  # Surfaces
  background: "#f9f9f8"       # warm off-white cream — primary canvas
  surface: "#f0f0ec"          # was oklch(0.955 0.005 95.101) — Google format requires hex
  surface-deep: "#e8e5de"     # deeper warm tone for section separators /* estimated */

  # Ink (text)
  ink: "#1a1a18"              # warm near-black body text /* estimated from visual */
  ink-secondary: "#4a4a46"    # secondary text, descriptions /* estimated */
  ink-muted: "#a1a1a1"        # was oklab(0.708 0 0 / 0.5) — Google format requires hex
  on-primary: "#ffffff"

  # Brand accent
  primary: "#309d4b"          # forest green — from logo SVG fill #309D4B
  primary-hover: "#004d22"    # dark forest green hover — was oklch(0.371 0.099 151.4) — Google format requires hex
  primary-container: "#d4edda" # light green tint for badge backgrounds /* estimated */

  # Borders
  border: "#dfdbd6"           # was oklch(0.895 0.008 80.72) — Google format requires hex
  border-subtle: "#eceae5"    # ultra-light warm border /* estimated */

  # Shadow / focus
  shadow-soft: "#e8e5de"      # was rgba(0,0,0,0.06) on warm bg — Google format requires hex
  focus-ring: "#309d4b"       # green focus ring consistent with brand

typography:
  display-hero:
    fontFamily: "PP Kyoto, Georgia, Times New Roman, serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  display:
    fontFamily: "PP Kyoto, Georgia, Times New Roman, serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  heading-section:
    fontFamily: "PP Kyoto, Georgia, Times New Roman, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "PP Kyoto, Georgia, Times New Roman, serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "ABC Diatype, Arial, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  body:
    fontFamily: "ABC Diatype, Arial, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "ABC Diatype, Arial, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "ABC Diatype, Arial, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  button-ui:
    fontFamily: "ABC Diatype, Arial, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "ABC Diatype, Arial, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  code:
    fontFamily: "IBM Plex Mono, Courier New, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: 0px
  micro:
    fontFamily: "ABC Diatype, Arial, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    border: "1px solid {colors.border}"
    padding: 8px 16px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 12px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"

  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.lg}"
    border: "1px solid {colors.border}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.surface}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    border: "1px solid {colors.border}"
    padding: 8px 12px
  input-focus:
    border: "1px solid {colors.focus-ring}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.micro}"
    rounded: "{rounded.sm}"
    padding: 4px 8px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    border: "0px 0px 1px solid {colors.border}"
    padding: 16px 24px
  nav-link:
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
  nav-link-hover:
    textColor: "{colors.ink}"
    backgroundColor: "{colors.surface}"

  tab:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    border: "1px solid {colors.border}"
    padding: 6px 16px
  tab-active:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
---

# Cartesia Design System

## Overview

Cartesia's visual language is quietly scholarly — the kind of design that signals serious research without performing it. The warm off-white canvas (`{colors.background}`) reads like high-quality paper, creating a tactile, analog quality that's unusual for an AI company. Against this cream foundation, the single brand accent (`{colors.primary}`) lands with precision: a forest green that evokes both nature and scientific integrity, never oversaturating the page. Where most voice AI startups reach for futuristic purples and neons, Cartesia chooses restraint.

The typography system is the defining character decision. PP Kyoto — a contemporary serif with scholarly proportions — handles all headings at weight 500, lending the interface the authority of a well-edited research paper. This is set against ABC Diatype, a crisp geometric sans-serif for body and UI text. The serif/sans pairing is deliberate: it positions Cartesia as a company that does deep technical work and can also articulate it clearly. IBM Plex Mono appears for code contexts, reinforcing the developer-facing identity.

Illustration is the third pillar. Cartesia uses delicate technical line drawings — architectural perspectives of offices, clinics, government buildings rendered in a single green outline — that communicate "AI deployed in real institutions" more effectively than any product screenshot. These illustrations live on the cream canvas, contributing to an atmosphere that feels like an academic journal brought to interactive life.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) — paper-like, not digital-cold white
- PP Kyoto weight 500 for all headings — scholarly serif authority
- Single green accent (`{colors.primary}`) — precise, never decorative
- ABC Diatype for body — geometric precision contrasting with editorial serif
- Technical line illustrations as narrative device, not decoration
- `{colors.border}` warm gray borders throughout — the system never goes cold
- 8px base grid with generous section spacing (48–64px)
- IBM Plex Mono for code — developer-legible, publisher-quality
- Motion at 150ms with cubic-bezier(0.4, 0, 0.2, 1) — responsive without flair
- Tab/segmented controls as primary navigation within sections
- `{colors.surface}` hover state used consistently for interactive elements
- Button system is binary: primary green or outlined-neutral — no ghost bloat

## Colors

### Primary Surfaces
- **Warm Cream** (`{colors.background}`): The dominant canvas — all sections, cards, and page backgrounds. The warm undertone is the design's quiet signature.
- **Warmer Surface** (`{colors.surface}`): Hover states, active backgrounds for nav items and tabs. A subtle step darker than the canvas.
- **Deep Warm** (`{colors.surface-deep}`): Section separators, pressed states, decorative fills.

### Ink
- **Near-Black** (`{colors.ink}`): All primary headings and body text. Warm undertone to match the canvas.
- **Secondary** (`{colors.ink-secondary}`): Descriptions, sub-headings, supporting text.
- **Muted** (`{colors.ink-muted}`): De-emphasized labels, nav items at rest, captions.

### Brand Accent
- **Forest Green** (`{colors.primary}`): The sole brand color. Used exclusively on primary CTAs, active states, and the wordmark. Earns its authority through scarcity.
- **Dark Green** (`{colors.primary-hover}`): Hover/active state for green elements — a decisive deepening rather than a tint.

### States & Semantic
- **Green Container** (`{colors.primary-container}`): Badge and tag backgrounds — a diluted echo of the brand accent.
- **Focus Ring** (`{colors.focus-ring}`): Consistent with `{colors.primary}` for keyboard navigation coherence.

### Borders & Elevation
- **Warm Border** (`{colors.border}`): Warm off-white gray used on all cards, inputs, tabs, and dividers. Consistent throughout.
- **Subtle Border** (`{colors.border-subtle}`): Ultra-light variant for structural separations that should barely register.
- **Shadow** (`{colors.shadow-soft}`): Opaque approximation of soft drop-shadow; used sparingly.

## Typography

### Font Families
- **Display / Headings**: `PP Kyoto`, fallbacks: `Georgia, Times New Roman, serif`
- **Body / UI**: `ABC Diatype`, fallbacks: `Arial, ui-sans-serif, system-ui, sans-serif`
- **Monospace / Code**: `IBM Plex Mono`, fallbacks: `Courier New, ui-monospace, monospace`

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero headings — PP Kyoto 56px weight 500, -0.5px tracking |
| `display` | Section headings — PP Kyoto 36px weight 500 |
| `heading-section` | Sub-section titles — PP Kyoto 24px weight 500 |
| `heading-sub` | Card headings, sidebar titles — PP Kyoto 20px weight 600 |
| `body-large` | Introductory paragraphs, hero sub-copy — ABC Diatype 20px |
| `body` | Standard prose — ABC Diatype 16px weight 400 |
| `body-medium` | Emphasized body, UI labels — ABC Diatype 16px weight 500 |
| `nav-link` | Navigation and button labels — ABC Diatype 14px weight 500 |
| `button-ui` | All button text — ABC Diatype 14px weight 500 |
| `caption` | Meta text, footnotes, table labels — ABC Diatype 14px weight 400 |
| `code` | API references, technical copy — IBM Plex Mono 13px weight 500 |
| `micro` | Tags, micro-labels — ABC Diatype 12px weight 500 |

### Principles
- **Serif as authority**: PP Kyoto at weight 500 anchors headings with editorial confidence. This is not decorative serifs — it communicates that Cartesia does serious research.
- **Sans as precision**: ABC Diatype's geometric construction ensures UI clarity without coldness. Its neutrality serves the serif-dominant hierarchy.
- **No weight extremes**: The type scale spans weight 400 to 600 — no ultra-thin display, no heavy 700+ impact type. The authority comes from the serif choice, not from weight.
- **Tight display tracking**: `{typography.display-hero}` uses -0.5px to give the large serif headings controlled density.

## Layout

### Spacing System
Base unit is **8px**. The scale runs 4–64px. Section-level spacing is generous (48–64px), creating the scholarly, unhurried pacing of a well-typeset document.

### Grid & Container
- Content maxes at approximately 1200px centered
- Two-column alternating content/illustration layouts at desktop
- Single-column stacked sections on mobile
- Full-width navigation with borderless separation

### Whitespace Philosophy
- **Parchment pacing**: Generous vertical rhythm between sections mimics the whitespace of academic publications. Each section breathes.
- **Cream as content**: The off-white canvas is active, not merely absent. It creates warmth without competing with text.
- **Illustration-led sections**: Line drawings occupy the right column at desktop, giving each feature block a visual anchor without photography overhead.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow — `{colors.background}` canvas | Page sections, text blocks |
| Border (Level 1) | 1px `{colors.border}` all-sides | Cards, inputs, tabs, nav items |
| Raised (Level 2) | 1px border + `{colors.shadow-soft}` drop | Floating menus, dropdowns |
| Focus | 1px solid `{colors.focus-ring}` | Keyboard-focused inputs and buttons |

**Shadow Philosophy**: Cartesia is largely flat — the primary depth mechanism is the 1px warm border, not elevation. Drop shadows appear only for floating elements. This restraint reinforces the paper-document aesthetic; surfaces don't float above the page, they sit on it.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rarely used explicitly |
| `sm` | 4px | Badges, micro tags |
| `md` | 8px | Buttons, inputs, cards — the workhorse |
| `lg` | 16px | Larger cards, modals |
| `pill` | 9999px | Unused — Cartesia avoids pill buttons |

The shape system is consistently `{rounded.md}` (8px). The brand does not use pill shapes — the moderate radius signals precision and restraint without feeling institutional. Cards and buttons share the same radius, creating a unified object language across the UI.

## Components

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

### Buttons

- **`button-primary`** — Forest green (`{colors.primary}`) with white text, 8px radius. The green CTA is Cartesia's most visible brand touchpoint. Used once per section, never in clusters.
- **`button-secondary`** — White background with `{colors.border}` border. Neutral pairing for secondary actions beside the primary.
- **`button-ghost`** — No background, no border. Used for tertiary navigation actions, `{colors.surface}` on hover.

### Cards
- **`card`** — Cream background (`{colors.background}`) with warm `{colors.border}` edge. 16px radius, 24px padding. Feature cards use the cream canvas directly — no surface lift.
- **`card-hover`** — Transitions to `{colors.surface}` background.

### Inputs
- **`input`** — Cream canvas with warm border, 8px radius. Focus state swaps border to `{colors.focus-ring}`.

### Badges
- **`badge`** — Light green container (`{colors.primary-container}`) with green text (`{colors.primary}`). Used for category labels and industry filters.

### Navigation
- **`nav-bar`** — Cream sticky header with bottom border `{colors.border}`. Links at rest in `{colors.ink-muted}`, active in `{colors.ink}` with `{colors.surface}` background.
- **`tab`** — Segmented industry tabs (Finance / Healthcare / Government). Outlined at rest, filled with `{colors.background}` when active.

## Do's and Don'ts

### Do
- Use `{colors.primary}` on exactly one primary CTA per section — scarcity preserves authority
- Apply PP Kyoto for all headings down to `{typography.heading-section}` — the serif voice must be consistent
- Use `{colors.border}` for all structural edges — the warm neutral border is the system's connective tissue
- Keep backgrounds on `{colors.background}` — the cream canvas is not a starting point to depart from
- Use `{colors.surface}` hover state for all interactive containers (cards, nav items, tabs)
- Let illustrations carry the visual weight of feature sections — resist adding photography or icons as supplements
- Apply `{rounded.md}` (8px) to both buttons and inputs — object consistency matters
- Use `{typography.code}` (IBM Plex Mono) for all technical string references, even inline

### Don't
- Don't use `{colors.primary}` green as a background or decorative fill — it is exclusively for primary actions and their hover states
- Don't use pill-shaped buttons (`{rounded.pill}`) — Cartesia's identity is moderate radius, not soft curves
- Don't introduce secondary accent colors — the system is intentionally monochromatic within the green range
- Don't apply bold (700+) weights to ABC Diatype — the body voice is weight 400–500 only
- Don't use cold white (`#ffffff`) as a surface — the warm cream (`{colors.background}`) is non-negotiable
- Don't scale fonts below `{typography.micro}` (12px) — technical legibility has a floor
- Don't add decorative borders to illustration areas — the line drawings frame themselves

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single column, hamburger nav, stacked feature blocks |
| Tablet | 768–1024px | Two column where appropriate, nav may compress |
| Desktop | >1024px | Full layout, illustration columns active, max-width container |

### Touch Targets
- Buttons: minimum 8px 16px padding → adequate vertical target
- Nav links: 8px 12px padding with hover surface
- Tab controls: 6px 16px padding per tab — adequate for finger targeting

### Collapsing Strategy
- Navigation: horizontal links → hamburger at mobile breakpoint (768px)
- Feature sections: illustration columns stack below text on mobile
- Section spacing compresses from 64px to 32–48px at mobile
- Card grids: multi-column → single-column stacked

### Image Behavior
- Line illustrations scale with their container (SVG-safe)
- Illustrations may be hidden or cropped at narrow mobile widths
- No photography to manage — illustration-first system is responsive by nature

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm cream (`{colors.background}`)
- Primary text: Near-black warm (`{colors.ink}`)
- Secondary text: `{colors.ink-secondary}`
- Muted text: `{colors.ink-muted}`
- Brand accent: Forest green (`{colors.primary}`)
- Border: Warm gray (`{colors.border}`)
- Hover surface: `{colors.surface}`

### Example Component Prompts

- "Build a hero section on `{colors.background}` (warm cream). Headline uses PP Kyoto 56px weight 500 line-height 1.15 letter-spacing -0.5px, color `{colors.ink}`. Subtext uses ABC Diatype 20px weight 400 line-height 1.40, color `{colors.ink-secondary}`. Two buttons: primary (`{colors.primary}` background, white text, `{rounded.md}` radius, 8px 16px padding) and secondary (white bg, `{colors.border}` border, `{colors.ink}` text, same radius and padding)."
- "Design a feature card: background `{colors.background}`, border 1px solid `{colors.border}`, `{rounded.lg}` radius, 24px padding. Card heading PP Kyoto 24px weight 500 color `{colors.ink}`. Body text ABC Diatype 16px weight 400 color `{colors.ink-secondary}`. Hover state transitions background to `{colors.surface}` over 150ms cubic-bezier(0.4, 0, 0.2, 1)."
- "Create a tab selector for industry verticals. Three tabs (Finance, Healthcare, Government) using ABC Diatype 14px weight 500. Rest state: transparent background, `{colors.border}` border, `{colors.ink-muted}` text, `{rounded.sm}` radius, 6px 16px padding. Active state: `{colors.background}` fill, `{colors.ink}` text."
- "Design navigation: sticky header on `{colors.background}` with 1px bottom border `{colors.border}`. Logo wordmark left-aligned. Nav links at ABC Diatype 14px weight 500 `{colors.ink-muted}`, hover to `{colors.ink}` + `{colors.surface}` background. Two right-side CTAs: 'Contact Sales' (secondary button) and 'Try Cartesia' (primary green button)."
- "Build a category badge: `{colors.primary-container}` background, `{colors.primary}` text, ABC Diatype 12px weight 500, `{rounded.sm}` radius, 4px 8px padding. Use for AI / Healthcare / Finance labels above card headings."
- "Create an inline code reference: IBM Plex Mono 13px weight 500, `{colors.ink}` color, `{colors.surface}` background, `{rounded.sm}` radius, 2px 6px padding."

### Iteration Guide

1. Start with `{colors.background}` — the warm cream is the design's foundation. If anything looks cold, check that you haven't substituted pure white.
2. Reach for `{colors.primary}` only on the primary CTA per section — use it once, let it land.
3. PP Kyoto (weight 500) for all headings. ABC Diatype (weight 400) for body. Never mix into the opposite role.
4. All interactive element transitions: 150ms, cubic-bezier(0.4, 0, 0.2, 1) on `color`, `background-color`, `border-color`.
5. Borders are `1px solid {colors.border}` throughout — the warm neutral edge is structural, not decorative.
6. Hover states use `{colors.surface}` as the fill — consistent across cards, nav links, tabs, ghost buttons.
7. Technical illustrations (if creating SVG diagrams) should use single-color line work in `{colors.primary}` or `{colors.ink}` on the cream canvas.

---

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