Foundations

Foundations are the value layer of a design system — the design tokens every component draws from. In Milda they are typed, layered, and context-aware, so one set of decisions can express light/dark, density, brand, and platform variants without combinatorial sprawl.

#Tokens are typed

A token isn't just a string — it has a type, and the editor gives each type a structured, purpose-built control. A color isn't edited the same way as a dimension or a shadow. Token types include:

• Color and gradient
• Dimensions — spacing, radius, border width, font size, size
• Typography — font family, font weight, line height, letter spacing, and composite text styles
• Elevation (shadow), opacity
• Motion — duration and easing

Dimension values are stored as neutral, density-independent numbers — the generator decides the web unit (px/rem). The unit is an output concern, never baked into the token. Try the structured editors live on The Foundations editor.

#Tokens are layered

Tokens are organized into semantic layers, each referencing the one below it:

• Base — raw primitives, e.g. a full color scale.
• Semantic — intent, e.g. a “surface” or “elevated” role that points at a base value.
• Component — scoped values for a specific component, pointing at semantic roles.

Resolution chains through these layers by substitution, so a single change at the base ripples predictably upward.

#Tokens are context-aware

A token's active value can depend on context — color scheme (light/dark), density, brand, and platform are typical dimensions. Rather than enumerating every combination as a separate key, context-aliased values chain through the layers with a default fallback at each link. That keeps the matrix expressive without exploding.

#Composite tokens

Some tokens bundle several values — a text style (family + size + weight + line height) or a gradient. These composite tokens are first-class, edited as a unit.

Foundations feed every output: the React generator emits them as a shared theme, and the Figma token export turns them into Variables. See Generators.