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.
- A style extract is an inventory, not theft: the colors, fonts and spacings of a page as a list.
- It helps most before a relaunch, when taking over someone else's project and when checking your own design system.
- Raw values are only the start. Reducing them to a few roles is what turns them into a system.
- Do not copy other brands. Analysing is fine, adopting is not.
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.
- #1f5eff sits in forty places across the project.
- A rebrand means search, replace and hope.
- Nobody knows whether #1f5dfe is a second blue or a typo.
- --primary sits in one place, the name is what gets used.
- A rebrand is one changed line.
- The name says what the colour is for, not what it looks like.
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.
Four steps from the page into the code. The third one is the only one no tool does for you.
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.
@theme { --color-primary: #1f5eff; --color-surface: #f8fafc; --color-border: #e2e8f0; --spacing: 4px;} <div className="bg-surface text-primary p-4" />
Few roles beat many values.
A list of hex numbers is an inventory. It becomes a system only once every value has a job.
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.
- primaryPrimary#1f5eff
- surfaceSurface#f8fafc
- textText#0f172a
- borderBorder#e2e8f0
On the left, what a mid-sized page yields. On the right, what of it belongs in a project.
What an extract is not
An extract is a tool for understanding. It replaces neither design work nor permission to take someone else's work.
- Not a replacement for a design system. A list of values is not a decision yet. Only once you assign roles to them does it become something you can work with.
- Not a template for copying brands. The colors and fonts of another site belong to their brand. Analyse them, do not adopt them.
- Not the whole truth. What gets read is what sits in the stylesheet. Values that only appear through interaction are missing.
Take the structure with you, not the colors.
From extract to system
The real step comes after reading the values: turning many values into few roles.
- Merge duplicates. Colors differing by a few percent are almost always an accident. Pick one.
- Name the roles. Not blue 500, but primary, surface, text, border. Names survive a rebrand, values do not.
- Put spacings on a scale. A four pixel step is usually enough. In-between values are the reason nothing lines up later.
- Store them as variables. They only become tokens in code. Before that they are a note nobody maintains.
At the end of these four steps you do not have a longer list than before, you have a shorter one. That is the point: sixteen colours become four that somebody can explain.
A token nobody can name is not a token.
