Skip to content

Design system

Your brand, and 1,126 effects that already match it

Everything in this catalog styles itself through design tokens — bg-card, text-muted-foreground — rather than literal colours. Change the token and you have changed every effect, block, page and template at once. Pick a brand below and watch it happen; Pro exports the result as files.

Your brand

Pick a preset or tune the hue, chroma and lightness. The whole page recolours as you go — this is the same token that drives every effect, block and page in the catalog, so what you see here is what the catalog looks like in your colours.

Export Pro

Everything below, derived from whatever brand you land on:

  • tokens.cssEvery colour token in your brand, light and dark.
  • tailwind-theme.cssTailwind v4: maps them onto class names — bg-primary and the rest.
  • tailwind-theme.v3.tsThe same mapping for Tailwind v3, as a config to merge.
  • tokens.light.jsonW3C design tokens — colour, radius, spacing and type. Figma plugins and Style Dictionary read it.
  • tokens.dark.jsonThe same, for dark mode. Design tools split modes by file.
  • style-dictionary.config.mjsBuilds both token files into CSS and JS, for other platforms.
  • figma-variables.jsonOne Figma collection with Light and Dark modes (Enterprise plan), plus the script that sends it.
  • hoverlab.config.jsonSo the CLI installs artifacts already in your brand.
  • README.mdWhat to do with the files above, and which Tailwind file is yours.
See Pro

Sign in if you already bought it.

Straight into FigmaFree

Both palettes, the radius scale and the type as editable layers — paste onto any canvas. No plugin, no file, no account.

Three tools, the same palette

Your codebase

tokens.css and a Tailwind theme, for v4 or v3. Drop them into any Hoverlab template, or into a project of your own that uses the same token names.

Your Figma file

W3C design tokens, one file per mode — the format Figma’s own variable import reads, and every token plugin already does. The file and the code stop drifting.

Your CLI and your agent

hoverlab.config.json in the project root. After that, what you install arrives in your brand: token-styled artifacts exactly, effects hue-rotated to match.

And back the other way

Once the tokens are in Figma, pair Figma's MCP server with Hoverlab's and an agent can read a frame and build it from the catalog — matching against a design that is already in your colours, so there is nothing to translate.

Pairing it with Figma

Then install something into it

With hoverlab.config.json in your project root, the CLI installs into your brand rather than ours. That is the part a tokens file alone does not get you: a design system with nothing built in it is a style guide. Blocks, pages and templates follow your tokens directly; effects are hand-written CSS, so the CLI hue-rotates them towards your brand — close, and exact if you spend a credit on the AI recolour.

npx hoverlab add pricing-tiers
CLI docs