What are design tokens?

Design tokens are the visual design atoms of a design system - the smallest pieces of design data like colors, typography, spacing, and animation values. They store these values in a platform-agnostic way, making it easy to maintain consistent design across products.

What formats can I export design tokens to?

Our design token generator supports export to CSS Variables, SCSS variables, Tailwind CSS configuration, JavaScript/TypeScript objects, and JSON format. This makes it compatible with virtually any frontend framework or design tool.

What is the three-tier token architecture?

The three-tier architecture consists of: Primitive tokens (raw values like hex colors), Semantic tokens (purpose-based references like 'primary-color'), and Component tokens (specific component values like 'button-background'). This hierarchy ensures flexibility and maintainability.

Is this design token generator free to use?

Yes, the design token generator is completely free to use. You can create, organize, and export unlimited design tokens without any cost or registration required.

Free design tool·Runs entirely in your browser

Design tokens,
perceptually tuned.

An OKLCH-based engine generates eleven-step color scales, modular type, density-aware spacing, radius and shadow systems. APCA contrast scoring on every pair. Exports to eleven formats including Tokens Studio for Figma.

Active paletteoklch

primary

accent

#4F46E5

L 0.51 · C 0.23 · H 277°

Presets

01Color

Color

Eleven-step OKLCH scales. Lightness anchored to perceptual targets, chroma tapered at extremes. Click any swatch to copy its hex.

Primary

500 · #6567FF

Accent

500 · #828700

Neutral

500 · #7E8088

Success

500 · #009A4E

Warning

500 · #AC7300

Danger

500 · #E23531

Info

500 · #0086D4

02Accessibility matrix

Accessibility matrix

APCA Lc score for each scale step against the light and dark surfaces. ≥75 passes body text, ≥60 passes large or bold, ≥45 passes non-text UI.

Color	Surface	50	100	200	300	400	500	600	700	800	900	950
primary	Light surface	0	0	13	28	47	66	78	87	94	99	102
primary	Dark surface	104	98	88	72	51	32	21	12	0	0	0
accent	Light surface	0	0	11	26	44	63	75	84	94	99	102
accent	Dark surface	105	99	89	73	54	35	23	14	0	0	0
success	Light surface	0	0	10	24	42	61	73	83	93	99	102
success	Dark surface	105	100	90	76	56	38	25	16	0	0	0
warning	Light surface	0	0	13	28	47	64	76	85	94	100	102
warning	Dark surface	104	98	88	72	52	34	22	13	0	0	0
danger	Light surface	0	0	13	29	48	66	76	85	93	99	102
danger	Dark surface	104	98	87	70	50	32	22	14	0	0	0
info	Light surface	0	0	12	27	45	63	75	84	93	99	102
info	Dark surface	104	99	88	73	54	35	23	14	0	0	0

Lc 75+ body textLc 60+ large/boldLc 45+ UI accentbelow threshold

03Pair finder

Pair finder

Pick any two colors; see APCA Lc and WCAG ratio. If the pair fails, jump to the nearest scale step that passes.

Foregroundtext / icon

Backgroundsurface

APCA

Lc 99.5

Body text

WCAG 2

14.87:1

AAA

Tokens carry product gravity.

A single source for color, type, and spacing keeps the system honest.

Body copy reads at the tightest size your scale defines. Pick the foreground and background; the engine will tell you whether the pair holds up under APCA and WCAG, and which scale step would pass if it doesn't.

Smaller helper text. Used for labels, captions, metadata.

04Type

Type

minor third ratio · 1.200 · base 16px

Display6xl · 57.33px

Token systems carry product gravity.

H14xl · 39.81px

Designed once, applied everywhere.

H23xl · 33.18px

One source of truth, many surfaces.

H32xl · 27.65px

Composable. Themable. Exportable.

H4xl · 23.04px

Sized by ratio, named by intent.

Leadlg · 19.2px

Tokens are the smallest contract between design and code.

Bodybase · 16px

A token system replaces ad-hoc values with a vocabulary. Adjust a single value at the source and the change propagates across every product surface.

Smallsm · 13.33px

Helper text, labels, captions.

Captionxs · 11.11px

Metadata · timestamps · footnotes

05Spacing

Spacing

4px base × density factor · density: cozy

space-00px

space-14px

space-28px

space-312px

space-416px

space-520px

space-624px

space-832px

space-1040px

space-1248px

space-1664px

space-2080px

space-2496px

space-0.52px

space-1.56px

space-2.510px

06Shape & elevation

