teenage-engineering
A stark, editorial, product-catalog interface built on pure white canvas with black ink, sharp zero-radius geometry, and teenage engineering's ultralight custom \"te-20\" typeface. The system reads as industrial-design deadpan — no rounded corners, no shadows, oversized black display lettering set against clean white, product photography floated on black backgrounds, and a small utilitarian palette of pure signal accents (blue, orange, amber, green, red) used sparingly for icons, warnings, and catalog tags.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
body
19px · 100 · 1.154
The quick brown fox jumps
button
23.5px · 100 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| sm | 22px | |
| md | 33px | |
| lg | 66px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px |
FAQ
- What colors does teenage-engineering use?
- teenage-engineering's core palette includes #000000, #0f0e12, #272727, #4d4d4d, #767676. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the teenage-engineering DESIGN.md.
- What font does teenage-engineering use?
- teenage-engineering's primary typeface is te-20. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the teenage-engineering design system?
- A stark, editorial, product-catalog interface built on pure white canvas with black ink, sharp zero-radius geometry, and teenage engineering's ultralight custom "te-20" typeface. The system reads as…