# Focus.AI Design System — Token Reference

> Design tokens for Client and Labs sub-brands. Extracted from the focus-ai-brand repo.
> *As of June 4, 2026*

## CSS Custom Properties — Client

```css
:root {
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "Courier Prime", monospace;

  --color-paper: #faf9f6;
  --color-ink: #161616;
  --color-graphite: #4a4a4a;
  --color-petrol: #0e3b46;
  --color-vermilion: #c3471d;
  --color-border: #d4d3cf;

  --tint-cool: #edf6f8;
  --tint-sage: #eef6ee;
  --tint-warm: #f7f0e6;
  --tint-lavender: #f2eef6;
  --tint-aqua: #edf6f6;
}
```

## CSS Custom Properties — Labs

```css
:root {
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "Courier Prime", monospace;

  --color-paper: #f3f2ea;
  --color-void: #1a1a1a;
  --color-rand-blue: #0055aa;
  --color-alert-red: #d93025;
  --color-surface: #e6e4dc;
  --color-border: rgba(26, 26, 26, 0.2);
  --color-page-bg: #e8e6df;
  --color-terminal-green: #00ff41; /* CRT only */
}
```

## Type Scale — Client

| Element | Font | Size | Weight |
|---------|------|------|--------|
| Hero | Inter | 60–96px | 700 |
| H1 | Inter / Source Serif 4 | 36–48px | 700–900 |
| H2 | Inter | 22–30px | 700 |
| H3 | Inter | 17–20px | 700 |
| Body | Inter | 15–17px | 500 |
| Label | Courier Prime | 10–12px | 500 |

## Type Scale — Labs

| Element | Font | Size | Weight |
|---------|------|------|--------|
| Hero | Inter | 60–96px | 900 (Black) |
| H1 | Inter / Source Serif 4 | 36–48px | 900 |
| H2 | Inter | 20–30px | 900, uppercase |
| Body | Inter | 16px | 400 |
| Metadata | Courier Prime | 12px | 400–700 |

## Opacity Hierarchy

```
Primary:   color: var(--color-ink);
Secondary: color: rgba(22, 22, 22, 0.70);
Tertiary:  color: rgba(22, 22, 22, 0.40);
Disabled:  color: rgba(22, 22, 22, 0.20);
```

## Spacing (8px base)

Token 1=8px, 2=16px, 3=24px, 4=32px, 6=48px, 8=64px, 12=96px, 16=128px.

## Full Reference

See [focus-ai-brand repo](https://github.com/The-Focus-AI/focus-ai-brand) for complete design system including grid, components, imagery, voice, and pre-ship checklist.