Design Token Generator

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

Design Tokens

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

Export Options

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

: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

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>
  );
}