--- version: alpha name: "teenage.engineering" description: "Design system extracted from https://teenage.engineering/ on 2026-10-28" colors: background: "#000000" foreground: "#f1f2f2" typography: headline-display: fontFamily: "te-20" fontSize: "48px" fontWeight: 100 lineHeight: "1.4" headline-lg: fontFamily: "te-20" fontSize: "32px" fontWeight: 100 lineHeight: "1.4" headline-md: fontFamily: "te-20" fontSize: "24px" fontWeight: 100 lineHeight: "1.4" body-md: fontFamily: "te-20" fontSize: "19.102px" fontWeight: 100 lineHeight: "22.0408px" label-md: fontFamily: "te-20" fontSize: "16px" fontWeight: 300 lineHeight: "24px" button: fontFamily: "te-20" fontSize: "16px" fontWeight: 100 lineHeight: "1.5" rounded: none: "0px" md: "7px" full: "9999px" spacing: unit: "4px" 1: "32px" 2: "68px" components: button-ghost: backgroundColor: "#000000" textColor: "#f1f2f2" 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 / 100, a monochrome palette. The site ships in dark mode by default (dark surfaces, light type). Measured from 1082 rendered elements at 1440px wide on 2026-10-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/brand-logo.png`: primary logo lockup - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/brand-favicon-source.png`: Favicon source - `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail - `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 - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png - `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp - `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png - `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png - `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png - `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png - `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png - `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico - `screenshots/c-button-1--rest.png`: Button 1 ("search"), rest - `screenshots/c-overlay-dialog-1--open.jpg`: Dialog / modal 1 opened by button "search" - `screenshots/c-label-1--rest.png`: Field label 1 ("country or regionunited "), rest - `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("newsletter"), rest - `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("newsletter"), hover - `screenshots/c-image-2--rest.png`: Image / figure 2, rest ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#000000` | Page background | | foreground | `#f1f2f2` | Primary text | Full painted palette by area (largest first): `#000000`. ## Typography - **te-20** for body, button, label: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | te-20 | 48px | 100 | 1.4 | normal | | headline-lg | te-20 | 32px | 100 | 1.4 | normal | | headline-md | te-20 | 24px | 100 | 1.4 | normal | | body-md | te-20 | 19.102px | 100 | 22.0408px | normal | | label-md | te-20 | 16px | 300 | 24px | normal | | button | te-20 | 16px | 100 | 1.5 | normal | - headline-display: fallback (source h1); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. - headline-lg: fallback (source h2); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. - headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. Type scale in use: 16px, 19px, 40px. Base body size 19.102px. See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## 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, md 7px, full 9999px ## Components ### Button, ghost Background transparent (it sits on `#000000`, so place it on that colour), text `#f1f2f2`, border none, radius 0px, height 32px, padding 0px 37px, 16px / 100. Sample label: "search". ### Link Colour `#f1f2f2`, no underline at rest, weight 100. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (8 of 87 in the checklist, 11 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 2 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | ghost sm, ghost, ghost lg | open | "search" | | Field label | other | rest only | "country or regionunited states" | | Navigation link | plain | rest only | "teenage engineering" | | Footer | default | rest only | "country or regionunited states" | | Footer link | plain | hover | "newsletter" | | Dialog / modal | default | rest only | "in cart" | | Image / figure | aspect-1, aspect-29.67 | rest only | | | Icon | outline-35px | rest only | | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Icon button, Toggle / segmented control, Button group, Text link, Floating action button, Close / dismiss button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Menu / dropdown trigger, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Card, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Video / media embed, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Hero, Section band, Content container, Grid of items, Sticky bar. ## Dark Mode The site is dark by default and no light 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 | 1308px | | 16px | | 0px, 22 links | | | content-width | | laptop 1024px | 930px | | 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 | - No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified. - Body text is 16px at the sampled desktop and phone widths. - 1 buttons stretch full-width on phones. ## Interaction & Motion 9 elements carry transitions; typical 0.15s with ease, mostly on background-color, opacity, color. 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. - 6 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe). 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 - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Do keep body text at 19.102px in te-20. - Do match corner radii per element class (buttons 0px, cards 0px); do not pick one radius for everything. - No global shadow was sampled. Inspect regional/component recipes and screenshots before treating a local surface as flat. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from body; large surface colors remain in the palette.