---
version: alpha
name: Attio
description: "Near-black ink on paper white, where every record wears its own candied tag."
colors:
  on-surface-variant: "#505967"
  on-surface: "#101112"
  surface: "#FBFBFB"
  outline: "#CDCED2"
  error: "#772322"
  primary: "#266DF0"
  pure-black: "#000000"
  ink-900: "#232529"
  ink-850: "#242629"
  slate-500: "#505155"
  steel: "#383E47"
  muted: "#75777C"
  faint: "#9FA1A7"
  line: "#BABBBC"
  border: "#E6E7EA"
  border-subtle: "#EEEFF1"
  panel: "#F8F9FA"
  canvas: "#FFFFFF"
  blue-ink: "#006699"
  blue-tint: "#E5EEFF"
  blue-tint-border: "#D6E5FF"
  green: "#007D53"
  green-deep: "#095A39"
  green-tint: "#E0FCED"
  green-tint-border: "#CBF7E1"
  green-tint-alt: "#E7F6EF"
  purple: "#6238B5"
  violet: "#9B69FF"
  purple-tint: "#F5F0FF"
  purple-tint-border: "#E8DDFE"
  peach-tint: "#FEEEE1"
  peach-tint-border: "#FEE0C8"
  red-tint-border: "#FEE7E7"
typography:
  hero-display:
    fontFamily: Inter Display
    fontSize: 96px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.03em
  display:
    fontFamily: Inter Display
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.025em
  display-sm:
    fontFamily: Inter Display
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.02em
  heading-xl:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.02em
  heading-md:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.015em
  subheading:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.01em
  lead:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0em
  body-sm:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  micro:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  nano:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  small-chip-tight-control: 5px
  compact-control: 6px
  card-inset-avatar: 8px
  buttons-inputs: 10px
  cards-link-tiles: 12px
  large-panels: 19px
  pill-rounded-full: 23px
spacing:
  2xs: 4px
  xs: 6px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 13px
  2xl: 20px
---
# Attio — Style Reference
> Near-black ink on paper white, where every record wears its own candied tag.

**Theme:** light

Attio is a data-native CRM, and its brand reads like the product: a disciplined monochrome shell that lets structured data supply the color. The canvas is paper white (`#FFFFFF`) stepping through barely-there off-whites, with type set in near-black `#101112` rather than pure black so the page never feels harsh. The single signature move is the tag system — five muted accent families (green, blue, purple, orange, red) each expressed as a saturated ink, a pale fill, and a matching hairline border, exactly the way Attio renders record labels and status pills. Primary actions are the opposite of the tags: a raised near-black button with an inset white highlight, restrained and executive. Typography runs on the Inter family — Inter Display for headlines, Inter for UI — with Tiempos Text held in reserve as an italic serif for editorial emphasis, and JetBrains Mono for data and code. Radii are gentle and consistent (10px on almost every control), spacing is tight and comfortable, and elevation is whispered through blue-tinted micro-shadows rather than heavy drop shadows.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Pure Black | `#000000` | `--color-black-0` | Announcement banner bg, logo mark, hardest borders — used sparingly as structural black, not body text. |
| Ink | `#101112` | `--color-ink` | Primary near-black text and headings; the default reading color. Never pure black for prose. |
| Ink 900 | `#232529` | `--color-ink-900` | Heading ink alternate; dense display type. |
| Ink 850 | `#242629` | `--color-ink-850` | Body text on white, high-emphasis labels. |
| Slate 600 | `#505967` | `--color-slate-600` | Secondary text, active nav, strong dividers. |
| Slate 500 | `#505155` | `--color-slate-500` | Supporting copy and captions. |
| Steel | `#383E47` | `--color-steel` | Dark control borders, input outlines on hover. |
| Muted | `#75777C` | `--color-muted` | Placeholder text, tertiary metadata. |
| Faint | `#9FA1A7` | `--color-faint` | Disabled text, timestamps. |
| Divider | `#CDCED2` | `--color-divider` | Mid-gray divider, disabled control edge. |
| Line | `#BABBBC` | `--color-line` | Subtle strokes and inactive UI. |
| Border | `#E6E7EA` | `--color-border` | Default card and section hairline. |
| Border Subtle | `#EEEFF1` | `--color-border-subtle` | Lightest divider and hover-fill on rows. |
| Panel | `#F8F9FA` | `--color-panel` | Sunk panel / table header surface. |
| Off-white | `#FBFBFB` | `--color-surface-raised` | Raised card surface, one step off canvas. |
| Canvas | `#FFFFFF` | `--color-canvas` | Page background and card fill. |
| Blue | `#266DF0` | `--color-blue` | Link and focus accent, selected state, active fills — the one saturated brand blue. |
| Blue Ink | `#006699` | `--color-blue-ink` | Blue tag text on tint. |
| Blue Tint | `#E5EEFF` | `--color-blue-tint` | Blue tag / info fill. |
| Blue Tint Border | `#D6E5FF` | `--color-blue-tint-border` | Blue tag hairline. |
| Green | `#007D53` | `--color-green` | Success ink, positive tag text. |
| Green Deep | `#095A39` | `--color-green-deep` | Darkest green for dense text on tint. |
| Green Tint | `#E0FCED` | `--color-green-tint` | Success / positive tag fill. |
| Green Tint Border | `#CBF7E1` | `--color-green-tint-border` | Green tag hairline. |
| Green Tint Alt | `#E7F6EF` | `--color-green-tint-alt` | Softer green surface variant. |
| Purple | `#6238B5` | `--color-purple` | Purple tag text, secondary category ink. |
| Violet | `#9B69FF` | `--color-violet` | Vivid violet accent (logo gradient, highlight). |
| Purple Tint | `#F5F0FF` | `--color-purple-tint` | Purple tag / feature fill. |
| Purple Tint Border | `#E8DDFE` | `--color-purple-tint-border` | Purple tag hairline. |
| Peach Tint | `#FEEEE1` | `--color-peach-tint` | Warm / warning tag fill. |
| Peach Tint Border | `#FEE0C8` | `--color-peach-tint-border` | Peach tag hairline. |
| Red | `#772322` | `--color-red` | Destructive / negative tag text. |
| Red Tint Border | `#FEE7E7` | `--color-red-tint-border` | Red tag hairline and error edge. |

