Fourteen design system styles you can generate with one link
Neomorphism, Material, bento grid, cyberpunk, art deco and more — pick a visual style and open a preset link that generates the whole system: colors, tokens, dark mode, four previews and exports.
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.
None of this is permanent. Because the URL is a full description of the configuration, you can fork any of the links below, change a single parameter, and share the variant. No database stores your style — the browser rebuilds it from the address, every single time. That's also the trick that makes an entire library cheap to publish: each entry is a sentence of settings, not a page of hand-built assets.
What each setting actually controls
Before you click through the styles, it helps to know which lever moves what — every preset below is just a combination of these.
- primary — the seed hue everything derives from; change it and the whole system follows
- secondary & accent — explicit support and highlight hues; omit them and both are auto-derived from the primary
- strategy — the palette-derivation rule: complementary, analogous, triadic, split-complementary, monochromatic or tetradic
- radius — sharp, soft or round; the single fastest way to change the shape language
- fonts — system, grotesque, editorial, humanist, geometric or technical heading pairings
- ratio — the type-scale ratio: 1.2 (compact), 1.25 (normal) or 1.333 (generous, dramatic display type)
- dbg — the dark-mode background treatment: tinted, solid black, or a custom hex
- sat / bright / hue / temp — refinement dials applied to every derived color before the scales are computed; small values, big personality shifts
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 →
- Material — bold color roles on elevated surfaces →
- Paper UI — warm stock, ink typography, ruled layers →
- Retro UI — beveled 90s desktop chrome in limited teal-grey →
- Bento Grid — vivid modular tiles with a strong axis →
- Terminal UI — monospace, command-first, status colors →
- Skeuomorphism — warm materials and dimensional controls →
- Claymorphism — inflated pastels and soft volume →
- Bauhaus — primary geometry, bold type, hard edges →
- Art Deco — midnight navy, metallic gold, refined serif →
- Memphis — playful pattern mixing in bright triads →
- Cyberpunk — dark high contrast, luminous cyan and magenta →
- Biomorphic — organic silhouettes and earth colors →
- Maximalist Editorial — vivid color blocks and dramatic type →
How to choose a style for a project
Match the style to the job, not the mood board. Calm, data-heavy products read well in neomorphism, paper, or terminal — quiet surfaces that let the numbers talk. Consumer and creator products have room for claymorphism, memphis, or the bento grid, where playfulness is part of the brand. Bold, brand-led work suits bauhaus, art deco, or maximalist editorial, where the interface is expected to make a statement. Anything futuristic or technical should look honest in the cyberpunk or terminal lane before it looks cool.
The fail-safe for picking: ask what the product must do on a normal Tuesday. If it's a dashboard your team stares at for hours, the question isn't which style your portfolio loves most — it's which one keeps reading comfortable at nine in the morning. Every style below is a working system, not a screenshot; the only wrong choice is a pretty one that won't serve the content.
Tip
When in doubt between two styles, generate both with your actual brand color and put the previews side by side. The right answer is usually the one that still looks calm after ten seconds of looking, not the one that looks exciting for the first two.
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.
Tip
Keep these links somewhere handy. A folder of prebuilt geometry — strategy, radius, fonts — is the fastest way to try a brand color across fourteen distinct looks in about a minute flat.
Related free tools
Want to apply this right now? Open the color palette generator and try it with your own brand color — free, no sign-up.