Quick start

Three short paths, for three things you might want right now: a feel for the language in five minutes, a released design system installed in your app, or your own system started in the Studio.

#Try the language in five minutes

The Playground reads a .milda file as you type and shows the tokens and components it describes, with the same diagnostics and completion as the editor extensions. Nothing to install, no account. This file is a complete system with one token set and one button:

milda 0.10
prelude 0.0.2

context-group ColorScheme { Light Dark }

foundations {
  token accent : color = alias by ColorScheme { default -> hex(7c3aed); Dark -> hex(8b5cf6) }
  token on-accent : color = hex(ffffff)
  token space/sm : spacing = 8px
  token space/lg : spacing = 16px
  token radius/sm : radius = 6px
}

component Button "The primary action." {
  archetype Button
  props { label : string = "Get started" }
  events { click }

  part Button: container {
    emits { click on activate }
    fill accent
    ink on-accent
    corner radius.sm
    inset space.sm space.lg
  }
  part label: text {
    content bind label
  }
}

1. Open it in the Playground with the button above, or paste it in.
2. In the panel beside the text, open Button: its parts, the tokens each facet points at, and the event it raises are all read from the file.
3. Change Dark -> hex(8b5cf6) to another colour and switch the preview to dark: the button follows, because its fill points at a token that answers per colour scheme.
4. Add state hovered { fill on-accent; ink accent } inside the Button part and hover the preview.

Each of those is one of the rules at work. To keep going from here, the tour builds this file out into a small library a lesson at a time.

#Install a released system

Consumers do not need Milda. A released design system is an ordinary npm package in your organisation's registry, so you route only its scope there and install it like any dependency. The Release dialog shows the exact lines for your organisation.

# .npmrc - route only your scope to the registry
@acme:registry=https://registry.milda.app
# everything else still resolves from npmjs

npm install @acme/design-system

Import the theme once at the root of the app, then use components as usual. The theme is where the tokens live as custom properties; without it every component renders unstyled.

import '@acme/design-system/theme.css'
import { Button } from '@acme/design-system'

export function Example() {
  return <Button variant="primary">Ship it</Button>
}

The package ships files beside the code that say what it contains without running anything: DESIGN.md for people, AGENTS.md for coding agents, design-system.json for tools. See Using a generated library for the whole consumer side.

#Start your own system

Authoring happens in the Studio. A new project starts one of three ways:

• Empty - zero tokens, the curated archetypes as a seeded library of components, so your first component is a customisation rather than a build from scratch.
• Brand composer - answer a few questions about colour, type and shape and start from a coherent token set.
• Import - a token export (DTCG, Tokens Studio, Style Dictionary, Tailwind, Figma), a .milda file, or a repository of components and docs that a model converts to .milda text for you to review.

From there the loop is: author foundations and components, preview them on the canvas, release a versioned package, and install it. Every step is grounded in the one document, so the CLI, the MCP server and the docs site see exactly what you released.