name: teenage-engineering-design
version: alpha
description: >
  An uncompromising, Dieter-Rams-grade product grid. The canvas alternates pure
  product-white (#f5f5f5) and near-black (#0f0e12) full-bleed bands, hung on a
  rigid 980-unit modular grid with hairline cell dividers. One neutral
  Helvetica-style grotesque (te-20) carries everything at hair-thin weights
  (100/300), tiny and quiet. Color is forbidden in the chrome — it appears only
  in product photography and the single utilitarian blue "buy now" link. Zero
  border-radius, zero shadow, maximal whitespace. Surfaces studied via
  Playwright: home (computed :root tokens + representative elements).
colors:
  # Surface
  surface: '#F5F5F5'              # --te-white, product white
  surface-inverse: '#0F0E12'      # --te-black, full-bleed black bands
  # Text
  on-surface: '#0F0E12'
  on-inverse: '#E5E5E5'           # --te-grey-100
  on-surface-secondary: '#767676' # --te-grey-600, tiny labels
  hairline: '#CCCCCC'             # --te-grey-200 cell dividers
  # Interactive (the only color in chrome)
  link: '#0071BB'                 # --te-blue, "buy now"
  # Brand accent set (used in product imagery / status only, NOT chrome)
  accent-green: '#006837'         # --te-green / success
  accent-orange: '#F05A24'        # --te-orange
  accent-red: '#B81D13'           # --te-red / error #C0262C
  accent-yellow: '#FAB413'        # --te-yellow
typography:
  display:                        # product hero label (rare)
    fontFamily: 'te-20, Unicode, sans-serif'
    fontSize: 20px
    fontWeight: 300
    lineHeight: 29px
    letterSpacing: 0
  body:
    fontFamily: 'te-20, Unicode, sans-serif'
    fontSize: 16px
    fontWeight: 100
    lineHeight: 18px
    letterSpacing: 0
  label:                          # product names, "buy now"
    fontFamily: 'te-20, Unicode, sans-serif'
    fontSize: 16px
    fontWeight: 100
    lineHeight: 18px
    letterSpacing: 0
rounded:
  none: 0px                       # everything is square
spacing:                          # built on a 980-unit base design grid
  base-design-width: 980
  gutter: 55px                    # ~5.5vw footer/section padding
  sm: 12px
  md: 24px
  lg: 56px
components:
  product-cell:
    backgroundColor: '{colors.surface}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.none}'
    padding: '0'
    note: 'square grid cell; product floats on white, label + buy-now top-left'
  buy-now-link:
    textColor: '{colors.link}'
    typography: '{typography.label}'
    decoration: none
  nav-item:
    textColor: '{colors.on-inverse}'
    typography: '{typography.body}'
    note: 'lowercase, hair-thin, columnar text menu'
motion:
  easing-standard: 'ease'
  duration-standard: 200ms
  note: 'minimal; quiet fades and grid reveals'
icons:
  style: line / pictographic
  stroke: 1px
  sizes: { sm: 16px, md: 24px }
  color-rule: 'monochrome; brand 10 hexagonal mark only'

Teenage Engineering

v alpha · "explore all products"

Overview. teenage.engineering's site is a piece of industrial design in itself. The canvas alternates product-white #F5F5F5 and near-black #0F0E12 in full-bleed horizontal bands, each product photographed in dramatic light and floated in a vast square grid with hairline cell dividers. There is exactly one typeface — te-20, a neutral Helvetica-lineage grotesque — used at hair-thin weights (100/300), small and quiet, in lowercase. Color is pointedly absent from the interface: the only chromatic element in the chrome is the utilitarian blue #0071BB "buy now" link. All the vivid hues (green, orange, red, yellow) live in product imagery and status only. Corners are 0px, shadows are absent, and whitespace is the loudest element on the page.

Colors

• Product white #F5F5F5 {colors.surface} and near-black #0F0E12 {colors.surface-inverse} — the two canvases, alternating in bands.
• Grey scale — #E5E5E5 (on-black text), #CCCCCC (hairlines), #767676 (tiny secondary labels). Type is grey more often than black.
• Blue #0071BB {colors.link} — the single interface color, reserved for "buy now" and links.
• Named accent set — green #006837, orange #F05A24, red #B81D13, yellow #FAB413. These are product/status colors (record labels, the green battery glyph, error/success), never applied to chrome, buttons, or backgrounds.

Typography

Family: te-20 (custom Helvetica-style grotesque); closest open-source substitute: Helvetica Neue / Inter / ABC Diatype. Strategy: thin is the default — weight 100 for body and labels, 300 for the occasional larger line. Everything is set small and lowercase. No tracking adjustments. The restraint is the point.

Token	Size	Weight	Line-height	Usage
display	20px	300	29px	product hero label (rare)
body	16px	100	18px	descriptions, nav
label	16px	100	18px	product names, "buy now"

Layout

A rigid modular grid with a 980-unit base design width. Products sit in square cells separated by 1px hairlines; rows of 1–3 cells span full width. Section/footer padding is large (~55px / 5.5vw gutters). Massive negative space frames each object like a museum vitrine.

Elevation & Depth

Flat by doctrine. No shadows, no gradients in the chrome (product photography supplies its own studio lighting). Depth comes from the black/white band rhythm and hairline grid only.

Shapes

Square. Border-radius is 0 everywhere — cells, images, menus, links. The only curves on the page belong to the products themselves and the hexagonal "10" brand mark.

Components

• product-cell: square white cell, 1px hairline border, product image floated centre, name + blue "buy now" anchored top-left.
• buy-now-link: blue, no underline, hair-thin.
• nav-item: lowercase columnar text menu (products / store / latest / finder), grey on black.

Motion

Minimal and quiet — short (~200ms) fades and grid reveals. No parallax, no bounce, no decorative animation. Motion never competes with the products.

Iconography

Sparse 1px line/pictographic glyphs, monochrome. The hexagonal 10 logotype is the hero mark. Icons never carry color.

Do's and Don'ts

• Do keep the canvas to two values only: #F5F5F5 and #0F0E12, in full-bleed bands.
• Do set type thin (100/300), small, and lowercase.
• Do keep every corner square (radius 0) and every surface shadow-free.
• Do reserve blue #0071BB exclusively for "buy now"/links.
• Don't use green/orange/red/yellow in the chrome — they belong to products and status only.
• Don't add rounded buttons, drop shadows, or display serifs — they break the industrial grammar.