Bridge itself before Bridge

9.7% of styling values and 52.8% of components came from the design system before the move.

Tokens 9.7% 9.7% of styling values came from tokens (281 uses, 2628 hard-coded values).

Components 52.8% 52.8% of components came from the design system (47 of 89).

Over time

Tokens Components

Where components come from

Bridge 47 Plain HTML elements 9 Look-alikes of Bridge components 33 Show components

Bridge

• Badge11
• Button11
• Alert5
• Checkbox3
• Switch3

Plain HTML elements

• <button>6
• <input>3

Look-alikes

• Tag32
• Field1

Hard-coded values

2628 hard-coded values, 2022 match a token exactly. How close each value is to a token is explained below.

Exact token Near token No token

Category	Share	Values	Exact	Near	None
Spacing		1424	1232	192	0
Size		391	227	100	64
Border width		311	304	7	0
Font weight		165	165	0	0
Color		73	9	59	5
Font size		69	17	50	2
Radius		68	31	30	7
Line height		61	26	33	2
Duration		29	9	20	0
Z-index		23	0	23	0
Shadow		12	0	12	0
Easing		2	2	0	0

• How adoption is measured Adoption is the share of colors, sizes and components in a product that come from the design system.

  Tokens: token uses divided by token uses plus hard-coded values (colors, lengths, radii, shadows, durations, layers, fonts).

  Components: Bridge components divided by every UI component in the product: Bridge components, components from other libraries, plain HTML elements that should be Bridge components (buttons, inputs, selects, dialogs, tables, links, images), charts, and local components that look like a Bridge component. Providers do not count.

  Hard-coded values: exact means the value equals a token, safe to replace. Near means a token is close (the nearest color as the eye sees it, the nearest step of a scale). None means no token fits: the value may need a new token or a design decision.

Other runs of Bridge itself: Bridge docs site, after (Oct 19, 2026) . Open on GitHub (opens in a new tab)