| name | teenage-engineering-ui |
| description | Teenage Engineering / Dieter Rams functionalist-hardware aesthetic: neutral molded panels, a single bold accent color, tactile knobs and buttons, LED and segmented displays, uppercase monospace labels, visible "device chrome" (screws, bezels, serial numbers, power LEDs), and playful retro-futurist technical detailing. Triggers: "TE style", "OP-1 style", "Pocket Operator look", "Braun / Dieter Rams style", "functionalist hardware UI", "retro hardware / synth / audio-gear interface", "device-like UI", "tactile / physical interface", "minimal skeuomorphic panels", or descriptions involving cream/charcoal panels, knobs, screws, LED dots, a single accent, monospace labels, phosphor/LCD screens, or anything that should look like hardware. |
Teenage Engineering UI
Interfaces that look like beautifully made physical instruments — in the lineage
of Braun under Dieter Rams, carried forward by Teenage Engineering (OP-1, OP-Z,
Pocket Operators, TX-6). Functionalism with a wink: rigorously minimal and
honest about function, warmed up with one confident accent color and a few pieces
of playful technical fiction.
NOT generic neumorphism, not leather-and-wood skeuomorphism, not flat material
design. Tokens and component recipes are in references/.
What it is / is NOT
| It IS | It is NOT |
|---|
| Neutral base (bone/cream OR graphite) + one saturated accent | Rainbow gradients; multiple competing accents |
| Molded-plastic / brushed-metal tactility, subtle and crisp | Mushy all-over neumorphism with no crisp edges |
| Everything labeled in uppercase monospace | Decorative labels, lorem ipsum, vague icons-only UI |
| Visible device chrome: screws, bezels, serials, LEDs | A floating card on a blank web page |
| Honest controls (a knob looks turnable, a button pressable) | Skeuomorphic leather, wood grain, glossy reflections |
| Tight modular grid, generous breathing room | Cramped or asymmetric ad-hoc layout |
| A wink of retro-futurist fiction (SN, BAUD, CH 01, v0.4) | Over-serious enterprise chrome with no personality |
The six principles
- Less, but better. Remove everything non-essential, then make what
remains excellent. If an element has no function, it must earn its place as
either structure (chrome) or a deliberate playful detail — never noise.
- Be honest. Controls communicate their function through form. A knob has
an indicator line and tick marks. A primary action is one big confident
button. Recessed things look pressed-in; raised things look pressable.
- Label everything. Real instruments are covered in small uppercase
labels. Use them generously: section names, control names, units, modes.
This is the single fastest way to read as "hardware."
- One accent, used sparingly. Pick ONE bold color (TE orange
#FF5A00, or
red, or signal yellow). Use it for the single most important action, the
active state, and a few status dots — and nowhere else. Restraint is what
makes it pop. A small coded set of function dots (red/green/blue/amber) is
allowed as a system, distinct from the hero accent.
- Build the device, not the page. Frame the whole UI as a physical unit:
an outer bezel/enclosure with corner screws, a product name, a serial
number, a power/ready LED. Group controls into labeled modules with seams
between them.
- Add a wink. Sprinkle plausible technical fiction —
SN 47-Δ,
CH 01 · 38400 BAUD, v0.4.2, PWR, a dot-matrix grid that does nothing.
This is the difference between sterile functionalism and the TE personality.
Keep it dry and deadpan, never jokey.
Visual system at a glance
Full values, both themes, and font imports are in
references/design-tokens.md. Quick orientation:
- Two themes. "Bone" (warm off-white panels, the default) and "Graphite"
(warm charcoal). Pick one per project; don't mix.
- Accent. Exactly one hero accent. Default
#FF5A00. Everything else is
neutral.
- Type. Geometric grotesque for labels/headings (Space Grotesk / Archivo),
monospace for data and small labels (Space Mono / JetBrains Mono), an optional
pixel or 7-segment face (VT323 / DSEG) for displays. Labels are UPPERCASE with
letter-spacing: 0.12–0.18em, ~10–12px, secondary color.
- Depth. Crisp not mushy: a soft top highlight + a soft bottom drop shadow +
a 1px hairline seam. Recessed elements invert the shadow (inset). See the
shadow recipes in the tokens file — copy them, don't improvise blur values.
- Geometry. 4px spacing grid. Soft-rounded rectangles: ~20–24px on the
enclosure, ~12–16px on modules, ~8–10px on buttons/fields, full circles for
knobs and LEDs. Pills are good for mode chips.
- Displays. Sage-green LCD (dark text on green) or dark CRT (green/amber
phosphor on near-black), always recessed into the panel, with faint scanlines
and a subtle phosphor glow.
Component catalogue
Working HTML/CSS recipes for each are in references/components.md. The core
kit:
- Enclosure / device frame — outer bezel, corner screws, product wordmark,
serial number, power LED.
- Module / panel — a labeled, slightly raised sub-surface grouping related
controls, separated by seams.
- Label — uppercase mono caption, often with a small leading status dot.
- Knob — rotary control with an indicator notch and a ring of tick marks;
optional caption "TURN TO SET".
- Button — neutral tactile button and the one accent primary button.
- Mode selector — a row of segmented chips with one active (accent) chip and
small corner indicator dots.
- Toggle / switch — physical sliding switch.
- LED indicator — small glowing status dot (solid + soft halo).
- Input field — recessed text field with mono placeholder.
- Display screen — recessed LCD/CRT with phosphor text and scanlines.
- Dot-matrix grid — decorative ventilation/LED grid for the chrome.
- Status bar — bottom strip with deadpan metadata (model, mode, channel,
baud).
Build workflow
- Choose theme + accent. Bone or Graphite; one accent.
- Load fonts + tokens. Use
references/design-tokens.md or drop in
assets/te-tokens.css. Never hardcode hex values — use variables.
- Frame the device first. Enclosure: bezel, corner screws, wordmark,
serial number, power LED, dot-matrix vent. This sells the aesthetic.
- Lay modules on the grid. Group controls into labeled modules. Even
gutters, 4px grid.
- Drop in controls from the catalogue. Consistent radii, shadows, labels.
- Add the wink. Status bar, serials, channel/baud, version string, inert
indicator dots. Deadpan, not jokey.
- Self-review against
references/checklist.md. Common failures: too many
accents, missing labels, mushy depth, no device chrome.
Starter template
assets/starter-template.html — a complete, self-contained working device
demonstrating the entire system (enclosure, knob, mode chips, LEDs, recessed
field, CRT screen, status bar). Use it as a starting point or read it to
calibrate the look before building fresh.
Adapting to React / native
The aesthetic is carried by tokens and the chrome metaphor, not by any framework.
In React, expose tokens as CSS variables on a wrapper and build the catalogue
items as components. In native UI, translate the token tables directly. The
principles are the contract; the CSS is one implementation.
