Skip to content

Design DNA

Give your AI tool a design system

Ask an agent for a pricing page and it invents a design system on the spot — a different grey every section, arbitrary radii, a palette that falls apart in dark mode. Design DNA is that system written down: the tokens, the shape, the motion, and the handful of rules that keep generated UI consistent with everything else in the catalog.

Use it

Press Copy for AI on any effect, primitive, block, page or template and paste the result into your AI tool before you ask it for UI. That prompt carries this system and the component you were looking at — its source, its props and the command that installs it. For the system on its own, from a terminal or in a script:

terminal
npx hoverlab dna                       # the whole system
npx hoverlab dna saas-starter          # as that template uses it
npx hoverlab dna pricing-tiers --brand indigo
npx hoverlab dna --out design-dna.md

Agents connected over MCP get the same document from the get_design_dna tool, and the hoverlab skill tells them to reach for it before writing a component by hand.

What's in it

SectionWhat it carries
Colour tokensEvery semantic token in both themes, as the bare HSL channels Tailwind needs for alpha suffixes
Brand accentAn OKLCH override for --primary and --ring, when a brand preset is applied
Shape and typeRadius scale, section and card spacing, type rules
MotionDuration budget, transition defaults, the reduced-motion contract
RulesSemantic classes over literals, surface/foreground pairing, one accent, both themes
CompositionFor a page or template — the blocks and pages it is built from
InstallThe command that fetches the actual source
That last row is the point. A document describing a design leaves an agent to rebuild it by hand; this one ends with npx hoverlab add, so the tokens and the components arrive together.

From the API

Any catalog id works, at any rung, plus the literal catalog for the system on its own. ?format=raw returns the markdown itself — that is the URL to hand an agent.

terminal
curl "https://hoverlab5.netlify.app/api/v1/dna/catalog?format=raw"
curl "https://hoverlab5.netlify.app/api/v1/dna/checkout-page?format=raw"
curl "https://hoverlab5.netlify.app/api/v1/dna/pricing-tiers?brand=indigo"

Without format=raw you get JSON: the same markdown plus the token values as data, the resolved brand, and what the artifact is composed of.

Brand presets

Pass brand to swap the accent for one of the catalog's presets. Each carries a lightness for light mode and another for dark, because a single accent lightness that reads on white disappears on the dark ground.

emeraldindigoroseambercyanvioletlimeorangemagentaskycrimsonteal

Something wrong or missing here? Browse the catalog — every page in it links back to the source it documents.