Component demo // Lab
Stress-test primitives with tokens, motion and content.
The component lab isolates every primitive across states, themes and breakpoints so regressions are caught before they reach production.
Isolated
Themeable
Snapshot-ready
Act I // State matrix
Every component rendered across states, themes and breakpoints.
The matrix view shows default, hover, active, focus and disabled states side-by-side in both Noir and Earth themes at mobile, tablet and desktop widths.
<!-- Cross-axis lab harness: state × theme × breakpoint -->
<div data-vl-state="hover"
data-vl-theme="noir"
data-vl-bp="768">
<button class="vl-btn vl-btn--primary"
vl-effect="hover-depth-press">
Preview state
</button>
</div>
data-vl-state, data-vl-theme and data-vl-bp are lab harness attributes — they drive snapshot testing but are not part of the production API.
Act II // Measurements
Capture exact measurements so design tools match the code.
Each lab card records padding, border-radius, font-size and line-height as resolved pixel values. Designers import these directly into Figma component specs.
measurement capture
padding: 12px 24px
border-radius: 8px
font-size: 14px
line-height: 20px
min-height: 44px
Workflow
Source of truth is CSS.
Figma specs are derived from lab measurements, never the other way around.
Act III // Visual regression
Snapshot key state × theme combinations to catch regressions on upgrade.
Playwright captures the lab matrix before and after CSS changes. Pixel-diff reports surface any unintended visual shift before merging.
Act IV // Applied lab
Matrix, measurements and snapshots: three pillars for component quality.
Render every combination, capture exact metrics, then snapshot before and after to eliminate visual regressions.