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.
Eleven-step OKLCH scales. Lightness anchored to perceptual targets, chroma tapered at extremes. Click any swatch to copy its hex.
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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| Dark surface | 104 | 99 | 88 | 73 | 54 | 35 | 23 | 14 | 0 | 0 | 0 |
Pick any two colors; see APCA Lc and WCAG ratio. If the pair fails, jump to the nearest scale step that passes.
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.
minor third ratio · 1.200 · base 16px
Token systems carry product gravity.
Designed once, applied everywhere.
One source of truth, many surfaces.
Composable. Themable. Exportable.
Sized by ratio, named by intent.
Tokens are the smallest contract between design and code.
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.
Helper text, labels, captions.
Metadata · timestamps · footnotes
4px base × density factor · density: cozy
space-00pxspace-14pxspace-28pxspace-312pxspace-416pxspace-520pxspace-624pxspace-832pxspace-1040pxspace-1248pxspace-1664pxspace-2080pxspace-2496pxspace-0.52pxspace-1.56pxspace-2.510pxsubtle radius · balanced shadow
A realistic UI rendered with your tokens. Two surface types, light + dark, with color-vision simulation.
A single token source for color, type, spacing, and shape, everywhere.
Sustained week-over-week growth, accelerating in the last sprint.
| 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 |
A single token source for color, type, spacing, and shape, everywhere.
Sustained week-over-week growth, accelerating in the last sprint.
| 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 |
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);
}
Pipe the same tokens into another tool — colors and harmony travel along.