Design-system-first frontend framework

The design system is the framework.

Tokens, accessibility, variants and docs are built in and enforced at compile time. Your AI tools ask the compiler before they write.

Quick startWhat is Tessera?
Start a project

The tessera preset, the default, gives you a small design system with light and dark themes. The docs use the same tokens.

$ npm create @pixelscriptio/tessera@latest my-app $ cd my-app && npm install $ npm run dev
Generate your docs

One command builds a documentation app from your contracts and tokens: a page for every component and token, styled by the same tokens as your app. Nothing in it is written by hand.

$ npx tessera docs $ npx tessera docs --static
How it readsOne file declares it. The compiler holds you to it.
<contract>
{
"name": "Badge",
"role": "status",
"parts": ["root"],
"variants": { "tone": ["neutral", "success", "danger"] },
"slots": { "default": "label" }
}
</contract>
<template>
<span class="root"><slot /></span>
</template>
<style>
.root {
padding: $space.1 $space.2;
border-radius: $radius.md;
background: $color.surface.raised;
color: $color.text.default;
}
</style>
// From this file the compiler knows what
// <Badge tone="success"> may be, and that
// tone="sucess" is wrong.

The contract is the component

Anatomy, variants, states and accessibility, declared once and checked at every use.

Styles come from tokens

An off-scale value is a build error with the nearest token suggested.

A way in for existing code

A baseline lets an existing app turn enforcement on with zero errors.

Changes you can see coming

tessera diff says which changes break people. tessera codemod applies renames.

Accessibility you can run

tessera a11y generates axe-core tests from each contract, for every variant, state and theme.

Light to write

Single-file components, signals, auto-imports, file-based routing.

Outside .tess

The same system in any framework.

Not every team will write .tess files. Two commands bring the system to a project that does not: one checks its CSS against your tokens, the other builds your components as custom elements that any framework can use.

tessera lintLint any project's CSS against your tokens.

Run it in any project's folder, with your design tokens as DTCG files. It reads CSS files and the style blocks of .vue, .svelte, .astro and .html, and finds raw colors, off-scale values, wrong token kinds and failing contrast, in every theme. --fix applies the unambiguous ones; --baseline lets an existing project start at zero.

$ npx tessera lint --tokens design/tokens
ERROR T2102 src/Card.module.css:2:12
Raw length "13px" in "padding" is off the scale.
Did you mean "var(--t-space-3)" (12px)?
1 error, 0 warnings in 14 files.
tessera elementsThe design system as custom elements.

Each component, with its tokens, themes and accessibility, built into a folder with no dependency on Tessera. React wrappers and types included. The tessera preset is 11 elements in about 9 kB of JavaScript and 3 kB of CSS, gzipped.

<link rel="stylesheet" href="elements.css" />
<script type="module" src="elements.js"></script>
<t-button tone="danger">Delete</t-button>
<t-checkbox checked>Send me product news</t-checkbox>
Using the elements in your framework

Build them once in your design system's project, then load the folder in the app. They are plain HTML tags (React also gets wrappers), so each framework only needs to be told those tags are not its own.

$ npx tessera elements
<link rel="stylesheet" href="elements.css" />
<script type="module" src="elements.js"></script>
<t-button tone="danger">Delete</t-button>
<t-checkbox checked>Send me product news</t-checkbox>
tessera build --prerender writes static HTML for pages.tessera a11y puts the generated accessibility tests in your project.
Packages

One install, thirteen packages.

Select a package to see what it does and how it connects.

Get started
Tools
Compile and verify
Runtime and system
@tessera/compiler

A pure function from a .tess file to a TypeScript module, scoped CSS and a list of diagnostics.

No Node APIs, so it runs in a browser too.
Checks styles against tokens and contrast in every theme.
import { tessera } from '@pixelscriptio/tessera/vite'
Depends on contract, tokens, behavior, router, core · Used by tessera, cli, editor, docs, agent, a11y
Documentation

Docs that cannot drift.

tessera docs runs a documentation app generated from the same contracts and tokens the compiler enforces. Nothing in it is written by hand.

localhost:5173
ComponentsBadgeButtonCardCheckboxDialogTokenscolorspaceContrastReportOverview
Buttonrole button · behavior press
tone
size
Partsroot · icon · labelEventspressTokens$color.action.primary.bg · $space.3A11yCovered by a generated suite
A page for every componentA live preview with a control for each variant, the parts you may style, states, slots, events, contrast pairs, tokens used and accessibility coverage.
A page for every token groupEach token in every theme and density, with swatches and the alias it came from. A Contrast page checks text on surfaces.
Styled by your tokensThe docs read your semantic tokens for surfaces, text, borders, buttons, font and radius. Change color.surface.default and both the app and the docs change.
Tokens in and outAn Export page gives DTCG or Tokens Studio files. With --edit, Bring in tokens previews an import as a diff, checked by the compiler, before it is saved.
Coverage overviewThe same numbers as tessera report: contract coverage, token usage, raw() escapes, baseline debt and deprecated uses.
Prose and live examplesA Name.docs.md beside a component adds guidance. tess live blocks run with your real components.
$ npx tessera docs $ npx tessera docs --edit $ npx tessera docs --static
Import and export

Tokens move in and out as files.

Between DTCG and the shapes design tools write, without flattening aliases or losing a theme.

Import fromExport to
system/tokensDTCG 2025.10, checked by the compiler
ImportTokens Studio
Types and string values are mapped to strict DTCG.
References are kept, including the older $spacing.base form.
Or use Bring in tokens in tessera docs --edit, with a diff preview.
npx tessera tokens import path/to/export \ --out system/tokens

The importers are tested against files written to each format's documentation. Real exports from Figma, Tokens Studio and Penpot are next on the roadmap.

AI coding tools

Tell the tool the truth before it writes.

Tools guess: a button that does not exist, a padding of 13px. Tessera rejects those at compile time and lets the tool ask first.

A small test, six prompts and one attempt each: 2 errors in 15 files without the tools, 0 in 9 with them. A smoke test, not proof.
Manifest

Every component, token, route and rule in one file.

npx tessera manifest
MCP server

Find components, resolve raw values to tokens, validate snippets.

npx tessera mcp
AGENTS.md and llms.txt

Generated for tools that cannot run an MCP server.

npx tessera agent-files