The tour

One design system, built up a lesson at a time. Each lesson adds one idea to the same file, and every file is complete: it opens in the Playground, and the last one generates a React library that compiles. Fourteen lessons, about two hours, no account.

The tour is written for someone who has never seen a .milda file. It assumes you know what a design token and a component are, and nothing about Milda. Every lesson has the same shape: the idea, the lines it adds, what to notice, what the generator makes of it, and one thing to try. Read it in order; each file is the previous one plus the lesson.

01
A file and a tokenThe smallest complete system: a header, a name, and three typed values.
02
Layers and contextBase tokens hold the literals; semantic tokens alias them, per colour scheme.
03
A first componentA Button from the archetype: a contract, two parts, and facets that point at tokens.
04
Variants and statesA prop that is a dimension, paint per variant, and paint per behaviour state.
05
The contractProps with types, defaults, prose and conditions; events, and the parts that raise them.
06
Anatomy: parts, kinds and slotsWhat a part is, how parts nest by path, when a part is present, and what a slot promises.
07
Composition: instances and groupsA Badge, then a Card built from Button and Badge, and the library filed into groups.
08
Inputs and behaviourA TextField, a Switch and a Dialog: value bindings, emitted events, and what the archetype brings.
09
LayoutStacks, gaps, alignment and per-axis sizing, in the propose/choose model.
10
Type, motion and computed valuesA font family and text styles, a transition, and a hover colour derived from the accent.
11
Usage rulesHow the system says how it is meant to be used: constraints in the contract, rules over the usage tree.
12
Docs, examples, assets and iconsThe system carries its own documentation, demo scenes, assets and icon library.
13
From file to libraryGenerate, release, install: what the React generator makes of the file, and how a version is chosen.
14
One system, many surfacesThe same document in Figma, in the CLI and in an agent, and what "could not express" means.

If you would rather look something up than read in order, the language reference lists every statement, and the glossary defines every word the tour uses.