---
title: "teenage engineering design system"
variant: extended
source: https://teenage.engineering/
captured_at: 2026-10-12
theme: dark
industry: consumer-electronics
generator: Design DNA (https://four.wiralomi.com/style/teenage-engineering)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# teenage engineering · Design System

> Monochrome storefront, framed like an urban portrait.

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://teenage.engineering/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A monochrome, image-led homepage that opens on the teenage engineering department store in New York. Fine-line navigation and restrained copy sit over a full-bleed architectural photograph, with store hours and compact footer links below.

## North star

Let one atmospheric monochrome photograph carry the page, and keep every interface element quiet, precise, and legible against black.

## Overview

The visual strategy is built around a near-black canvas and a single full-bleed black-and-white photograph of the New York store. The palette stays tightly controlled: #000000 anchors the page, while #f1f2f2 supplies the light navigation and key text; #e5e5e5 appears in footer text rather than acting as a broad surface colour. The photograph provides most of the tonal variation and texture, so the interface avoids competing decoration. Navigation is arranged as a horizontal line of compact groups, with thin outlined pictograms and wordmarks integrated into the image. The bespoke sans-serif typography is light and spacious in feel, with uppercase treatment reserved for the measured heading role. The page uses a single-column, full-bleed composition with a central store-hours message beneath the image. Spacing is comfortable, but interface chrome remains sparse, flat, and functional.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Stage | `#000000` | `--color-deep-stage` | brand | Full-page canvas and the dark field surrounding the store photograph; also appears in the cart link text. |
| Studio Chalk | `#f1f2f2` | `--color-studio-chalk` | neutral | Primary navigation, light text, and outlined navigation graphics over the dark image and canvas. |
| Quiet Silver | `#e5e5e5` | `--color-quiet-silver` | neutral | Measured in footer text; keep it confined to secondary page details rather than introducing pale panels. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Stage) · `--color-text` → `#f1f2f2` (Studio Chalk)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f1f2f2` | `#000000` | 18.72:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| te-20 | `--font-body` | webfont | 100, 300 | Main site typography for body copy, navigation, and captions. | Inter |
| te-40 | `--font-display` | webfont | 300 | Measured heading face; used for the uppercase h1 role. | Oswald |

- **te-20:** Very light measured weights; use restrained, untracked lowercase text for navigation and body.
- **te-40:** Light weight and uppercase heading treatment; keep headings compact and avoid heavy bold styling.

### Type scale — Augmented Fourth (ratio ≈ 1.395, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 26.5px | 300 | 1.11 | 0 | uppercase | te-40 | Uppercase display heading role; use sparingly for prominent page titles. |
| body | 19px | 100 | 1.15 | 0 | — | te-20 | Store announcements and primary supporting copy. |
| caption | 16px | 100 | 1.5 | 0 | — | te-20 | Small secondary labels and compact supporting details. |
| nav | 16px | 100 | 1.5 | 0 | — | te-20 | Top-level navigation and utility links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 15, 22, 33, 66 px.
- Section rhythm 66px · element gap 22px · card padding — · max content width 1308px.

Use a single-column, full-bleed page with a wide photographic hero and no visible card grid. The measured content max width is 1308px, while the screenshot’s image fills the viewport. Arrange navigation in compact horizontal groups across the top, then let the photograph dominate the page. Keep the store-hours message centered below the image and place the small footer links in a restrained horizontal row. Measured spacing follows a comfortable rhythm, with a 66px section gap and 22px element gap.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in` on interactive elements.

The interface is flat: measurements report no shadows, gradients, or corner-radius scale. Separate content through placement and contrast rather than raised panels. Thin outlined navigation illustrations sit directly over the image, and text remains unboxed against the black canvas.

## Imagery

Use real architectural photography as the page’s defining visual: a street-level storefront, photographed straight on and framed vertically to show the facade. Treat it in high-contrast grayscale, with deep shadows and visible masonry texture. Avoid decorative product mockups or colourful illustration; the measured screenshot’s tonal variation comes from the photograph itself.

## Components

### Image-overlay navigation

A compact horizontal set of grouped brand, product, store, latest, and finder links, rendered in light text over the top of the photograph.

### Outlined navigation pictograms

Thin, monochrome line drawings accompany navigation groups; keep them unfilled and visually subordinate to the labels.

### Full-bleed storefront image

The dominant page element is a grayscale architectural photograph, shown edge to edge without a card frame.

### Store-hours announcement

Centered light text below the image announces opening and weekly hours on the black canvas.

### Compact footer links

A small, low-emphasis row of locale, newsletter, retailers, store, terms, press, contact, and returns links.

### Search utility

A measured text-style search button uses #f1f2f2 without a filled background, visible border, or padding.

### Measured component styles

- **Primary button** (“search”): transparent background · text #f1f2f2 · radius 0px · padding 0px · 100 16px te-20
- **Link** (“in cart”): transparent background · text #000000 · radius 0px · padding 0px · 300 16px te-20
- **Navigation item** (“now instagram newsletter latest store de”): transparent background · text #f1f2f2 · radius 0px · padding 0px · 100 16px te-20

## Do

- Use #000000 as the dominant page canvas.
- Reserve #f1f2f2 for navigation and primary light text.
- Let grayscale photography provide most of the visual texture.
- Keep navigation light, compact, and grouped across the top.
- Use thin outlined pictograms rather than filled icons.
- Center store information beneath the main image.

## Don't

- Do not add bright accent colours absent from the measured palette.
- Do not place the photograph inside a rounded card.
- Do not add gradients, drop shadows, or decorative elevation.
- Do not crowd the hero with promotional copy or buttons.
- Do not make navigation heavy or oversized.
- Do not treat photograph-only tonal grays as interface brand colours.

## Agent prompt

Build a new page in the teenage engineering visual style. Use Deep Stage (#000000) as the main canvas and Studio Chalk (#f1f2f2) for navigation, primary copy, and fine outlined graphics; reserve Quiet Silver (#e5e5e5) for subdued footer details. Lead with a single edge-to-edge, high-contrast grayscale architectural photograph, with compact grouped navigation overlaid along its upper edge. Use lightweight sans-serif typography, keeping headings uppercase and supporting text understated. Follow a single-column composition, let imagery dominate, and keep the store or page message centered below it. Use generous measured spacing, flat surfaces, square geometry, and no shadows or gradients. Avoid adding new accent colours, card grids, or decorative UI that competes with the photograph.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed vertical storefront photograph with navigation overlaid at the top and store hours beneath. | Image-led introduction, Top-level navigation, Store-hours announcement | Monochrome photography, Light text on black, Thin outlined pictograms |

## Source CSS custom properties (selected)

```css
--product-background-color: #f5f5f5;
--theme-mobile-cart-text: rgb(15, 14, 18);
--header-adjustment-primary: calc(.00306122 * 100vw);
--header-adjustment-secondary: calc(-.00204082 * 100vw);
--space-xs: calc(.00510204 * 100vw);
--space-sm: calc(.0102041 * 100vw);
--space-md: calc(.0153061 * 100vw);
--space-lg: calc(.0229592 * 100vw);
--space-xl: calc(.0459184 * 100vw);
--tile-border-radius: 0;
--field-color: #000;
--field-color-disabled: #b2b2b2;
--field-background: #fff;
--field-background-disabled: #e5e5e5;
--field-font-size: calc(.0132653 * 100vw);
--field-border-color: #e5e5e5;
--field-border: calc(.00102041 * 100vw) solid #e5e5e5;
--field-border-radius: 0;
--grid-divider-color: #b2b2b2;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/teenage-engineering