# Teenage Engineering, Product

E-commerce brands · Product · Custom code · Stockholm, Sweden
Live page: https://teenage.engineering/products
On Designly: https://designly.sh/s/teenage-engineering/products · JSON: https://designly.sh/s/teenage-engineering/products?format=json
Site: [Teenage Engineering](https://designly.sh/s/teenage-engineering?format=md) (https://teenage.engineering)
Styles: type-led, minimal, geometric, industrial

## Why it works

Black type on an off-white background uses a technical, small-scale typeface to mirror the precision of the hardware. Large product photography dominates the layout, while orange accents in the navigation and product labels provide a functional, industrial touch.

## Sections, top to bottom

1. [Navigation: "Navigation"](https://designly.sh/s/teenage-engineering/products#section-1) (y 0–118px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/0.webp · id sec_f385d65771c7477bb37257f7d249a014
2. [Hero: "Hero"](https://designly.sh/s/teenage-engineering/products#section-2) (y 118–1220px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/1.webp · id sec_e125d022eead4144866be11efa8faae0
3. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-3) (y 1220–2542px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/2.webp · id sec_b84f7d99690b4dc8bbafe901842101d7
4. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-4) (y 2542–3967px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/3.webp · id sec_ee6dd7305e2d449c88c348cb0cf9d881
5. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-5) (y 3967–5216px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/4.webp · id sec_34844a2e38264814ae7c82e6f6515af0
6. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-6) (y 5216–6832px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/5.webp · id sec_66c804ac5ba14bd5a164b9c3227069a4
7. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-7) (y 6833–7979px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/6.webp · id sec_d1248ec3488c4920acd7c119fcd69113
8. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-8) (y 7979–9125px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/7.webp · id sec_e865b482b5b346c68e079db9d30960a8
9. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-9) (y 9125–10271px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/8.webp · id sec_47cf78c3db5a49798ac02760c2e6f574
10. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-10) (y 10271–11447px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/9.webp · id sec_670d2d6d75a34cfbb3c7da4c72aef33c
11. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-11) (y 11446–12313px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/10.webp · id sec_1aec3d3ca18841e3acf9f7fffbaf6a14
12. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-12) (y 12313–13312px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/11.webp · id sec_6f90bc69adea4938a5b2d2db7bf6699a
13. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-13) (y 13313–14312px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/12.webp · id sec_cd61cfa674bf413982afe7a64aa4e2da
14. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-14) (y 14312–15311px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/13.webp · id sec_88cf4135a1fa420f949e8a3dcef1b323
15. [Content: "Content"](https://designly.sh/s/teenage-engineering/products#section-15) (y 15311–16000px of 16000) · image: https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/sections/14.webp · id sec_e71ebc8efcea4fba9ed4aec726c3f057

## Design tokens

- Colours: #F5F5F5 (background), #0F0E12 (text), #CC996C (accent), #DCD8CF (surface), #E5E5E5 (muted)
- Fonts: te-40 (display), te-20 (body)
- Export: https://designly.sh/s/teenage-engineering/products?format=tokens.css · https://designly.sh/s/teenage-engineering/products?format=tokens.json · https://designly.sh/s/teenage-engineering/products?format=tokens.tailwind.css

## Images

- Desktop (1440×16000): https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/desktop.webp
- Mobile (390×8000): https://designly.sh/media/captures/cap_ef31d73530f74489b85ceec13d4b0dd9/mobile.webp
- Captured: 2026-10-26

## Other Pages of Teenage Engineering

- [Home](https://designly.sh/s/teenage-engineering?format=md) — /
- [Product](https://designly.sh/s/teenage-engineering/products/op-1?format=md) — /products/op-1
- [Ordering](https://designly.sh/s/teenage-engineering/store?format=md) — /store

## Related

- [Light Phone, Product](https://designly.sh/s/light-phone/shop/products/light-phone-iii?format=md) — E-commerce brands · Product · Custom code · Brooklyn, USA · styles: dark, minimal, type-led, luxe · image: https://designly.sh/media/captures/cap_f5225658126b442c8fbbd35c7990f6bc/desktop.webp
- [Teenage Engineering, Product](https://designly.sh/s/teenage-engineering/products/op-1?format=md) — E-commerce brands · Product · Custom code · Stockholm, Sweden · styles: minimal, type-led, geometric, tech · image: https://designly.sh/media/captures/cap_dcb2829513ef4af4a662da622e107e62/desktop.webp
- [reMarkable, Product](https://designly.sh/s/remarkable/products/remarkable-paper/pro?format=md) — E-commerce brands · Product · Custom code · Oslo, Norway · styles: serif, editorial, minimal, photo-led · image: https://designly.sh/media/captures/cap_b4d8b127522048d297aa1800ac1c4e35/desktop.webp
- [Rapha, Product](https://designly.sh/s/rapha/us/en/shop/new-arrivals?format=md) — E-commerce brands · Product · Custom code · London, UK · styles: type-led, photo-led, sporty, minimal · image: https://designly.sh/media/captures/cap_86fde52f98e646e0906ba9baaed479c4/desktop.webp

Credit: every reference is a real business's site. If it shapes your work, link to the business and to its Designly page.