Loading the tool…
Build the CSS variables every block in the catalog is styled against
The one colour every token is derived from. Everything else on this page — primary, ring, accent, the tinted greys — is this angle plus a lightness.
How saturated the brand colour is. OKLCH keeps lightness fixed as this moves, so the contrast of text on your primary button does not drift while you tune it.
How far the greys lean toward your brand hue. A little is what separates a designed neutral from plain grey; a lot looks like a colour cast.
The base radius. Every component derives from it, so this one number is the difference between a sharp interface and a soft one across the whole set.
Keep this token set. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
/* Generated by Hoverlab — hoverlab design tokens
Drop this into your globals.css. Every block in the catalog
is styled against these names. */
:root {
--radius: 0.625rem;
--background: oklch(1.000 0.000 0.0);
--foreground: oklch(0.145 0.006 250.0);
--card: oklch(1.000 0.000 0.0);
--card-foreground: oklch(0.145 0.006 250.0);
--popover: oklch(1.000 0.000 0.0);
--popover-foreground: oklch(0.145 0.006 250.0);
--primary: oklch(0.520 0.190 250.0);
--primary-foreground: oklch(0.985 0.006 250.0);
--secondary: oklch(0.970 0.006 250.0);
--secondary-foreground: oklch(0.205 0.006 250.0);
--muted: oklch(0.970 0.006 250.0);
--muted-foreground: oklch(0.556 0.006 250.0);
--accent: oklch(0.970 0.006 250.0);
--accent-foreground: oklch(0.205 0.006 250.0);
--destructive: oklch(0.577 0.245 27.3);
--border: oklch(0.922 0.006 250.0);
--input: oklch(0.922 0.006 250.0);
--ring: oklch(0.708 0.076 250.0);
}
.dark {
--background: oklch(0.145 0.006 250.0);
--foreground: oklch(0.985 0.006 250.0);
--card: oklch(0.205 0.006 250.0);
--card-foreground: oklch(0.985 0.006 250.0);
--popover: oklch(0.205 0.006 250.0);
--popover-foreground: oklch(0.985 0.006 250.0);
--primary: oklch(0.720 0.190 250.0);
--primary-foreground: oklch(0.145 0.006 250.0);
--secondary: oklch(0.269 0.006 250.0);
--secondary-foreground: oklch(0.985 0.006 250.0);
--muted: oklch(0.269 0.006 250.0);
--muted-foreground: oklch(0.708 0.006 250.0);
--accent: oklch(0.269 0.006 250.0);
--accent-foreground: oklch(0.985 0.006 250.0);
--destructive: oklch(0.704 0.191 22.2);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0.076 250.0);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
{
"$description": "Hoverlab design tokens — light theme",
"color": {
"$type": "color",
"background": {
"$value": "#ffffff",
"$description": "oklch(1.000 0.000 0.0)"
},
"foreground": {
"$value": "#080a0d",
"$description": "oklch(0.145 0.006 250.0)"
},
"card": {
"$value": "#ffffff",
"$description": "oklch(1.000 0.000 0.0)"
},
"card-foreground": {
"$value": "#080a0d",
"$description": "oklch(0.145 0.006 250.0)"
},
"popover": {
"$value": "#ffffff",
"$description": "oklch(1.000 0.000 0.0)"
},
"popover-foreground": {
"$value": "#080a0d",
"$description": "oklch(0.145 0.006 250.0)"
},
"primary": {
"$value": "#0068d0",
"$description": "oklch(0.520 0.190 250.0)"
},
"primary-foreground": {
"$value": "#f7fafe",
"$description": "oklch(0.985 0.006 250.0)"
},
"secondary": {
"$value": "#f2f5f9",
"$description": "oklch(0.970 0.006 250.0)"
},
"secondary-foreground": {
"$value": "#15171a",
"$description": "oklch(0.205 0.006 250.0)"
},
"muted": {
"$value": "#f2f5f9",
"$description": "oklch(0.970 0.006 250.0)"
},
"muted-foreground": {
"$value": "#717477",
"$description": "oklch(0.556 0.006 250.0)"
},
"accent": {
"$value": "#f2f5f9",
"$description": "oklch(0.970 0.006 250.0)"
},
"accent-foreground": {
"$value": "#15171a",
"$description": "oklch(0.205 0.006 250.0)"
},
"destructive": {
"$value": "#e7000b",
"$description": "oklch(0.577 0.245 27.3)"
},
"border": {
"$value": "#e2e6e9",
"$description": "oklch(0.922 0.006 250.0)"
},
"input": {
"$value": "#e2e6e9",
"$description": "oklch(0.922 0.006 250.0)"
},
"ring": {
"$value": "#7da5cf",
"$description": "oklch(0.708 0.076 250.0)"
}
},
"radius": {
"$type": "dimension",
"base": {
"$value": "0.625rem"
}
}
}
{
"$description": "Hoverlab design tokens — dark theme",
"color": {
"$type": "color",
"background": {
"$value": "#080a0d",
"$description": "oklch(0.145 0.006 250.0)"
},
"foreground": {
"$value": "#f7fafe",
"$description": "oklch(0.985 0.006 250.0)"
},
"card": {
"$value": "#15171a",
"$description": "oklch(0.205 0.006 250.0)"
},
"card-foreground": {
"$value": "#f7fafe",
"$description": "oklch(0.985 0.006 250.0)"
},
"popover": {
"$value": "#15171a",
"$description": "oklch(0.205 0.006 250.0)"
},
"popover-foreground": {
"$value": "#f7fafe",
"$description": "oklch(0.985 0.006 250.0)"
},
"primary": {
"$value": "#27a8ff",
"$description": "oklch(0.720 0.190 250.0)"
},
"primary-foreground": {
"$value": "#080a0d",
"$description": "oklch(0.145 0.006 250.0)"
},
"secondary": {
"$value": "#242629",
"$description": "oklch(0.269 0.006 250.0)"
},
"secondary-foreground": {
"$value": "#f7fafe",
"$description": "oklch(0.985 0.006 250.0)"
},
"muted": {
"$value": "#242629",
"$description": "oklch(0.269 0.006 250.0)"
},
"muted-foreground": {
"$value": "#9ea1a4",
"$description": "oklch(0.708 0.006 250.0)"
},
"accent": {
"$value": "#242629",
"$description": "oklch(0.269 0.006 250.0)"
},
"accent-foreground": {
"$value": "#f7fafe",
"$description": "oklch(0.985 0.006 250.0)"
},
"destructive": {
"$value": "#ff6467",
"$description": "oklch(0.704 0.191 22.2)"
},
"border": {
"$value": "#ffffff1a",
"$description": "oklch(1 0 0 / 10%)"
},
"input": {
"$value": "#ffffff26",
"$description": "oklch(1 0 0 / 15%)"
},
"ring": {
"$value": "#50779e",
"$description": "oklch(0.556 0.076 250.0)"
}
},
"radius": {
"$type": "dimension",
"base": {
"$value": "0.625rem"
}
}
}
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
A token file tells an agent which grey to use and nothing about what to write — and copy is most of what it generates. The Studio is the same controls plus the half a token file cannot carry — who the product is for, how it sounds, and what it must never do — and it leaves as a document your coding agent reads rather than as CSS you still have to explain.
Open in the StudioOpens with what is on this page already set.
Eight token sets spanning the two decisions anyone actually makes here — how saturated the accent is, and how round the corners are. Every block in the catalog is styled against these names, so one of these links themes all of it.
Indigo, 0.625rem
The shadcn default, which is what the catalog is designed against.
Emerald, soft corners
Hue 165 at a full 1rem radius. Friendly without being a toy.
Near-neutral, square
Almost no chroma and a 0 radius. The enterprise setting, and a fair test of whether a layout works without colour.
Rose, warm neutrals
Hue 10 with the greys pulled toward it. The tint is subtle and it is the whole difference between a theme and a swapped accent.
Amber, tight radius
A warm accent at 0.25rem — print-adjacent, and the corners stay out of the way.
Cyan, maximum chroma
Chroma pushed to 0.26. Shows where OKLCH starts clipping out of the sRGB gamut.
Violet, pill corners
A 1.5rem radius makes every button a pill. Consumer, playful, and hard to undo later.
Forest, cool neutrals
A deep green accent with greys tinted the same way — the most "designed" theme in the set.
Every one of these is just the address bar. Change anything in the tool above and the URL changes with it — copy it, paste it into a ticket, or commit it in a review, and it opens for anyone with these exact settings. No account, and nothing to save first.