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
@themeblock, CSS custom properties, or W3C DTCG design tokens as JSON.
How Verbatim does it
Every painted element is walked and the area each colour actually covers is summed, which is why the list is ordered by coverage rather than by how many times a colour appears in the CSS. Roles come from where a colour paints, not from its name. The type scale is built by measuring rendered text rather than reading declarations, the site's own :root custom properties are matched back to the values that use them, and the contrast figures are WCAG ratios computed on the pairs that actually sit together.
How to use it
- Press Alt+Shift+P, then D. No need to pick anything first.
- Read the palette, type scale, spacing, radii, shadows and breakpoints.
- Switch the export to Tailwind, CSS variables or design tokens, and copy.
What it will not do
- It reports what the page renders at the current window size and colour scheme. A dark-mode palette needs the page in dark mode.
- Coverage is measured from what is laid out, so a colour used only inside a closed menu is counted as an accent rather than a surface.
Compared with reading :root, or a palette generator
Reading a site's :root block tells you what the team declared. It does not tell you what the page uses: half the tokens are usually unused, some are overridden, and any colour hardcoded outside the token set is invisible. A palette generator fed a screenshot has the opposite problem, since it averages compressed pixels and returns colours the site never declared.
Design system measures what actually paints. Colours are ordered by how much of the screen each one covers, roles come from where a colour is painting rather than from its name, the type scale is built from rendered text, and the contrast figures are WCAG ratios computed on pairs that really sit together.
When to use this one
Use Design system when you want the system: palette, type scale, spacing, radii, shadows, breakpoints. Use Sample a colour for one value, Fonts in use for type alone, and Design prompt when the output is going to a model rather than into code.
Questions about Design system
What counts as a colour’s role?
Where it paints. A colour covering the largest area is a background, one behind raised cards is a surface, one on text is text, one on a primary action is an accent, and one on hairlines is a border. Nothing is inferred from the token’s name.
Can I export it as Tailwind or design tokens?
Three formats: Tailwind @theme for v4, CSS custom properties, and W3C design tokens as JSON for a token pipeline or a Figma import.
Does it include the site’s own variable names?
Yes, where they exist. If the team called it --brand-600 you see that beside the value, which makes the export drop into your own tokens with far less renaming.
Does it check accessibility?
It runs a WCAG contrast check on text colours against the surfaces they sit on and reports the ratios, so a failing pair is visible before you inherit it.
Is this the whole site or one page?
One page, which is the honest answer: a different page on the same site may use a different slice of the same system. Run it on two or three pages if you want the whole picture.
Already have it? The first thirty seconds covers the shortcut, all thirteen keys and what to do if something does not work.