Playground
Experiment with CSS variables to customize the look and feel of Zen components. Changes are applied in real-time to the preview panel.
Palette
Theme
CSS VARIABLES
TYPOGRAPHY
The quick brown fox jumps over the lazy dogRegular text using font-family variableconst monospace = "using font-family-mono variable";
DEFAULTS
borderRadius, padding, shadow
Item 1Item 2Item 3
SURFACES & TEXT
BasePrimary text
RaisedPrimary text
SunkenMuted text
BORDERS
Default border
Muted border
Strong border
INTERACTIVE
FOCUS (click to focus)
PROGRESS
STATUS
Info
Success
Warning
Error
Info alert message
Success alert message
Warning alert message
Error alert message