How to extract design tokens from a website
A website's visual style is not only its colors. Useful design tokens include typography, spacing, radius, shadows, density, component states, layout rhythm, and motion. Extracting them creates a reusable bridge between inspiration and implementation.
What to capture
- Color roles: background, surface, text, muted text, accent, border, and states.
- Typography: font family, weights, heading scale, body size, labels, and line height.
- Spacing: section padding, card gaps, form density, and layout gutters.
- Components: buttons, cards, nav, inputs, tables, panels, and empty states.
- Rules: what the design should avoid, such as heavy gradients or oversized cards.
Responsible extraction
Tokens should help you learn a design language, not clone brand identity. Do not copy logos, proprietary assets, copyrighted layouts, private content, or exact page structure.
DesignSaver output
DesignSaver is being built to produce tokens.json, CSS variables, Tailwind theme values, DESIGN.md, screenshots, and agent prompts from a single public URL.