Design & UI Validation

CSS Variables

Inspect, live-edit, and modify every CSS Custom Property in your application's design system directly from the panel — with live color swatches.

Overview

Your Design Token Inspector

If your application uses a CSS design token system (and it should), this panel gives you instant visibility and control over the entire token set. It scans every stylesheet loaded by the preview frame, extracts all --custom-property declarations, and organizes them by prefix group.

  • Automatic Token Discovery: Scans all linked stylesheets to find every --variable declaration without any manual configuration.
  • Grouped by Prefix: Variables like --color-primary and --color-secondary are grouped under color for easy navigation.
  • Live Color Swatches: Any variable whose value is a color shows an interactive color swatch. Click it to open a color picker and modify the value live across all frames.
  • Dark Mode Toggle: One-click toggle that sets prefers-color-scheme: dark on the preview frame to test your dark mode styling without changing your system settings.
  • RTL / LTR Toggle: Flips the document direction between left-to-right and right-to-left to test internationalized and Arabic/Hebrew layouts.
  • Live Update: All changes to variables are applied in real-time, showing you the exact visual impact immediately.
Pro Tips
💡
Test your dark mode thoroughly Toggle dark mode while navigating through every section of your app. The most common dark mode bugs are hardcoded color values that ignore the design token system — they'll show up immediately as bright white or black elements against your dark background.
💡
Use the color picker to validate brand color decisions Before locking in a design token value, use the color swatch picker to live-test alternative shades across the entire app. Seeing the change globally in real time gives you confidence that the color works in all contexts.
💡
Test RTL before shipping internationalized apps Toggle RTL mode to instantly see whether your flex and grid layouts mirror correctly. Missing logical properties (using margin-left instead of margin-inline-start) will break your RTL layout and the panel will surface them immediately.