# Teenage Engineering — Marketing site Design Spec

> 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 are `not captured` from 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

| 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.

## 3. Typography Rules

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 |

## 4. Component Stylings

Buttons are borderless text (or an icon): transparent background, 0px radius,
weight 100, no shadow — a "button" is just a link. Inputs are a single 1px
#767676 bottom/box rule, 0px radius, transparent. Cards are silk-screen panels:
flat colour, 0px or large (55px) radius depending on shape, bounded by a 4.5px
#272727 rule rather than elevation. The signature surface is the pictographic
icon nav — each section (products / store / latest / finder) is a drawn glyph.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Text/link button | transparent, #0f0e12, weight 100 | opacity 0.7 | (browser default; site sets outline:none) | — | opacity lowered |
| Icon / product link | drawn glyph | opacity → 1 (fades up) / outline:none | outline:none | — | — |
| Input / select | 1px #767676, 0px radius, transparent | — | border-color #000000, outline:none | — | — |

Focus note: the site removes the outline (`outline:none`) and only darkens the
input border to #000. For accessibility a preview should add a visible ring
(e.g. `0 0 0 2px #0071bb`) — recorded as a replacement, not copied.

## 5. Layout Principles

Rigid Swiss column grid; a wide top nav band splits into labelled icon clusters
(brand · products · store · latest · finder · logo). Content is centred in a
generous max width with big whitespace margins. Section rhythm is set by full-
bleed coloured blocks alternating with white. Hero anatomy: a single centred
coloured "receipt" card (scalloped top edge) carrying one fat display headline.

## 6. Depth & Elevation

Radius: mostly 0px (controls, panels); large 46–55px radii appear on pill/round
shapes and the scalloped card. Shadows: **none anywhere** — zero box-shadows on
the page. Separation is by border: the signature 4.5px #272727 rule, plus 1px
#767676 hairlines on inputs. Depth is line weight, not elevation.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.15s | ease | link/icon hover fade |
| background-color | 0.2s | ease-in | colour blocks |
| transform | 0.2s | ease-in | interactive elements |

House transition: fast (0.15–0.2s), ease-in. `@keyframes` observed: `bulge`
(display pop), `_load_`, `_in_` (reveal), `_mrq-scroll_` (marquee ticker), plus
video.js spinner frames. No animation library detected (no GSAP/Lenis/Framer).
Custom easing seen: `cubic-bezier(0.6, 0.2, 0, 0.8)`. `prefers-reduced-motion`
not honoured (`honoursReducedMotion:false`). Deliberately still: colour blocks
and type do not animate on scroll.

## 8. Backgrounds, Effects & WebGL

None observed — flat solid surfaces. No CSS gradients, no backdrop-filter, no
canvas/WebGL, no grain/noise textures, no background video. Atmosphere comes
entirely from flat colour blocks and drawn pictograms.

## 9. Do's and Don'ts

### Do
- Write everything lowercase; reserve UPPERCASE for the fat rounded display.
- Keep chrome black-on-white; ration colour to full-bleed blocks by category.
- Use thin weights (100/300) for te-20 grotesque text.
- Separate with a 4.5px black rule; never with a shadow.
- Use pictographic icons in place of text labels where a glyph exists.
- Set controls to 0px radius; make hover an opacity change.

### Don't
- Don't add drop shadows or gradients — the surface is dead flat.
- Don't use bold weights for body/UI text.
- Don't tint borders or text with the accent colours.
- Don't mix two accent colours as a gradient — they are discrete codes.
- Don't Title-Case or capitalise running text.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| (none in readable sheets) | layout is fluid — type/space use vw/clamp, not width steps |

No width media queries were found in the same-origin stylesheets; 1 sheet was
cross-origin (`sheetsBlocked:1`) and may carry the mobile nav rules — recorded
as `not captured` for that sheet rather than implied. No dark-scheme blocks
(`darkSchemeBlocks:0`); the `hasDarkToggle` hit is a heuristic false-positive
(the site is light-only). No container queries.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#0f0e12` · Muted `#767676` · Border `#272727` (4.5px) · Accent `#f05a24` (code palette)
- Font: te-20 grotesque (Space Grotesk stand-in) + te-40 fat rounded (Fredoka) · Body: ~20px, weight 100 · Radius: 0px controls / 55px round shapes · Control height: text-only, no chrome
- Focus: site uses outline:none + border #000 — replace with `0 0 0 2px #0071bb` · Hover fill: none, opacity 0.7

<teenage-engineering_design_language>
Industrial Swiss-precise product-brand aesthetic. Pure white #ffffff canvas,
near-black #0f0e12 ink, cool off-white #f6f8f7 panels. Everything lowercase in a
thin neo-grotesque (te-20, weights 100/300; stand-in Space Grotesk); the only
play is a fat rounded display (te-40; stand-in Fredoka) set UPPERCASE for
hyphen-joined headlines ("please-do-not…"). Colour is a fixed hardware code —
blue #0071bb, green #006837, orange #f05a24, red #b81d13, yellow #fab413 — used
as full-bleed blocks, never as tint on chrome. Zero shadows, zero gradients;
separation is a 4.5px #272727 rule. Controls are borderless text at 0px radius;
hover is opacity 0.7, not colour. Fast 0.15–0.2s ease-in transitions. Fluid
vw/clamp sizing. Pictographic icons replace text labels. Feels: industrial,
precise, playful-deadpan, Swiss. Avoid: drop shadows, gradients, bold body text,
Title-Case running text, tinting borders/text with accents, mixing two codes.
</teenage-engineering_design_language>