Skip to content
🛠️ToolsShed

Design Token Converter

Convert design tokens between JSON, CSS variables, and SCSS formats.

About this tool

Design tokens are the building blocks of modern design systems—standardized values for colors, spacing, typography, shadows, and other visual properties that teams reuse across products. By centralizing these decisions in a single format, teams maintain visual consistency, reduce bugs, and speed up both design and development workflows. Whether you're working on a single product or managing multiple platforms, design tokens eliminate the need to manually track colors or measurements across different parts of a codebase.

This converter makes it easy to switch between the most common design token formats: JSON (which stores tokens as a simple key-value structure), CSS variables (which render natively in browsers via :root selectors), and SCSS variables (which require a build step but integrate seamlessly with Sass preprocessors). Simply paste your tokens in any format and select your target format—the tool automatically detects your input and generates clean output ready to copy and paste into your project.

Teams using design tokens typically start with JSON as their source format, then generate platform-specific outputs: CSS for web applications that need native browser support, SCSS for projects built with Sass, and JSON for tools that consume tokens programmatically. This tool supports bidirectional conversion, so you can extract tokens from existing CSS or SCSS and convert them back to JSON whenever you need to audit or refactor your design system.

Frequently Asked Questions

Code Implementation

# Convert JSON design tokens to CSS variables
def tokens_to_css_vars(tokens: dict) -> str:
    lines = [f"  --{k}: {v};" for k, v in tokens.items()]
    return ":root {\n" + "\n".join(lines) + "\n}"

# Convert JSON design tokens to SCSS variables
def tokens_to_scss(tokens: dict) -> str:
    return "\n".join(f"${k}: {v};" for k, v in tokens.items())

tokens = {
    "color-primary": "#6366f1",
    "spacing-4": "16px",
    "border-radius": "8px"
}

print(tokens_to_css_vars(tokens))
print(tokens_to_scss(tokens))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.