Design Token Generator

Create and export design tokens for colors, spacing, typography, and borders in multiple formats.

Token Editor
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
Live Preview

Sample Heading

Body text using your design tokens with proper typography scale.

Export
:root {
  --color-primary-50: #f0f6ff;
  --color-primary-100: #e1ecfe;
  --color-primary-200: #bed6fe;
  --color-primary-300: #87b4fd;
  --color-primary-400: #468cfb;
  --color-primary-500: #0563fa;
  --color-primary-600: #0451cd;
  --color-primary-700: #0341a5;
  --color-primary-800: #022f78;
  --color-primary-900: #022050;
  --color-primary-950: #011432;
  --color-secondary-50: #f4f0ff;
  --color-secondary-100: #eae1fe;
  --color-secondary-200: #d1befd;
  --color-secondary-300: #ab88fc;
  --color-secondary-400: #7d47fa;
  --color-secondary-500: #4f06f9;
  --color-secondary-600: #4105cc;
  --color-secondary-700: #3404a4;
  --color-secondary-800: #260377;
  --color-secondary-900: #190250;
  --color-secondary-950: #100132;
  --color-accent-50: #fff9f0;
  --color-accent-100: #fff4e1;
  --color-accent-200: #fee6be;
  --color-accent-300: #fdd286;
  --color-accent-400: #fcb945;
  --color-accent-500: #fba004;
  --color-accent-600: #ce8403;
  --color-accent-700: #a66a03;
  --color-accent-800: #794d02;
  --color-accent-900: #503301;
  --color-accent-950: #322001;
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --font-size-xs: 0.563rem;
  --font-size-sm: 0.750rem;
  --font-size-base: 1.000rem;
  --font-size-lg: 1.333rem;
  --font-size-xl: 1.777rem;
  --font-size-2xl: 2.369rem;
  --font-size-3xl: 3.157rem;
  --font-size-4xl: 4.209rem;
  --font-size-5xl: 5.610rem;
  --font-family-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-family-mono: JetBrains Mono, ui-monospace, monospace;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --line-height-0: 1.2;
  --line-height-1: 1.4;
  --line-height-2: 1.5;
  --line-height-3: 1.75;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
}