What are design tokens?

Design tokens are reusable design decisions stored as data. They include colors, typography, spacing, and shadows—used to maintain consistency across products.

How do I generate tokens?

Input your brand colors, font names, spacing values, and breakpoints. Select token format (JSON or CSS). Download the generated file immediately.

What formats does this support?

Outputs JSON (Style Dictionary compatible), CSS variables, and SCSS. Most formats work with design token platforms and build systems.

Can I use these with Figma?

Yes. Export JSON and import into Figma Tokens plugin, or use CSS variables directly in design system documentation.

Is my design data private?

Completely. All processing happens in your browser. Nothing is stored, sent, or tracked. Download and use offline.

Design Token Generator

Generate a design token JSON file from your brand colors, fonts, and spacing.

Primary Color

Secondary Color

Neutral Color

Font Family

Base Size (px)

Border Radius (px)

Result

Design Tokens (JSON)

{
  "color": {
    "primary": {
      "value": "#3b82f6",
      "type": "color"
    },
    "secondary": {
      "value": "#8b5cf6",
      "type": "color"
    },
    "neutral": {
      "value": "#64748b",
      "type": "color"
    },
    "background": {
      "value": "#ffffff",
      "type": "color"
    },
    "surface": {
      "value": "#f8fafc",
      "type": "color"
    },
    "text": {
      "value": "#0f172a",
      "type": "color"
    },
    "text-muted": {
      "value": "#64748b",
      "type": "color"
    }
  },
  "typography": {
    "fontFamily": {
      "value": "Inter, system-ui, sans-serif",
      "type": "fontFamily"
    },
    "fontSize": {
      "xs": {
        "value": "12px",
        "type": "fontSize"
      },
      "sm": {
        "value": "14px",
        "type": "fontSize"
      },
      "base": {
        "value": "16px",
        "type": "fontSize"
      },
      "lg": {
        "value": "18px",
        "type": "fontSize"
      },
      "xl": {
        "value": "20px",
        "type": "fontSize"
      },
      "2xl": {
        "value": "24px",
        "type": "fontSize"
      },
      "3xl": {
        "value": "30px",
        "type": "fontSize"
      }
    }
  },
  "spacing": {
    "0": {
      "value": "0px",
      "type": "spacing"
    },
    "1": {
      "value": "4px",
      "type": "spacing"
    },
    "2": {
      "value": "8px",
      "type": "spacing"
    },
    "3": {
      "value": "12px",
      "type": "spacing"
    },
    "4": {
      "value": "16px",
      "type": "spacing"
    },
    "6": {
      "value": "24px",
      "type": "spacing"
    },
    "8": {
      "value": "32px",
      "type": "spacing"
    },
    "12": {
      "value": "48px",
      "type": "spacing"
    },
    "16": {
      "value": "64px",
      "type": "spacing"
    }
  },
  "borderRadius": {
    "none": {
      "value": "0px",
      "type": "borderRadius"
    },
    "sm": {
      "value": "4px",
      "type": "borderRadius"
    },
    "md": {
      "value": "8px",
      "type": "borderRadius"
    },
    "lg": {
      "value": "12px",
      "type": "borderRadius"
    },
    "full": {
      "value": "9999px",
      "type": "borderRadius"
    }
  }
}

CSS Variables

:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-neutral: #64748b;
  --font-family: Inter, system-ui, sans-serif;
  --font-size-base: 16px;
  --radius: 8px;
}

Summary7 colors, 7 sizes, 9 spacings

Related Tools

Color Palette Generator

Generate color harmonies

Type Scale Calculator

Generate a type scale

About This Tool

Design Token Generator creates standardized JSON files from your brand colors, typography, and spacing values. Essential for design system managers, developers, and teams using tools like Style Dictionary or Figma tokens.

Input your brand palette, font families, and spacing scale. The tool outputs valid JSON compatible with design token formats and CSS variable generation. Supports nested tokens and custom naming conventions.

Streamlines design-to-code workflows, ensures consistency across projects, and enables theme switching. Built entirely in-browser with no data storage or signup required.