Admin demo before Bridge
0% of styling values and 0% of components came from the design system before the move.
Over time
Where components come from
Other libraries 525 Plain HTML elements 1 Show components
Bridge
No Bridge component yet.
@mui/material
Box60Typography45Grid41Card15CardContent11
react-admin
TextInput22FilterListItem20ReferenceField15DateInput10NumberInput10
react-router-dom
Link1
Plain HTML elements
<img>1
Look-alikes
Menu0
Hard-coded values
131 hard-coded values, 32 match a token exactly. How close each value is to a token is explained below.
| Category | Share | Values | Exact | Near | None |
|---|---|---|---|---|---|
| Size | 50 | 7 | 38 | 5 | |
| Color | 38 | 11 | 24 | 3 | |
| Spacing | 24 | 7 | 16 | 1 | |
| Border width | 9 | 5 | 4 | 0 | |
| Font weight | 3 | 0 | 3 | 0 | |
| Radius | 1 | 1 | 0 | 0 | |
| Duration | 1 | 0 | 1 | 0 | |
| Easing | 1 | 0 | 1 | 0 | |
| Z-index | 1 | 1 | 0 | 0 | |
| Font family | 1 | 0 | 1 | 0 | |
| Font size | 1 | 0 | 1 | 0 | |
| Line height | 1 | 0 | 1 | 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 Admin demo: Bridge admin, after migration (Oct 16, 2026) . Open on GitHub (opens in a new tab)