Site to Design Token

Turn any website into design tokens: colours, type, spacing, radius, shadows and contrast. Export CSS, Tailwind, Figma and JSON.

Site to Design Token reads any web page and turns what it finds into a design system you can reuse: colours sorted into roles, type styles, a spacing scale, corner radii, shadows and WCAG contrast results. Click the toolbar icon, read the result, copy what you need. What it does: Finds every colour on the page and assigns roles: primary, accent, surface, text and border. Lists the fonts and the type scale, with size, weight and line height. Detects the spacing base (4 or 8 px) and the radius and shadow values in use. Checks text and background pairs against WCAG AA and AAA and shows which ones fail. Opens the full design system in the side panel, in a light or dark theme. Available in 7 languages: English, Chinese (Simplified), Hindi, Spanish, Arabic (right-to-left), French and Bengali.