A small, honest design system. Rams' restraint, applied as code. Every token earns its place. Every component has a code. The interface, treated like an instrument.
// six rules. derived from rams' ten. 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" — one knob, one purpose.
Capital letters announce themselves. Lowercase trusts you to find it. Even product names: dieter/ds. 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.
// native controls, styled. labels above the input, helper / error below. semantic html — the browser stays in charge of accessibility.
// banners, tooltips, progress, spinners, skeletons, empty states, modals. one accent per state — never two strong colors competing.
// kpi tiles, chips, tables, list rows. tabular-nums everywhere. numbers stay readable in a column even when characters change.
| // code | // module | // status | // items | // updated |
|---|---|---|---|---|
| m-001 | shared list | sync | 12 | 2h ago |
| m-002 | sport matches | 2 new | 35 | 15min |
| m-003 | medical log | pending | 07 | 1d ago |
| m-004 | birthdays | draft | 14 | 5d ago |
// breadcrumb, pagination, stepper, segmented, dropdown menu, sidebar. predictable back, deep linking, keyboard accessible.
// code, quotes, kbd, dividers. the prose-level primitives. paragraph rhythm, mono accents, no decorative typography.
link the stylesheet with <link rel="stylesheet"> and apply .theme-night on the root.
/* override an accent */ :root.theme-pitch { --accent: var(--green); --on-accent: var(--ink); }
Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials. // dieter rams · principle ten
// extracted from the spark/rag demo. message turns, citations, source cards, conversation rows, the composer. compose them into chat shells or any q&a interface.
// 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.
// the system in production. each demo composes the primitives documented above into a real interface. open, read the source, copy what you need.
// two stylesheets. no build step. drop them in and write semantic html with the component classes documented above.