The whole catalog, in your colours
Four axes — accent, neutrals, typeface, corners — moved together and applied to every preview on the site at once. Not a swatch page: 307 blocks, every page and every template are redrawn in whichever theme you pick.
Most catalogs let you change the accent. Changing the neutrals is what actually stops a product looking like every other product, so that is an axis here rather than a footnote.
Start from your site
Paste an address and Hoverlab reads the colour, typeface and corner radius the site declares, then shows where each came from. Nothing is applied until you say so.
The address is sent to our server once so it can fetch that page. It is not stored. Public sites only.
Named themes
Loading your theme…
What the copied CSS contains
Nine custom properties — the inputs, not the eighty colours derived from them. Paste them into your own :root and the derivation in globals.css does the rest, which means the theme keeps working when that derivation is improved. If you want every resolved token instead, /api/v1/dna/{id}serves them.
:root {
/* accent */
--brand-hue: 160;
--brand-chroma: 0.2;
--brand-light-l: 0.55;
--brand-dark-l: 0.7;
/* neutrals — warm surfaces and cool ink in light, swapped in dark */
--base-warm-hue: 90;
--base-cool-hue: 250;
--base-chroma: 1;
/* type and shape */
--app-font-sans: var(--font-geist-sans);
--radius: 0.75rem;
}Rendered live, not screenshotted
All 307 blocksThese are three real blocks out of the catalog, rendered by your browser against the tokens the theme above sets. Change the theme and they change with it — which is the only demonstration worth making, because a picture of a themed component proves nothing.
Simple, honest pricing
Start free. Upgrade when it starts paying for itself.
Free
Everything you need to try it properly.
- Up to 3 projects
- Community support
- Core component library
Pro
For working developers shipping real products.
- Unlimited projects
- Commercial license
- The full library
- Priority email support
- Figma source files
Team
Shared access and billing for a whole team.
- Everything in Pro
- Up to 10 seats
- Shared component presets
- SSO and audit log
- Invoice billing
What a theme here does and does not move
It moves
- The accent, and everything derived from it — buttons, links, focus rings.
- The neutrals, in both light and dark, including the borders.
- The typeface for all body and heading text.
- Corner radius, through the one token every rounded utility reads.
It deliberately does not
- Spacing density or the type scale. Both exist in the export, and both change how the page lays out — a catalog whose gutters move while you browse is one you cannot compare two cards in.
- Semantic colours. Destructive stays red and success stays green in every theme, because those carry meaning rather than brand.
- Anything on the server. The theme lives in this browser and is not sent anywhere. The one exception is the address you paste under “Start from your site”: that goes to our server once so it can fetch the page, and is not stored.