Variables

Name

Light

Dark

HC Light

HC Dark

Color

primary

#0876dd

#1678d4

#0058b0

#7ec8ff

background

#ffffff

#0d1117

#ffffff

#000000

surface-secondary

#f8fafc

#1d2434

#f5f5f5

#2a2a2a

text

#0d1117

#f8fafc

#000000

#ffffff

Four modes on one collection. Switch brand for another collection. Same names as the live app.

CSS is the spec

Override --af-*. Commit the file. The app already runs it.

Export

npx af theme export
The tokens the app runs, as JSON.

Figma

Drop the pack onto a collection. Same names as the live app.

The spec

CSS in git. Figma consumes it.

Switch a collection above. The page restyles. Same names land in Figma as four modes on one collection.

In git

:root {
  --af-base-primary: #0876dd;
}

[data-brand='delta'] {
  --af-base-primary--light: #c23018;
  --af-base-primary--dark: #e85d2a;
}

[data-brand='vortex'] {
  --af-base-primary--light: #00d2cc;
  --af-base-primary--dark: #00e0d4;
}

In Figma tokens/default/ → one collection

light.tokens.json Light
dark.tokens.json Dark
hc-light.tokens.json HC Light
hc-dark.tokens.json HC Dark

delta/ and vortex/ are more collections. Same four filenames, so modes line up.

Run it

Browser or CI. Same pack either way.

Playground

Theme Studio

Pick colours. Copy CSS into git. Download the pack. Default palette only.

CI

Theme package

Point theme.files at your CSS. Brands from [data-brand].

npx af theme export writes .airframeui/tokens/. Add that folder to .gitignore. Native Figma Variables is on the roadmap. Today you import the pack.

Same tokens the app runs. Brand in CSS. Designers work in Figma.

CSS in git. Figma consumes it.

Browser or CI. Same pack either way.

Git is the spec. Figma is a view of it.