Restraint rule: the accent families are for **data** — tags, statuses, categories — never for CTAs. Primary actions stay near-black; `#266DF0` is the only accent allowed to act as an interactive/link color.

## Tokens — Typography
### Inter Display — headlines and display type, weights 500–700 · `--font-display`
- **Substitute:** Inter, SF Pro Display, ui-sans-serif
- **Weights:** 500, 600, 700
- **Sizes:** 96px, 64px, 56px, 48px, 40px, 32px, 24px
- **Line height:** 1.0–1.15 at display sizes
- **Letter spacing:** tightened (-0.02em to -0.03em) as size grows
- **Role:** The optical-display cut of Inter for hero and section headlines; 600 is the workhorse display weight.

### Inter — all UI, body, labels, buttons, weights 400–600 · `--font-sans`
- **Substitute:** SF Pro Text, ui-sans-serif, system-ui, sans-serif
- **Weights:** 400, 500, 600 (700 available)
- **Sizes:** 20px, 18px, 16px, 15px, 14px, 13px, 12px, 10px
- **Line height:** 1.4–1.6 for body
- **Letter spacing:** near-zero; slight negative at 18–20px
- **Role:** The entire interface layer — 500 is the default UI weight (buttons, inputs, links all render at 500).

### Tiempos Text — editorial serif accent, italic, weight 400 · `--font-serif`
- **Substitute:** Georgia, 'Times New Roman', serif
- **Weights:** 400 (roman and italic)
- **Sizes:** used at editorial body / pull-quote sizes (18–24px)
- **Line height:** ~1.5
- **Letter spacing:** default
- **Role:** Reserved for editorial emphasis and italicized phrases in long-form / customer-story content — a counterpoint to the geometric Inter shell, never for UI.

