Ruler

Measure the space between elements and inspect the Carbon tokens they use, inside shadow DOM and Storybook iframes.

Ruler checks a page against the Carbon Design System, pixel by pixel. • Click two elements to measure the gap between them, or the insets of one inside the other. • Hover any element to see its Carbon tokens: type, color, spacing, border and radius, and motion. Each value is marked green when it uses a token, yellow when a hard-coded value equals a token, and red when no token matches. • Check text contrast against WCAG AA and AAA. • See padding and margin drawn on the page, and the Carbon 2x grid for the current breakpoint. • Shift+click to pin token cards, then copy them all as one spec report. • Freeze the panel on an element to inspect its hover, focus and open states. It reaches into open shadow roots (Carbon web components) and works inside Storybook's preview iframe. Ruler only runs on the tab where you turn it on, makes no network requests, and keeps your pinned cards and settings in your browser.