Design Token Generator

Create, customize, and export design tokens for your design system.

Design Tokens

Customize your design tokens by category

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Import

Preview

See how your tokens look in real components

Export Options

Configure how your tokens will be exported

Format

Naming Convention

Prefix (Optional)

Add a prefix to all token names (e.g., ds-primary)

Export Format

Single File

Multiple Files (by category)

Include descriptions as comments

Generated Code

Preview of the generated code based on your tokens

:root {
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --primary-dark: #2563eb;
  --secondary: #10b981;
  --accent: #8b5cf6;
  --background: #ffffff;
  --foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #3b82f6;
  --error: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --info: #0ea5e9;
  --heading-1-font-family: Inter, sans-serif;
  --heading-1-font-size: 2.25rem;
  --heading-1-font-weight: 700;
  --heading-1-line-height: 1.2;
  --heading-1-letter-spacing: -0.025em;
  --heading-2-font-family: Inter, sans-serif;
  --heading-2-font-size: 1.875rem;
  --heading-2-font-weight: 700;
  --heading-2-line-height: 1.2;
  --heading-2-letter-spacing: -0.025em;
  --heading-3-font-family: Inter, sans-serif;
  --heading-3-font-size: 1.5rem;
  --heading-3-font-weight: 600;
  --heading-3-line-height: 1.2;
  --heading-3-letter-spacing: -0.025em;
  --heading-4-font-family: Inter, sans-serif;
  --heading-4-font-size: 1.25rem;
  --heading-4-font-weight: 600;
  --heading-4-line-height: 1.2;
  --heading-4-letter-spacing: -0.025em;
  --body-font-family: Inter, sans-serif;
  --body-font-size: 1rem;
  --body-font-weight: 400;
  --body-line-height: 1.5;
  --body-letter-spacing: 0;
  --small-font-family: Inter, sans-serif;
  --small-font-size: 0.875rem;
  --small-font-weight: 400;
  --small-line-height: 1.5;
  --small-letter-spacing: 0;
  --tiny-font-family: Inter, sans-serif;
  --tiny-font-size: 0.75rem;
  --tiny-font-weight: 400;
  --tiny-line-height: 1.5;
  --tiny-letter-spacing: 0;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --animation-fade-duration: 300ms;
  --animation-fade-timing-function: ease-in-out;
  --animation-fade-delay: 0ms;
  --animation-slide-up-duration: 400ms;
  --animation-slide-up-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  --animation-slide-up-delay: 0ms;
  --animation-slide-down-duration: 400ms;
  --animation-slide-down-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  --animation-slide-down-delay: 0ms;
  --animation-slide-left-duration: 400ms;
  --animation-slide-left-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  --animation-slide-left-delay: 0ms;
  --animation-slide-right-duration: 400ms;
  --animation-slide-right-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  --animation-slide-right-delay: 0ms;
  --animation-spin-duration: 1500ms;
  --animation-spin-timing-function: linear;
  --animation-spin-delay: 0ms;
  --animation-ping-duration: 1000ms;
  --animation-ping-timing-function: cubic-bezier(0, 0, 0.2, 1);
  --animation-ping-delay: 0ms;
  --z-index-behind: -1;
  --z-index-base: 0;
  --z-index-raised: 1;
  --z-index-dropdown: 10;
  --z-index-sticky: 20;
  --z-index-fixed: 30;
  --z-index-modal: 40;
  --z-index-popover: 50;
  --z-index-tooltip: 60;
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

Usage Guide

How to use these tokens in your project

CSS Variables

/* Import your tokens file */
@import 'tokens.css';

.button {
  background-color: var(--primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
}

SCSS Variables

// Import your tokens file
@import 'tokens.scss';

.button {
  background-color: $primary;
  border-radius: $radius-md;
  padding: $spacing-sm $spacing-md;
}

JavaScript/TypeScript

// Import your tokens file
import tokens from './tokens';

const Button = () => {
  return (
    <button
      style={{
        backgroundColor: tokens.colors.primary,
        borderRadius: tokens.borderRadius.md,
        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
      }}
    >
      Click me
    </button>
  );
}