Shape & elevation

subtle radius · balanced shadow

Radius

none

0

0.125rem

0.25rem

0.375rem

0.625rem

2xl

1rem

3xl

1.5rem

full

9999px

Shadow

2xl

07Components

Components

A realistic UI rendered with your tokens. Two surface types, light + dark, with color-vision simulation.

Simulate

light#FAFAFC → #232428

New release

Ship a consistent UI faster

A single token source for color, type, spacing, and shape, everywhere.

Active users

12,438

+8.2% vs last week

Errors

−12% vs last week

Avg latency

184 ms

−4ms vs last week

Overview · last 12 weeks

1,284

Sustained week-over-week growth, accelerating in the last sprint.

Recent invoices

Invoice	Customer	Amount	Status
INV-1842	Acme Robotics	$2,400.00	paid
INV-1841	Helix Labs	$840.00	pending
INV-1840	Northwind	$1,200.00	paid
INV-1839	Linear Stage	$320.00	overdue

Workspace settings

Email digests

Weekly summary every Monday.

Slack notifications

Real-time alerts for incidents above P2.

Notify me when

A deployment fails on mainA new error type appearsLatency exceeds 500ms

Changes save automatically.

Email address

Saved

Your changes are live across all channels.

Heads up

Two tokens reference deprecated values.

Build failed

Color contrast below AA on 3 surfaces.

primaryaccentsuccesswarningdangerinfoneutral

dark#111115 → #FAFAFC

New release

Ship a consistent UI faster

A single token source for color, type, spacing, and shape, everywhere.

Active users

12,438

+8.2% vs last week

Errors

−12% vs last week

Avg latency

184 ms

−4ms vs last week

Overview · last 12 weeks

1,284

Sustained week-over-week growth, accelerating in the last sprint.

Recent invoices

Invoice	Customer	Amount	Status
INV-1842	Acme Robotics	$2,400.00	paid
INV-1841	Helix Labs	$840.00	pending
INV-1840	Northwind	$1,200.00	paid
INV-1839	Linear Stage	$320.00	overdue

Workspace settings

Email digests

Weekly summary every Monday.

Slack notifications

Real-time alerts for incidents above P2.

Notify me when

A deployment fails on mainA new error type appearsLatency exceeds 500ms

Changes save automatically.

Email address

Saved

Your changes are live across all channels.

Heads up

Two tokens reference deprecated values.

Build failed

Color contrast below AA on 3 surfaces.

primaryaccentsuccesswarningdangerinfoneutral

08Export

Export

Eleven formats, all generated client-side. Nothing leaves your browser.

/* Generated by DesignSystems.one Token Generator */
/* https://www.designsystems.one/tools/token-generator */

