Build your first design system

An end-to-end walkthrough: create an organization and project, choose targets, author foundations, add a real component, preview it, release it to a registry, and install it in an app. Every step is grounded in how the Studio and release flow actually work.

#1. Create an organization and project

Everything in Milda lives under an organization - its slug becomes your package scope (@your-org), and it is immutable once chosen, because consumers will import against it. Inside the org you create a project: one design system. The project slug becomes the package name, so a project design-system under org acme releases as @acme/design-system.

#2. Choose the project's targets

A project declares which outputs it produces. React is the shipping code target today; Figma is a design target. You pick targets when you create the project (and can adjust them later in project settings), and each target can carry its own realization options. See Targets.

#3. Author your foundations

Foundations are your design tokens - color, spacing, type, radius, motion - and every component and every output draws from them. Tokens are typed, layered, and context-aware, so one token can resolve differently by color scheme or platform. Define these first: a component styled against tokens stays consistent and re-themes for free. See Foundations, or try the live Foundations editor.

#4. Add a component from an archetype

You rarely start from a blank node tree. An archetype is a built-in blueprint that comes with a correct contract, a published anatomy, and composed behavior. Add a component, pick the Button archetype, and you immediately have a working, accessible button - a props contract (e.g. a variant), a press event, and the right semantics.

Then make it yours:

• Style it against your tokens using style facets (fill, ink, ring…), keyed to states like hover and pressed. See Facets & tokens.
• Shape the contract - add or rename props, mark them required, give defaults. The contract is the stable surface consumers code against. See Components.
• Add composition with slots where consumers should drop their own content.

#5. Preview it

The Studio previews the component live as you edit - you can drive its props, force interaction states, and step through its behavior without generating anything. This is where you confirm the contract and styling feel right before you commit to a version. See Behaviors & interactivity.

#6. Generate and release

Releasing turns the IR into real code and assembles it into installable packages. A generator emits self-contained React components plus a shared theme; the release layer packages that output - one package for the whole system, or per-component packages plus a shared theme - as a versioned, reproducible release, and publishes it to a registry that speaks the npm protocol.

#7. Install and use it

Consumers don't need Milda. They route only your scope to the registry, then install the package like any dependency - no mirroring, no risk to their other dependencies:

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

npm install @acme/design-system

And import components as usual:

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

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

#Next steps

1. Let AI build on your system - wire up the MCP server so coding agents read your exact contracts.
2. Understand what you can express in the Milda Language and its archetype catalog.
3. See the open/paid split in Editions & pricing, or the common questions in the FAQ.