Design system

When several Stories should share color, typography, spacing, or animation defaults, move those choices into .design.yaml files and apply them through tokens and styles instead of hard-coded literals.

Put shared tokens and styles in a design file

samples/story/designs/rune.design.yaml defines base tokens and reusable styles:

tokens:
  - color@canvasBg: "#f8fafc"
  - color@surface: "#ffffff"
  - color@foreground: "#0f172a"
  - brush@canvasBrush: $canvasBg
  - fontFamily@ui: "Segoe UI"
  - number@titleSize: 52

styles:
  - rect@canvas:
    fill: $canvasBrush

  - text@title: $body
    fontSize: $titleSize
    fontWeight: $headingWeight

The syntax reference treats these as typed tokens and styles, not as a separate ad-hoc configuration format.

Layer themes instead of copying whole files

samples/story/designs/dark.design.yaml extends the base design and overrides only the tokens that change:

design: v1beta1

extends:
  - ./rune

tokens:
  - color@canvasBg: "#020617"
  - color@surface: "#0f172a"
  - color@foreground: "#f8fafc"

That keeps light and dark themes aligned without duplicating the style structure.

Apply the design from the Story file

samples/story/design-system.story.yaml imports the design layers, adds one local accent override, and consumes the result through $design: references:

design:
  - ./designs/dark

tokens:
  - color@accent: "#a78bfa"

- create@background:
    rect: 0,0,1280,720
    style: $design:canvas

- create@panel:
    rect:
    x: 640
    y: 360
    align: center
    style: $design:panel

The Story keeps its local intent small while the shared visual system stays reusable.

Story-local overrides should be intentional

The same sample overrides the title size directly:

- create@heading:
    text: "One design, every story"
    x: 640
    y: 292
    align: center
    style: $design:title
    fontSize: 64

That is a good pattern: use the shared style first, then override only the one field this Story truly needs to change.

Preview the design sample

story preview samples/story/design-system.story.yaml

For reusable scene structure on top of this theme layer, continue with Composition and reuse.