Design tokens

A set of tokens is a design system: the colors, spacing, type, radii and shadows the components are written against. Add one as a starting point, then make it yours.

tailwind

The default theme of Tailwind CSS (every color, the spacing scale, radii, type, shadows) as Tessera tokens, with a light and a dark semantic layer.

npx @pixelscriptio/tessera add tokens:tailwind

pnpm exec tessera add tokens:tailwind

yarn tessera add tokens:tailwind

bunx @pixelscriptio/tessera add tokens:tailwind

unstyled

The token names the components use, with plain values: black on white, square corners, no shadows. A blank page to design on.

npx @pixelscriptio/tessera add tokens:unstyled

pnpm exec tessera add tokens:unstyled

yarn tessera add tokens:unstyled

bunx @pixelscriptio/tessera add tokens:unstyled

tessera

The Tessera look: warm neutrals and a green accent, with a light and a dark theme.

npx @pixelscriptio/tessera add tokens:tessera

pnpm exec tessera add tokens:tessera

yarn tessera add tokens:tessera

bunx @pixelscriptio/tessera add tokens:tessera