zen

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 --zen-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
DATA DISPLAY
Owner
Ada Lovelace
Status
Active
Updated
Today
Analytics dashboard
Commerce storefront
Documentation site
  • React
  • TypeScript
  • CSS
ComponentCategoryStatus
ButtonActionsStable
DataTableDataStable
CalendarInputStable
MENU & CALENDAR
September 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