### JetBrains Mono — code and data, weights 100–800 · `--font-mono`
- **Substitute:** 'SF Mono', ui-monospace, Menlo, monospace
- **Weights:** variable 100–800
- **Sizes:** 12–14px typically
- **Line height:** ~1.5
- **Letter spacing:** default
- **Role:** API snippets, IDs, and structured data values where alignment matters.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Hero Display | 96px | 1.0 | -0.03em | `--text-display-2xl` |
| Display | 64px | 1.05 | -0.025em | `--text-display-xl` |
| Display SM | 56px | 1.05 | -0.02em | `--text-display-lg` |
| Heading XL | 48px | 1.1 | -0.02em | `--text-4xl` |
| Heading LG | 40px | 1.15 | -0.02em | `--text-3xl` |
| Heading MD | 32px | 1.2 | -0.015em | `--text-2xl` |
| Subheading | 24px | 1.3 | -0.01em | `--text-xl` |
| Lead | 20px | 1.4 | -0.01em | `--text-lg` |
| Body LG | 18px | 1.5 | 0 | `--text-md` |
| Body | 16px | 1.55 | 0 | `--text-base` |
| Body SM | 15px | 1.5 | 0 | `--text-sm` |
| Label | 14px | 1.45 | 0 | `--text-label` |
| Caption | 13px | 1.4 | 0 | `--text-xs` |
| Micro | 12px | 1.4 | 0 | `--text-2xs` |
| Nano | 10px | 1.3 | 0.02em | `--text-3xs` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable-compact (tight controls, generous sections)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 6px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 10px | `--spacing-md` |
| lg | 12px | `--spacing-lg` |
| xl | 13px | `--spacing-xl` |
| 2xl | 20px | `--spacing-2xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Small chip / tight control | 5px |
| Compact control | 6px–7px |
| Card inset / avatar | 8px |
| Buttons, inputs (default) | 10px |
| Cards, link tiles | 12px |
| Large panels | 19px–20px |
| Pill / rounded-full | 23px → fully round |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Raised Button | `rgba(255, 255, 255, 0.1) 0.2px 0.2px 2px 0px inset, rgba(0, 0, 0, 0.25) 0px 1.5px 1.5px 0px` | `--shadow-button` |
| Card | `rgba(0, 22, 62, 0.01) 0px 0px 1px 1px, rgba(0, 22, 62, 0.04) 0px 4px 12px -1px, rgba(0, 22, 62, 0.18) 0px 1px 3px -1px` | `--shadow-card` |
| Control Rest | `rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(28, 40, 64, 0.18) 0px 0px 2px 0px` | `--shadow-control` |
| Focus Ring | `rgba(83, 139, 243, 0.1) 0px 0px 0px 4px, rgba(28, 40, 64, 0.1) 0px 1px 2px -1px, rgba(28, 40, 64, 0.06) 0px 2px 4px 0px` | `--shadow-focus` |
| Popover | `oklch(0 0 0 / 0.01) 0px 1px 3px 0px, oklch(0 0 0 / 0.02) 0px 2px 4px -1px, oklch(0 0 0 / 0.03) 0px 4px 8px -2px, oklch(0 0 0 / 0.04) 0px 8px 16px -4px, oklch(0 0 0 / 0.05) 0px 16px 32px -8px` | `--shadow-popover` |

### Layout
- **Page max-width:** ~1280px contained content, full-bleed banner and gradient bands
- **Section gap:** generous vertical rhythm (multiples of 20px)
- **Card padding:** 12–20px
- **Element gap:** 8–12px between controls; header nav height 52px

## Components
### Primary Button ("Start for free")
**Role:** The one high-intent action per view — sign-up and conversion.
Raised near-black surface (black-600 → black-200 gradient, white-300 text), 10px radius, `8px 20px` padding, 14px/500 Inter. Carries `--shadow-button`: an inset white top highlight over a soft dark drop, giving a subtly physical, pressed-metal feel. On hover it deepens; disabled falls to a flat pale fill.

### Secondary / Outline Button ("Sign in")
**Role:** Lower-priority action beside the primary.
White fill (`#FFFFFF`), 1px light border (`#E6E7EA`-class), ink text, 10px radius. Hover darkens the border toward `#383E47`; active fills to a faint off-white. No shadow — it recedes behind the black primary.

### Ghost Button
**Role:** Tertiary / toolbar actions.
Transparent bg, ink text, no border; hover paints a faint off-white wash. Same 10px radius for family consistency.

### Tag / Status Pill
**Role:** The signature element — record labels, categories, statuses.
Pill or 5–6px radius with a three-part color contract: saturated ink text, a pale tint fill, and a matching hairline border. Green (`#007D53` on `#E0FCED`, border `#CBF7E1`), Blue (`#006699` on `#E5EEFF`, border `#D6E5FF`), Purple (`#6238B5` on `#F5F0FF`, border `#E8DDFE`), Peach fill `#FEEEE1` (border `#FEE0C8`), Red (`#772322`, border `#FEE7E7`). Typically 12–13px/500.

