# Teenage Engineering

순백 캔버스 위에 굵은 블랙 타이포와 도트-매트릭스 아이콘이 펼치는 Y2K 산업 미학 — 제품이 곧 디자인이다.

- taxonomy: y2k · black-white, dot-matrix, industrial, block-type, orange-accent, uppercase-heavy, zero-radius, product-catalog, technical · complexity=high
- page types: ecommerce, landing, portfolio
- best for: 하드웨어·제품 카탈로그, 산업 디자인 포트폴리오, Y2K·밀레니엄 감성 브랜드, 독특한 크리에이티브 스튜디오 사이트
- avoid for: 소프트웨어 SaaS 대시보드, 따뜻한 라이프스타일 이커머스, 글래스모피즘·소프트 UI, 장문 콘텐츠 블로그
- provenance: website (teenage engineering) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, dark=vision-inferred, light=computed-css

## Design rules

# Teenage Engineering — Design Specification
## Overview
Teenage Engineering's website is an industrial Y2K masterpiece. Pure B&W canvas with orange-red accents. Massive block typography (up to 6rem), dot-matrix icons, zero radius, heavy borders. Dense catalog layouts. Mechanical, technical, bold.
## Color Architecture
- Pure white = canvas, Pure black #0f0e12 = text/borders
- Orange-red ~#ff3c00 = accent highlights, prices
- Blue #0071bb = occasional link color
## Signature Elements
- Zero border-radius, flat design, heavy 2px borders
- Massive uppercase block headings (900 weight)
- Dot-matrix pixel icons for navigation categories
- Dense asymmetric grid layouts
## Agent Prompt Guide
> B&W industrial catalog with orange accent. Massive uppercase headings. Zero radius, heavy borders, dot-matrix icons. Dense, mechanical, bold.
## Known Gaps
- TE Regular font proprietary (Space Grotesk fallback)
- Dot-matrix icons are brand assets, not extractable
- Dark mode synthesized


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Teenage Engineering — theme.css (generated, do not edit) */
:root {
  --radius: 0px;
  --radius-selector: 0px;
  --radius-field: 0px;
  --font-sans: TE Regular, Helvetica, Arial, sans-serif;
  --font-mono: TE Regular, Courier New, monospace;
  --font-display: TE Regular, Impact, sans-serif;
  --spacing: 8px;
  --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent);
  --ks-display-weight: 900;
  --background: oklch(1.000 0.000 0);
  --foreground: oklch(0.167 0.008 296.9);
  --card: oklch(1.000 0.000 0);
  --card-foreground: oklch(0.167 0.008 296.9);
  --popover: oklch(1.000 0.000 0);
  --popover-foreground: oklch(0.167 0.008 296.9);
  --primary: oklch(0.167 0.008 296.9);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.922 0.000 0);
  --secondary-foreground: oklch(0.167 0.008 296.9);
  --muted: oklch(0.950 0.000 0);
  --muted-foreground: oklch(0.535 0.143 247.7);
  --accent: oklch(0.600 0.220 30);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.167 0.008 296.9);
  --input: oklch(0.950 0.000 0);
  --ring: oklch(0.167 0.008 296.9);
}

.dark {
  --background: oklch(0.167 0.008 296.9);
  --foreground: oklch(1.000 0.000 0);
  --card: oklch(0.200 0.006 296);
  --card-foreground: oklch(1.000 0.000 0);
  --popover: oklch(0.200 0.006 296);
  --popover-foreground: oklch(1.000 0.000 0);
  --primary: oklch(1.000 0.000 0);
  --primary-foreground: oklch(0.167 0.008 296.9);
  --secondary: oklch(0.250 0.005 296);
  --secondary-foreground: oklch(0.922 0.000 0);
  --muted: oklch(0.250 0.005 296);
  --muted-foreground: oklch(0.600 0.005 296);
  --accent: oklch(0.600 0.220 30);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.400 0.005 296);
  --input: oklch(0.250 0.005 296);
  --ring: oklch(1.000 0.000 0);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section style="background: var(--background); color: var(--foreground); padding: 2rem;">
  <nav style="display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--border); padding-bottom: 1rem; margin-bottom: 2rem;">
    <span style="font-size: 0.8125rem; font-weight: 400;">teenage<br>engineering</span>
    <div style="display: flex; gap: 2rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700;">
      <span>products</span><span>store</span><span>latest</span><span>finder</span>
    </div>
  </nav>
  <h1 style="font-size: 6rem; font-weight: 900; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.03em; margin-bottom: 1rem;">DAILY LIFE OF<br>MR. UPDATE</h1>
  <div style="display: grid; grid-template-columns: 1fr 200px; gap: 2rem; border-top: 2px solid var(--border); padding-top: 1rem;">
    <div>
      <div style="width: 100%; aspect-ratio: 16/9; background: var(--secondary); margin-bottom: 1rem;"></div>
    </div>
    <div style="border-left: 2px solid var(--border); padding-left: 1rem;">
      <p style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin: 0 0 0.5rem;">EP SERIES</p>
      <p style="font-size: 0.875rem; margin: 0 0 0.25rem;">EP—133 <span style="color: var(--accent); font-weight: 700;">2.5</span></p>
      <p style="font-size: 0.875rem; margin: 0 0 0.25rem;">EP—40 <span style="color: var(--accent); font-weight: 700;">2.5</span></p>
      <p style="font-size: 0.875rem; margin: 0;">EP—1320 <span style="color: var(--accent); font-weight: 700;">1.5</span></p>
    </div>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/teenage-engineering.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.