# Teenage Engineering, Ordering

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

## Why it works

Black type on a white background uses a strict grid and Te-20 typeface to maintain a technical, industrial feel. Product shots are isolated on white, letting the hardware geometry lead, while small plus icons act as the primary way to "add to cart" without heavy button styling.

## Sections, top to bottom

1. [Navigation: "Navigation"](https://designly.sh/s/teenage-engineering/store#section-1) (y 0–118px of 16000) · image: https://designly.sh/media/captures/cap_f31384488c2d4dc4a93abb4d74e57e3a/sections/0.webp · id sec_264c33baa37347d686a370344eff7f03
2. [Hero: "life is fantastic"](https://designly.sh/s/teenage-engineering/store#section-2) (y 187–16000px of 16000) · image: https://designly.sh/media/captures/cap_f31384488c2d4dc4a93abb4d74e57e3a/sections/1.webp · id sec_cd677b822cbc4c779d87acb6b66d6c93

## Design tokens

- Colours: #FFFFFF (background), #000000 (text), #0F0E12 (surface), #767676 (muted)
- Fonts: te-20 (display)
- Export: https://designly.sh/s/teenage-engineering/store?format=tokens.css · https://designly.sh/s/teenage-engineering/store?format=tokens.json · https://designly.sh/s/teenage-engineering/store?format=tokens.tailwind.css

## Images

- Desktop (1440×16000): https://designly.sh/media/captures/cap_f31384488c2d4dc4a93abb4d74e57e3a/desktop.webp
- Mobile (390×8000): https://designly.sh/media/captures/cap_f31384488c2d4dc4a93abb4d74e57e3a/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?format=md) — /products
- [Product](https://designly.sh/s/teenage-engineering/products/op-1?format=md) — /products/op-1

## Related

- [Playdate, Ordering](https://designly.sh/s/playdate/shop?format=md) — E-commerce brands · Ordering · Custom code · Portland, USA · styles: playful, type-led, rounded, light · image: https://designly.sh/media/captures/cap_938510f16e254183bd5ce607db91de62/desktop.webp
- [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
- [Light Phone, Blog](https://designly.sh/s/light-phone/blog?format=md) — E-commerce brands · Blog · Custom code · Brooklyn, USA · styles: type-led, minimal, editorial, monochrome · image: https://designly.sh/media/captures/cap_e94f3f79249640d68a2725b4bc44b6a2/desktop.webp
- [Light Phone, About](https://designly.sh/s/light-phone/about-us?format=md) — E-commerce brands · About · Custom code · Brooklyn, USA · styles: minimal, type-led, monochrome, editorial · image: https://designly.sh/media/captures/cap_e06423a715514ede84ddb481b23e2ae1/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.