# Brutalist terminal: tokens

Use the role. Never a raw hex in component CSS except to define the token.

## Color

| Token | Value | Role |
| --- | --- | --- |
| `bg` | `#070807` | Ground |
| `fg` | `#86F28A` | Content, titles, bright rules, reverse-video fill |
| `dim` | `#4D8F52` | Meta, comments, labels, dashed rules, pane dividers |
| `warn` | `#F0D26A` | State only: caret, focus outline, `aria-current` |
| `on-fg` | `#070807` | Type inside reverse video |

Contrast on `bg`: `fg` 14.4:1, `dim` 5.1:1 (passes AA at 13px), `warn` 13.5:1. `on-fg` on `fg` 14.4:1.

Scanlines: `repeating-linear-gradient` of `fg` at 3.5% alpha, 1px on, 2px off. Disable under `prefers-contrast: more`.

## Type

One family: `ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace`. Ligatures off. Tabular figures on.

| Token | Size / line | Weight | Case | Use |
| --- | --- | --- | --- | --- |
| `title` | 26px / 40px | 700 | UPPERCASE | The one heading per view, prefixed `# ` in dim |
| `text` | 13px / 20px | 400 | as written | Body, dek, table cells, inputs, tab panels |
| `strong` | 13px / 20px | 700 | UPPERCASE | Section heads (`## `), entry titles, alert titles, brand |
| `meta` | 13px / 20px | 400 | UPPERCASE or lowercase | Dim. Comments (`// `), dateline (`$ `), byline (`-- `), labels (`name:`), table heads |
| `control` | 13px / 20px | 400 | lowercase | Bracketed nav, buttons, tabs, pager |

Two sizes total. No 11px, no 16px, no 20px.

## Prefixes

| Glyph | Meaning |
| --- | --- |
| `> ` | Prompt, brand, quoted line |
| `# ` | Title (one per view) |
| `## ` | Section head |
| `// ` | Comment: kicker, meta, captions, section notes |
| `$ ` | Dateline, command echo |
| `-- ` | Byline, signature |
| `[ ]` | Anything clickable |
| `[!] ` | Notice title |
| `█` | Cursor, after the brand, blinking |

Prefixes are `::before` content in `dim` (or `fg` inside brackets). They are never images.

## Spacing rhythm

Vertical: one line (20px) or two (40px). Horizontal: `ch`.

| Token | Value | Use |
| --- | --- | --- |
| `line` | 20px | Between blocks |
| `section` | 40px | Between sections, after the prompt line |
| `gap` | 2ch | Between inline items, pane padding |
| `indent` | 4ch | Under a heading (dek, byline, body, figure, table, pager). 2ch on narrow screens |
| `col` | 3ch | Between table columns |
| `page` | 20px 2ch 40px | Fixture padding |

## Rules

| Rule | Value | Use |
| --- | --- | --- |
| dashed | 1px dashed `dim` | Section separators, table head, figure border, prompt line |
| pane | 1px solid `dim` | Vertical divider between panes, quote bar |
| mark | 1px solid `fg` | Notice bar, modal border |
| baseline | 1px solid `dim`, `warn` on focus | Input |

No double rules, no heavy rules, no boxes except the modal.

## Shape

Radius 0 on everything. No shadow, glow, blur, gradient, or bloom.

## Motion

| Token | Value |
| --- | --- |
| `blink` | 1s, `steps(1, end)`, infinite, on the cursor only |
| hover / focus | instant |

`prefers-reduced-motion` disables the blink.