Design Tokens Are the New Style Guide
Modern design systems don't describe components — they describe decisions: what spacing scale to use, which typeface carries body copy, how rounded corners should be. These decisions live as design tokens.
The problem? Reverse-engineering them from a production site is painful. AssetSnip makes it instant.
What We Capture
Typography
AssetSnip reads every font-family, font-size, font-weight, and line-height declaration on the page and surfaces the top 3–5 type scales — not every one-off setting, but the repeating patterns that form the real system.
/* What you get, ready to paste */
--font-sans: 'Inter', sans-serif;
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
Spacing & Border Radius
We histogram the padding, margin, gap, and border-radius values across all elements. Recurring values — the ones that appear 10+ times — are your spacing scale.
Shadows
Box shadows are extracted and normalised so you can instantly see the elevation system: --shadow-sm, --shadow-md, --shadow-lg.
Copy → Paste → Ship
Every token set is formatted so you can paste it directly into:
- A CSS
:root {}block - A Tailwind
theme.extendconfig - A Figma variable collection (with our coming plugin)
The Bigger Picture
AssetSnip isn't a scraper — it's a design intelligence layer. The goal is to compress the gap between seeing a design you love and being able to build something inspired by it, without copy-pasting a single pixel.
Stay tuned for our Figma integration, which will push extracted tokens straight into your open file.
Try it now — install the AssetSnip extension and open any site.