Token Export

# xCO Design System — Claude Code Reference

You are implementing the xCO visual language by Dark Matter Labs (Expanding Civilizational Optionality). Apply these exact tokens and rules to every UI decision. Do not introduce any colours, fonts, or radius values outside this system.

## Colour palette

Eight tokens only. Never use arbitrary hex codes or add new colours.

| CSS Variable | Hex | Tailwind class | Usage |
|---|---|---|---|
| `--color-xco-paper` | `#FFFFFF` | `xco-paper` | Default page background. Never pure white. |
| `--color-xco-ink` | `#1C1B17` | `xco-ink` | Body text, structural lines. Never #000. |
| `--color-xco-ink-muted` | `#1C1B17` | `xco-ink-muted` | Alias for ink. No greys in the system. |
| `—` | `#1C1B17` | `—` | Rules, dividers, grid lines. Never a separate hue. |
| `--color-xco-navy` | `#000064` | `xco-navy` | Blueprint dark ground. Deep structural register. |
| `--color-xco-ocean` | `#005096` | `xco-ocean` | Structural blue — nav accent, systemic diagram elements. |
| `--color-xco-teal` | `#0082aa` | `xco-teal` | Open register — frontier, coastal, lighter blue. |
| `--color-xco-sand` | `#ffa064` | `xco-sand` | Warm field register — terrestrial, amber light. |
| `--color-xco-dusk` | `#ff5a00` | `xco-dusk` | Warm convergence — orange-ember, the meeting point. |

Rules and dividers: `rgba(28, 27, 23, 0.12)` — ink at 12% opacity. In Tailwind: `border-xco-ink/[0.12]`.

## Typography

Four typefaces only. Do not introduce any other font families.

| Family | Tailwind class | Usage |
|---|---|---|
| Suisse Works | `font-display` | Headings. Serif — the weight of the idea. |
| Suisse Int'l | `font-body` | All running text. Sans — clarity, no decoration. |
| Suisse Int'l | `font-ui` | Alias for body. Navigation, labels, structural scaffolding. |
| DM Mono | `font-mono` | Small text. Numbers, code, annotations — showing the working. Always medium weight. |

## Type scale

| Step | Size | Line height | Face |
|---|---|---|---|
| Heading | `3rem` | 1.1 | display |
| Body | `1.375rem` | 1.7 | body |
| Small | `0.9375rem` | 1.6 | mono |

Body measure (max-width): 68ch for body text. Reduce for captions and mono.

## Visual principles

- **Corner radius**: near-zero (`1.5rem` gutter, `0.125rem` radius max). This is not a rounded-corner brand.
- **Borders**: always ink at 0.12 opacity, 1px. Never decorative; always structural.
- **Never** use pure black (`#000`) or pure white (`#FFF`) as a background — use `ink` and `paper` tokens.
- **Diagrams** use exactly two line weights: `1.5px` structural, `0.75px` texture.
- **No bold** on UI / Suisse Int'l face. Use weight 400 or 500 only.
- Dark mode is a paper ↔ ink swap — all other colours remain fixed.

## Three visual registers (diagram modes)

- **Blueprint** (cool): navy → ocean → teal gradient. Use for systemic / structural diagrams.
- **Warmth** (warm): sand → dusk. Use for field-level / terrestrial context.
- **Spectrum**: full warm-to-cold arc — sand, dusk, teal, ocean, navy. Use for comparative / ranked diagrams.

Never mix registers within a single diagram.

## Node types (diagram)

| Type | Fill | Border | Usage |
|---|---|---|---|
| Option | paper | ink solid | Default node — a response or choice. |
| Risk | dusk | ink solid | The trigger — what the portfolio responds to. |
| Field | paper | ocean dashed | Systemic precondition — foundational layer. |

## Banned words

Never write these in copy, UI labels, or documentation: `transformative`, `unprecedented`, `regenerative`, `holistic`, `paradigm`, `ecosystem`, `unlock`, `leverage`, `empower`, `journey`, `space`

Write with precision and restraint instead.

## CSS setup

Add this block to your `globals.css` or `app/globals.css`:

```css
:root {
  --color-xco-paper:     #FFFFFF;
  --color-xco-ink:       #1C1B17;
  --color-xco-ink-muted: #5F5C53;
  --color-xco-navy:      #000064;
  --color-xco-ocean:     #005096;
  --color-xco-teal:      #0082aa;
  --color-xco-sand:      #ffa064;
  --color-xco-dusk:      #ff5a00;
}
```

Then load fonts:
- Suisse Works (licensed) — display + body; fallback: Times New Roman
- Suisse Int'l (licensed) — UI; fallback: Helvetica Neue
- Suisse Mono (licensed) — mono; fallback: DM Mono (Google Fonts)