visual scales

role
Interaction design, Visual design, Frontend engineering

overview

Visual Scales is an experiment in exploring design tokens through their appearance and relationships. I built two views: a curved color collection and a dimensional ruler. You can browse by eye, search for a token, then inspect its references or compare its size with other values.

The entrance joins color and measurement in one sphere. Rotate it, then choose a side to enter either exploration.

Visual Scales entrance with a sphere split between flowing colors and dark ruler markings, above links to color and space.
The entrance: color on the left, measurement on the right.

color and references

The color view contains 218 fictional tokens arranged by color. Drag through the collection or search by name. Each card shows the token’s value and whether it belongs to the palette, a semantic role, or a component.

Open the relationship view to trace explicit aliases from a palette color through semantic and component tokens. Matching colors alone do not imply a reference.

Curved grid of color cards showing palette, semantic, and component tokens, with search and zoom controls below.
The color collection, with token names and values on a curved grid.
A relationship graph connecting the indigo.600 palette token to primary-action, tab, switch, and button color tokens.
Alias relationships from indigo.600 to semantic and component tokens.

a ruler for dimensions

The space view compares 50 dimensional expressions, including spacing, type sizes, radii, and borders. Pan or zoom the ruler, then select a measurement to see the tokens that resolve to that length.

Specimens render at 1:1 CSS pixels even as you zoom the ruler. At 16px, you can compare body type, a spacing gap, a corner radius, and an icon box together. Equal lengths keep their separate token identities.

Dimensional ruler with 16px selected and five specimens below: body type, two spacing expressions, a rounded corner, and an icon box.
16px across type, spacing, radius, and icon dimensions. Ruler zoom leaves specimen sizes unchanged.

prototype scope

This version uses bundled fictional data. Importing your own tokens, editing, export, and sharing remain future work. CSS pixels describe browser layout, not physical screen measurements.