Design system 239
-
Card26 -
Skeleton24 -
CardBody18 -
Button12 -
TableCell12
Adoption
How much of a product codebase uses the design system tokens and components.
How adoption is measured
Token adoption is token usages divided by token usages plus hardcoded values (colors, lengths, radii, shadows, durations,
z-index, fonts). Component adoption is DS component instances divided by every UI component instance: DS components,
components from other UI libraries, native elements that should be DS components (<button>, <input>,
<select>, <dialog>, <table>, links, images), router links outside a DS component,
charts, and local components that re-create a DS component. Providers do not count.
Bridge admin, after migration
apps/admin/src, 57 files scanned, run on 2026-10-16 with bridge 0.1.0. Design system: @bridge-ds/react, 535 tokens, 46 components.
src/data/audits/admin-after.json Token adoption
445 token usages, 0 hardcoded values
+100 points since react-admin demo, original MUI source
Component adoption
239 of 265 UI component instances
+90.2 points since react-admin demo, original MUI source
Hardcoded values by category
Exact: the value equals a token, safe to replace. Near: a token is close (nearest color in OKLab, nearest scale step). None: no token fits, the value may need a new token or a design decision.
No hardcoded value found.
Components
Where the 265 UI component instances come from.
ra-core 16
-
LinkBase16
recharts 6
-
Area1 -
AreaChart1 -
CartesianGrid1 -
Tooltip1 -
XAxis1
Native elements 4
-
<img>3 -
<a>1
Top offending files
Files with the most hardcoded values and non-DS components. Start the migration here.
| File | Hardcoded | Non-DS components | Token usages | DS components |
|---|---|---|---|---|
resources/dashboard/RevenueChart.tsx | 0 | 6 | 12 | 0 |
resources/dashboard/Dashboard.tsx | 0 | 3 | 3 | 25 |
ui/index.tsx | 0 | 3 | 0 | 7 |
ra-bridge/DataTable.tsx | 0 | 2 | 5 | 21 |
resources/customers/CustomerEdit.tsx | 0 | 2 | 0 | 14 |
resources/products/ProductEdit.tsx | 0 | 2 | 0 | 14 |
resources/products/ProductList.tsx | 0 | 2 | 3 | 16 |
resources/categories/Categories.tsx | 0 | 1 | 0 | 9 |
resources/invoices/Invoices.tsx | 0 | 1 | 0 | 18 |
resources/orders/OrderEdit.tsx | 0 | 1 | 1 | 29 |
resources/reviews/ReviewList.tsx | 0 | 1 | 0 | 12 |
resources/segments/Segments.tsx | 0 | 1 | 0 | 4 |
Top fixes
The most repeated literals and the token that replaces them. Exact matches in CSS files can be fixed with bridge audit --fix.
No repeated literal.
Since react-admin demo, original MUI source: hardcoded values 131 to 0 (-131), 0 files improved, 0 regressed, 57 new.
react-admin demo, original MUI source
apps/admin/_original, 97 files scanned, run on 2026-10-16 with bridge 0.1.0. Design system: @bridge-ds/react, 535 tokens, 46 components.
src/data/audits/admin-before.json Token adoption
0 token usages, 131 hardcoded values
84 references to another theme (MUI theme, Tailwind scale), counted apart
Component adoption
0 of 526 UI component instances
Hardcoded values by category
Exact: the value equals a token, safe to replace. Near: a token is close (nearest color in OKLab, nearest scale step). None: no token fits, the value may need a new token or a design decision.
| Category | Share | Hardcoded | 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 |
Components
Where the 526 UI component instances come from.
Design system 0
No DS component used yet.
@mui/material 269
-
Box60 -
Typography45 -
Grid41 -
Card15 -
CardContent11
react-admin 255
-
TextInput22 -
FilterListItem20 -
ReferenceField15 -
DateInput10 -
NumberInput10
react-router-dom 1
-
Link1
Native elements 1
-
<img>1
Re-created 0
Local components named like a DS component.
-
Menusrc/layout/Menu.tsx:24 0
Top offending files
Files with the most hardcoded values and non-DS components. Start the migration here.
| File | Hardcoded | Non-DS components | Token usages | DS components |
|---|---|---|---|---|
src/orders/OrderEdit.tsx | 1 | 37 | 0 | 0 |
src/visitors/VisitorEdit.tsx | 3 | 35 | 0 | 0 |
src/visitors/Aside.tsx | 1 | 31 | 0 | 0 |
src/themes/softTheme.ts | 27 | 0 | 0 | 0 |
src/visitors/VisitorCreate.tsx | 2 | 24 | 0 | 0 |
src/invoices/InvoiceShow.tsx | 3 | 22 | 0 | 0 |
src/orders/OrderList.tsx | 2 | 19 | 0 | 0 |
src/products/ProductEdit.tsx | 8 | 13 | 0 | 0 |
src/products/ProductList.tsx | 1 | 20 | 0 | 0 |
src/products/ProductEditDetails.tsx | 0 | 20 | 0 | 0 |
src/visitors/VisitorListAside.tsx | 0 | 19 | 0 | 0 |
src/products/Aside.tsx | 1 | 16 | 0 | 0 |
Top fixes
The most repeated literals and the token that replaces them. Exact matches in CSS files can be fixed with bridge audit --fix.
| Value | Token | Confidence | Uses | Files |
|---|---|---|---|---|
0.5em spacing | var(--space-2) 8px | medium | 7 | 6 |
1em spacing | var(--space-4) 16px | medium | 7 | 5 |
40em size | var(--size-160) 640px | medium | 6 | 3 |
200 size | var(--size-60) 240px | low | 5 | 4 |
48 size | var(--size-12) 48px | exact | 4 | 1 |
3px border-width | var(--border-width-3) 3px | exact | 4 | 1 |
25 size | var(--icon-size-lg) 24px | high | 4 | 2 |
5 border-width | var(--border-width-3) 3px | low | 4 | 2 |
20 size | var(--icon-size-md) 20px | exact | 3 | 2 |
#000 color | var(--color-black) #000000 | exact | 3 | 2 |
bold font-weight | var(--font-weight-bold) 700 | high | 3 | 2 |
0.5rem spacing | var(--space-2) 8px | exact | 2 | 2 |
black color | var(--color-black) #000000 | exact | 2 | 1 |
white color | var(--color-surface-default) #ffffff | exact | 2 | 1 |
#fff color | var(--color-surface-default) #ffffff | exact | 2 | 1 |
Trend
Adoption across runs, from each report and the baselines it was compared with.
| Run | Token adoption | Component adoption | Hardcoded |
|---|---|---|---|
| react-admin demo, original MUI source 2026-10-16 | 0% | 0% | 131 |
| Bridge admin, after migration 2026-10-16 | 100% | 90.2% | 0 |