Extract & export
Design tokens
Extract a site's colors by role, gradients, spacing, type scale, radii and shadows, then export them as CSS variables, Tailwind, shadcn or theme.json.
Updated October 20, 2026
The design tokens window reads a site’s design system — colors, spacing, typography, radii and shadows — and lets you export it in the format your project uses. Use it at the start of a redesign, to match a client’s brand, or to give your AI the site’s real values.
How to extract the design tokens
-
On any page, open Design tokens from Pickode’s panel.
-
Review what Pickode found: colors by role, gradients, spacing, type scale, radii and shadows.
-
Export in the format you need, copy the tokens for AI, or save them to your library.
What Pickode collects
| Group | Details |
|---|---|
| Colors | By role: primary, secondary, accent, success, error, background, text, border; plus brand colors |
| Gradients | The gradients used on the page |
| Spacing | A spacing scale, with detection of a 4 px or 8 px grid |
| Typography | Type scale and fonts |
| Shape | Radii and shadows |
Export formats
| Format | Use it for |
|---|---|
| CSS variables | Any project, framework-free |
Tailwind v4 @theme |
Tailwind v4 projects |
tailwind.config.js |
Projects with a Tailwind config file |
globals.css (shadcn) |
A shadcn theme from any website |
WordPress theme.json |
Block themes and WordPress sites |
| JSON | Your own tooling or design pipeline |
| Copy for AI | A brief with the tokens for Claude, ChatGPT or Cursor |
If you’re exporting a component to Tailwind at the same time, the @theme or tailwind.config.js export lets you keep the site’s values as named tokens in your project. See Export to Tailwind.
Free and Pro
Limits
Related
Still stuck?Contact us