← All reports

vercel/next.js

The React Framework

★ 143k · react, next, tailwind, storybook, mantine, emotion, radix, shadcn · scanned 2026-10-26 at 23a1f0c

89
design health · mostly tokenized
How this is scored · CLI 0.8.12
Value discipline
51/60
Token health
20/20
Consistency
10/10
Critical issues
8/10

The path to 100: 11 points

  • +9 Replace the hardcoded values in all 17 findings with tokens or scale steps · Value discipline
  • +2 Migrate 1 deprecated pattern · Critical issues
Left alone: 4 values the code marks as deliberate · not counted in the score

Buoy skips a value when a comment explains it or marks it as known debt, when it is a 2–3px optical nudge, or when the commit that added it says it was deliberate. 2 optical nudges · 1 marked as known debt · 1 explained in a comment.

17
hardcoded-value findings
plus 1 in vendored shadcn/ui files, not scored
287
design tokens found
368
components

Most repeated literal colours

  • #b8cffb 1×
  • #25548f 1×
  • #468be2 1×
  • #fef4ab 1×
  • #171717 1×
  • #e7c755 1×
  • #000000 1×
  • #2e2e2e 1×

Most repeated literal spacing

  • 8px22×
  • 6px12×
  • 4px8×
  • 12px5×
  • 16px5×
  • 10px3×
  • 21px2×
  • 14px1×

Files with the most drift

Drift by type

  • Hardcoded values18
  • deprecated-pattern1

Examples

apps/bundle-analyzer/components/analyzer.tsx:830
apps/bundle-analyzer/components/analyzer.tsx
  • after:border-l-[5px] (line 830)
  • after:border-t-[5px] (line 830)
apps/bundle-analyzer/components/compare-layout.tsx:190
apps/bundle-analyzer/components/compare-layout.tsx
  • text-[10px] (line 190)
  • text-[10px] (line 268)
apps/bundle-analyzer/components/diff-table.tsx:570
apps/bundle-analyzer/components/diff-table.tsx
  • text-[10px] (line 570)
  • text-[10px] (line 922)
  • text-[10px] (line 964)
apps/bundle-analyzer/components/stat-cards.tsx:70
apps/bundle-analyzer/components/stat-cards.tsx
  • text-[10px] (line 70)
  • text-[10px] (line 113)
apps/bundle-analyzer/components/ui/multi-select.tsx:76
apps/bundle-analyzer/components/ui/multi-select.tsx
  • focus-visible:ring-[3px] (line 76)
apps/bundle-analyzer/components/ui/select.tsx:40
apps/bundle-analyzer/components/ui/select.tsx
  • focus-visible:ring-[3px] (line 40)
packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.css:33
packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.css
  • spacing: 6px (line 33)
  • radius: 6px (line 42)
  • spacing: 6px (line 59)
packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.css:47
packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.css
  • font weight: 600 (line 47)
  • line height: 21px (line 48)
  • spacing: 8px (line 52)
packages/next/src/next-devtools/dev-overlay/components/overview/segment-boundary-trigger.css:4
packages/next/src/next-devtools/dev-overlay/components/overview/segment-boundary-trigger.css
  • spacing: 4px (line 4)
  • line height: 16px (line 6)
  • font weight: 500 (line 7)
packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.css:13
packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.css
  • spacing: 12px (line 13)
  • font weight: 500 (line 18)
  • line height: 20px (line 22)

What Buoy would do about it

Maintainers: this scan used the MIT-licensed CLI at commit 23a1f0c. Run it yourself with npx @buoy-design/cli show health, or install the GitHub App to get the fix suggested on every PR. If anything here is wrong, open an issue and we will correct the page. If you would rather this report not be public, email support@buoy.design and we will take it down.

The score describes how much of the UI goes through design tokens, not the quality of the product or the team. Scores can shift between CLI versions as detection improves; this one was produced by CLI 0.8.12. How the score works.