APIWEBADMAPP

Platform statusAll monitored systems operational.

StretchGroup
Developers
All languages

Design-system compiler

Facet

Stablev1.0Flagship

Your design system is a compiler.

Facet treats a design system as what it actually is: a compiler over a typed token graph. You declare tokens once - colour, space, type, radius, motion - and Facet resolves them across first-class modes (theme x brand x density) and compiles to tiny atomic CSS plus cross-platform outputs for React Native, Swift, and Kotlin. Nothing ships to the browser at runtime; the cost is paid at build time, so the output is small and fast everywhere.

Role: Token-graph compiler

@stretchgroup/facetfacet

Overview

Facet is a zero-runtime design-system compiler. Its thesis is simple: a design system is a compiler over a typed token graph. You author a typed graph of tokens - colours, spacing, type scale, radii, motion - and Facet resolves it across every mode you declare and emits exactly the artifacts each platform needs. On the web that is a tiny set of atomic CSS classes; on native it is generated Swift and Kotlin. Because resolution happens at build time, there is no runtime style engine and no payload tax.

  • Zero-runtime: styles are compiled, not computed in the browser.
  • Modes are first-class - theme, brand, and density compose into one resolved graph.
  • One source of tokens compiles to web (atomic CSS) and native (React Native / Swift / Kotlin).
  • Switch-safety contracts catch mode combinations that would break.

Install

Facet is distributed on npm as `@stretchgroup/facet`. Add it to a project, or grab the packed tarball from the downloads page to vendor it directly.

facet / install
npm install @stretchgroup/facet# or, vendored:npm install https://developers.stretchgroup.ca/downloads/facet/facet-1.8.0.tgz

Quick start

Define your system once with `defineSystem`, declaring the modes you support and the tokens that vary across them. Running the Facet compiler turns that single definition into atomic CSS plus typed accessors and the native outputs.

facet / quick-start
import { defineSystem } from "@stretchgroup/facet" export default defineSystem({  modes: {    theme: ["light", "dark"],    brand: ["stretchsuite", "stretchgpt"],    density: ["cozy", "compact"],  },  tokens: {    color: {      bg:   { light: "#ffffff", dark: "#08090f" },      ink:  { light: "#111726", dark: "#eef3fc" },    },    space: { 4: "1rem", 6: "1.5rem" },    radius: { card: "0.5rem" },  },})

Key concepts

Facet's power comes from the token graph and from modes. Tokens can reference other tokens, so a semantic token like `surface` can resolve through `color.bg` per theme. Modes (theme x brand x density and any axis you add) multiply cleanly because the compiler resolves the full matrix and de-duplicates the output into shared atoms.

  • Typed token graph - tokens reference tokens, fully type-checked.
  • Modes compose: theme x brand x density resolve into one matrix.
  • Atomic output - thousands of declarations collapse into a handful of reused atoms.
  • Cross-platform emitters for React Native, Swift, and Kotlin.
  • A `validate` guardrail and switch-safety contract keep modes coherent.

Download

Install from the registry, or pull a versioned package hosted directly by StretchGroup.

Install

npmnpm install @stretchgroup/facet
Download 1.8.0npm install https://developers.stretchgroup.ca/downloads/facet/facet-1.8.0.tgz
npm package tarballfacet-1.8.0.tgz@stretchgroup/facet - first stable release

Looking for everything in one place? See the downloads index.