Theme Lab

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

forest · light

Sidebar appearance controls style this page and the docs shell. Modes: light, dark.

theme: forest
mode: light
material: solid
radius: soft
motion: full

Free exports

Export forest

Download or copy DESIGN.md, DTCG tokens, Tailwind v4 @theme, and an agent skill for the active curated pack.

DESIGN.md
Human- and AI-readable design brief with OKLCH roles and rules
/themes/forest/DESIGN.md
DTCG tokens
W3C Design Tokens JSON ($value / $type) with light and dark modes
/themes/forest/tokens.dtcg.json
Tailwind @theme
Tailwind CSS v4 @theme file with mode remaps
/themes/forest/theme.css
Agent skill
SKILL.md instructions for coding agents using this theme
/themes/forest/SKILL.md

Semantic colors

Each swatch uses theme tokens — switch packs in the sidebar to compare identity, not just hue.

Background
Surface
Raised
Muted
Accent
Danger
Success
Warning
Info

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

Exports

The Free exports panel downloads or copies four formats for the active pack: DESIGN.md, DTCG tokens JSON, Tailwind v4 @theme, and an agent SKILL.md. Static copies also live under /themes/{pack}/ — see Theme export.

Rules

One theme at a time
Mode options only show curated combinations
Glass and motion are global, never per-component props
Motion modes are full | reduced | off; OS reduced-motion always wins over full
Theme Studio authors custom packs; Theme Lab evaluates curated ones in context