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.

Bring one style forward

The four cards stay visible; the selected one is highlighted and its DNA is summarized below.

GlassmorphismNeobrutalismNeumorphismFlat Design

The four renderings

Weekly report
Active sessions
12,480+8.2% vs last week
On track
Open the style entry
Same card, rendered in Glassmorphism.
Weekly report
Active sessions
12,480+8.2% vs last week
On track
Open the style entry
Same card, rendered in Neobrutalism.
Weekly report
Active sessions
12,480+8.2% vs last week
On track
Open the style entry
Same card, rendered in Neumorphism.
Weekly report
Active sessions
12,480+8.2% vs last week
On track
Open the style entry
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.

Open the full Style DNA