Design Token Starter Generator

Create a token baseline your product, landing pages, and app UI can share from day one.

Free Tool Design System

Tools Overview

Generate starter design tokens and CSS variables for product-ready UI foundations.

Previous Next

Next Move - Strong resultMessaging

Recommended: Landing Page Scent Checker

Design system is strong. Confirm message continuity to improve funnel performance.

Audit landing scent

Token Inputs

Define brand basics. Tokens update live as you edit values.

1. Brand Foundation

Set brand name, spacing rhythm, and corner style before generating tokens.

Brand name

Base spacing (px)

Border radius (px)

2. Color Inputs

Enter three anchor colors to generate primary, secondary, and neutral scales.

Primary color

Secondary color

Neutral color

3. Typography Tokens

Define heading and body stacks to generate reusable type tokens.

Heading font stack

Body font stack

Color Scale Preview

Primary

100

200

300

400

500

600

700

800

900

Secondary

100

200

300

400

500

600

700

800

900

Neutral

100

200

300

400

500

600

700

800

900

Generated Tokens

Ready-to-copy JSON and CSS variable output.

1,878 chars

Token JSON

{
  "meta": {
    "brand": "Brand Peel",
    "key": "brand-peel"
  },
  "color": {
    "primary": {
      "50": "#ECF3FE",
      "100": "#D8E6FD",
      "200": "#B1CEFB",
      "300": "#80AFF9",
      "400": "#5090F7",
      "500": "#3C83F6",
      "600": "#0A58D6",
      "700": "#0844A6",
      "800": "#063075",
      "900": "#04204E"
    },
    "secondary": {
      "50": "#EDFDFB",
      "100": "#DAFBF7",
      "200": "#B6F7EF",
      "300": "#88F2E5",
      "400": "#5AEDDC",
      "500": "#14B8A5",
      "600": "#16CAB5",
      "700": "#119C8C",
      "800": "#0C6E63",
      "900": "#084942"
    },
    "neutral": {
      "50": "#F3F5F6",
      "100": "#E7EAEE",
      "200": "#D0D5DD",
      "300": "#B2BBC7",
      "400": "#95A1B2",
      "500": "#65758B",
      "600": "#5E6D82",
      "700": "#495465",
      "800": "#333C47",
      "900": "#22282F"
    },
    "semantic": {
      "background": "#64748B",
      "foreground": "#0F172A",
      "surface": "#FFFFFF",
      "border": "#E2E8F0"
    }
  },
  "typography": {
    "fontFamily": {
      "heading": "Sora, sans-serif",
      "body": "DM Sans, sans-serif"
    },
    "fontSize": {
      "xs": "0.75rem",
      "sm": "0.875rem",
      "md": "1rem",
      "lg": "1.125rem",
      "xl": "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem"
    },
    "lineHeight": {
      "tight": 1.2,
      "normal": 1.5,
      "relaxed": 1.7
    }
  },
  "spacing": {
    "1": "2px",
    "2": "4px",
    "3": "6px",
    "4": "8px",
    "5": "10px",
    "6": "12px",
    "8": "16px",
    "10": "20px",
    "12": "24px",
    "16": "32px"
  },
  "radius": {
    "sm": "6px",
    "md": "8px",
    "lg": "12px",
    "xl": "14px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "0 1px 2px 0 rgb(15 23 42 / 0.08)",
    "md": "0 8px 24px -12px rgb(15 23 42 / 0.24)",
    "lg": "0 20px 40px -20px rgb(15 23 42 / 0.28)"
  }
}

CSS Variables

:root {
  --color-primary-50: #ECF3FE;
  --color-primary-100: #D8E6FD;
  --color-primary-200: #B1CEFB;
  --color-primary-300: #80AFF9;
  --color-primary-400: #5090F7;
  --color-primary-500: #3C83F6;
  --color-primary-600: #0A58D6;
  --color-primary-700: #0844A6;
  --color-primary-800: #063075;
  --color-primary-900: #04204E;
  --color-secondary-50: #EDFDFB;
  --color-secondary-100: #DAFBF7;
  --color-secondary-200: #B6F7EF;
  --color-secondary-300: #88F2E5;
  --color-secondary-400: #5AEDDC;
  --color-secondary-500: #14B8A5;
  --color-secondary-600: #16CAB5;
  --color-secondary-700: #119C8C;
  --color-secondary-800: #0C6E63;
  --color-secondary-900: #084942;
  --color-neutral-50: #F3F5F6;
  --color-neutral-100: #E7EAEE;
  --color-neutral-200: #D0D5DD;
  --color-neutral-300: #B2BBC7;
  --color-neutral-400: #95A1B2;
  --color-neutral-500: #65758B;
  --color-neutral-600: #5E6D82;
  --color-neutral-700: #495465;
  --color-neutral-800: #333C47;
  --color-neutral-900: #22282F;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-full: 9999px;
  --font-heading: Sora, sans-serif;
  --font-body: DM Sans, sans-serif;
}

Copy JSON or CSS and drop it into your project.

Open Pricing Try Color Accessibility Checker