A small, honest design system. Rams' restraint, Teenage Engineering's product grammar. Every token earns its place. Every component has a code. The interface, treated like an instrument.
// six rules. derived from rams' ten and te's product grammar. they govern every decision below.
Components are instruments, not widgets. Each carries a product code, like po-12 or tx-6. This gives them object-permanence and quiet confidence. "Use b-001" beats "use the dark button".
Warm off-white surfaces. Near-black ink. One chromatic accent per surface — never two strong colors competing. Rams' "as little design as possible" meets te's white-plastic-plus-one-knob discipline.
Capital letters announce themselves. Lowercase trusts you to find it. Even product names: dieter/ds, teenage engineering. Quietness as a brand signal.
No gradients. No drop shadows (one exception: the device frame). No icons without meaning. No animation without purpose. Rams' principle six, enforced as code.
Knobs. LEDs. LCD readouts. Status codes. The interface borrows hardware vocabulary not as costume but as cognitive scaffold — it tells the user this is a real thing, not yet another screen.
Square corners, hairline borders, monospace metadata. Nothing about this system will look dated in five years because nothing about it is fashionable now. Rams' principle seven: long-lasting design.
// thirteen colors. seven neutrals form the surface and type; six chromatics are device-class accents — orange leads, the rest signal category or state.
// two voices. inter for human language — tight tracking, heavy display weights. jetbrains mono for everything the machine says — codes, meta, kbd, system labels.
// 2px base unit. hairline borders. mostly square corners. motion exists only to clarify cause and effect.
// fourteen primitives. each carries a product code. each does one thing. they compose into the patterns below.
// primitives, assembled. these are the canonical compositions — copy them, don't reinvent them.
Why it works: the screen mock-up tells the user "this is a real thing" before they read a single word of copy. LED + LCD + knobs are inherited cognitive scaffolds from physical instruments.
Composed from: card--raised + lcd + knob-grid + dot--led. No new components introduced.
When to use: first-boot screens, system status overlays, anywhere the software needs to feel like an object you pick up.
Anatomy: identity row (greet + name + date + avatar), stat strip in inverted ink for instant scan, section label with mono-cased count, list of card + item rows.
Color discipline: the inverted ink strip is the only large dark surface. The orange stat-value is the only chromatic accent in the viewport at once — principle 02 in action.
Substitution: module categories rotate accent color (yellow / blue / red / pink). Never two saturated icons next to each other.
// two stylesheets. no build step. drop them in and write semantic html with the component classes documented above.