About letbe-ds
letbe-ds is a complete design system in three plain files — design tokens, component styles, one JavaScript runtime. No build step, no dependencies, no framework: link the files and you own the entire stack. This page is about the idea underneath it.
The idea
The anatomy is the product
Most systems show you the drapery. letbe-ds is built skeleton-first: ~500 design tokens in three tiers are the bones, components are the musculature over them, templates are the posture. Strip any page in this gallery down to its markup and you find the same structure the documentation describes — nothing decorative pretending to be structural. That's what makes the whole system retunable: change the bones, and everything standing on them moves together.
Tokens
One source, two renderings
Every color, size, radius and type style is authored once, in a single DTCG-standard JSON file. From it the build generates the CSS; through the letbe plugin the same tokens become Figma variables. Light and dark are two renderings of one head — not two files that drift apart. Open the theme editor on any page, move a knob or apply a preset, and you are editing the source vocabulary, not painting over it.
The project
The mark at the seam
letbe is a one-person project — a design system, a music catalogue, a film — made with AI tools under human direction, and the mark sits exactly where the halves meet. The media player demos stream the Letbe tracks: eighteen genres, one project, released under the same MIT license as the code at letbe-media. Take the code, take the music, ship them commercially. The name and the mark stay ours; everything else is yours.
Boundaries
Honest bones
The system ships chrome, state and events — never the engine. You bring the data layer, the virtualizer, the streaming source, the AI model, and every one of those boundaries is documented on the component it belongs to. Accessibility claims come with receipts: each page carries an "a11y (built in)" paragraph verified against the source, not against good intentions. And for machines, llms.txt is the same anatomy in one readable file.
Three rules the whole system follows
Accent is a signal, not a skin. A hue that appears everywhere stops meaning anything — violet appears only where it carries information: the primary action, links, state, value-displaying fills. Everything at rest is neutral.
Menu-opening controls always signal it. Anything that opens a menu wears a visible indicator; primary actions never hide inside one.
Engines are never bundled. If it needs a data layer, a codec, or a model, the boundary is yours — documented, deliberate, and kept.