Fourteen design system styles you can generate with one link

A style is a configuration you can share

Most visual-style collections stop at a screenshot and a paragraph of adjectives. But a style is really a set of structural decisions — how much contrast, what shape language, which type personality, which color strategy — and those are exactly the inputs a design system generator runs on. ChromaBrew encodes every one of those decisions in the URL, so a style can be a link that opens a fully working system.

The knobs: your seed colors, the palette strategy that decides how the rest of the palette is derived, the corner radius style, the type ratio, the font pairing, and the dark-mode background, plus explicit overrides for secondary and accent. Change any of them and the whole system recomputes — scales, semantic tokens, light and dark themes, four live previews, and every export. Which means a style is never a locked-in look; it's a starting configuration.

The fourteen styles

Each link below opens the generator with that style's structural settings preloaded. Open it, look at the previews, then start pushing your own brand color into it.

• Neomorphism — soft extruded controls on a single material surface: /design-system?primary=718096&strategy=monochromatic&radius=round&sat=-12
• Material — bold color roles on elevated surfaces: /design-system?primary=3f51b5&secondary=ff4081&accent=ffab40&strategy=complementary&radius=soft
• Paper UI — warm stock, ink typography, ruled layers: /design-system?primary=b4552d&secondary=8a5a2b&strategy=analogous&radius=sharp&fonts=editorial&ratio=1.333&sat=5
• Retro UI — beveled 90s desktop chrome in limited teal-grey: /design-system?primary=0f766e&secondary=8a99a6&accent=c9a227&strategy=split-complementary&radius=sharp&sat=-8
• Bento Grid — vivid modular tiles with a strong axis: /design-system?primary=6366f1&secondary=22d3ee&accent=fb7185&strategy=split-complementary&radius=round&fonts=grotesque
• Terminal UI — monospace, command-first, status colors: /design-system?primary=00b894&accent=00cec9&strategy=monochromatic&radius=sharp&fonts=technical&dbg=solid-black
• Skeuomorphism — warm materials and dimensional controls: /design-system?primary=8d5524&secondary=6f4e2b&strategy=analogous&radius=round&fonts=humanist&sat=8
• Claymorphism — inflated pastels and soft volume: /design-system?primary=f472b6&secondary=a78bfa&accent=fbbf24&strategy=analogous&radius=round&fonts=grotesque&sat=10
• Bauhaus — primary geometry, bold type, hard edges: /design-system?primary=ff4d00&secondary=1d4ed8&accent=ffc400&strategy=triadic&radius=sharp&fonts=geometric
• Art Deco — midnight navy, metallic gold, refined serif: /design-system?primary=1f2a44&accent=caa04f&strategy=analogous&radius=sharp&fonts=editorial&ratio=1.333&dbg=solid-black&sat=-5&bright=5
• Memphis — playful pattern mixing in bright triads: /design-system?primary=ff6b6b&secondary=4ecdc4&accent=ffe66d&strategy=triadic&radius=round&fonts=grotesque&sat=12
• Cyberpunk — dark high contrast, luminous cyan and magenta: /design-system?primary=06b6d4&secondary=ff2d95&accent=8b5cf6&strategy=split-complementary&radius=sharp&fonts=technical&dbg=solid-black&sat=12
• Biomorphic — organic silhouettes and earth colors: /design-system?primary=6f9f6e&strategy=analogous&radius=round&fonts=humanist&sat=-5
• Maximalist Editorial — vivid color blocks and dramatic type: /design-system?primary=e11d48&secondary=2563eb&accent=f59e0b&strategy=split-complementary&radius=sharp&fonts=editorial&ratio=1.333

Make any of them yours

Every preset is a starting point, not a verdict. Keep the structural pieces that make the style recognizable — the radius, the font pairing, the strategy — and swap the primary hue for your brand. Re-run the four previews and the WCAG report after the swap; a style that looks cohesive in its native palette can drift the moment you push an alien hue into it.

The dark-theme pass matters twice as much here. Luminous styles (terminal, cyberpunk) are built around the dark background; cuddly ones (clay, paper) assume a light surface. Dress the accent for both themes before you export.