Teenage Engineering: playful hardware catalog

Tier: inspiration
Roles: hero, feature, offer, proof, closing, footer
Feel: light, playful, editorial, brutalist
Motion: reveal, pan, stagger
Source: public-site
Site: https://teenage.engineering/
Licence: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
Captured: 2026-09-24
Captures: frames: https://images.refero.design/styles/refero.design/video/4d870352-a10a-4b5f-a9cd-da09b1713aea.mp4
both: https://teenage.engineering/

What it does

A music-hardware storefront that treats each instrument as both a product and a graphic object.

Section roster

1. Graphic editorial opening. 2. Featured instruments and scenes. 3. Accessory and product grids. 4. Shop and story close.

Why it works

Distinct hardware silhouettes carry the catalog, while playful illustration keeps the store from feeling like a specification table.

Sources

- [Refero style page](https://styles.refero.design/style/aecf9dda-5cba-4dc7-9e73-59b65d895cdf) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/4d870352-a10a-4b5f-a9cd-da09b1713aea.mp4) supply the sampled motion and section sequence. - The live capture at https://teenage.engineering/ supplies current copy, responsive screenshots, and measured layout. - Products and availability change; the live store is the current commerce source and the recording is the layout reference.