Design
System
Generator

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

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)',
      },
    },
  },
}

$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;

{
  "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"
  }
}