Live preview
Switch variants and viewport widths without leaving the detail page.
Active
Variants
Select a registered variant for preview comparison.
5 states
| CSS variable | Studio token | Surface |
|---|---|---|
| --primary | md.sys.color.primary | Fill |
| --primary-foreground | md.sys.color.on-primary | Text |
| --secondary | md.sys.color.secondary | Fill |
| --secondary-foreground | md.sys.color.on-secondary | Text |