Wirer · Design foundation
Every token, measured.
Wirer only reports what it can measure. Its own interface starts the same way: each color below is shown in the current theme, with the contrast ratio measured in both.
8 token pairs measuredMeasured on September 19, 2026
Color
Semantic tokens only. Components never reference a raw hex value, so both themes stay designed rather than inverted.
canvasPage background
- light
- 16.3:1
- dark
- 16.1:1
surfaceCards and panels
- light
- 17.7:1
- dark
- 15.4:1
surface-raisedRaised panels and menus
- light
- 17.7:1
- dark
- 14.5:1
textBody text
- light
- 17.7:1
- dark
- 15.4:1
text-mutedSecondary text
- light
- 6.2:1
- dark
- 7.9:1
text-subtleCaptions and measurements
- light
- 5.5:1
- dark
- 6.0:1
accentPrimary actions and the evidence locator
- light
- 5.5:1
- dark
- 6.2:1
successConfirmed and resolved
- light
- 5.3:1
- dark
- 8.6:1
warningNeeds attention
- light
- 5.9:1
- dark
- 10.0:1
dangerBlocking problems
- light
- 5.7:1
- dark
- 6.4:1
regressionRegressed since baseline
- light
- 6.7:1
- dark
- 8.7:1
Type
Instrument Sans carries the interface; IBM Plex Mono carries anything that is a measurement, a code or an identifier.
- Display
- Every token, measured.
- Heading
- Icon button has no accessible name in the mobile checkout header
- Body
- Wirer only reports what it can measure. Its own interface starts the same way: each color below is shown in the current theme, with the contrast ratio measured in both.
- Measurement
- 390 × 844 · scan 7f3a · 14:32:10 UTC
Spacing and motion
A 4 px base with named steps. Motion is short and collapses to zero when the system asks for reduced motion.
- base · 14 px
- base · 28 px
- base · 312 px
- base · 416 px
- base · 624 px
- base · 832 px
- base · 1248 px
- fast120ms
- standard200ms
- slow320ms
States
Severity and status always carry their name. Color and the marker reinforce the text; they never replace it.
CriticalHighMediumLowInfo
OpenIn reviewResolvedIgnoredMeasuredObservedHeuristic reviewHypothesis
Press Tab to see the focus ring on each control.