Foundations
Variants
Three variants ship together. Switch by changing data-variant on <html>. Each carries its own radius, density, surface tint, and shadow language.
Live preview
Active: A · theme light · glass subtle
What changes between variants
| Property | A · Glass | B · Premium | C · Sharp |
|---|---|---|---|
| Radius scale | 12 / 18 / 24px | 10 / 14 / 20px | 3 / 4 / 6px |
| Default pill button | var(--radius-pill) | var(--radius) | 0 |
| Surface opacity | .55 (glass) | opaque, dark | opaque, paper |
| Shadow | soft & long | inner glow + drop | hairline only |
| Density (pad-x) | 22px | 18px | 14px |
Keyboard shortcuts
- ⌘. — toggle light/dark
- ⌘, — cycle variant A → B → C
- ⌘/ — toggle Tweaks panel
- ⌘K — open command palette (where wired)