:root {
  /* ===== Colors ===== */
  /* Primary */
  --color-primary-50: #f9faff;
  --color-primary-100: #eef1ff;
  --color-primary-200: #d9dfff;
  --color-primary-300: #b9c3ff;
  --color-primary-400: #8e9aff;
  --color-primary-500: #6567ff;
  --color-primary-600: #4f46e5;
  --color-primary-700: #3d2ec0;
  --color-primary-800: #2b1497;
  --color-primary-900: #1b006f;
  --color-primary-950: #0c0041;

  /* Accent */
  --color-accent-50: #fafde5;
  --color-accent-100: #f2f6cc;
  --color-accent-200: #e2e99e;
  --color-accent-300: #c9d05d;
  --color-accent-400: #a7ae00;
  --color-accent-500: #828700;
  --color-accent-600: #676c00;
  --color-accent-700: #515500;
  --color-accent-800: #393b00;
  --color-accent-900: #252700;
  --color-accent-950: #121300;

  /* Neutral */
  --color-neutral-50: #fafafc;
  --color-neutral-100: #f1f1f4;
  --color-neutral-200: #e0e1e6;
  --color-neutral-300: #c5c7ce;
  --color-neutral-400: #a2a4ac;
  --color-neutral-500: #7e8088;
  --color-neutral-600: #64666d;
  --color-neutral-700: #4e4f56;
  --color-neutral-800: #36383d;
  --color-neutral-900: #232428;
  --color-neutral-950: #111115;

  /* Success */
  --color-success-50: #effff2;
  --color-success-100: #d8fde0;
  --color-success-200: #b2f4c3;
  --color-success-300: #7de19b;
  --color-success-400: #40c170;
  --color-success-500: #009a4e;
  --color-success-600: #007b3d;
  --color-success-700: #00612e;
  --color-success-800: #00441f;
  --color-success-900: #002d12;
  --color-success-950: #001707;

  /* Warning */
  --color-warning-50: #fff9f1;
  --color-warning-100: #ffefda;
  --color-warning-200: #ffdbaa;
  --color-warning-300: #f8bb61;
  --color-warning-400: #db9400;
  --color-warning-500: #ac7300;
  --color-warning-600: #895b00;
  --color-warning-700: #6c4700;
  --color-warning-800: #4d3100;
  --color-warning-900: #331f00;
  --color-warning-950: #1b0f00;

  /* Danger */
  --color-danger-50: #fff8f7;
  --color-danger-100: #ffedeb;
  --color-danger-200: #ffd6d1;
  --color-danger-300: #ffb0a6;
  --color-danger-400: #ff7266;
  --color-danger-500: #e23531;
  --color-danger-600: #c10013;
  --color-danger-700: #99000c;
  --color-danger-800: #6f0006;
  --color-danger-900: #4b0003;
  --color-danger-950: #2a0001;

  /* Info */
  --color-info-50: #f6fbff;
  --color-info-100: #e7f4ff;
  --color-info-200: #c8e5ff;
  --color-info-300: #95ceff;
  --color-info-400: #45acfb;
  --color-info-500: #0086d4;
  --color-info-600: #006baa;
  --color-info-700: #005487;
  --color-info-800: #003b61;
  --color-info-900: #002642;
  --color-info-950: #001324;

  /* ===== Typography ===== */
  --font-family-body: 'Figtree', system-ui, sans-serif;
  --font-family-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-size-xs: 0.6944rem;
  --font-size-sm: 0.8333rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.44rem;
  --font-size-2xl: 1.728rem;
  --font-size-3xl: 2.0736rem;
  --font-size-4xl: 2.4883rem;
  --font-size-5xl: 2.986rem;
  --font-size-6xl: 3.5832rem;
  --line-height-xs: 1.5;
  --line-height-sm: 1.5;
  --line-height-base: 1.5;
  --line-height-lg: 1.5;
  --line-height-xl: 1.4;
  --line-height-2xl: 1.2;
  --line-height-3xl: 1.2;
  --line-height-4xl: 1.2;
  --line-height-5xl: 1.2;
  --line-height-6xl: 1.2;

  /* ===== Spacing ===== */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-40: 10rem;
  --spacing-48: 12rem;
  --spacing-56: 14rem;
  --spacing-64: 16rem;
  --spacing-0_5: 0.125rem;
  --spacing-1_5: 0.375rem;
  --spacing-2_5: 0.625rem;

  /* ===== Radius ===== */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.625rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ===== Shadow ===== */
  --shadow-sm: 0 1px 2px 0 rgba(35, 36, 40, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(35, 36, 40, 0.1), 0 2px 4px -2px rgba(35, 36, 40, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(35, 36, 40, 0.1), 0 4px 6px -4px rgba(35, 36, 40, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(35, 36, 40, 0.1), 0 8px 10px -6px rgba(35, 36, 40, 0.06);
  --shadow-2xl: 0 25px 50px -12px rgba(35, 36, 40, 0.25);

  /* ===== Semantic aliases (light) ===== */
  --color-bg: var(--color-neutral-50);
  --color-bg-subtle: var(--color-neutral-100);
  --color-bg-muted: var(--color-neutral-200);
  --color-fg: var(--color-neutral-900);
  --color-fg-muted: var(--color-neutral-600);
  --color-fg-subtle: var(--color-neutral-500);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-brand: var(--color-primary-600);
  --color-brand-hover: var(--color-primary-700);
  --color-brand-active: var(--color-primary-800);
  --color-brand-fg: #ffffff;
  --color-brand-subtle: var(--color-primary-50);
  --color-accent: var(--color-accent-500);
  --color-accent-fg: #ffffff;
  --color-ring: var(--color-primary-500);
}

.dark, [data-theme="dark"] {
  --color-bg: var(--color-neutral-950);
  --color-bg-subtle: var(--color-neutral-900);
  --color-bg-muted: var(--color-neutral-800);
  --color-fg: var(--color-neutral-50);
  --color-fg-muted: var(--color-neutral-400);
  --color-fg-subtle: var(--color-neutral-500);
  --color-border: var(--color-neutral-800);
  --color-border-strong: var(--color-neutral-700);
  --color-brand: var(--color-primary-500);
  --color-brand-hover: var(--color-primary-400);
  --color-brand-active: var(--color-primary-300);
  --color-brand-fg: #ffffff;
  --color-brand-subtle: var(--color-primary-950);
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #0a0a0a;
  --color-ring: var(--color-primary-400);
}

Send this kit to

Pipe the same tokens into another tool — colors and harmony travel along.

Code generator Color generator A11y checklist

Use this in your AI agent

Drop these tokens straight into Cursor, Claude Code, or v0.

Outputs are W3C-spec ($value/$type/$description) and round-trip with Tokens Studio for Figma. The shadcn/ui registry below ships our button, input, and card primitives — agents install them in one command.

shadcn CLI

npx shadcn@latest add https://www.designsystems.one/r/button

Cursor / Claude Code

curl https://www.designsystems.one/r | jq

Tokens (W3C)

curl https://www.designsystems.one/r/utils > "lib/utils.ts" # then export tokens.w3c.json from the tool above

See the full registry

Color

Surface

100

200

300

400

500

600

700

800

900

950

primary

Light surface

102

Dark surface

104

accent

Light surface

102

Dark surface

105

success

Light surface

102

Dark surface

105

100

warning

Light surface

100

102

Dark surface

104

danger

Light surface

102

Dark surface

104

info

Light surface

102

Dark surface

104

Invoice

Customer

Amount

Status

INV-1842

Acme Robotics

$2,400.00

paid

INV-1841

Helix Labs

$840.00

pending

INV-1840

Northwind

$1,200.00

paid

INV-1839

Linear Stage

$320.00

overdue

Invoice

Customer

Amount

Status

INV-1842

Acme Robotics

$2,400.00

paid

INV-1841

Helix Labs

$840.00

pending

INV-1840

Northwind

$1,200.00

paid

INV-1839

Linear Stage

$320.00

overdue

/* Generated by DesignSystems.one Token Generator */ /* https://www.designsystems.one/tools/token-generator */ :root { /* ===== Colors ===== */ /* Primary */ --color-primary-50: #f9faff; --color-primary-100: #eef1ff; --color-primary-200: #d9dfff; --color-primary-300: #b9c3ff; --color-primary-400: #8e9aff; --color-primary-500: #6567ff; --color-primary-600: #4f46e5; --color-primary-700: #3d2ec0; --color-primary-800: #2b1497; --color-primary-900: #1b006f; --color-primary-950: #0c0041; /* Accent */ --color-accent-50: #fafde5; --color-accent-100: #f2f6cc; --color-accent-200: #e2e99e; --color-accent-300: #c9d05d; --color-accent-400: #a7ae00; --color-accent-500: #828700; --color-accent-600: #676c00; --color-accent-700: #515500; --color-accent-800: #393b00; --color-accent-900: #252700; --color-accent-950: #121300; /* Neutral */ --color-neutral-50: #fafafc; --color-neutral-100: #f1f1f4; --color-neutral-200: #e0e1e6; --color-neutral-300: #c5c7ce; --color-neutral-400: #a2a4ac; --color-neutral-500: #7e8088; --color-neutral-600: #64666d; --color-neutral-700: #4e4f56; --color-neutral-800: #36383d; --color-neutral-900: #232428; --color-neutral-950: #111115; /* Success */ --color-success-50: #effff2; --color-success-100: #d8fde0; --color-success-200: #b2f4c3; --color-success-300: #7de19b; --color-success-400: #40c170; --color-success-500: #009a4e; --color-success-600: #007b3d; --color-success-700: #00612e; --color-success-800: #00441f; --color-success-900: #002d12; --color-success-950: #001707; /* Warning */ --color-warning-50: #fff9f1; --color-warning-100: #ffefda; --color-warning-200: #ffdbaa; --color-warning-300: #f8bb61; --color-warning-400: #db9400; --color-warning-500: #ac7300; --color-warning-600: #895b00; --color-warning-700: #6c4700; --color-warning-800: #4d3100; --color-warning-900: #331f00; --color-warning-950: #1b0f00; /* Danger */ --color-danger-50: #fff8f7; --color-danger-100: #ffedeb; --color-danger-200: #ffd6d1; --color-danger-300: #ffb0a6; --color-danger-400: #ff7266; --color-danger-500: #e23531; --color-danger-600: #c10013; --color-danger-700: #99000c; --color-danger-800: #6f0006; --color-danger-900: #4b0003; --color-danger-950: #2a0001; /* Info */ --color-info-50: #f6fbff; --color-info-100: #e7f4ff; --color-info-200: #c8e5ff; --color-info-300: #95ceff; --color-info-400: #45acfb; --color-info-500: #0086d4; --color-info-600: #006baa; --color-info-700: #005487; --color-info-800: #003b61; --color-info-900: #002642; --color-info-950: #001324; /* ===== Typography ===== */ --font-family-body: 'Figtree', system-ui, sans-serif; --font-family-heading: 'Space Grotesk', system-ui, sans-serif; --font-size-xs: 0.6944rem; --font-size-sm: 0.8333rem; --font-size-base: 1rem; --font-size-lg: 1.2rem; --font-size-xl: 1.44rem; --font-size-2xl: 1.728rem; --font-size-3xl: 2.0736rem; --font-size-4xl: 2.4883rem; --font-size-5xl: 2.986rem; --font-size-6xl: 3.5832rem; --line-height-xs: 1.5; --line-height-sm: 1.5; --line-height-base: 1.5; --line-height-lg: 1.5; --line-height-xl: 1.4; --line-height-2xl: 1.2; --line-height-3xl: 1.2; --line-height-4xl: 1.2; --line-height-5xl: 1.2; --line-height-6xl: 1.2; /* ===== Spacing ===== */ --spacing-0: 0; --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem; --spacing-16: 4rem; --spacing-20: 5rem; --spacing-24: 6rem; --spacing-32: 8rem; --spacing-40: 10rem; --spacing-48: 12rem; --spacing-56: 14rem; --spacing-64: 16rem; --spacing-0_5: 0.125rem; --spacing-1_5: 0.375rem; --spacing-2_5: 0.625rem; /* ===== Radius ===== */ --radius-none: 0; --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.375rem; --radius-xl: 0.625rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-full: 9999px; /* ===== Shadow ===== */ --shadow-sm: 0 1px 2px 0 rgba(35, 36, 40, 0.06); --shadow-md: 0 4px 6px -1px rgba(35, 36, 40, 0.1), 0 2px 4px -2px rgba(35, 36, 40, 0.06); --shadow-lg: 0 10px 15px -3px rgba(35, 36, 40, 0.1), 0 4px 6px -4px rgba(35, 36, 40, 0.06); --shadow-xl: 0 20px 25px -5px rgba(35, 36, 40, 0.1), 0 8px 10px -6px rgba(35, 36, 40, 0.06); --shadow-2xl: 0 25px 50px -12px rgba(35, 36, 40, 0.25); /* ===== Semantic aliases (light) ===== */ --color-bg: var(--color-neutral-50); --color-bg-subtle: var(--color-neutral-100); --color-bg-muted: var(--color-neutral-200); --color-fg: var(--color-neutral-900); --color-fg-muted: var(--color-neutral-600); --color-fg-subtle: var(--color-neutral-500); --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-brand: var(--color-primary-600); --color-brand-hover: var(--color-primary-700); --color-brand-active: var(--color-primary-800); --color-brand-fg: #ffffff; --color-brand-subtle: var(--color-primary-50); --color-accent: var(--color-accent-500); --color-accent-fg: #ffffff; --color-ring: var(--color-primary-500); } .dark, [data-theme="dark"] { --color-bg: var(--color-neutral-950); --color-bg-subtle: var(--color-neutral-900); --color-bg-muted: var(--color-neutral-800); --color-fg: var(--color-neutral-50); --color-fg-muted: var(--color-neutral-400); --color-fg-subtle: var(--color-neutral-500); --color-border: var(--color-neutral-800); --color-border-strong: var(--color-neutral-700); --color-brand: var(--color-primary-500); --color-brand-hover: var(--color-primary-400); --color-brand-active: var(--color-primary-300); --color-brand-fg: #ffffff; --color-brand-subtle: var(--color-primary-950); --color-accent: var(--color-accent-400); --color-accent-fg: #0a0a0a; --color-ring: var(--color-primary-400); }

Design tokens,perceptually tuned.

Color

Primary

Accent

Neutral

Success

Warning

Danger

Info

Accessibility matrix

Pair finder

Type

Spacing

Shape & elevation

Radius

Shadow

Components

Ship a consistent UI faster

Ship a consistent UI faster

Export

Design tokens,perceptually tuned.

Color

Primary

Accent

Neutral

Success

Warning

Danger

Info

Accessibility matrix

Pair finder

Type

Spacing

Shape & elevation

Radius

Shadow

Components

Ship a consistent UI faster

Ship a consistent UI faster

Export

Design tokens,
perceptually tuned.

Design tokens,
perceptually tuned.