### Text Input
**Role:** Search, forms, inline record editing.
White fill, 1px hairline border, 10px radius, `10px 13px` padding, 14px/500 Inter, `#75777C` placeholder. Focus raises `--shadow-focus`, a soft blue-washed 4px ring rather than a hard outline.

### Card
**Role:** Feature panels, customer logos, content tiles.
Off-white or white surface, 12px radius, hairline `#E6E7EA` border, `--shadow-card` — a blue-tinted, near-imperceptible lift (0.01–0.18 alpha over `rgba(0,22,62,...)`). Depth by luminance and hairline, not by heavy shadow.

### Announcement Banner
**Role:** Top-of-page product news ("Orchestrate revenue agents with the new Workflows →").
Full-bleed pure-black (`#000000`) bar, white text, centered with a trailing arrow and a dismiss control. The only place pure black spans the full width.

### Nav Header
**Role:** Primary site navigation.
White header, 52px tall, ink logo wordmark + colorful gradient mark, 15–16px/500 nav links with dropdown chevrons, right-aligned outline "Sign in" and black "Start for free". Bottom hairline `#EEEFF1` separates it from content.

### Link
**Role:** Inline and nav links.
16px/500 Inter, ink by default; interactive/branded links use `#266DF0`. Link tiles carry 8–12px radius and small `6px`–`8px` padding for hit area.

### Dropdown / Popover
**Role:** Nav menus, context menus, pickers.
White surface, ~10–12px radius, layered `--shadow-popover` (a five-stop oklch stack, each step 1–5% black) for a clean floating card. Border hairline keeps edges crisp on white.

### Gradient Hero Band
**Role:** Section backdrop below the fold.
Soft pastel wash blending the accent tints — purple `#F5F0FF`, blue `#E5EEFF`, peach `#FEEEE1` — into near-white. A quiet, diffuse gradient that never competes with foreground content.

## Do's and Don'ts
### Do
- Set body copy in ink `#101112`, not pure black — reserve `#000000` for the banner, logo, and structural borders.
- Give every tag the full three-part contract: saturated ink text + pale tint fill + matching hairline border.
- Keep 10px radius on buttons and inputs; 12px on cards — the consistency is the polish.
- Convey elevation with the blue-tinted micro-shadows and a hairline, letting luminance do the work.
- Use `#266DF0` only for links, focus, and selected states.

### Don't
- Don't color CTAs — the primary action is always near-black; accents belong to data, not buttons.
- Don't use heavy or dark drop shadows; Attio's depth is a whisper (0.01–0.18 alpha, blue-tinted).
- Don't set Tiempos Text in the UI — the serif is for editorial italic emphasis only.
- Don't saturate the canvas; backgrounds stay white → `#FBFBFB` → `#F8F9FA`, never a tinted field except the diffuse pastel hero band.
- Don't mix tag families arbitrarily; each color carries semantic meaning (green positive, red negative, blue info).

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page background, card fill |
| 1 | Raised | `#FBFBFB` | Cards lifted one step off canvas |
| 2 | Panel | `#F8F9FA` | Sunk panels, table headers |
| 3 | Border Subtle | `#EEEFF1` | Hairlines, row hover fill |
| 4 | Border | `#E6E7EA` | Default card/section edge |
| — | Banner | `#000000` | Full-bleed announcement bar |

## Elevation
Depth is expressed almost entirely through luminance steps and hairline borders, with shadows kept intentionally faint and cool. Cards rise on `--shadow-card` — a blue-tinted stack topping out at just 0.18 alpha. Focus states bloom a soft 4px blue-washed ring (`rgba(83, 139, 243, 0.1)`) instead of a hard outline. Popovers float on a five-stop oklch shadow where no single layer exceeds 5% black. The only tactile object is the primary button, whose inset white highlight (`rgba(255,255,255,0.1)`) over a `rgba(0,0,0,0.25)` drop gives it a pressed-metal presence that separates it from the flat UI around it.

## Imagery
Product-forward and structural. The hero leans on UI screenshots of the CRM itself — tables, records, and colorful tags — rather than stock photography, plus a diffuse pastel gradient band that echoes the tag palette. The logo mark is a small multi-color gradient glyph beside a clean lowercase "attio" wordmark. Iconography is thin-stroke and monochrome, sitting in the ink/slate range. Customer sections favor grayscale logo walls so brand color never fights the data.

