Skip to content
install

diagnostic · one of 45 Pro scale as custom properties

Style census

How many different spacings and radii does this page actually use?

A design system says there are eight spacing steps; the page usually says there are thirty-one. This walks the page and counts every distinct spacing, border radius, shadow, font size, line height and z-index it actually paints, how often each is used, and which ones sit a pixel away from a more common value - the 15px next to a hundred 16px that nobody meant.

Reach it Press ⌘ + K on any tab and type style census. Ctrl + K on Windows and Linux

Every spacing, radius, shadow and size the page paints, counted
reads computed styles, up to 4000 elements
writes nothing
sends nothing
counts spacing, radius, shadow, size, line height, z-index
marks values a pixel off a common one
spacing horizontal margin left out - auto resolves to pixels
plan free to count · Pro copies the scale
section#about

What this actually is

Before building a design system out of an existing site, during a design audit, or after a quarter of feature work to see how far the page has drifted from its scale. A page with a scale shows a handful of values used many times; a page without one shows a long tail used once.

section#asked

Asked about this diagnostic

Why computed styles rather than the stylesheets?

Because a rule nothing matches paints nothing, and a value set from a script never appears in a stylesheet. Computed styles are what the page really shows, which is the thing a scale has to describe.

Why is horizontal margin not counted?

margin: auto resolves to a pixel width that depends on the window, so it would read as dozens of deliberate spacings that nobody chose. Padding, vertical margin and gap are counted.

How is this different from Tokens?

Tokens reads the custom properties a page declares - the scale it says it has. Style census counts the values it paints - the scale it actually uses. The gap between the two is usually the finding.

how to use style census

  1. Open Style census on the page you want to measure.
  2. Read the totals: elements walked, distinct values, values used only once.
  3. Go through each group for the near-duplicates a pixel off a common value.
  4. Copy the recovered scale as CSS custom properties.