Design Token Starter Generator
Design Token Starter Generator
Generate starter design tokens and CSS variables for product-ready UI foundations.
See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.
Starter Kits Including This Tool
Recommended: Landing Page Scent Checker
Design system is strong. Confirm message continuity to improve funnel performance.
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.
2. Color Inputs
Enter three anchor colors to generate primary, secondary, and neutral scales.
3. Typography Tokens
Define heading and body stacks to generate reusable type tokens.
Color Scale Preview
Primary
50
100
200
300
400
500
600
700
800
900
Secondary
50
100
200
300
400
500
600
700
800
900
Neutral
50
100
200
300
400
500
600
700
800
900
Generated Tokens
Ready-to-copy JSON and CSS variable output.
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;
}