Design
System
Generator

Generate semantic design tokens from brand colors, preview the system live, and export CSS, Tailwind, SCSS, and JSON tokens.

Contrast OK

Semantic Tokens

Brand

Backgrounds

Foreground

Borders

Actions

Feedback

CSS Variables

:root {
  --ds-brand-primary: #2563eb;
  --ds-brand-secondary: #f97316;
  --ds-brand-tertiary: #8f6b81;
  --ds-bg-canvas: #f6f9fe;
  --ds-bg-surface: #eef3fd;
  --ds-bg-elevated: #ffffff;
  --ds-bg-accent: #e9e1e6;
  --ds-fg-default: #2d1504;
  --ds-fg-muted: #5f2c08;
  --ds-fg-subtle: #90430d;
  --ds-border-default: #fdd8be;
  --ds-border-strong: #b35310;
  --ds-border-accent: #4f66c1;
  --ds-action-primary-bg: #2563eb;
  --ds-action-primary-hover: #1f53c5;
  --ds-action-secondary-bg: #fee9da;
  --ds-feedback-success-bg: #23a888;
  --ds-feedback-warning-bg: #f6930e;
  --ds-feedback-danger-bg: #b64d73;
  --ds-fg-onAccent: #1f181c;
  --ds-action-primary-fg: #ffffff;
  --ds-action-secondary-fg: #2d1504;
  --ds-feedback-success-fg: #111111;
  --ds-feedback-warning-fg: #111111;
  --ds-feedback-danger-fg: #ffffff;
}

.theme-dark {
  --ds-brand-primary: #2563eb;
  --ds-brand-secondary: #f97316;
  --ds-brand-tertiary: #8f6b81;
  --ds-bg-canvas: #040a17;
  --ds-bg-surface: #07142f;
  --ds-bg-elevated: #0a1c42;
  --ds-bg-accent: #392b34;
  --ds-fg-default: #fef1e8;
  --ds-fg-muted: #feddc7;
  --ds-fg-subtle: #fdc7a2;
  --ds-border-default: #5988f0;
  --ds-border-strong: #81a5f3;
  --ds-border-accent: #a18395;
  --ds-action-primary-bg: #366fed;
  --ds-action-primary-hover: #487cee;
  --ds-action-secondary-bg: #cc5e12;
  --ds-feedback-success-bg: #135c4b;
  --ds-feedback-warning-bg: #a05e09;
  --ds-feedback-danger-bg: #7d3653;
  --ds-fg-onAccent: #f6f3f5;
  --ds-action-primary-fg: #ffffff;
  --ds-action-secondary-fg: #111111;
  --ds-feedback-success-fg: #dffce9;
  --ds-feedback-warning-fg: #fef4cb;
  --ds-feedback-danger-fg: #fee4e4;
}

Tailwind Config

export default {
  theme: {
    extend: {
      colors: {
        'brand-primary': 'var(--ds-brand-primary)',
        'brand-secondary': 'var(--ds-brand-secondary)',
        'brand-tertiary': 'var(--ds-brand-tertiary)',
        'bg-canvas': 'var(--ds-bg-canvas)',
        'bg-surface': 'var(--ds-bg-surface)',
        'bg-elevated': 'var(--ds-bg-elevated)',
        'bg-accent': 'var(--ds-bg-accent)',
        'fg-default': 'var(--ds-fg-default)',
        'fg-muted': 'var(--ds-fg-muted)',
        'fg-subtle': 'var(--ds-fg-subtle)',
        'fg-onAccent': 'var(--ds-fg-onAccent)',
        'border-default': 'var(--ds-border-default)',
        'border-strong': 'var(--ds-border-strong)',
        'border-accent': 'var(--ds-border-accent)',
        'action-primary-bg': 'var(--ds-action-primary-bg)',
        'action-primary-fg': 'var(--ds-action-primary-fg)',
        'action-primary-hover': 'var(--ds-action-primary-hover)',
        'action-secondary-bg': 'var(--ds-action-secondary-bg)',
        'action-secondary-fg': 'var(--ds-action-secondary-fg)',
        'feedback-success-bg': 'var(--ds-feedback-success-bg)',
        'feedback-success-fg': 'var(--ds-feedback-success-fg)',
        'feedback-warning-bg': 'var(--ds-feedback-warning-bg)',
        'feedback-warning-fg': 'var(--ds-feedback-warning-fg)',
        'feedback-danger-bg': 'var(--ds-feedback-danger-bg)',
        'feedback-danger-fg': 'var(--ds-feedback-danger-fg)',
      },
    },
  },
}

SCSS Variables

$ds-brand-primary: #2563eb;
$ds-brand-secondary: #f97316;
$ds-brand-tertiary: #8f6b81;
$ds-bg-canvas: #f6f9fe;
$ds-bg-surface: #eef3fd;
$ds-bg-elevated: #ffffff;
$ds-bg-accent: #e9e1e6;
$ds-fg-default: #2d1504;
$ds-fg-muted: #5f2c08;
$ds-fg-subtle: #90430d;
$ds-border-default: #fdd8be;
$ds-border-strong: #b35310;
$ds-border-accent: #4f66c1;
$ds-action-primary-bg: #2563eb;
$ds-action-primary-hover: #1f53c5;
$ds-action-secondary-bg: #fee9da;
$ds-feedback-success-bg: #23a888;
$ds-feedback-warning-bg: #f6930e;
$ds-feedback-danger-bg: #b64d73;
$ds-fg-onAccent: #1f181c;
$ds-action-primary-fg: #ffffff;
$ds-action-secondary-fg: #2d1504;
$ds-feedback-success-fg: #111111;
$ds-feedback-warning-fg: #111111;
$ds-feedback-danger-fg: #ffffff;

