Quickstart

Run the compiler

Node version requirement is documented in the canonical repo as >=18.

# from the Facet source checkout
node src/cli.mjs <command> …

# optional local binary
npm link
facet <command> …

Fast path from scratch

facet init my-tokens
facet build my-tokens/app.resolver.json --out dist

facet init creates a starter resolver and graph files. The scaffold includes a minimal theme-aware resolver (app.resolver.json), primitive tokens, and light/dark themes.

Use output in an app

<link rel="stylesheet" href="dist/tokens.css">
<link rel="stylesheet" href="dist/utilities.css">
<article class="bg-surface fg-ink radius-panel p-inset-lg">…</article>

Facet is zero-runtime in stylesheets; no JS is needed for utility application.

The build also emits dist/demo.html and dist/playground.html. Open demo.html for a static example and playground.html to inspect mode combinations.

Core workflow

1. Author token files and resolver.
2. Run facet build <resolver> --out dist.
3. Use either the same graph with facet check in CI, or wire generated CSS in products.
4. Re-run facet build after token or mode changes.

facet check my-tokens/app.resolver.json      # contrast + contract gate
facet check my-tokens/app.resolver.json --json

facet check fails on a11y violations or missing tokens across modes.

Minimal demo flow from source examples

<button class="bg-action fg-on-action radius-control px-inset-lg py-inset-md hover:bg-action-hover focus-visible:ring">
  Primary action
</button>

In the reference example set, this is backed by token definitions and resolver modes in app.resolver.json and token files.