DS Inspector

Click any element to see if it follows your design system, which design-system values were overridden, and its final styles.

DS Inspector helps designers check a live website against their design system — no developer tools needed. Open the side panel, click any element on the page, and see three things: • Does it follow the design system? A one-line verdict, e.g. "Design system: 2 items overridden". • What was overridden? Design-system values that lost to a hardcoded value, crossed out next to the value that applies. • What are its final styles? Font, color, spacing and shape in plain words, each marked Design system, Hardcoded, Same value, Inherited, Default or Can't tell. Works on any site without setup: it reads the site's CSS variables and recognizes Tailwind and CSS-in-JS. For exact token names, load your design token file (DTCG or Tokens Studio JSON). How to use 1. Click the DS Inspector icon in the toolbar. 2. Click an element on the page. Use Select parent / Select child to move around. 3. Press Esc to stop picking. 4. Click ? at the top of the panel for the full guide. Why the "debugging" bar? DS Inspector uses Chrome's debugger interface to read which style rules apply to an element — the same information developer tools show. Chrome shows a bar at the top while it is connected. It connects only to the tab you are viewing, only while the panel is open, and disconnects when you close the panel. Privacy: everything happens on your device. No data is collected or sent anywhere. No account, no analytics. Limits: Chrome only. chrome:// pages and the Chrome Web Store can't be inspected. Elements inside frames embedded from other sites can't be picked. When the evidence isn't enough, it says "Can't tell" instead of guessing.