## Layout
Contained content at ~1280px on a full-bleed white page, opened by a full-width black announcement banner and a 52px white nav with left wordmark, center menu (Platform, Resources, Customers, Pricing), and right auth actions. Sections stack in a generous vertical rhythm, occasionally interrupted by a full-bleed pastel gradient band. The grid is orderly and product-like — the same alignment discipline Attio applies to its data tables carries into the marketing layout.

## Typography Signature
Attio runs a two-tier Inter system: **Inter Display** for headlines (tightened tracking, 600 weight, sizes up to 96px) and **Inter** for the entire UI at a default 500 weight — heavier than most sites' 400, which gives buttons, labels, and links a crisp, confident presence at small sizes. The counter-move is **Tiempos Text italic**, a warm serif dropped into editorial passages for contrast against all that geometric sans. Line-height widens from a compressed ~1.0 at display sizes to a comfortable ~1.55 at body, and negative tracking scales with size — the larger the type, the tighter it sets. The result reads as software-native: precise, legible, and quietly premium.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#101112` / surface: `#FBFBFB` / border: `#E6E7EA` / accent: `#266DF0` / primary action: `#000000` (near-black raised button, white text)
- tags: green `#007D53` on `#E0FCED`, blue `#006699` on `#E5EEFF`, purple `#6238B5` on `#F5F0FF`, red `#772322`, peach fill `#FEEEE1`

## Example Component Prompts
1. **Primary Button**: Near-black raised button, gradient from `#000000` toward a dark charcoal, white text `#FFFFFF`, 10px radius, padding `8px 20px`, Inter 14px/500, box-shadow `rgba(255,255,255,0.1) 0.2px 0.2px 2px 0px inset, rgba(0,0,0,0.25) 0px 1.5px 1.5px 0px`.
2. **Status Tag**: Pill-shaped label, text `#007D53`, background `#E0FCED`, 1px border `#CBF7E1`, Inter 12px/500, padding `2px 8px`, radius 6px — swap to the blue (`#006699`/`#E5EEFF`/`#D6E5FF`) or purple (`#6238B5`/`#F5F0FF`/`#E8DDFE`) family by semantic meaning.
3. **Text Input**: White fill, 1px border `#E6E7EA`, 10px radius, padding `10px 13px`, Inter 14px/500, placeholder `#75777C`; on focus add ring `rgba(83, 139, 243, 0.1) 0px 0px 0px 4px`.
4. **Feature Card**: White `#FFFFFF` surface, 12px radius, 1px border `#E6E7EA`, box-shadow `rgba(0, 22, 62, 0.04) 0px 4px 12px -1px, rgba(0, 22, 62, 0.18) 0px 1px 3px -1px`, ink heading `#101112` in Inter Display 24px/600, body `#505967` 16px/400.
5. **Announcement Banner**: Full-width black `#000000` bar, centered white text 14px/500, trailing arrow "→", right-side dismiss "×".

