Free tool · No account needed
Get the design tokens of any website
Enter a website to see its brand colors, fonts, spacing and corner radius, then copy them as CSS variables, a Tailwind theme or JSON.
Questions
- What does the tool read?
- The page's HTML, its inline styles and up to eight of its stylesheets. From those it finds the colors, fonts, spacing, corner radii and shadows the site uses most, and which colors and fonts look like its brand: primary, accent, background, text and so on.
- Why are some colors or fonts missing?
- It doesn't run the site's JavaScript, so styles a site only adds with JavaScript aren't seen, and stylesheets that are too large or won't load are skipped. Font names that a build step has shortened appear as they are in the CSS. Trying the site's home page usually gives the fullest result.
- Is it free? Do I need an account?
- Yes, it is free and needs no account. To stop it being used as a crawler, each visitor can look up a few sites an hour.
- Do you keep the sites I look up?
- No. The page is read when you ask and the result is shown to you; nothing about the lookup is saved.
- How do I use the tokens with a coding agent?
- Paste the CSS variables or Tailwind theme into your project, or save the colors and fonts in a UIPrompt brand kit. A brand kit holds your logo files too, and every brief your coding agent builds from carries them, so pages come out on brand.
Planning the pages too? Start from the section library: ready-made sections, each with the brief your agent builds from.