Skip to Content

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

PAGE STRUCTURE & NAVIGATION
Design system previewSee token changes across the component library.
Components inherit the variables configured in the sidebar.
TYPOGRAPHY

The quick brown fox

Regular text using the configured font-family variable.Muted text provides supporting context and secondary information.Inline values such as --surface-raised use the monospace font.
Good design makes the relationship between content and action feel obvious.
LAYOUT, SURFACES & DEFAULTS
BasePrimary text
RaisedPrimary text
SunkenMuted text
borderRadius, padding, shadow
Item 1Item 2Item 3
BORDERS
Default border
Muted border
Strong border
ACTIONS
FORM FIELDS
SELECTION CONTROLS
Checkbox
Switch
StarterProfessionalEnterprise
65
DATA DISPLAY
Owner
Ada Lovelace
Status
Active
Updated
Today
Analytics dashboard
Commerce storefront
Documentation site
React
TypeScript
CSS
ComponentCategoryStatus
ButtonActionsStable
DataTableDataStable
CalendarInputStable
MENU & CALENDAR
August 2026
PROGRESS & LOADING
Uploading brand-assets.zip42.6 MB of 65.5 MB
65%
x
Encrypting and uploading
x
Importing contacts
650 of 1,000 records imported
Checking for duplicates
No messages

New messages will appear here.

STATUS
Info
Success
Warning
Error