# Cartesia Design System

> Academic rigor meets interactive intelligence through fine-line grids, stark monochrome foundations, and deep forest green accents.

**Source:** https://cartesia.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Cartesia employs a highly structured, editorial aesthetic driven by a prominent 1px grid system that divides the canvas into blueprint-like sections. The typography pairs the elegant PP Kyoto at weight 500 for headings with ABC Diatype for dense, legible body copy. The palette is strictly monochrome (pure black text on a pure white canvas) with a single deep green semantic accent reserved for primary actions and key typographic emphasis. Radii are predominantly sharp (0px), reinforcing the technical feel, with subtle 7px softening reserved for specific interactive cards.

## Signature DNA
1. **Fine-line Grid Architecture** (1px borders using `oklch(0.895 0.008 80.72)` define sections and cards, creating a blueprint-like structure across all pages)
2. **Editorial Type Pairing** (PP Kyoto for display and ABC Diatype for sans-serif body create a high-contrast, intellectual typographic texture)
3. **Sharp Geometry** (478 occurrences of 0px border radius anchor the system in a severe, technical aesthetic)

## Colors

### Foundation
| Token | Hex / Value | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-white` | `#ffffff` | Page background | - | High | declared_token |
| `--color-black` | `#000000` | Primary text | - | High | declared_token |
| `surface-subtle` | `oklch(0.982 0.001 106.423)` | Off-white card backgrounds | 18 | High | component |
| `border-grid` | `oklch(0.895 0.008 80.72)` | Universal 1px grid lines | 24 | High | component |
| `text-muted` | `oklch(0.329 0.011 67.4)` | Secondary text | 24 | High | component |

### Accent
| Token | Hex / Value | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `accent-green` | `oklch(0.371 0.099 151.4)` | Primary CTA, emphasis | 7 | High | component |
| `text-on-accent` | `oklch(0.997 0 0)` | White text on green | 7 | High | component |
| `surface-highlight`| `oklch(0.961 0.004 91.447)` | Subtle button fills | 2 | Low | component |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| PP Kyoto | 500, 600 | heading | Playfair Display | Proprietary |
| ABC Diatype | 400, 500 | body, heading-sm | Inter | Proprietary |
| IBM Plex Mono | 500 | mono, caption | IBM Plex Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `heading-xl` | 36px | 45px | normal | 500 | Hero headings | `h1.font-display.font-medium` |
| `heading-lg` | 36px | 36px | normal | 500 | Section headings | `p.font-display.font-medium` |
| `heading-md` | 30px | 37.5px | normal | 500 | Sub-section headings | `h3.font-display.font-medium` |
| `heading-sm` | 24px | 30px | normal | 500 | Card titles | `h2.font-display.font-medium` |
| `body-lg` | 20px | 25px | normal | 400 | Lead paragraphs | `p.text-xl.leading-tight` |
| `body-md` | 16px | 24px | normal | 400 | Default body | `a.block.w-full` |
| `body-sm` | 14px | 20px | normal | 500 | Interactive labels | `a.focus-visible` |
| `caption` | 12px | 16.5px | normal | 500 | Metadata, tags | `span.font-mono.text-xs` |

### Principles
1. Headings strictly use weight 500; bold weights are avoided to maintain editorial elegance.
2. Line heights are tight for display (1.0 to 1.25) and looser for body copy (1.5).
3. Monospace is strictly reserved for technical captions and metadata at 12px.

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `space-1` | 4px | 6 |
| `space-1.5` | 6px | 5 |
| `space-2` | 8px | 21 |
| `space-2.5` | 10px | 13 |
| `space-3` | 12px | 19 |
| `space-4` | 16px | 12 |
| `space-5` | 20px | 5 |
| `space-6` | 24px | 27 |
| `space-8` | 32px | 4 |
| `space-12` | 48px | 17 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Default for layout, surfaces, buttons | 478 occurrences |
| `radius-input` | 4px | Form inputs | 5 occurrences |
| `radius-control` | 7px | Interactive cards | 33 occurrences |
| `radius-pill` | 9999px | Badges and pills | 10 occurrences |

## Elevation
Not captured in source.

## Components

### Tier 1: Foundational

#### Surface (Solid)
**Role:** Standard content container.
**Pages observed:** https://cartesia.ai, https://cartesia.ai/pricing
**Spec:** Background `oklch(0.982 0.001 106.423)` / Text `oklch(0.329 0.011 67.4)` / Border `oklch(0.895 0.008 80.72)` / Radius 0px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

