PickCodeCollect the repeated values from the site's CSS: CSS variables on :root, the font sizes and weights on headings and body text, the spacing between sections, and the radii and shadows on cards and buttons. Group them by role and write them as theme variables.
What counts as a token
A design token is a named value that the design reuses. For most sites that means:
- Color: brand, text, muted text, surfaces, borders, states (success, danger).
- Type: font families, a size scale (often 6 to 8 sizes), weights, line heights.
- Spacing: the gaps and paddings that repeat, usually a 4px or 8px rhythm.
- Radius: small for inputs, larger for cards, full for pills.
- Shadow: one or two elevations.
Collect the values
Start with the CSS variables, because sites with a design system already named their tokens. In DevTools, select <html> and read the custom properties in the Styles pane. Then fill the gaps by inspecting a few representative elements: a heading of each level, body text, a button, a card, an input.
To see which values actually repeat, you can count them across the page in the Console:
const counts = {};
for (const el of document.querySelectorAll('body *')) {
const size = getComputedStyle(el).fontSize;
counts[size] = (counts[size] || 0) + 1;
}
console.table(Object.entries(counts).sort((a, b) => b[1] - a[1]));Swap fontSize for borderRadius, boxShadow or color to tally those. Values that appear once or twice are usually one-offs, not tokens.
Write them as a Tailwind theme
Tailwind v4 reads tokens from CSS variables in @theme. Each namespace creates utilities: --color-* for colors, --text-* for font sizes, --radius-* for radii, --shadow-* for shadows.
@import "tailwindcss";
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--color-brand: #3e63dd;
--color-ink: #1c2024;
--text-display: 3.5rem;
--radius-card: 1rem;
--shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.06);
}
<!-- usage -->
<div class="rounded-card bg-white shadow-card">
<h1 class="font-sans text-display text-ink">Title</h1>
</div>For spacing, Tailwind's default 0.25rem step already covers 4px and 8px rhythms, so you rarely need custom spacing tokens.
Collect tokens faster with PickCode
- Hover the representative elements. Press Alt Shift C. The hover card shows the size, font and Tailwind classes, so you see which values sit on the default scale.
- Read the source rules. The Rules tab shows the CSS variables behind each value and which rule set it.
- Copy key components. Copy a button, card and heading. CSS variables are kept in the output, so the token names come with them.
- Get the font link. Copy the Google Fonts link from the code panel for the font family token.
Be realistic about what you can extract
What you get is the values the site uses, not the reasoning behind them. You won't see unused tokens, dark-mode values unless you switch the site to dark mode, or tokens defined in cross-origin stylesheets that the page can't read from script. Use the extracted set as a starting point and trim it to what your own product needs.
Questions
Is there a tool that exports a whole site as tokens?
Some tools try, but the result needs heavy editing because one-off values look the same as real tokens. Collecting by role, as in this guide, gives a cleaner set.
What format should tokens be in?
For a Tailwind v4 project, CSS variables in @theme. For design tools or multiple platforms, a JSON format like the Design Tokens Community Group format, converted with a build step.
How many font sizes should I keep?
Whatever the site really repeats. Most marketing sites use 6 to 8. Merge sizes within a pixel or two of each other.
Can I copy the site's fonts as tokens?
You can copy the font-family name. Using the font file needs a license unless it is free, like most Google Fonts. See what font is this website using.