AIRDS

The system

What one Bootstrap run produces

A single brand seed cascades into a full, governed design system — foundations, three token tiers, components, patterns, templates, and registered screens. Nothing below is placeholder copy: the categories and tiers are type-checked directly against @airds/schema, and the two panels further down run the real color and typography engines in your browser right now.

generated, not picked

Foundations

Color, type, and every scalar category a seed and a Product DNA cascade into before anything else exists.

3 tiers — ref → sys → comp

Tokens

Material's own tier naming, adopted deliberately rather than invented.

SystemComponent

Components

Scanned from Figma component sets, clustered for near-duplicates, given an API contract before promotion.

SystemPattern

Patterns

Confirmed repeated compositions of components across screens — human-approved, never auto-promoted.

SystemTemplate

Templates

Page recipes — List, Detail, Form, Dashboard — composed from patterns and components.

ProductScreen

Screens

Registered product screens: template, components/patterns used, token usage, compliance score.

  • ▾
    Foundationsgenerated, not picked

    Color, type, and every scalar category a seed and a Product DNA cascade into before anything else exists.

    • ▸
      Color Engine (HCT)6 palettes × 13 tones = 78 primitives

      One seed hex enters material-color-utilities; every primitive traces to a hue/chroma/tone lineage — no bare hex allowed past this point.

    • ·
      Semantic color roles28 roles × 2 modes

      Material's documented role table (primary, onSurfaceVariant, outline, …), each aliasing a {palette, tone} coordinate per light/dark mode.

    • ▸
      Typography Engine15 roles

      display/headline/title/body/label × large/medium/small. Sizes from a configurable modular-scale ratio; line-height & tracking are per-role ratios derived from Material's real type-scale source.

    • ▸
      Scalar foundations10 categories

      Every non-color, non-typography token category in the schema.

  • ▾
    Tokens3 tiers — ref → sys → comp

    Material's own tier naming, adopted deliberately rather than invented.

    • ·
      primitive (ref)

      Concrete values. The material itself — never referenced directly by UI.

    • ·
      semantic (sys)

      Roles that alias primitives and carry the system's actual meaning.

    • ·
      component (comp)

      Per-component, per-part tokens that alias a semantic token — lets one component be re-skinned without touching the role everything else depends on.

  • ·
    ComponentsSystemComponent

    Scanned from Figma component sets, clustered for near-duplicates, given an API contract before promotion.

  • ·
    PatternsSystemPattern

    Confirmed repeated compositions of components across screens — human-approved, never auto-promoted.

  • ·
    TemplatesSystemTemplate

    Page recipes — List, Detail, Form, Dashboard — composed from patterns and components.

  • ·
    ScreensProductScreen

    Registered product screens: template, components/patterns used, token usage, compliance score.

Live · material-color-utilities

Color Engine

Hue 287° · Chroma 75 · Tone 49

Primary
Secondary
Tertiary
Neutral
Neutral Variant
Error

Every swatch above is computed from the single seed hex, right now, in your browser — the same 6-palette / 13-tone-stop pipeline described in the Color Engine spec. No primitive here is a hand-picked hex.

Live · modular scale

Typography Engine

label-smallDesign system0.624rem · 10px
label-mediumDesign system0.702rem · 11px
label-largeDesign system0.790rem · 13px
body-smallDesign system0.889rem · 14px
body-mediumDesign system0.943rem · 15px
body-large← anchorDesign system1.000rem · 16px
title-smallDesign system1.125rem · 18px
title-mediumDesign system1.266rem · 20px
title-largeDesign system1.424rem · 23px
headline-smallDesign system1.602rem · 26px
headline-mediumDesign system1.802rem · 29px
headline-largeDesign system2.027rem · 32px
display-smallDesign system2.281rem · 36px
display-mediumDesign system2.566rem · 41px
display-largeDesign system2.887rem · 46px

Sizes are 16 × ratio^step, anchored so body-large is always exactly 16px. Line-height and letter-spacing are per-role ratios-to-size derived from Material's real type-scale table (docs/PROJECT_PLAN.md §6) — not shown here, since only the size axis is user-configurable.

Maturity lifecycle

Every token, component, pattern, and template carries one of these statuses. Promotion requires evidence — usage count, screen count, consistency, accessibility — and always a human action.

local→
candidate→
pattern→
system→
deprecated

Product surfaces

Selected once at Bootstrap, revisited any time. Each surface gates which Brand Kit outputs, token export targets, and component defaults get generated — adding one later fills in just that column, without touching what already exists.

responsive_webdesktop_webmarketing_siteiosandroidcross_platform

Component token example

The comp tier lets one component be re-skinned without touching the semantic role everything else depends on:

component.button.container.color  →  aliasOf: color.primary
component.button.label.color      →  aliasOf: color.onPrimary

// re-skin just the FAB, leave every other primary-colored
// component (and color.primary itself) untouched:
component.fab.container.color     →  aliasOf: color.tertiary