#### Surface (Transparent)
**Role:** Grid-aligned layout container.
**Pages observed:** https://cartesia.ai, https://cartesia.ai/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `oklch(0.329 0.011 67.4)` / Border `oklch(0.895 0.008 80.72)` / Radius 0px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

#### Button (Subtle)
**Role:** Secondary actions.
**Pages observed:** https://cartesia.ai, https://cartesia.ai/pricing
**Spec:** Background `oklch(0.961 0.004 91.447)` / Text `oklch(0.329 0.011 67.4)` / Border `oklch(0.895 0.008 80.72)` (0px width) / Radius 0px / Padding 12px 20px / Typography 14px / Shadow none
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Card (Accent)
**Role:** Primary call-to-action cards or highlighted tiers.
**Pages observed:** https://cartesia.ai, https://cartesia.ai/pricing
**Spec:** Background `oklch(0.371 0.099 151.4)` / Text `oklch(0.997 0 0)` / Border `rgba(0, 0, 0, 0)` / Radius 7.2px / Padding 0px 10px / Typography 14px / Shadow none
**States observed:** Default | Disabled: not captured

#### Card (Subtle)
**Role:** Standard feature or pricing cards.
**Pages observed:** https://cartesia.ai, https://cartesia.ai/pricing
**Spec:** Background `oklch(0.982 0.001 106.423)` / Text `oklch(0.329 0.011 67.4)` / Border `oklch(0.895 0.008 80.72)` / Radius 7.2px / Padding 0px 10px / Typography 14px / Shadow none
**States observed:** Default | Disabled: not captured

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
Cartesia relies heavily on technical, blueprint-style line illustrations drawn in the accent green. The brand completely avoids heavy drop shadows, 3D renders, or saturated photography, maintaining a flat, academic visual plane.

## Do's
* Use 1px borders (`oklch(0.895 0.008 80.72)`) extensively to separate content and create a grid.
* Keep border radii at 0px for structural layout elements.
* Use PP Kyoto strictly at weight 500 for all display text.
* Reserve the deep green (`oklch(0.371 0.099 151.4)`) for primary actions and key typographic emphasis.
* Use IBM Plex Mono for technical metadata and captions.

## Don'ts
* **Wrong:** Using drop shadows for elevation. **Right:** Using a 1px solid border. **Reason:** The system is intentionally flat and relies on grid lines for visual separation.
* **Wrong:** Setting the parent primary color to `oklch(0.371 0.099 151.4)`. **Right:** Setting the primary color to `#000000`. **Reason:** The parent system is monochrome; green is a semantic accent, not the base text color.
* **Wrong:** Using bold (700+) weights for headings. **Right:** Using weight 500. **Reason:** Heavy weights destroy the editorial, academic elegance of the PP Kyoto typeface.

## Similar brands
* Vercel (for the stark monochrome foundation and technical precision)
* Linear (for the strict grid architecture and fine lines)
* Stripe (for the meticulous typographic hierarchy)

## Quick start

```css
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-surface-subtle: oklch(0.982 0.001 106.423);
  --color-border-grid: oklch(0.895 0.008 80.72);
  --color-text-muted: oklch(0.329 0.011 67.4);
  --color-accent-green: oklch(0.371 0.099 151.4);
  
  --font-display: "PP Kyoto", serif;
  --font-body: "ABC Diatype", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  
  --radius-sharp: 0px;
  --radius-control: 7px;
}
```

## Agent prompt examples
1. "Create a pricing card using the subtle surface background. Apply a 1px grid border and set the border radius to 7.2px. Use PP Kyoto 500 for the title."
2. "Build a primary CTA button using the accent green background and white text. Ensure the border radius is exactly 7.2px and the font is ABC Diatype at 14px."
3. "Generate a layout section with a transparent background. Divide the inner content using 1px grid borders and sharp 0px corners."

## Known gaps
Elevation (shadows), layout grids, and responsive breakpoints were not captured in the source data.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Cartesia Homepage | https://cartesia.ai | Desktop | 2026-06-06T05:00:16.569Z |
| Cartesia Pricing | https://cartesia.ai/pricing | Desktop | 2026-06-06T05:00:16.569Z |