how it works

Design tokens in the browser.

Click any element. See the design token behind it — not raw CSS values.
Upload your team's token JSON once. Works on any URL.

Add to Chrome — free
Browser DevToolsClick › to expand, then select a node
localhost:3000
↑ 12.4%
$84,295vs $74,800 last month
ElementsStylesComputed
<body>
<div#root>
CSS InspectorHover over any element
localhost:3000
↑ 12.4%
$84,295vs $74,800 last month
CSS Inspector
Hover an element to inspect
?

How it works

1
Open the inspector from the toolbar→Panel opens. Inspection starts
2
Upload your team's design system JSON→CSS variables are mapped to design system tokens instantly
3
Hover any element→See layer hierarchy and DOM names instantly
4
Click the element→CSS and mapped tokens appear
5
Add a note if something looks off→Mark issues or leave feedback

Features

Leave a NoteClick any element to pin feedback directly on it
localhost:3000/dashboard
DashboardSettings
Revenue
$84,295
↑ 12.4%
Users
2,847
↑ 8.1%
Conversion
3.2%
↓ 0.4%
ProductSalesStatus
Widget Pro$12,400Active
Dashboard Kit$8,200Beta
Review NotesClick markers to view notes and follow-ups
localhost:3000/dashboard
DashboardSettings
Revenue
$84,295
↑ 12.4%
Users
2,847
↑ 8.1%
Conversion
3.2%
↓ 0.4%
ProductSalesStatus
Widget Pro$12,400Active
Dashboard Kit$8,200Beta

Currently in early version — we're actively collecting feature ideas and feedback from designers and developers. Reach out at inalee.only@gmail.com

Keyboard shortcuts

Esc
Collapse/Expand panel
↑
Select parent element
↓
Select first child element
click swatch
Cycle color format
click breadcrumb
Jump to ancestor element