Design system #47003A

Colours

Colour scale

Generated in OKLCH with your brand hue preserved; the source colour is pinned at its natural position.

Palette

6 colours

Primary#47003a

Complement#002f1a

Primary 2#621d52

Complement 2#004a2b

Primary 3#2d0024

Complement 3#001c0d

Lock swatches to keep them while regenerating, or type a HEX value to override one manually.

Refinement

Brightness0%

Saturation0%

Hue Shift0°

Temperature0%

Locked colours won't be affected by refinement.

Layout primitives

Radius style

Type scale

Fonts

The quick brown fox — 48pt heading sample

Dark background

Typography tokens
Step	Size / LH	Copy
xs	0.64rem / 1.45
sm	0.8rem / 1.45
base	1rem / 1.5
lg	1.25rem / 1.4
xl	1.563rem / 1.3
2xl	1.953rem / 1.15
3xl	2.441rem / 1.15
4xl	3.052rem / 1.15
5xl	3.815rem / 1.15

Spacing (4px base)

24681012162024324048648096

Radii

Elevation

smmdlgxl

Exports include these as CSS variables (--font-size-*, --space-*, --radius-*, --shadow-*) and native Tailwind v4 theme namespaces.

Placeholder content — your tokens, real interfaces

Overview

MRR

$48,210

+12.4% sample

Active customers

1,284

+3.1% sample

Churned

-0.8% sample

Recent invoices

Customer	Amount	Status
Harbor & Co	$1,240.00	Paid
Northwind Labs	$860.00	Pending
Bluepeak GmbH	$2,410.00	Paid
Summit Studio	$310.00	Overdue
Ridgeway LLC	$980.00	Draft

Customer namePlan

Notifications Email None

Light: all AA pairs pass · Dark: all AA pairs pass

Contrast ratios for key colour pairs with WCAG pass/fail results
Pair	Ratio	AA normal	AA large	AAA normal	AAA large
Body text on page backgroundlight	18.37:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Muted text on page backgroundlight	8.18:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Body text on cardslight	18.48:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Primary buttonlight	15.80:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Secondary buttonlight	5.71:1	PASSPASS passes	PASSPASS passes	FAILFAIL fails	PASSPASS passes
Accent elementlight	10.23:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Success badgelight	4.57:1	PASSPASS passes	PASSPASS passes	FAILFAIL fails	PASSPASS passes
Warning badgelight	9.35:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Danger badgelight	4.55:1	PASSPASS passes	PASSPASS passes	FAILFAIL fails	PASSPASS passes
Info badgelight	4.50:1	PASSPASS passes	PASSPASS passes	FAILFAIL fails	PASSPASS passes
Body text on page backgrounddark	16.67:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Muted text on page backgrounddark	7.93:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Body text on cardsdark	15.46:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Primary buttondark	4.69:1	PASSPASS passes	PASSPASS passes	FAILFAIL fails	PASSPASS passes
Secondary buttondark	10.43:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Accent elementdark	4.76:1	PASSPASS passes	PASSPASS passes	FAILFAIL fails	PASSPASS passes
Success badgedark	9.13:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Warning badgedark	10.91:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Danger badgedark	8.13:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes
Info badgedark	8.78:1	PASSPASS passes	PASSPASS passes	PASSPASS passes	PASSPASS passes

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.

Semantic tokens

Page tokens
Token	Light	Dark
--background
--background-subtle
--foreground
--foreground-muted
--foreground-subtle

Surfaces tokens
Token	Light	Dark
--surface
--surface-raised
--surface-muted

Primary & secondary tokens
Token	Light	Dark
--primary
--primary-hover
--primary-active
--primary-foreground
--secondary
--secondary-hover
--secondary-foreground

Accent tokens
Token	Light	Dark
--accent
--accent-foreground

Borders & inputs tokens
Token	Light	Dark
--border
--border-muted
--border-strong
--input
--input-border
--focus-ring

Status tokens
Token	Light	Dark
--success
--success-foreground
--warning
--warning-foreground
--danger
--danger-foreground
--info
--info-foreground

AI Palette Suggestion

Describe your brand and get 5 smart palette options

Export

Web

Mobile / Desktop

Design Tools

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