This is the reference we wish had existed when we built our extraction engine: every token type a live website exposes, the CSS properties each one comes from, and the gotcha that silently corrupts it. Seventeen groups, one table each way.
If you want the extraction code itself, that is in the Python tokens guide. This page is the map.
The complete token table
| Token group | CSS sources | What good output looks like | The gotcha |
|---|---|---|---|
| Colors | color, background-color, border-*-color, fill, stroke | 5-12 ranked values, not 200 | Browser defaults and cookie banners pollute counts |
| Gradients | background-image, mask-image | Full linear-gradient(...) strings | Not in background-color - miss this and gradient brands report as white |
| Font families | font-family | 1-3 families with roles (heading/body/mono) | The stack lists what CSS asked for, not what loaded |
| Font sizes | font-size | A scale: 12, 14, 16, 20, 24, 36, 56 | Fluid clamp() values resolve differently per viewport |
| Font weights | font-weight | 3-5 weights actually used | Keyword values (bold) and numbers (700) need normalizing |
| Line heights | line-height | Unitless ratios per size tier | Computed styles return px; divide by font-size to recover the ratio |
| Letter spacing | letter-spacing | Tight values on headings, normal elsewhere | normal is a value, not an absence |
| Spacing | margin, padding, gap | A grid: 4, 8, 12, 16, 24, 32, 48, 64 | Snap to the base unit or you get 40 near-duplicates |
| Border radii | border-radius | 2-4 values (subtle, card, pill) | 9999px and 50% are the same intent, different strings |
| Border widths | border-width | 1-2 values | Mostly 1px everywhere; the outliers are the signal |
| Box shadows | box-shadow | 2-4 elevation levels | Multi-layer shadows are one token, not four |
| Text shadows | text-shadow | Usually empty; notable when not | Rare enough that any hit is worth keeping |
| Opacities | opacity | Disabled/overlay/hover steps | Transition intermediate values sneak in if you sample mid-animation |
| Durations | transition-duration, animation-duration | 150ms/300ms/500ms tiers | 0s is a default, not a token |
| Easings | transition-timing-function, animation-timing-function | The brand's cubic-bezier(...) | ease defaults drown the custom curves - filter them |
| Z-index layers | z-index | The layering scale: 10, 50, 100, 9999 | auto everywhere except the 5 values that matter |
| Breakpoints | @media conditions | 3-5 widths: 640, 768, 1024, 1280 | Only visible in stylesheets - computed styles never expose them |
The same table, by extraction difficulty
Free (one property read): colors, font families, font sizes, font weights, opacities, z-index.
Needs normalizing: line heights (px to ratio), spacing (grid snapping), radii (9999px = 50% = pill), weights (keywords to numbers), shadows (multi-layer grouping).
Needs the stylesheet, not computed styles: breakpoints, and any media-query variant of everything else. This is the structural reason a computed-styles-only extractor reports one viewport and calls it the design system.
Needs judgment: which color is primary (frequency plus element context - what is on the buttons), which durations are intentional vs defaults, which fonts actually loaded.
How this maps to the API
Every group in the table is a field on our extract endpoint, selectable with ?fields=:
curl "https://miromiro.app/api/v1/extract?url=stripe.com&fields=colors,spacing,easings" \
-H "Authorization: Bearer $MIROMIRO_API_KEY"
The full field list: colors, gradients, fontFamilies, fontSizes, fontWeights, lineHeights, letterSpacings, spacing, borderRadiuses, borderWidths, boxShadows, textShadows, opacities, durations, easings, zIndexes, breakpoints. Add format=css or format=tailwind to get the same data as custom properties or a theme block instead of JSON. One call is 10 credits; 100 credits a month are free, no card.
Frequently asked questions
What are the main types of design tokens?
Color, typography (families/sizes/weights/line heights/letter spacing), spacing, borders (radii/widths), effects (shadows/gradients/opacities), motion (durations/easings), and structure (z-index, breakpoints). Seventeen groups in total from a live site.
Are CSS custom properties the same as design tokens?
No. Custom properties are one storage format. Tailwind and CSS-in-JS sites often ship almost none while having rigorous token systems. Extract resolved values, not variable names.
Which tokens matter most?
Colors, type scale, spacing - in that order. They carry the identity. Radii, shadows, and motion are what make a rebuild feel like the original instead of a wireframe of it.
Can I extract motion tokens from a website?
Yes: transition-duration, animation-duration, and their timing functions. Filter out 0s and default ease or the real values drown. Our extract endpoint returns them as durations and easings.
Skip the maintenance - one API call
Design tokens, brand data, fonts, SVGs, images, and section code from any URL. 100 free credits a month, no card.
Soraia · Founder, MiroMiro
Building MiroMiro: a browser extension and API that extract design tokens, assets, and production-ready code from any live website. The gotchas in these posts come from the extraction engine's own commit history.
Follow on X