Others capture one color. Milda holds the whole light.
Design your design system — tokens, components, behavior — and ship it as real, versioned React code.
Every tool grabs one band of the spectrum and calls it your design system.
Four categories. Four slices of the same light. None of them hold the whole thing.
Holds the values. Not the components that use them.
Holds the guidelines. Not the code that runs.
Holds the code. Not the system it should follow.
Holds the picture. Not the behavior, not the build.
Milda holds the whole light.
One source. The beam refracts into every layer of the system — and every layer stays connected to the others.
Tokens alias across Light and Dark. References resolve through layers.
Components are named anatomies, not screenshots.
Behavior is a state machine that actually runs.
Docs read from the same source the code is built from.
Code is generated as a real, versioned React component library — installable today.
Tokens that reference each other, across schemes.
Base → Semantic → Component. Aliases by color scheme. The preview resolves the same graph the code does.
Flip the scheme. Aliases reroute. The preview reflects the exact values the generated code will ship.
Stored as a state machine. Not a screenshot of a switch.
- ▸Root
- └Track
- └Thumb
- └Label
The component owns its parts, its roles, and its transitions — so the generated code does too.
Real React. Versioned. Installable.
Every change in Milda compiles to a real, versioned component library — installable today.
- 0.4.2 · semantic.accent rerouted in Dark
- 0.4.1 · Toggle: added "loading" state
- 0.4.0 · Button anatomy refactor
// Generated by Milda · v0.4.2
import { tokens } from "@acme/ds-tokens";
export function Button({ children, ...props }) {
return (
<button
style={{
background: tokens.semantic.accent.default,
color: tokens.semantic.fg.onAccent,
borderRadius: tokens.radius.md,
}}
{...props}
>
{children}
</button>
);
}