Style DNA
Same card, four styles
One dashboard card with the same title, metric, state, action, and mini chart. Only the documented tokens and treatments change, so what you see differ is the style, not the content.
Content, hierarchy, and states are strictly identical across the four cards; tests enforce it.
The four renderings
Same card, rendered in Glassmorphism. Same card, rendered in Neobrutalism. Same card, rendered in Neumorphism. Same card, rendered in Flat Design.
Selected style: Glassmorphism
What defines it
- A semi-transparent surface that blurs what passes behind it without hiding it.
- A colorful or pictorial backdrop that stays visible through the panels and carries the palette.
- A thin light edge that separates the glass from neighboring surfaces.
Selected style: Neobrutalism
What defines it
- A visible uniform dark stroke on cards, buttons, fields, and images.
- A solid offset shadow with no blur at all.
- Saturated flat fills placed directly on a light ground.
Selected style: Neumorphism
What defines it
- Background and controls share exactly the same matte color.
- One light and one dark shadow describe a constant diagonal light.
- Active states invert the shadows into the surface.
Selected style: Flat Design
What defines it
- Each surface uses a direct color, with no texture or gloss.
- No bevels, realistic shadows, or decorative volume.
- Type weight, size, and color organize information instead of depth.