A website built like one of the company products: a rigid Swiss grid, everything lowercase in a hairline-thin grotesque (te-20, weights 100/300), and a pictographic icon nav in place of words. The one moment of play is a FAT ROUNDED display face (te-40) set UPPERCASE for hyphen-joined headlines ("please-do-not-share…") on a scalloped colour receipt card. Colour is a fixed hardware code — blue #0071bb, green #006837, orange #f05a24, red #b81d13, yellow #fab413 — used as full-bleed blocks, never as chrome tint. Surfaces are dead flat with zero shadows and zero gradients; separation is a signature 4.5px #272727 rule and 1px #767676 input hairlines. Controls are borderless text at 0px radius and hover is opacity 0.7, not a colour shift. Sizing is fluid vw/clamp rather than breakpoint-stepped. Feels industrial, precise and playful-deadpan.
Browse Teenage Engineering in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: teenage.engineering (live DOM, computed styles), 2026-07-25. Coverage: home. Published--te-*token set read in full. 1 stylesheet cross-origin (sheetsBlocked:1) — its @media rules were unreachable, so §10 breakpoints arenot capturedfrom that sheet; the readable sheets carry none because type/space are fluid (vw/clamp), not breakpoint-stepped. Reality check: matches the hint — industrial-design minimal, Swiss grid, colour-coded palette. Adds two things the hint missed: a *fat rounded* display face used only for playful hyphen-joined headlines, and a pictographic icon nav (fan / battery / square / dial) instead of text labels.
The website behaves like one of the company's products: a precise Swiss grid, lowercase everywhere, hairline-thin grotesque text, and pictographic icons in place of words. Colour is rationed to a fixed hardware-style code (blue / green / orange / red / yellow) that appears in full-bleed blocks, never as chrome tint. The one moment of play is a fat, rounded display face used for hyphen-joined headlines ("please-do-not-share…") on a coloured receipt card. Surfaces are dead flat — no gradients, no shadows — and separation comes from thick 4.5px black rules, the way a panel is silk-screened onto anodised aluminium. Feels: industrial, precise, playful-deadpan, Swiss.
| Token | Hex | Role / usage |
|---|---|---|
| --te-black | #0f0e12 | primary text / ink |
| (pure black) | #000000 | icons, display headlines, thick rules |
| --te-grey-900 | #4d4d4d | strong secondary text |
| --te-grey-600 | #767676 | input borders, muted text |
| --te-grey-500 | #a1a7af | tertiary text |
| --te-grey-300 | #b2b2b2 | faint / placeholder |
| --te-grey-200 | #cccccc | disabled fills |
| --te-grey-100 | #e5e5e5 | light dividers, inverse body text |
| --te-grey-1000 | #272727 | thick 4.5px border colour |
| --white | #ffffff | page canvas |
| --te-white | #f5f5f5 | off-white raised surface |
| (section fill) | #f6f8f7 | dominant panel background (cool off-white) |
Colour-coded accents (equal-weight, used as full blocks — pick by category, never mix as tint):
| Token | Hex | Role / usage |
|---|---|---|
| --te-blue | #0071bb | accent / link |
| --te-green | #006837 | accent · also --success |
| --te-orange | #f05a24 | accent / campaign blocks |
| --te-red | #b81d13 | accent |
| --te-yellow | #fab413 | accent / campaign blocks |
| --error | #c0262c | error state |
Rule: accents live in full-bleed blocks and product art, not in borders, text or hovers. Chrome stays black-on-white; hover is an opacity change, not a colour.
Families: te-20 — the workhorse neo-grotesque (nav, body, UI); te-40 — a fat rounded geometric display, used only for hyphen-joined playful headlines. Both are custom TE faces. Weights run *light*: 100 and 300 dominate the page. Case is lowercase throughout (proper nouns included); the fat display headlines are the only UPPERCASE. Sizing is fluid (vw/clamp) — the odd computed px values (20.06 / 24.69 / 41.66) are viewport-scaled, not a fixed ladder.
Specimen substitution: previews use Space Grotesk for te-20 and Fredoka
for te-40 (one bundled Google Fonts link); the site ships the licensed te-20 / te-40.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (hero) | te-40 | ~42px+ / 1.11, fluid | 300 | normal |
| Section link | te-40 | 41.66/46.29 | 300 | normal |
| Nav / UI | te-20 | 24.69/37.03 | 100 | normal |
| Body | te-20 | 20.06/23.14 | 100 | normal |
| Eyebrow / label | te-20 | 24.69/37.03 | 300 | normal, lowercase |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.