Underlith — Design Token Governance Infrastructure

WHAT IS UNDERLITH?

Infrastructure for the people who decide.

Underlith separates design intent from implementation. Your tokens live in one place — versioned, publishable, consumed by every product your org builds.

When your stack changes, your decisions don't.

Underlith is not your source of truth. It's the infrastructure to build one.

WHY UNDERLITH EXISTS

Design decisions shouldn't
depend on who implements them.

Most teams rebuild their design system every time the stack changes —
not because the decisions were wrong, but because they were never separated from the implementation.

Drift is structural, not accidental

When design values live inside components, every team that ships independently creates a new version of the brand. Governance at the token layer is the only fix that scales.

Your brand doesn't belong to your framework

Tailwind changes. React changes. Your brand shouldn't have to. @your-org/tokens is the layer that survives every migration.

One decision, every platform

Change a token once. Web, mobile, admin, AI agents — every product updates on the next npm update. No manual propagation. No divergence.

ARCHITECTURE

The three layers that make tokens governable.

Token infrastructure beneath your stack. CLI tooling for zero-friction adoption.
Governance to make sure decisions stay decisions.

Token infrastructure

Your tokens live in one versioned, publishable file. Every product installs the package and inherits your brand decisions automatically.

CLI Integration

Underlith brand init scaffolds your @org/tokens package in minutes. underlith init --shadcn maps an existing design system without touching a single component.

Governance Tooling

Lint rules, CI checks, and audit commands ensure tokens are actually used — and that no literal values slip through.

IMPLEMENTATION

Works with your stack. Any stack.

Install the package once. From there, consume tokens exactly the way your stack expects —
no adapters, no plugins, no build-time magic required.

CSS Variables

Plain CSS

Import your brand package and use CSS custom properties directly. Works in any project — no framework needed.

# Install your brand package
npm install @your-org/tokens

# Import
@import "@your-org/tokens/your-org.brand.css";

# Use
color: var(--ul-color-text);
gap: var(--ul-space-4);
border-radius: var(--ul-radius-md);

Tailwind v4

Native @theme

Tailwind v4 reads CSS variables natively via @theme. Import your brand package and Tailwind utilities consume them automatically — no config file needed.

# Import in your main CSS
@import "@your-org/tokens/your-org.brand.css";

@theme {
--color-brand: var(--ul-color-brand-primary);
--radius-md: var(--ul-radius-md);
}

# Use Tailwind classes normally

<button className="text-white" />

Sass / Less

Variables & Mixins

Reference your brand tokens inside Sass variables or mixins. Adopt without rewriting a single existing rule.

# Import
@import "@your-org/tokens/your-org.brand.css";

# Map to Sass variable
$color-text: var(--ul-color-text);

# Before → After
color: $old-text-color;

@mixin button-primary {
  background: $color-text;
}

TWO PATHS

The infrastructure for your
own source of truth.

Whether you're starting from scratch or migrating an existing system, the destination is the same:
one package where your brand lives, versioned and shareable across every product.

New project

Full setup. One block.

Install the CLI, copy the starter tokens, scaffold your brand package, publish. Every product your org builds from here installs @your-org/tokens and inherits your design decisions automatically.

$ underlith brand init → $ npm publish

Copy tokens: underlith.tokens.css is your token source. Edit brand values before running brand init.

Brand init: Use your npm username as --org. The command prints the exact output path.

Publish once: @your-org/tokens becomes the shared source of truth. Every product inherits your brand automatically.

Existing project

Full setup. Zero rewrites.

Already have a design system? Map your existing variables to Underlith tokens, extract your brand layer, publish. Components keep working exactly as before.

$ underlith init --shadcn → $ underlith brand init → $ npm publish

Integrate: underlith init --shadcn maps every existing variable to an Underlith token. No component rewrites.

Brand init: Use your npm username as --org. The command prints the exact output path.

Publish once: @your-org/tokens becomes the shared source of truth. Every product inherits your brand automatically.

Full setup guide →

EARLY ADOPTERS

Teams already building
on Underlith.

Design decisions that
survive implementation.

One governed token layer. Every platform. No divergence.

Create your source of truth

From design decisions to enforced systems.