Features point at things

Extract a website's design system: palette, type scale, spacing

D Design system in the toolbar, free with no account

The whole page at once instead of one element. Every colour ordered by how much of the screen it actually covers, with its role named, the type scale with the weights in use, and the spacing, radii, shadows and breakpoints behind them.

What you get

A palette ordered by coverage
Sorted by on-screen area rather than by how often a rule mentions it, so the background is the background and an accent used twice reads as an accent.
Roles, named
Background, surface, text, accent and border, worked out from where each colour is used.
The type scale as it renders
Families, sizes and the weights each size appears in, with use counts, and webfonts separated from what is merely installed.
Spacing, radii, shadows, breakpoints
The values in use with their counts, which is what tells a scale from a one-off.
A contrast check on the text
Every text colour against what is behind it, with the pairs that fall below WCAG AA listed.
Three exports
A Tailwind @theme block, CSS custom properties, or W3C DTCG design tokens as JSON.

How to use it

  1. Press Alt+Shift+P, then D. No need to pick anything first.
  2. Read the palette, type scale, spacing, radii, shadows and breakpoints.
  3. Switch the export to Tailwind, CSS variables or design tokens, and copy.

What it will not do

Add to Chrome, free All thirteen tools

Next to this one