bitbaum
Start a project
Package · MIT

design-tokens

One tokens.css behind the products, so a retheme is an edit to one file.

Why it exists

Color, type and radius were being copied into each app and then drifting. A retheme meant a hunt. Dark mode meant a second hunt.

How it works

Primitives, then semantic names, as CSS custom properties. Tailwind points at the variables and holds no literal color of its own. A product themes by overriding the variables, not by forking the components.

Where it fits

It is why the studio can look like one studio. OrangeCat, Loki and Solon share it. A package that draws a page is expected to use these tokens rather than invent a palette.

LicenceMIT
Installpnpm add @bitbaum/design-tokens
Sourcebitbaum/design-tokens
Used by3 apps
Used by
bitbaumLokiSolon