JSON Tokens

{
  "meta": {
    "contrastStatus": "Contrast OK"
  },
  "light": {
    "brand.primary": "#2563eb",
    "brand.secondary": "#f97316",
    "brand.tertiary": "#8f6b81",
    "bg.canvas": "#f6f9fe",
    "bg.surface": "#eef3fd",
    "bg.elevated": "#ffffff",
    "bg.accent": "#e9e1e6",
    "fg.default": "#2d1504",
    "fg.muted": "#5f2c08",
    "fg.subtle": "#90430d",
    "border.default": "#fdd8be",
    "border.strong": "#b35310",
    "border.accent": "#4f66c1",
    "action.primary.bg": "#2563eb",
    "action.primary.hover": "#1f53c5",
    "action.secondary.bg": "#fee9da",
    "feedback.success.bg": "#23a888",
    "feedback.warning.bg": "#f6930e",
    "feedback.danger.bg": "#b64d73",
    "fg.onAccent": "#1f181c",
    "action.primary.fg": "#ffffff",
    "action.secondary.fg": "#2d1504",
    "feedback.success.fg": "#111111",
    "feedback.warning.fg": "#111111",
    "feedback.danger.fg": "#ffffff"
  },
  "dark": {
    "brand.primary": "#2563eb",
    "brand.secondary": "#f97316",
    "brand.tertiary": "#8f6b81",
    "bg.canvas": "#040a17",
    "bg.surface": "#07142f",
    "bg.elevated": "#0a1c42",
    "bg.accent": "#392b34",
    "fg.default": "#fef1e8",
    "fg.muted": "#feddc7",
    "fg.subtle": "#fdc7a2",
    "border.default": "#5988f0",
    "border.strong": "#81a5f3",
    "border.accent": "#a18395",
    "action.primary.bg": "#366fed",
    "action.primary.hover": "#487cee",
    "action.secondary.bg": "#cc5e12",
    "feedback.success.bg": "#135c4b",
    "feedback.warning.bg": "#a05e09",
    "feedback.danger.bg": "#7d3653",
    "fg.onAccent": "#f6f3f5",
    "action.primary.fg": "#ffffff",
    "action.secondary.fg": "#111111",
    "feedback.success.fg": "#dffce9",
    "feedback.warning.fg": "#fef4cb",
    "feedback.danger.fg": "#fee4e4"
  }
}

Token health

light mode

The quick brown fox jumps over the lazy dog

fg.default / bg.canvas

16.30:1

AAA
The quick brown fox jumps over the lazy dog

fg.onAccent / bg.accent

13.58:1

AAA
The quick brown fox jumps over the lazy dog

action.primary.fg / action.primary.bg

5.17:1

AA
The quick brown fox jumps over the lazy dog

action.secondary.fg / action.secondary.bg

14.65:1

AAA

dark mode

The quick brown fox jumps over the lazy dog

fg.default / bg.canvas

17.87:1

AAA
The quick brown fox jumps over the lazy dog

fg.onAccent / bg.accent

12.15:1

AAA
The quick brown fox jumps over the lazy dog

action.primary.fg / action.primary.bg

4.51:1 (adjusted)

AA
The quick brown fox jumps over the lazy dog

action.secondary.fg / action.secondary.bg

4.66:1 (adjusted)

AA

Learn more

What are design tokens, color scales, and how do gradients add visual richness?

Was this useful?

Related Tools

UUID Generator

Generate UUID v4 and v7 online instantly. Bulk generation, formatting options, validation, and one-click copy.

Robots.txt Generator

Generate robots.txt files with custom rules, presets for common configurations, sitemap references, and crawl delay settings.

Schema Markup Generator

Generate JSON-LD structured data for Articles, Products, FAQ, Events, and more with schema.org markup.

CSS Gradient Generator

Generate CSS gradient code for linear, radial, and conic gradients with live preview, color stops, and preset templates.

CSS Box Shadow Generator

Generate CSS box-shadow values with visual controls, live preview, and one-click copy.

Favicon Generator

Generate all favicon sizes from a single image, including ICO, Apple Touch Icon, and PWA icons.

Frequently Asked Questions

A design system is a set of reusable components, design tokens, and guidelines that help teams build consistent user interfaces. It defines colors, typography, spacing, and component behavior in one shared source of truth.

Design tokens are named values for visual properties like colors, spacing, and typography. Instead of hardcoding #2563eb everywhere, you use a token like --color-primary. This makes it easy to update the entire system by changing one value.

This tool exports your tokens as CSS custom properties, Tailwind config, SCSS variables, or JSON. Paste the CSS output into a global stylesheet, or merge the Tailwind output into your tailwind.config.js to start using the tokens in your project immediately.

Design System Generator - Build Tokens & CSS Variables | ToolsCanvas