Tool · Static CSS extraction
Website → design.md
Paste any public URL and get a complete, team-ready design kit: a full design.md style reference plus drop-in tokens.css, W3C design tokens JSON, and a Tailwind v4 theme — palette with semantic roles, type scale, spacing grid, radius, shadows, motion, and dark mode, distilled from the site's served CSS.
Try: · · ·
How it works
We fetch the page, its linked stylesheets, preloaded styles, and one level of @imports server-side, then parse every rule structurally — media queries, dark-mode scopes, and selector context included. CSS custom properties are resolved through their var() chains, and colors are assigned semantic roles (background, text, brand, border) from how they're actually used, not just how often they appear. Type scale, spacing grid, breakpoints, motion, and the typical button spec are inferred the same way.
Honest caveats
Static extraction reads what CSS declares, not what the browser renders — sites that style heavily via JavaScript, CSS-in-JS at runtime, or bot-block their assets will yield thin results. Output describes factual style values for reference; respect the source site's brand, content, and licensing when reusing anything beyond them.
Use it from CI or scripts
The extractor is a public endpoint — wire it into a pipeline to keep a style reference in sync with a site you don't control:
curl -s -X POST https://www.designsystems.one/api/extract-design \
-H "Content-Type: application/json" \
-d '{"url":"stripe.com"}' | jq -r '.files["design.md"]' > design.md