Teenage Engineering

# Teenage Engineering — Style Reference
> Teenage Engineering sets restrained te-20 headlines in a light weight on a dark void canvas. Void (#000000) is reserved for actions, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 0.

**Theme:** dark · **Source:** https://teenage.engineering (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Void | `#000000` | `--color-accent` | Primary actions and links |
| Fog | `#f1f2f2` | `--color-secondary` | Secondary accent and highlights |
| Soft Void | `#000000` | `--color-canvas` | Page canvas |
| Void 2 | `#000000` | `--color-ink` | Headlines and body copy |
| Deep Fog | `#e5e5e5` | `--color-surface-1` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Body | te-20 | 19px | 100 | 1.15 | 0 |
| Nav | te-20 | 16px | 100 | 1.50 | 0 |

Font families on the page: te-20, te-40. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: square