Hoverlab Studio

One editor for a whole design system — the colours, the type and the corners, and the half a token file cannot carry: who it is for, how it sounds, and what it must never do. It leaves as a document your agent can read.

The half a token file cannot carry — who this is for and how it sounds.

Or start from an example

Replaces the four fields below. The look is a separate decision and is left alone.

Product0/80

What is it, in one line?

Anchors everything else. An agent that knows this stops writing generic SaaS copy.

Audience0/200

Who reads this, and what do they already know?

Sets vocabulary and reading level — whether jargon is a shortcut or a wall.

Voice & tone0/400

How does it sound? Name the register, not the adjectives.

The field with the most leverage over generated copy, and the one nobody writes down.

Anti-patterns0/8

What it must never do. One rule per row.

Common ones

These land in the Agent tab as numbered Never rules. A positive brief is a suggestion a model averages out; a prohibition is something it checks against — which is why they are listed separately from voice rather than folded into it.

Start from a theme

Four axes set at once. Everything below stays editable afterwards.

Accent

The only chromatic colour in the system. Everything else is a neutral.

Outside sRGB. This accent is more saturated than a standard screen can show, so browsers clip it — the hex beside it is what actually renders, and it is a slightly different hue. Harmless on a wide-gamut display and on any browser that honours oklch(); lower the saturation if you need the two to agree.

Hue160°

Saturation0.200

OKLCH holds lightness still as this moves, so button contrast does not drift while you tune.

Accent lightness (measured for contrast — change with care)

On light0.55

On dark0.70

Two values for one accent, because a lightness that reads on white disappears on the dark ground. The defaults are the ones measured at 5.01:1 and 8.33:1 against the two page backgrounds — the canvas shows what your change does to the muted pair, but check your own buttons in the contrast checker before shipping a change here.

Or pick from a harmony

Five candidates off one base colour. Click one to make it the accent.

Only the hue and saturation travel — the lightness pair above is a contrast decision and is left where you set it. The other four colours are fine for a chart series; they are not part of the system, and the document does not claim they are.

Neutrals

What actually makes two products look different. Warm surfaces against cool ink in light, swapped in dark.

Tint strength1.00×

A multiplier on the per-token amounts, not an absolute: 0 is a true grey, 1× is what the catalog ships, 3× is visibly tinted. Relative keeps the proportion between a background and a card instead of flattening both.

Typeface

The catalog default. A neutral grotesque that gets out of the way.

Corners

0.75rem. One token, and every rounded-* utility follows it.

Browse named themes

Keep this design system. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.

Create a free account Sign in

Lightmuted 4.74:1 AAbutton 3.92:1 fails AA

Deployments

Four services, two regions. Last run 6 minutes ago.

api-gateway

v2.14.0 · eu-west-1

Healthy

Filter services

Focus ring, drawn at its real width.

DeployHistoryRoll back

worker-queue failed2m ago

eu-west-14 services

us-east-13 services

ap-south-12 services

Darkmuted 7.65:1 AAAbutton 8.43:1 AAA