--- version: alpha name: "teenage engineering" website: "https://teenage.engineering" description: >- A Swedish product-design studio whose marketing site runs on two proprietary bitmap fonts (te-20 and te-40) at weight 100–300, a pure-black canvas striped with fine black-on-white grid lines, and zero chromatic brand voltage — the product photography carries every accent color while the interface chrome stays pure monochrome. The result is an industrial-cataloguing tone that positions hardware objects (OP-1 field, EP-133, K.O. II) as precision instruments rather than consumer gadgets. seo: title: "teenage engineering Design System for React — monochrome industrial, te-20/te-40, 16 components" metaDescription: "teenage engineering's site runs two proprietary bitmap fonts at weight 100 on a pure-black canvas with no chromatic brand chrome — the products supply every accent. Tokens for React, Next.js, and AI coding tools." highlights: - "Proprietary bitmap fonts — te-20 and te-40 are custom-drawn sans-serifs used at weight 100–300; no system font appears anywhere in the hierarchy" - "Zero chromatic brand voltage — every color in the JSON is a structural grey or error-state utility; the cobalt, yellow, and orange product colors exist only in photography" - "Viewport-relative type scale — font sizes are calc() expressions against 100vw, so type scales continuously with the browser width rather than jumping at breakpoints" - "Flat zero-radius geometry — --tile-border-radius and --field-border-radius are both 0; every surface meets at right angles with no rounding" - "Black-on-white grid dividers — 1px grey lines bisect the product catalog grid, creating a technical-spec-sheet aesthetic rather than a card-and-shadow layout" tags: - "Consumer Electronics" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | teenage engineering's marketing site is the rarest thing in consumer hardware: a page that refuses to sell. The hero is not a lifestyle shot with a gradient overlay and a centered CTA — it is a product photograph against a dark background, with a tiny lowercase wordmark in the upper corner and a navigation bar whose link text runs in weight 100 at roughly 23px. There is no primary CTA color. There is no accent. The interface chrome is black, white, and three greys. If the products themselves weren't so visually striking — the brushed-aluminum OP-1 field, the K.O. II's orange trigger buttons, the EP-133's bone-white rubber pads — the page would read as an engineering specification rather than a store. The DESIGN.md file packages this system into ground-truth tokens: 15 color tokens covering a pure-black canvas, five grey steps, a pale off-white product-background tone, and utility colors for error and success states — none with meaningful background usage in the marketing chrome. Two typography tokens represent the te-20 and te-40 families across four weight-and-size pairings (13px/300 for labels, 19px/100 for body, 23px/100 for nav links, 40px/300 for display). The entire spacing system is derived from CSS viewport-relative calc() expressions rather than fixed pixel values, and the radius system is empty: 0px everywhere. Feed this file to an AI coding tool and it reproduces teenage engineering's specific restraint: no border radius on any surface, weight 100 type used where most brands would use weight 600, a canvas that's as dark as a hardware enclosure rather than a marketing gradient, and product photography trusted to carry 100% of the emotional and chromatic work. The one principle worth borrowing unconditionally: if your product is visually interesting, do not compete with it. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://teenage.engineering" title: "teenage engineering — official site" description: "teenage engineering's public marketing and store site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "Does teenage engineering have a brand color?" answer: "No — and that is the point. The extraction finds zero chromatic tokens with meaningful background or text usage in the marketing chrome. The CSS variable system declares --te-blue (#0071bb), --te-yellow (#fab413), --te-orange (#f05a24), --te-red (#b81d13), and --te-green (#006837), but none of these appear as brand fills on the marketing surface — they exist as product-color references or status indicators (error, success). Every chromatic moment on the page lives inside the product photography. The brand chrome is pure monochrome: black canvas, white text, five grey steps." - id: "typography" title: "What fonts does teenage engineering use, and what substitutes work?" answer: "teenage engineering uses two proprietary bitmap-style fonts: te-20 (the body/label/nav family) and te-40 (the display family). Both are referenced in CSS as quoted strings with Unicode as a fallback. te-20 appears at weight 100 for navigation links and body text (~19px), weight 300 for small labels (~13px). te-40 appears at weight 300 for display headings (~40px). Neither font is available on Google Fonts or any open CDN. For substitutes, IBM Plex Mono at weight 100/300 captures the engineering-instrument tone while being freely available. DM Mono is a softer alternative if you want slightly friendlier counters." - id: "radius-style" title: "What corner radius does teenage engineering use?" answer: "Zero. Every value in --tile-border-radius, --field-border-radius, and every measured surface is 0px. This is not an omission — it is the brand's most legible structural decision. Right-angle corners read as instrument panels and hardware enclosures; rounded corners read as consumer apps. teenage engineering's products themselves have rounded corners, but the website interface surface does not soften its geometry. If you're building with this spec, do not introduce rounding to 'improve' the feel — the sharp corners ARE the feel." - id: "spacing-system" title: "How does the spacing system work if sizes are viewport-relative?" answer: "teenage engineering's spacing is expressed as CSS calc() expressions against 100vw rather than fixed pixel values. The base unit is roughly 0.51vw (about 5px on a 980px base-design-width viewport). Named steps include --space-xs (~5px at 980px), --space-sm (~10px), --space-md (~15px), --space-lg (~22px), and --space-xl (~45px). The DESIGN.md spec converts these to pixel approximations at the 980px base. In practice this means type, spacing, and layout all scale continuously — a 1440px viewport sees proportionally larger spacing without a CSS breakpoint firing. It is closer to fluid typography than to a Tailwind spacing scale." - id: "dark-mode" title: "Does teenage engineering have a light mode?" answer: "The page uses two canvas modes: the main marketing surface runs on a near-black body background (--theme-body-bc: #000000), while individual product detail areas can flip to a pale off-white (--product-background-color: #f6f8f7 / --te-white) per product. This is less a light/dark toggle and more a per-product theming system — the OP-1 field uses a dark backdrop, while some accessories use the off-white. There is no user-controllable light mode on the marketing site." mockups: - "marketing-hero" - "media-grid" colors: ink: "#000000" ink-muted: "#b2b2b2" ink-faint: "#e5e5e5" canvas: "#0f0e12" canvas-body: "#000000" surface-1: "#f6f8f7" hairline: "#e5e5e5" hairline-dark: "#b2b2b2" grey-mid: "#767676" grey-deep: "#4d4d4d" grey-darkest: "#272727" grey-light: "#a1a7af" error: "#b81d13" success: "#006837" te-blue: "#0071bb" te-yellow: "#fab413" typography: display-xl: fontFamily: "\"te-40\", \"Unicode\", sans-serif" fontSize: 40px fontWeight: 300 lineHeight: 44px letterSpacing: 0 body-lg: fontFamily: "\"te-20\", \"Unicode\", sans-serif" fontSize: 19px fontWeight: 100 lineHeight: 22px letterSpacing: 0 body-sm: fontFamily: "\"te-20\", \"Unicode\", sans-serif" fontSize: 13px fontWeight: 300 lineHeight: 15px letterSpacing: 0 nav-link: fontFamily: "\"te-20\", \"Unicode\", sans-serif" fontSize: 23px fontWeight: 100 lineHeight: 35px letterSpacing: 0 label-sm: fontFamily: "\"te-20\", \"Unicode\", sans-serif" fontSize: 13px fontWeight: 300 lineHeight: 15px letterSpacing: 0 rounded: none: "0px" full: "9999px" spacing: xs: "5px" sm: "10px" md: "15px" lg: "22px" xl: "45px" section: "66px" gutter: "33px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.surface-1}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "10px 20px" height: "40px" border: "0" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "10px 20px" height: "40px" borderColor: "{colors.ink}" top-nav: backgroundColor: "transparent" textColor: "{colors.ink-faint}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px" height: "70px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink-faint}" typography: "{typography.nav-link}" padding: "0px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink-faint}" typography: "{typography.display-xl}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-faint}" typography: "{typography.body-lg}" padding: "0px" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "10px" product-tile: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.label-sm}" rounded: "{rounded.none}" padding: "10px" text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "10px" height: "40px" borderColor: "{colors.hairline}" grid-divider: backgroundColor: "{colors.hairline-dark}" height: "1px" footer: backgroundColor: "{colors.canvas-body}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "22px 66px" badge-error: backgroundColor: "{colors.error}" textColor: "{colors.surface-1}" typography: "{typography.label-sm}" rounded: "{rounded.none}" badge-success: backgroundColor: "{colors.success}" textColor: "{colors.surface-1}" typography: "{typography.label-sm}" rounded: "{rounded.none}" field-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-sm}" padding: "15px 0px 5px 0px" --- ## Overview teenage engineering's marketing site runs one of the most disciplined monochrome systems in consumer electronics. **Instrument-grade restraint.** The brand treats its website the way Braun treated product packaging — the surface exists to frame the object, not to decorate it. Where Apple covers its dark canvas with oversized marketing prose and Sony layers gradient rectangles over lifestyle photography, teenage engineering puts a product photograph at 80% of the viewport and trusts that the object is interesting enough to carry the page. The type system amplifies this. Two proprietary bitmap fonts — te-20 and te-40 — run exclusively at weights 100 and 300 across the entire site. At 100-weight, the 23px navigation links barely register as text; they read as dimension annotations rather than clickable affordances. The 40px display tier in te-40 at weight 300 is the loudest typographic moment in the system — measured against almost any other hardware brand, it would be considered understated. There are no heavy headlines, no 700-weight callouts, no gradient type effects. The products are allowed to be the loudest thing in the room. The geometry enforces the same philosophy: every surface has a 0px border radius. Not 2px, not 4px — zero. Input fields, tiles, navigation items, dialogs: all right-angled. This is the inverse of the consumer-app convention where rounded corners signal friendliness. Right angles signal precision manufacturing. **Key Characteristics:** - Two proprietary fonts (te-20 / te-40) used at weights 100–300 only; no weight above 300 appears anywhere on the page. - Pure-black canvas ( body background) with no atmospheric gradient or colour wash — the product photography provides all warmth. - Zero corner radius on every surface: tiles, inputs, buttons, cards — the geometry is instrument-panel sharp. - Viewport-relative type scale (calc() against 100vw) scales continuously rather than jumping at breakpoints. - Five grey steps from to carry all structural chrome (borders, labels, muted text). - Product accent colors (te-blue, te-yellow, te-orange) exist only in CSS variables; none appear in the marketing interface chrome. - Grid dividers (1px lines in ) bisect the product catalog, creating a technical-spec-sheet composition. ## Colors ### Surface - **Canvas Body** (`{colors.canvas-body}` — ): frequency 4 bg. The page floor. Used as the main body background. The darkest possible canvas, chosen to maximize the photographic contrast of hardware products against it. - **Canvas** (`{colors.canvas}` — ): frequency 10 total. Used as a near-black foreground text and border color for top-tier sections. Subtly warm black that appears in theme overrides. - **Surface-1** (`{colors.surface-1}` — ): frequency 34 bg. The off-white product-background tone, wired as --te-white / --product-background-color. Used in per-product detail sections (e.g., white-body accessories) to create a bright field around the hardware. ### Text - **Ink** (`{colors.ink}` — ): frequency 178 text, 178 border. The dominant text and border color across all elements. Pure black on the off-white surface sections. - **Ink Muted** (`{colors.ink-muted}` — ): frequency 4 text, 4 border. Used for disabled field labels and grid divider lines. Wired as --te-grey-300. - **Ink Faint** (`{colors.ink-faint}` — ): frequency 57 text, 57 border. The primary text color on the dark canvas — a near-white rather than pure white, slightly warmer. Wired as --te-grey-100 and --theme-fct. ### Structure - **Hairline** (`{colors.hairline}` — ): frequency 57 border. The dominant border color throughout the form and input system. - **Hairline Dark** (`{colors.hairline-dark}` — ): frequency 4 border. The grid divider color, wired as --grid-divider-color. - **Grey Mid** (`{colors.grey-mid}` — ): declared as --te-grey-600. Placeholder text and mid-grey labels. - **Grey Deep** (`{colors.grey-deep}` — ): declared as --te-grey-900. Deep mid-grey for inactive states. - **Grey Darkest** (`{colors.grey-darkest}` — ): declared as --te-grey-1000. The darkest structural grey, used for rich-text elements. - **Grey Light** (`{colors.grey-light}` — ): declared as --te-grey-500. A slightly blue-grey mid-tone. ### Utility - **Error** (`{colors.error}` — ): declared as --te-red / --error. The single chromatic status color with a semantic role in the interface. - **Success** (`{colors.success}` — ): declared as --te-green / --success. Confirmation states only. - **te-blue** (`{colors.te-blue}` — ): declared as --te-blue. Referenced in CSS but does not appear in the marketing chrome — lives in product color annotations. - **te-yellow** (`{colors.te-yellow}` — ): declared as --te-yellow. Same — product reference only, not a brand chrome token. ## Typography ### Font Family The system runs two proprietary families: **te-20** for body, label, and nav-link tiers; **te-40** for display headings. Both reference "Unicode" as a fallback, suggesting a broad character-set requirement for international product names. Neither is available on any public font CDN. ### Hierarchy | Token | Family | Size | Weight | Use | |---|---|---|---|---| | `{typography.display-xl}` | te-40 | ~40px | 300 | Product name headers | | `{typography.nav-link}` | te-20 | ~23px | 100 | Primary navigation links | | `{typography.body-lg}` | te-20 | ~19px | 100 | Body paragraphs | | `{typography.body-sm}` | te-20 | ~13px | 300 | Small labels, form fields | | `{typography.label-sm}` | te-20 | ~13px | 300 | Category chips, metadata | ### Principles The weight ceiling is 300. No bold, no semibold, no medium — the heaviest moment in the type system is the 300-weight display tier at 40px. This is the typographic equivalent of speaking at a measured volume in a quiet room; the type never shouts. At 100-weight the navigation links are almost whispered. All sizes in the CSS are calc() expressions against 100vw (e.g., `calc(.0367347 * 100vw)` for the 40px display at a 980px reference width). This creates continuous fluid scaling rather than breakpoint-driven size jumps. ### Note on Font Substitutes te-20 and te-40 are not publicly available. **IBM Plex Mono** at weights 100/300 is the closest open alternative — it carries the same instrument-panel seriousness and has a 100-weight that reads comparably at large sizes. **DM Mono** is a friendlier alternative if the IBM Plex Mono austerity is too severe for your context. ## Layout ### Spacing System - **Base reference width:** 980px. All spacing is expressed as viewport percentages. - **Tokens (px at 980px base):** `{spacing.xs}` 5px · `{spacing.sm}` 10px · `{spacing.md}` 15px · `{spacing.lg}` 22px · `{spacing.xl}` 45px. - **Grid gutter:** `{spacing.gutter}` 33px, used as the horizontal margin on product grid sections. - **Section padding:** `{spacing.section}` 66px, the canonical horizontal page margin. - **Field internals:** ~10px vertical padding inside form inputs. ### Grid & Container - **Product grid:** A variable-column tile grid separated by 1px grey dividers (not gutters or white space — the dividers are inked lines between cells). - **Hero:** Full-bleed product photography with the wordmark and nav overlaid in the upper portion. - **Max content width:** Derived from the 980px base design width but the site scales fluidly above this. - **No cards with drop shadows** — every surface boundary is expressed as a hairline or a background-color change. ### Rhythm The page alternates between black-canvas sections (the hero and marketing prose) and off-white sections (product detail areas). There are no gradient transitions — each section terminates with a hard edge. The dividers and margins are the only whitespace management tool. ## Elevation The system has no shadow tier. Elevation is expressed exclusively through background-color contrast: off-white product tiles (`{colors.surface-1}`) against the pure-black canvas (`{colors.canvas-body}`). There are no box-shadow values anywhere in the extracted CSS. Cards and form fields use hairline borders rather than shadows to define their edges. This is the same strategy as the radius choice — avoiding any design move that reads as "app chrome" rather than "hardware documentation." ## Shapes Every surface has `{rounded.none}` (0px) border radius. This is the system's single most declarative geometric statement. The CSS declares `--tile-border-radius: 0` and `--field-border-radius: 0` as explicit zeroes — not defaults, but intentional values. The only exception in the declared variables is `--round: 9999px`, which exists as a utility for pill shapes on specific interactive states (not used in the main marketing chrome). The right-angle aesthetic extends from the page tiles to the input fields to the navigation items. ## Components **`button-primary`** — Black fill, off-white text, 0px radius, 10x20 padding, 40px height. There is no conventional CTA color — the "primary" button is a black rectangle. The absence of a colored button is the brand's confidence signal. **`button-secondary`** — Transparent fill with a 1px black border, black text. Same geometry. **`top-nav`** — Transparent background with off-white text in te-20 at weight 100 and 23px. The nav is not contained in a header bar — it floats above the hero photography. **`nav-link`** — Same as top-nav styling. No hover background in the captured surface. **`hero-heading`** — Off-white text, te-40 at 40px weight 300. No padding — the heading floats in the product photography. **`body-paragraph`** — Off-white text at 19px weight 100. On the dark canvas sections this is the reading text. **`body-paragraph-muted`** — Mid-grey text at 13px weight 300. Used for metadata beneath product tiles. **`card`** — Off-white surface, black text, 0px radius, 10px internal padding. The product catalog tiles. **`product-tile`** — Same surface tone as card, used for the individual product cells in the catalog grid. **`text-input`** — Off-white surface, black text, 0px radius, 1px grey border, 10px internal padding, 40px height. Form inputs throughout the store and newsletter. **`grid-divider`** — A 1px horizontal/vertical line in that separates catalog cells. **`footer`** — Pure-black canvas, muted-grey text, 22x66 padding. No surface contrast against the page floor. **`field-label`** — Transparent background, black text at 13px weight 300, with 15px top padding and 5px bottom padding above input fields. ## Do's and Don'ts **Do** keep type weights at 300 or below. The system's authority comes from weight restraint — weight 100 navigation at 23px is the brand's deliberate contrast with consumer-app conventions that use weight 600 for the same text. **Do** use `{colors.surface-1}` as the product-tile background on dark-canvas pages. The off-white is the only "lifted" surface in the system — it reads as a physical product sitting on a dark work surface. **Do** express borders as hairlines (`{colors.hairline}` — ) rather than shadows. The system has zero shadow usage; every boundary is a line, not a blur. **Do** rely on product photography for all chromatic accent. The te-blue, te-yellow, and te-orange CSS variables exist as product-color documentation, not brand-chrome tokens — use them only in product annotation contexts, never as button fills or section headers. **Don't** introduce any border radius. Even 2px on a button would read as borrowing from the consumer-app vocabulary that this brand explicitly rejects — the right-angle geometry is a literal design statement. Use `{rounded.none}` universally. **Don't** use te-40 or te-20 as background fills or icon shapes. They are text-only families. Decorative uses of type-as-graphic fall outside this system's vocabulary. **Don't** use (`{colors.ink-faint}`) as a background color — it is a text color on the dark canvas, wired as --theme-fct (foreground content text). Using it as a surface fill would collapse the on-dark contrast model. For light surfaces, use `{colors.surface-1}`. **Don't** add a colored primary button. The `{colors.ink}` black rectangle is the system's CTA geometry; introducing a blue or orange fill would add a brand-chrome color that doesn't exist in this system and would compete with the product photography's accent colors. ## Known Gaps - **Hover and focus states:** no hover fills or focus rings are captured from the marketing surface; the form system declares --round for potential pill focus styles but nothing is rendered in the captured chrome. - **Mobile breakpoints:** the viewport-relative type system adapts continuously, but mobile nav behavior (hamburger menu, collapsed grid) is not captured in the static extraction. - **Product-specific theme overrides:** the CSS variable system includes --theme-bc, --theme-fc, --theme-fct, and --theme-mc which appear to support per-product color theming; the rules for these overrides are not captured here. - **Cart and checkout UI:** the store checkout flow has its own typography and layout not represented in the marketing-surface extraction. - **Animation:** product photography sections use subtle entrance animations not captured in the static token spec. - **Webshop-specific components:** the add-to-cart button, quantity stepper, and size selector appear in the product pages but not in the marketing chrome captured here.