Free Design Tokens Generator

Define your design tokens — colors, typography, spacing, radius, shadows — and export in 5 formats including W3C standard. No signup required.

Colors

Heading Font

Body Font

Base Font Size

Spacing Base Unit

Border Radius Base: 8px

none

2xl

full

Token Tree Preview

color

primary: #6366f1

secondary: #1e293b

accent: #06b6d4

success: #22c55e

warning: #f59e0b

typography

heading: Inter

body: Inter

spacing

base: 4px

borderRadius

md: 8px

shadow

sm, md, lg, xl

Export Tokens

{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "color": {
    "primary": {
      "$value": "#6366f1",
      "$type": "color"
    },
    "secondary": {
      "$value": "#1e293b",
      "$type": "color"
    },
    "accent": {
      "$value": "#06b6d4",
      "$type": "color"
    },
    "success": {
      "$value": "#22c55e",
      "$type": "color"
    },
    "warning": {
      "$value": "#f59e0b",
      "$type": "color"
    }
  },
  "typography": {
    "fontFamily": {
      "heading": {
        "$value": "Inter",
        "$type": "fontFamily"
      },
      "body": {
        "$value": "Inter",
        "$type": "fontFamily"
      }
    },
    "fontSize": {
      "xs": {
        "$value": "0.75rem",
        "$type": "dimension"
      },
      "sm": {
        "$value": "0.875rem",
        "$type": "dimension"
      },
      "base": {
        "$value": "1rem",
        "$type": "dimension"
      },
      "lg": {
        "$value": "1.125rem",
        "$type": "dimension"
      },
      "xl": {
        "$value": "1.25rem",
        "$type": "dimension"
      },
      "2xl": {
        "$value": "1.5rem",
        "$type": "dimension"
      },
      "3xl": {
        "$value": "1.875rem",
        "$type": "dimension"
      },
      "4xl": {
        "$value": "2.25rem",
        "$type": "dimension"
      }
    }
  },
  "spacing": {
    "0": {
      "$value": "0px",
      "$type": "dimension"
    },
    "1": {
      "$value": "4px",
      "$type": "dimension"
    },
    "2": {
      "$value": "8px",
      "$type": "dimension"
    },
    "3": {
      "$value": "12px",
      "$type": "dimension"
    },
    "4": {
      "$value": "16px",
      "$type": "dimension"
    },
    "5": {
      "$value": "20px",
      "$type": "dimension"
    },
    "6": {
      "$value": "24px",
      "$type": "dimension"
    },
    "8": {
      "$value": "32px",
      "$type": "dimension"
    },
    "10": {
      "$value": "40px",
      "$type": "dimension"
    },
    "12": {
      "$value": "48px",
      "$type": "dimension"
    },
    "16": {
      "$value": "64px",
      "$type": "dimension"
    },
    "20": {
      "$value": "80px",
      "$type": "dimension"
    },
    "24": {
      "$value": "96px",
      "$type": "dimension"
    },
    "32": {
      "$value": "128px",
      "$type": "dimension"
    },
    "40": {
      "$value": "160px",
      "$type": "dimension"
    },
    "48": {
      "$value": "192px",
      "$type": "dimension"
    },
    "64": {
      "$value": "256px",
      "$type": "dimension"
    }
  },
  "borderRadius": {
    "none": {
      "$value": "0",
      "$type": "dimension"
    },
    "sm": {
      "$value": "4px",
      "$type": "dimension"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension"
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension"
    },
    "2xl": {
      "$value": "24px",
      "$type": "dimension"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
      "$type": "shadow"
    },
    "md": {
      "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
      "$type": "shadow"
    },
    "lg": {
      "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
      "$type": "shadow"
    },
    "xl": {
      "$value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
      "$type": "shadow"
    }
  }
}

Why Use Our Design Tokens Generator?

5 Output Formats

W3C DTCG standard, Style Dictionary, CSS custom properties, Tailwind CSS config, and Figma Tokens. One tool, every platform.

W3C Standard

Export in the W3C Design Tokens Community Group format — the emerging standard for design token interchange across tools and platforms.

Import & Convert

Already have a Tailwind config? Import it and convert to design tokens in any format. Bridge the gap between your code and design tools.

How to Generate Your Design Tokens

Define Tokens

Set your colors, fonts, spacing base, border radius, and shadows. Add or remove color tokens as needed.

Preview Structure

Review the token tree preview to verify all values are correct before exporting to your target format.

Export

Choose from W3C, Style Dictionary, CSS, Tailwind, or Figma Tokens format. Copy and paste into your project.

Frequently Asked Questions

What are design tokens?▼

Design tokens are the atomic design decisions of a design system — colors, typography, spacing, radius, and shadows stored as platform-agnostic key-value pairs. They bridge the gap between design tools and code.

What is the W3C Design Tokens format?▼

The W3C Design Tokens Community Group (DTCG) format is an emerging standard for design token interchange. It uses JSON with $value and $type properties, making tokens interoperable across tools.

What export formats are supported?▼

We support 5 formats: W3C DTCG (standard JSON), Style Dictionary (Amazon's token framework), CSS custom properties, Tailwind CSS config, and Figma Tokens (Tokens Studio compatible).

Can I import an existing Tailwind config?▼

Yes! Use the Import mode to paste a Tailwind config. The tool extracts color hex values and converts them into design tokens you can export in any format.

Is this compatible with Style Dictionary?▼

Yes, the Style Dictionary export follows the standard format with nested objects and value properties. Use it directly with Amazon's Style Dictionary build system.

Is this tool free?▼

Yes, completely free. No signup required, no limits. Generate and export as many token sets as you need.

Need a Complete Brand Identity?

Love this tool? We generate complete brand systems — logos, colors, typography, and design tokens — all in 60 seconds with AI.

Generate Your Brand