Design System Generator

One brand color in — a full design system out: a perceptual 50–950 scale plus semantic roles (primary, secondary, accent, surfaces, text, success/warning/error), exported as CSS variables, SCSS, a Tailwind config and W3C design tokens. All deterministic.

:root {
  --brand-50: #ffffff;
  --brand-100: #e5e4ff;
  --brand-200: #c0c2ff;
  --brand-300: #939cff;
  --brand-400: #5876f3;
  --brand-500: #2563eb;
  --brand-600: #0249b8;
  --brand-700: #00338e;
  --brand-800: #001f66;
  --brand-900: #000b43;
  --brand-950: #00002d;

  /* semantic roles */
  --primary: #2563eb;
  --secondary: #e0c68b;
  --accent: #ba2efa;
  --background: #f9f8fe;
  --surface: #f1f0fd;
  --border: #cbcbd5;
  --text: #0d0c17;
  --muted: #7e7d85;
  --success: #33eb70;
  --warning: #eabf53;
  --error: #eb3f33;
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#ffffff',
          100: '#e5e4ff',
          200: '#c0c2ff',
          300: '#939cff',
          400: '#5876f3',
          500: '#2563eb',
          600: '#0249b8',
          700: '#00338e',
          800: '#001f66',
          900: '#000b43',
          950: '#00002d',
        },
        primary: '#2563eb',
        secondary: '#e0c68b',
        accent: '#ba2efa',
        background: '#f9f8fe',
        surface: '#f1f0fd',
        border: '#cbcbd5',
        text: '#0d0c17',
        muted: '#7e7d85',
        success: '#33eb70',
        warning: '#eabf53',
        error: '#eb3f33',
      },
    },
  },
};

$brand-50: #ffffff;
$brand-100: #e5e4ff;
$brand-200: #c0c2ff;
$brand-300: #939cff;
$brand-400: #5876f3;
$brand-500: #2563eb;
$brand-600: #0249b8;
$brand-700: #00338e;
$brand-800: #001f66;
$brand-900: #000b43;
$brand-950: #00002d;
$primary: #2563eb;
$secondary: #e0c68b;
$accent: #ba2efa;
$background: #f9f8fe;
$surface: #f1f0fd;
$border: #cbcbd5;
$text: #0d0c17;
$muted: #7e7d85;
$success: #33eb70;
$warning: #eabf53;
$error: #eb3f33;

{
  "brand.50": {
    "$value": "#ffffff",
    "$type": "color"
  },
  "brand.100": {
    "$value": "#e5e4ff",
    "$type": "color"
  },
  "brand.200": {
    "$value": "#c0c2ff",
    "$type": "color"
  },
  "brand.300": {
    "$value": "#939cff",
    "$type": "color"
  },
  "brand.400": {
    "$value": "#5876f3",
    "$type": "color"
  },
  "brand.500": {
    "$value": "#2563eb",
    "$type": "color"
  },
  "brand.600": {
    "$value": "#0249b8",
    "$type": "color"
  },
  "brand.700": {
    "$value": "#00338e",
    "$type": "color"
  },
  "brand.800": {
    "$value": "#001f66",
    "$type": "color"
  },
  "brand.900": {
    "$value": "#000b43",
    "$type": "color"
  },
  "brand.950": {
    "$value": "#00002d",
    "$type": "color"
  },
  "primary": {
    "$value": "#2563eb",
    "$type": "color"
  },
  "secondary": {
    "$value": "#e0c68b",
    "$type": "color"
  },
  "accent": {
    "$value": "#ba2efa",
    "$type": "color"
  },
  "background": {
    "$value": "#f9f8fe",
    "$type": "color"
  },
  "surface": {
    "$value": "#f1f0fd",
    "$type": "color"
  },
  "border": {
    "$value": "#cbcbd5",
    "$type": "color"
  },
  "text": {
    "$value": "#0d0c17",
    "$type": "color"
  },
  "muted": {
    "$value": "#7e7d85",
    "$type": "color"
  },
  "success": {
    "$value": "#33eb70",
    "$type": "color"
  },
  "warning": {
    "$value": "#eabf53",
    "$type": "color"
  },
  "error": {
    "$value": "#eb3f33",
    "$type": "color"
  }
}