Jamie Rivera
2h agoHi — Stripe shows two charges for March (invoice #1042), $1,240 each. Could you refund the duplicate? Our finance close is Friday.
Design system generator #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
0%
0%
0%
0°
0%
Locked colours won't be affected by refinement.
Layout primitives
Radius style
Type scale
Fonts
The quick brown fox — 48pt heading sample
Dark background
| 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
#2481Open
Refund for invoice #1042
Jamie Rivera · via email · 2h ago
Mark as pendingExport transcriptDelete conversation
AM
You · support
1h agoFound it — the retry after a timeout double-charged you. Refund issued to the card ending 4242; banks take 3–5 days. I've added a note to the invoice.
Accessibility — WCAG 2.x
Light: all AA pairs pass · Dark: all AA pairs pass
| Pair | Preview | Ratio | AA normal | AA large | AAA normal | AAA large | Fix |
|---|---|---|---|---|---|---|---|
| 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.31:1 | PASSPASS passes | PASSPASS passes | FAILFAIL fails | PASSPASS passes | ||
| Accent elementlight | 5.42:1 | PASSPASS passes | PASSPASS passes | FAILFAIL fails | 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 | 5.48:1 | PASSPASS passes | PASSPASS passes | FAILFAIL fails | PASSPASS passes | ||
| Accent elementdark | 5.16: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.
Colour-blind preview
Simulated difference for each pair — under ~30 they are hard to tell apart.
| Pair | Protanopia | Deuteranopia | Tritanopia |
|---|---|---|---|
| Body text on page backgroundlight | diff 92 · 18.66:1Distinguishable | diff 92 · 18.40:1Distinguishable | diff 92 · 18.34:1Distinguishable |
| Muted text on page backgroundlight | diff 69 · 8.42:1Distinguishable | diff 68 · 8.16:1Distinguishable | diff 68 · 8.17:1Distinguishable |
| Body text on cardslight | diff 93 · 18.69:1Distinguishable | diff 92 · 18.55:1Distinguishable | diff 92 · 18.45:1Distinguishable |
| Primary buttonlight | diff 91 · 18.58:1Distinguishable | diff 89 · 17.58:1Distinguishable | diff 88 · 15.51:1Distinguishable |
| Secondary buttonlight | diff 42 · 5.38:1Distinguishable | diff 41 · 5.20:1Distinguishable | diff 42 · 5.06:1Distinguishable |
| Accent elementlight | diff 58 · 5.50:1Distinguishable | diff 64 · 7.35:1Distinguishable | diff 72 · 4.90:1Distinguishable |
| Success badgelight | diff 38 · 4.60:1Distinguishable | diff 33 · 3.77:1Distinguishable | diff 35 · 4.46:1Distinguishable |
| Warning badgelight | diff 56 · 8.36:1Distinguishable | diff 61 · 9.87:1Distinguishable | diff 64 · 8.52:1Distinguishable |
| Danger badgelight | diff 66 · 6.88:1Distinguishable | diff 61 · 4.99:1Distinguishable | diff 59 · 3.93:1Distinguishable |
| Info badgelight | diff 50 · 4.37:1Distinguishable | diff 59 · 5.93:1Distinguishable | diff 68 · 3.89:1Distinguishable |
| Body text on page backgrounddark | diff 89 · 16.60:1Distinguishable | diff 89 · 16.69:1Distinguishable | diff 89 · 16.64:1Distinguishable |
| Muted text on page backgrounddark | diff 60 · 7.86:1Distinguishable | diff 60 · 7.92:1Distinguishable | diff 61 · 7.93:1Distinguishable |
| Body text on cardsdark | diff 85 · 15.44:1Distinguishable | diff 85 · 15.48:1Distinguishable | diff 85 · 15.43:1Distinguishable |
| Primary buttondark | diff 44 · 4.06:1Distinguishable | diff 46 · 4.61:1Distinguishable | diff 49 · 4.78:1Distinguishable |
| Secondary buttondark | diff 44 · 5.55:1Distinguishable | diff 43 · 5.39:1Distinguishable | diff 44 · 5.21:1Distinguishable |
| Accent elementdark | diff 46 · 5.06:1Distinguishable | diff 40 · 3.62:1Distinguishable | diff 45 · 5.79:1Distinguishable |
| Success badgedark | diff 61 · 9.41:1Distinguishable | diff 57 · 8.17:1Distinguishable | diff 57 · 8.87:1Distinguishable |
| Warning badgedark | diff 61 · 9.85:1Distinguishable | diff 66 · 11.52:1Distinguishable | diff 70 · 10.09:1Distinguishable |
| Danger badgedark | diff 50 · 6.17:1Distinguishable | diff 57 · 7.96:1Distinguishable | diff 64 · 7.63:1Distinguishable |
| Info badgedark | diff 73 · 9.48:1Distinguishable | diff 68 · 7.68:1Distinguishable | diff 61 · 9.44:1Distinguishable |
Simulations use the Machado, Oliveira & Fernandes (2009) matrices. A passing WCAG ratio does not guarantee the pair stays distinguishable under a colour vision deficiency — these checks surface pairs that collapse even though the numbers look fine.
Semantic tokens
| Token | Light | Dark |
|---|---|---|
| --background | ||
| --background-subtle | ||
| --foreground | ||
| --foreground-muted | ||
| --foreground-subtle |
| Token | Light | Dark |
|---|---|---|
| --surface | ||
| --surface-raised | ||
| --surface-muted |
| Token | Light | Dark |
|---|---|---|
| --primary | ||
| --primary-hover | ||
| --primary-active | ||
| --primary-foreground | ||
| --secondary | ||
| --secondary-hover | ||
| --secondary-foreground |
| Token | Light | Dark |
|---|---|---|
| --accent | ||
| --accent-foreground |
| Token | Light | Dark |
|---|---|---|
| --border | ||
| --border-muted | ||
| --border-strong | ||
| --input | ||
| --input-border | ||
| --focus-ring |
| Token | Light | Dark |
|---|---|---|
| --success | ||
| --success-foreground | ||
| --warning | ||
| --warning-foreground | ||
| --danger | ||
| --danger-foreground | ||
| --info | ||
| --info-foreground |
Free generator · No sign-up · Runs in your browser
From one color to a working design system
A perceptual tonal scale, a harmony palette, semantic tokens, and matched light and dark themes — everything runs in your browser, nothing is uploaded.
FAQ
Questions, answered
- Is the design system generator free?
- Yes — completely. The full generator, every color control, WCAG accessibility checks and all core exports are free with no account required. An account is optional and only used if you want to save and revisit your projects.
- What does ChromaBrew generate from a single color?
- One primary color produces an eleven-step tonal scale (50-950), a harmony palette, semantic tokens, and matched light and dark themes — plus radius, typography scale and dark-background controls you can tune live.
- How does the share link work?
- The Share link button encodes your entire configuration in the URL. Anyone who opens the link sees the exact same design system — no account, no upload, no server storage involved.
- Are the contrast checks accurate?
- Every foreground/background pair is graded against WCAG contrast requirements in both light and dark themes. Where a pair fails, the Fix contrast control applies a compliant adjustment instantly.
- Which export formats are supported?
- Export as plain CSS variables, JSON, Tailwind CSS, Bootstrap, shadcn/ui, MUI, Ant Design or Chakra themes; React Native, Flutter, iOS (Swift) and Android tokens; free Figma Tokens Studio JSON plus a free Figma plugin that creates native Figma variables with Light & Dark modes; W3C design tokens, Penpot, or a ZIP with every format. See the Figma install and paste guide on the Figma page.