## Similar Brands
- **Linear** — the same monochrome-first discipline where near-black type and hairline borders carry the UI and color is rationed to meaning.
- **Notion** — a clean white canvas that lets structured content and colorful inline tags supply the personality.
- **Vercel** — executive black-and-white with a single decisive accent, and shadows kept to a whisper.
- **Stripe** — precise product-native typography (Inter-class sans) and pastel accent tints used semantically, not decoratively.
- **Retool / Airtable** — data-app kin: colored record tags on a neutral grid, the interface aesthetic Attio brings to marketing.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Ink & Neutrals */
  --color-black-0: #000000;
  --color-ink: #101112;
  --color-ink-900: #232529;
  --color-ink-850: #242629;
  --color-slate-600: #505967;
  --color-slate-500: #505155;
  --color-steel: #383E47;
  --color-muted: #75777C;
  --color-faint: #9FA1A7;
  --color-divider: #CDCED2;
  --color-line: #BABBBC;
  --color-border: #E6E7EA;
  --color-border-subtle: #EEEFF1;
  --color-panel: #F8F9FA;
  --color-surface-raised: #FBFBFB;
  --color-canvas: #FFFFFF;

  /* Colors — Accents & Tags */
  --color-blue: #266DF0;
  --color-blue-ink: #006699;
  --color-blue-tint: #E5EEFF;
  --color-blue-tint-border: #D6E5FF;
  --color-green: #007D53;
  --color-green-deep: #095A39;
  --color-green-tint: #E0FCED;
  --color-green-tint-border: #CBF7E1;
  --color-green-tint-alt: #E7F6EF;
  --color-purple: #6238B5;
  --color-violet: #9B69FF;
  --color-purple-tint: #F5F0FF;
  --color-purple-tint-border: #E8DDFE;
  --color-peach-tint: #FEEEE1;
  --color-peach-tint-border: #FEE0C8;
  --color-red: #772322;
  --color-red-tint-border: #FEE7E7;

  /* Typography — Families */
  --font-display: 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Tiempos Text', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Typography — Scale */
  --text-display-2xl: 96px;
  --text-display-xl: 64px;
  --text-display-lg: 56px;
  --text-4xl: 48px;
  --text-3xl: 40px;
  --text-2xl: 32px;
  --text-xl: 24px;
  --text-lg: 20px;
  --text-md: 18px;
  --text-base: 16px;
  --text-sm: 15px;
  --text-label: 14px;
  --text-xs: 13px;
  --text-2xs: 12px;
  --text-3xs: 10px;
  --leading-tight: 1.0;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.55;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 13px;
  --spacing-2xl: 20px;

  /* Border Radius */
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-pill: 23px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-button: rgba(255, 255, 255, 0.1) 0.2px 0.2px 2px 0px inset, rgba(0, 0, 0, 0.25) 0px 1.5px 1.5px 0px;
  --shadow-card: rgba(0, 22, 62, 0.01) 0px 0px 1px 1px, rgba(0, 22, 62, 0.04) 0px 4px 12px -1px, rgba(0, 22, 62, 0.18) 0px 1px 3px -1px;
  --shadow-control: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(28, 40, 64, 0.18) 0px 0px 2px 0px;
  --shadow-focus: rgba(83, 139, 243, 0.1) 0px 0px 0px 4px, rgba(28, 40, 64, 0.1) 0px 1px 2px -1px, rgba(28, 40, 64, 0.06) 0px 2px 4px 0px;
  --shadow-popover: oklch(0 0 0 / 0.01) 0px 1px 3px 0px, oklch(0 0 0 / 0.02) 0px 2px 4px -1px, oklch(0 0 0 / 0.03) 0px 4px 8px -2px, oklch(0 0 0 / 0.04) 0px 8px 16px -4px, oklch(0 0 0 / 0.05) 0px 16px 32px -8px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Ink & Neutrals */
  --color-black-0: #000000;
  --color-ink: #101112;
  --color-ink-900: #232529;
  --color-ink-850: #242629;
  --color-slate-600: #505967;
  --color-slate-500: #505155;
  --color-steel: #383E47;
  --color-muted: #75777C;
  --color-faint: #9FA1A7;
  --color-divider: #CDCED2;
  --color-line: #BABBBC;
  --color-border: #E6E7EA;
  --color-border-subtle: #EEEFF1;
  --color-panel: #F8F9FA;
  --color-surface-raised: #FBFBFB;
  --color-canvas: #FFFFFF;

  /* Colors — Accents & Tags */
  --color-blue: #266DF0;
  --color-blue-ink: #006699;
  --color-blue-tint: #E5EEFF;
  --color-blue-tint-border: #D6E5FF;
  --color-green: #007D53;
  --color-green-deep: #095A39;
  --color-green-tint: #E0FCED;
  --color-green-tint-border: #CBF7E1;
  --color-green-tint-alt: #E7F6EF;
  --color-purple: #6238B5;
  --color-violet: #9B69FF;
  --color-purple-tint: #F5F0FF;
  --color-purple-tint-border: #E8DDFE;
  --color-peach-tint: #FEEEE1;
  --color-peach-tint-border: #FEE0C8;
  --color-red: #772322;
  --color-red-tint-border: #FEE7E7;

  /* Typography — Families */
  --font-display: 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Tiempos Text', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Typography — Scale */
  --text-display-2xl: 96px;
  --text-display-xl: 64px;
  --text-display-lg: 56px;
  --text-4xl: 48px;
  --text-3xl: 40px;
  --text-2xl: 32px;
  --text-xl: 24px;
  --text-lg: 20px;
  --text-md: 18px;
  --text-base: 16px;
  --text-sm: 15px;
  --text-label: 14px;
  --text-xs: 13px;
  --text-2xs: 12px;
  --text-3xs: 10px;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 13px;
  --spacing-2xl: 20px;

  /* Border Radius */
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-pill: 23px;
  --radius-full: 9999px;
}
```