Design tokens are the smallest building blocks of a design system: colors, font sizes, spacing and radii as named values. Keep them tidy and you keep a product consistent. This guide shows how to capture tokens from an existing website and reuse them.
Why tokens instead of fixed values
When colors and spacing are hard-wired all over the project, every change turns into a search. Tokens gather these values in one place. A single adjustment then takes effect everywhere.
Tokens also improve collaboration between design and development, because both sides speak the same language: primary, background, spacing-4 instead of a random hex number.
What can be extracted
From a website you can derive the core colors, the font families, typical font sizes as well as spacing and corner radii. Together they form a solid foundation for your own theme.
Color accuracy matters. Analyzing the code alone often is not enough, because many colors only become visible in the rendered image. Checking against a screenshot raises the hit rate.
Output as DESIGN.md or tokens.json
For people a DESIGN.md works well, describing colors, typography and notes on implementation. For tools and build processes a tokens.json is more practical because it can be read by machines.
In Tailwind you can store the tokens as CSS variables and reference them in the configuration. That keeps your theme centrally controllable.
Fast to a result
With the library's Style Extractor you enter a URL and get colors, typography and spacing prepared, ready to adopt. That is a good starting point which you then adapt to your brand.