Visual Design System

21 Theme Presets Studio

Exhaustive gallery of all 21 bundled themes across Light and Dark modes. Verified WCAG 2.2 AA contrast ratios, fluid spring animations, and solid fallback support.

Backdrop:
01.

ios-glass

AAA (7.2:1)

Apple iOS frosted glass with specular highlight borders and deep blur

✓
ios-glass Active
Blur: 22px • Radius: 20px
02.

liquid-glass

AAA (7.5:1)

Ultra-fluid iridescent refraction with dynamic highlight glow

✓
liquid-glass Active
Blur: 32px • Radius: 28px
03.

essentials

AAA (8.1:1)

Clean, crisp solid surfaces built for ultra-fast enterprise apps

✓
essentials Active
Blur: 0px • Radius: 14px
04.

showcase

AA (5.8:1)

Vibrant gradients with colorful luminous status glows

✓
showcase Active
Blur: 18px • Radius: 16px
05.

dialogs

AAA (7.8:1)

Engineered specifically for modal alerts, prompts, and bottom sheets

✓
dialogs Active
Blur: 0px • Radius: 20px
06.

aurora

AA (6.2:1)

Dynamic rotating rainbow border halo inspired by Northern Lights

✓
aurora Active
Blur: 28px • Radius: 20px
07.

classic-stack

AAA (7.4:1)

Solid card with prominent 4px left colored status indicator strip

✓
classic-stack Active
Blur: 0px • Radius: 8px
08.

classic-bar

AAA (7.4:1)

Clean notification box with 4px top colored alert rail

✓
classic-bar Active
Blur: 0px • Radius: 4px
09.

pill

AAA (8.0:1)

Centrally-aligned rounded capsule with compact touch footprint

✓
pill Active
Blur: 0px • Radius: 999px
10.

ripple

AAA (7.6:1)

Smooth expanding ripple circle entrance transition

✓
ripple Active
Blur: 0px • Radius: 16px
11.

gradient-strip

AAA (7.2:1)

Modern card with multi-stop dynamic linear gradient accent

✓
gradient-strip Active
Blur: 0px • Radius: 12px
12.

sweet

AAA (7.5:1)

Charming candy aesthetics inspired by classic SweetAlert2 dialogs

✓
sweet Active
Blur: 0px • Radius: 16px
13.

material

AAA (7.9:1)

Google Material 3 design system with 3-tier elevation shadows

✓
material Active
Blur: 0px • Radius: 8px
14.

basic

AAA (8.4:1)

Ultra-light zero-distraction baseline feedback card

✓
basic Active
Blur: 0px • Radius: 6px
15.

minimal

AAA (12:1)

High-contrast monochrome typography with discreet status points

✓
minimal Active
Blur: 0px • Radius: 8px
16.

flat

AAA (7.5:1)

Zero drop-shadow modern flat surface with bold solid accents

✓
flat Active
Blur: 0px • Radius: 4px
17.

outline

AAA (7.8:1)

Hollow wireframe look with prominent 2px outline and transparent fill

✓
outline Active
Blur: 0px • Radius: 8px
18.

neon

AAA (8.2:1)

Cyberpunk neon glow with radioactive colored shadows

✓
neon Active
Blur: 10px • Radius: 12px
19.

gradient

AA (5.5:1)

Rich sunset gradient wash with glowing edge reflections

✓
gradient Active
Blur: 14px • Radius: 16px
20.

brutal

AAA (14:1)

Neo-brutalist raw box with 3px solid black border and hard offset block shadow

✓
brutal Active
Blur: 0px • Radius: 0px
21.

pastel

AA (6.0:1)

Dreamy soft lavender and mint tones with gentle rounded radii

✓
pastel Active
Blur: 8px • Radius: 18px