Design system generator #47003A

Thresholds: AA normal ≥ 4.5:1, AA large ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1. Fixes adjust the nearest accessible value in OKLCH, preserving hue.

Plain CSS custom properties with a .dark override block.

/*
  Design system #47003A design tokens
  Source: #47003a
  Generated by ChromaBrew — free design system generator
*/
:root {
  --background: #fffcfe;
  --background-subtle: #faf1f7;
  --foreground: #1b0e17;
  --foreground-muted: #584a53;
  --foreground-subtle: #7e727a;
  --surface: #fffdfe;
  --surface-raised: #ffffff;
  --surface-muted: #fcf3f9;
  --primary: #47003a;
  --primary-hover: #38002d;
  --primary-active: #290021;
  --primary-foreground: #ffffff;
  --secondary: #6e9b81;
  --secondary-hover: #5d896f;
  --secondary-foreground: #1d141a;
  --accent: #6b265b;
  --accent-foreground: #ffffff;
  --border: #e4dbe1;
  --border-muted: #ebe4e8;
  --border-strong: #cabfc6;
  --input: #ffffff;
  --input-border: #e4dbe1;
  --focus-ring: #47003a;
  --success: #2b9338;
  --success-foreground: #1d141a;
  --warning: #ebb213;
  --warning-foreground: #1d141a;
  --danger: #c94c49;
  --danger-foreground: #ffffff;
  --info: #007cc2;
  --info-foreground: #ffffff;
}

.dark {
  --background: #0e090c;
  --background-subtle: #150f13;
  --foreground: #f3e9f0;
  --foreground-muted: #aaa2a7;
  --foreground-subtle: #797377;
  --surface: #191317;
  --surface-raised: #201a1e;
  --surface-muted: #130e11;
  --primary: #b0639b;
  --primary-hover: #c072ab;
  --primary-active: #a65a92;
  --primary-foreground: #130c11;
  --secondary: #103c26;
  --secondary-hover: #214c35;
  --secondary-foreground: #e1efe6;
  --accent: #b0659b;
  --accent-foreground: #130c11;
  --border: #322c30;
  --border-muted: #282326;
  --border-strong: #4a4348;
  --input: #191317;
  --input-border: #322c30;
  --focus-ring: #b0639b;
  --success: #6bc670;
  --success-foreground: #130c11;
  --warning: #f0bb3b;
  --warning-foreground: #130c11;
  --danger: #ff847d;
  --danger-foreground: #130c11;
  --info: #59b6ff;
  --info-foreground: #130c11;
}

:root {
  --font-heading: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --font-size-xs: 0.64rem;
  --font-size-xs-line-height: 1.45;
  --font-size-xs-letter-spacing: 0em;
  --font-size-sm: 0.8rem;
  --font-size-sm-line-height: 1.45;
  --font-size-sm-letter-spacing: 0em;
  --font-size-base: 1rem;
  --font-size-base-line-height: 1.5;
  --font-size-base-letter-spacing: 0em;
  --font-size-lg: 1.25rem;
  --font-size-lg-line-height: 1.4;
  --font-size-lg-letter-spacing: 0em;
  --font-size-xl: 1.563rem;
  --font-size-xl-line-height: 1.3;
  --font-size-xl-letter-spacing: -0.01em;
  --font-size-2xl: 1.953rem;
  --font-size-2xl-line-height: 1.15;
  --font-size-2xl-letter-spacing: -0.02em;
  --font-size-3xl: 2.441rem;
  --font-size-3xl-line-height: 1.15;
  --font-size-3xl-letter-spacing: -0.02em;
  --font-size-4xl: 3.052rem;
  --font-size-4xl-line-height: 1.15;
  --font-size-4xl-letter-spacing: -0.02em;
  --font-size-5xl: 3.815rem;
  --font-size-5xl-line-height: 1.15;
  --font-size-5xl-letter-spacing: -0.02em;

  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 / 0.05);
  --shadow-md: 0 2px 4px -1px rgb(0 0 / 0.06), 0 4px 10px -2px rgb(0 0 / 0.07);
  --shadow-lg: 0 4px 8px -2px rgb(0 0 / 0.08), 0 12px 24px -6px rgb(0 0 / 0.1);
  --shadow-xl: 0 8px 16px -4px rgb(0 0 / 0.1), 0 24px 48px -12px rgb(0 0 / 0.14);
}