Design system do teenage.engineering

---
version: alpha
name: "teenage.engineering"
description: "Design system extracted from https://teenage.engineering/ on 2026-09-28"
colors:
  background: "#f6f8f7"
  foreground: "#0f0e12"
  muted-foreground: "#e5e5e5"
  primary: "#0071bb"
  on-primary: "#ffffff"
typography:
  headline-display:
    fontFamily: "te-20"
    fontSize: "48px"
    fontWeight: 700
    lineHeight: "1.4"
  headline-lg:
    fontFamily: "te-20"
    fontSize: "32px"
    fontWeight: 600
    lineHeight: "1.4"
  headline-md:
    fontFamily: "te-20"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "te-20"
    fontSize: "19px"
    fontWeight: 100
    lineHeight: "1.16"
  label-md:
    fontFamily: "te-20"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "1.4"
  button:
    fontFamily: "te-20"
    fontSize: "16px"
    fontWeight: 100
    lineHeight: "1.5"
rounded:
  none: "0px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "32px"
  2: "68px"
components:
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#0f0e12"
    typography: "{typography.button}"
    rounded: "0px"
    height: "32px"
    padding: "0px 37px"
---

# teenage.engineering

## Overview

teenage engineering: teenage engineering creates high quality, well designed, electronic products for all people who love sound and music.

Sharp, squared-off controls, flat surfaces separated by hairlines, confident display type at 48px / 700, a single blue accent on neutrals. The site ships in light mode by default. Measured from 1115 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#f6f8f7` | Page background |
| foreground | `#0f0e12` | Primary text |
| muted-foreground | `#e5e5e5` | Secondary text, captions |
| primary | `#0071bb` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |

Full painted palette by area (largest first): `#f6f8f7`, `#000000`, `#0f0e12`.

The accent `#0071bb` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **te-20** for body, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | te-20 | 48px | 700 | 1.4 | normal |
| headline-lg | te-20 | 32px | 600 | 1.4 | normal |
| headline-md | te-20 | 24px | 600 | 1.4 | normal |
| body-md | te-20 | 19px | 100 | 1.16 | normal |
| label-md | te-20 | 13px | 500 | 1.4 | normal |
| button | te-20 | 16px | 100 | 1.5 | normal |

Type scale in use: 13px, 16px, 19px. Base body size 19px.

## Layout

- Spacing unit: 4px. Scale in use: 32, 68 (px).
- Flex and grid gaps: 16, 24 px.
- Content max width: 1308px, centred.
- Header: 0px tall, absolute, background `rgba(0, 0, 0, 0)`; 12 nav links at 16px / 100 (teenage engineering · product · instruments · audio · designs · store · checkout · deals).

## Elevation & Depth

No box shadows in use; depth comes from hairline borders and surface tints (flat design).

## Shapes

- Buttons: 0px
- Inputs: 0px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#0f0e12`, border none, radius 0px, height 32px, padding 0px 37px, 16px / 100. Sample label: "search".

### Link

Colour `#0f0e12`, no underline at rest, weight 100.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 479px |  | 16px |  | 0px, 22 links |  |  | content-width |
| laptop 1024px | 341px |  | 16px |  | 0px, 22 links |  |  | content-width |
| tablet 768px | 697px |  | 16px |  | 0px, 22 links |  |  | content-width |
| phone 390px | 354px |  | 16px |  | 0px, 0 links |  | 3→3 col | 1 full-width |

- Nav never collapses to a hamburger (0 links still visible at 390px).
- Body text stays 16px at every width.
- 1 buttons stretch full-width on phones.

## Interaction & Motion

3 elements carry transitions; typical 0.2s with ease-in, mostly on background-color, opacity, transform. No running keyframe animations at rest.

- Hover on nav-link ("teenage engineering"): no visible change; cursor pointer.
- Tooltip triggers exist (3 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- No dropdown menus found in the header.
- No scroll-reveal: content is visible without scrolling into view.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#0071bb` for actions and focus; never paint large areas with it.
- Do keep body text at 19px in te-20.
- Do match corner radii per element class (buttons 0px, cards 0px); do not pick one radius for everything.
- Don't add drop shadows; this design is flat.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.