New Chrome extension: Design inspiration in every new tab →
A1 Gallery

Free design token extractor

Paste a link to get a website’s type scale, spacing, radius, shadows and CSS variables as CSS or Tailwind. Free, no sign-up.

Or try an example: , ,

Example result: 182 tokens. A 4px grid and 12 type sizes

Type (12)

Body size
16px
Weights
400 · 500 · 600
Line heights
1 · 1.5 · 1.45 · 1.3
Letter spacing
-0.02em
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • text-7xl56px · 3.5remAa Bb Cc--font-size-6xl1 use
  • text-6xl44px · 2.75remAa Bb Cc--font-size-5xl1 use
  • text-5xl36px · 2.25remThe quick brown fox--font-size-4xl2 uses
  • text-4xl28px · 1.75remThe quick brown fox--font-size-3xl5 uses
  • text-3xl24px · 1.5remThe quick brown fox jumps over the lazy dog--font-size-2xl6 uses
  • text-2xl22px · 1.375remThe quick brown fox jumps over the lazy dog--font-size-xl3 uses
  • text-xl20px · 1.25remThe quick brown fox jumps over the lazy dog--font-size-lg15 uses
  • text-lg18px · 1.125remThe quick brown fox jumps over the lazy dog--font-size-md6 uses
  • text-base16px · 1remThe quick brown fox jumps over the lazy dog--font-size-base16 uses
  • text-sm14px · 0.875remThe quick brown fox jumps over the lazy dog--font-size-sm44 uses
  • text-xs13px · 0.8125remThe quick brown fox jumps over the lazy dog--font-size-caption5 uses
  • text-2xs12px · 0.75remThe quick brown fox jumps over the lazy dog--font-size-xs10 uses

Colour (42)

Full palette →
Colour variables
61
Dark theme
No

Spacing (12)

Grid unit
4px
On the grid
90% of values
  • space-0.52px25 uses
  • space-14px42 uses
  • space-1.56px27 uses
  • space-28px105 uses
  • space-312px86 uses
  • space-416px81 uses
  • space-520px33 uses
  • space-624px50 uses
  • space-832px58 uses
  • space-1040px13 uses
  • space-1248px14 uses
  • space-1664px13 uses

Radius (8)

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • 2xl20px
  • 3xl24px
  • fullPill

Shadows (6)

Layout (3)

Page width
736px
  • screen-sm480px28 uses
  • screen-md768px25 uses
  • screen-lg1024px18 uses

How to extract design tokens from a website

A design system leaves its numbers in the CSS. This tool reads them and hands you the type scale, the spacing scale and every CSS variable. It takes about two seconds.

  1. Paste the site’s link

    Paste any public page into the field at the top and press Get tokens. The tool fetches the page, up to 60 of its stylesheets and its inline styles. No browser extension and no sign-up.

  2. Read the type scale

    The type scale lists the font sizes the site uses most, largest first, in px and rem. When the site names a size itself, like --text-lg, the name sits beside it. For the typefaces, run the website font finder or browse the fonts in the gallery.

  3. Check the spacing grid, radius and shadows

    Spacing shows each padding, margin and gap value with how often the CSS uses it. The tool says if the site sits on a 4px or 8px grid. Radius steps, shadows and breakpoints sit in the same panel.

  4. Search the CSS variables

    Every custom property the site declares is listed. Search by name or value, or filter to colours, sizes, fonts or shadows. For the colours ranked by use, open the colour palette extractor.

  5. Copy it as CSS or Tailwind

    Pick CSS variables, a Tailwind 4 @theme block, a Tailwind 3 config or design tokens JSON. Copy it or download the file. Then see how Framer sites and Webflow sites in the gallery put a scale like that to work.

Frequently asked questions

A design token is one named design decision: a font size, a spacing step, a corner radius, a colour. Sites store them as CSS variables like --space-4 or as a Tailwind theme, so every page pulls from the same short list.

Paste the link at the top of this page. The tool fetches the page and its stylesheets, reads every CSS variable, and counts the font sizes, spacing, radius, shadow and breakpoint values the rules use. You get the scales in about two seconds, with no browser extension.

Check the type scale section of the result. It lists up to 12 font sizes, largest first, with the px and rem value and how often each one appears. When the sizes step by one ratio, like 1.25, the tool names it. The font finder gives you the typefaces.

The CSS variables section lists every custom property set on :root, html, body or a theme class. Search it by name or value and copy any line. Dark theme values are marked. On a big site the list stops at 600, split fairly between colours, sizes, fonts and the rest.

Yes. Copy the result as a Tailwind 4 @theme block or a Tailwind 3 config. The names follow Tailwind’s own: text-sm, text-base, text-lg, radius-md, shadow-lg. Spacing keeps Tailwind’s 4px unit, so 16px is 4.

Four. CSS variables in a :root block, a Tailwind 4 @theme block, a Tailwind 3 config file, and JSON with $type and $value fields in the W3C design tokens format, which Style Dictionary and Tokens Studio read. Copy any of them or download the file.

The tool reads the CSS a site ships, not a rendered page. A stylesheet holds rules for pages you aren’t looking at, so some values are never used on the homepage. Sizes set in em or with a calculation can’t be turned into px. Sites that build their styles with JavaScript after load show less.

Most of the site’s padding, margin and gap values divide by 8: 8, 16, 24, 32, 48. A grid like that is why a layout feels even. The tool says which grid a site uses and what share of its spacing sits on it.

Yes, on any public page. Framer keeps its text sizes in inline styles, so the tool reads those too. It says when a site is built on Tailwind, Bootstrap, Webflow, Framer or WordPress, because part of the scale is then the framework’s own. The built with checker shows the rest of the stack.

Yes, it’s free. No account, no ads, and we don’t keep the links you check. The only limit is 10 checks a minute.

More free tools

All tools →