# Theming

> Accents, the design tokens behind every piece, and how to change them.

Every piece is dark and monochrome at rest. Colour is one accent, used only for live, hot, focused or selected moments.

## Accents

Each piece takes an `accent` prop: `ember` (orange, the default), `volt` (yellow-green) or `arc` (blue).

```tsx
<Button label="Deploy" accent="arc" />
```

The accent is a temperature ramp, not one colour: char, deep, the accent itself, hot and a near-white core. Glows, sparks and heat use the whole ramp, so one prop changes all of it, including effects drawn on a canvas.

To use one accent everywhere, pass it from one place, such as a small wrapper or a constant.

## Tokens

The styles are CSS custom properties on the `.ember` root of each piece. The ones you are most likely to change:

| Token | Default | What it is |
| --- | --- | --- |
| `--em-bg` | `#000000` | The page under a piece |
| `--em-surface`, `--em-raised` | `#0a0a0a`, `#111111` | Surfaces, each step barely lighter |
| `--em-text` | `#ededed` | Text; `-muted`, `-faint` and `-ghost` step down from it |
| `--em-fill` | white at 6% | A field or cell at rest; `-hover`, `-focus` and `-active` step up |
| `--em-accent` | `#ff6a1a` | The accent; `-hot`, `-white`, `-deep` and `-char` are its ramp |
| `--em-radius-sm`, `--em-radius`, `--em-radius-lg` | `6px`, `10px`, `14px` | Corners |
| `--em-sans`, `--em-mono` | Geist, Geist Mono | Type |
| `--em-fast`, `--em-base` | `120ms`, `220ms` | CSS transitions; springs drive the rest |

## Changing them

Override the tokens in your own CSS. `:root .ember` outranks the defaults wherever your stylesheet loads:

```css
:root .ember {
  --em-radius: 8px;
  --em-surface: #0c0c0e;
}
```

To change an accent's colours, override it the same way, with all five steps of its ramp so it still reads like heat:

```css
:root .ember[data-accent='ember'] {
  --em-accent: #ff5a36;
  --em-accent-hot: #ff9f6e;
}
```

Effects drawn on a canvas or with WebGL read the ramp from `shared/accent.ts`, so change the values there too if you change an accent. To scope a change, put it under your own class instead of `:root`.

## Motion and focus

Motion runs on springs and stops for people who ask for reduced motion: the pieces honour `prefers-reduced-motion` and follow it live. Focus rings are a thin 1px line that shows for keyboard navigation only, never after a click.