teenage engineering Design System

teenage engineering's marketing site is the rarest thing in consumer hardware: a page that refuses to sell. The hero is not a lifestyle shot with a gradient overlay and a centered CTA — it is a product photograph against a dark background, with a tiny lowercase wordmark in the upper corner and a navigation bar whose link text runs in weight 100 at roughly 23px. There is no primary CTA color. There is no accent. The interface chrome is black, white, and three greys. If the products themselves weren't so visually striking — the brushed-aluminum OP-1 field, the K.O. II's orange trigger buttons, the EP-133's bone-white rubber pads — the page would read as an engineering specification rather than a store.

The DESIGN.md file packages this system into ground-truth tokens: 15 color tokens covering a pure-black canvas, five grey steps, a pale off-white product-background tone, and utility colors for error and success states — none with meaningful background usage in the marketing chrome. Two typography tokens represent the te-20 and te-40 families across four weight-and-size pairings (13px/300 for labels, 19px/100 for body, 23px/100 for nav links, 40px/300 for display). The entire spacing system is derived from CSS viewport-relative calc() expressions rather than fixed pixel values, and the radius system is empty: 0px everywhere.

Feed this file to an AI coding tool and it reproduces teenage engineering's specific restraint: no border radius on any surface, weight 100 type used where most brands would use weight 600, a canvas that's as dark as a hardware enclosure rather than a marketing gradient, and product photography trusted to carry 100% of the emotional and chromatic work. The one principle worth borrowing unconditionally: if your product is visually interesting, do not compete with it.