Milda language 0.10 · docs

Design your system once.
Generate it everywhere.

Learn how to model a design system once, work with it through the Studio and tooling, and ship it as real, versioned code.

Open the Playground Quick start

One file in, real code out

A component from the tour, and the React the generator made of it when this page was built. Nothing on the right was written by hand: change the file and the code follows.

How generation works

component Button "The primary action." {
  archetype Button

  props {
    label : string = "Get started"
  }

  events {
    click
  }

  part Button: container {
    emits { click on activate }
    layout { stack row; gap space.sm; align center; distribute center }
    fill accent
    ink on-accent
    corner radius.sm
    inset space.sm space.lg
  }

  part label: text {
    slot of content default
    content bind label
    text size.md
    weight weight.medium
  }
}

Where to start

Pick the question you came with.

New to Milda

What it is, the ideas behind it, then one system built a lesson at a time.

You know CSS

Every CSS property you know, the Milda word for it, and why it is spelled that way.

You were handed a library

You were handed a package. Install it, theme it, and let your editor and agent read it.

Looking something up

Every statement, every blueprint, and one word for each thing.

Learn by building

One design system, built up a lesson at a time. Every lesson is a file that opens in the Playground.

Start the tour

The language

What a .milda file can say, one idea per page.

Language overview

The document

The one platform-neutral value behind every surface, and why its neutrality is what makes a system portable.

Values & literals

Self-typing values: colour functions, unit lengths, durations, weights, ratios, and computed values.

Tokens & context

Typed tokens in layers, context groups, aliasing, and props that are a dimension.

Components, parts & the contract

A component is a contract and an anatomy of parts; what a part can say, and what the contract promises.

Facets

The abstract paint vocabulary, how it binds to tokens, and how states and conditions change it.

Layout

The propose/choose layout model: containers, per-axis sizing, and position.

Behaviours

The interaction atoms, the states they emit, what an archetype composes, and what the file can say about it.

Archetypes

Every built-in blueprint: its contract, its anatomy, the behaviours it composes, and how targets realize it.

Usage rules & constraints

How a system says how it is meant to be used: interface constraints and usage rules.

The library around the components

Groups, demo scenes, the asset library, the icon library and the documentation pages.

The .milda file

What one file carries, what it leaves out and why, how references resolve, and how the format is versioned.

Language reference

Every statement a .milda file can contain - where it stands, what it means, what it stores.

Design your system once.Generate it everywhere.