tessera

Stable

Component-driven design token system. Generates CSS custom properties, Tailwind config, and typed TS constants from a single source of truth.

Design SystemsCSSTypeScriptTooling

View on GitHub

tessera solves the problem of design tokens living in three places at once: your Figma file, your CSS variables, and your JS constants. It takes a single YAML definition and generates everything.

How it works

Define your tokens once:

color:
  brand:
    primary: '#0066ff'
    secondary: '#00c9a7'
  neutral:
    100: '#f5f5f5'
    900: '#111111'

spacing:
  base: 4px
  scale: [0, 1, 2, 3, 4, 6, 8, 12, 16, 24, 32]

Run the generator:

tessera build --out ./generated

Get back:

tokens.css — CSS custom properties
tailwind.tokens.js — Drop-in Tailwind theme extension
tokens.ts — Fully typed TypeScript constants
tokens.figma.json — Figma Tokens plugin format

Status

Stable and used in production on two projects. Figma sync (two-way) is planned.