Design Token Starter Generator

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

Get Desktop App

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.

Brand name

Base spacing (px)

Primary color

Secondary color

Neutral color

Heading font stack

Body font stack

Border radius (px)

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,874 chars

Token JSON

{
  "meta": {
    "brand": "Unpeeled",
    "key": "unpeeled"
  },
  "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