Driftless

All docs

Pull tokens from an existing UI

If the product already exists, you do not have to start from a preset. Translate the interface into tokens in this order.

Start with three colors

The largest ground is background. A card or list ground is surface. The main button is primary. Text on that button is onPrimary. Body text is onBackground. Do not split the logo color and the button color into two accents.

Then measure type and radius

Record a size, weight, and family for the headline, body, and label. Button and input radius is usually rounded.md. Cards go one step larger. A pill is rounded.full.

Enter them in the editor

Pick the closest style, open the editor, and apply only colors and type. Tune the tokens against your interface. Export DESIGN.md into the repo. Do not hand the agent a screenshot instead.

What this site does not do

It will not crawl a URL. That needs a backend, and it is out of scope. Tokens you extract by hand are easier to control and easier for an agent to follow.