Theme Lab
Theme Lab
Dashboard preview of packs across foundation tokens and component levels.
Theme Lab is a dashboard-style preview: one active pack at a time, inspected by level — foundation tokens, actions, forms, navigation, data, and feedback. Use the sidebar appearance control to change theme, compatible mode, material, radius, and motion. Choices persist while you browse.
Theme dashboard
Inspect foundation tokens and component specimens by level. Sidebar appearance controls update the shell and every stage below.
Active configuration
ember · dark
Sidebar appearance controls style this page and the docs shell. Modes: dark.
- theme
- ember
- mode
- dark
- material
- glass
- radius
- soft
- motion
- on
Semantic colors
Each swatch uses theme tokens — switch packs in the sidebar to compare identity, not just hue.
Background
Surface
Raised
Muted
Accent
Danger
Typography
Hierarchy and numerals — body uses pretty wrapping; metrics stay tabular.
Operational dashboard headline
Dense product copy stays readable when neutrals and accent contrast are derived from the same pack ramp.
Mono label · workspace
- Active seats
- 2,847
- Uptime
- 99.97%
Surface stack
Layered elevation reads through border, shadow, and radius tokens together.
Base
Panel content on base.
Surface
Panel content on surface.
Raised
Panel content on raised.
Levels
| Level | What you inspect |
|---|---|
| Foundation | Semantic colors, typography, surface stack |
| Actions | Button variants, states, links |
| Forms | Fields, toggles, slider |
| Navigation | Breadcrumbs, tabs |
| Data | Metrics, sparkline, table |
| Feedback | Progress, skeleton, spinner |
Rules
- One theme at a time
- Mode options only show curated combinations
- Glass and motion are global, never per-component props
- Reduced motion always wins over the motion toggle
- Theme Studio authors custom packs; Theme Lab evaluates curated ones in context