← All reports

n8n-io/n8n

Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.

β˜… 209k Β· react, vue, storybook, element-plus Β· scanned 2026-10-26 at 4636a33

61
design health Β· largely tokenized
How this is scored Β· CLI 0.8.12
Value discipline
23/60
Token health
20/20
Consistency
10/10
Critical issues
8/10

The path to 100: 39 points

  • +37 Replace the hardcoded values in 255 of the 258 findings with tokens or scale steps Β· Value discipline
  • +2 Migrate 2 deprecated patterns Β· Critical issues
Left alone: 33 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. 29 optical nudges Β· 4 explained in a comment.

258
hardcoded-value findings
621
design tokens found
1,391
components

Most repeated literal colours

  • #ffffff 7Γ—
  • #ff6d5a 4Γ—
  • rgba(67, 142, 255, 1) 3Γ—
  • #f0f0f0 3Γ—
  • #999999 3Γ—
  • #ff0000 2Γ—
  • #e6e6e6 2Γ—
  • #d3dce6 2Γ—

Most repeated literal spacing

  • 5px36Γ—
  • 10px36Γ—
  • 8px27Γ—
  • 12px13Γ—
  • 1em13Γ—
  • 4px13Γ—
  • 16px13Γ—
  • 20px13Γ—

Files with the most drift

Drift by type

  • Hardcoded values258
  • deprecated-pattern2

Examples

packages/cli/src/public-api/swagger-theme.css:2
packages/cli/src/public-api/swagger-theme.css
  • colour: #ff6d5a (line 2)
  • colour: #fff (line 6)
  • colour: #ff6d5a (line 16)
packages/frontend/@n8n/chat/src/components/Button.vue:55
packages/frontend/@n8n/chat/src/components/Button.vue
  • shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) (line 55)
packages/frontend/@n8n/chat/src/components/ChatFile.vue:71
packages/frontend/@n8n/chat/src/components/ChatFile.vue
  • spacing: 0.5rem (line 71)
  • radius: 0.25rem (line 72)
  • spacing: 0.25rem (line 73)
packages/frontend/@n8n/chat/src/components/Input.vue:473
packages/frontend/@n8n/chat/src/components/Input.vue
  • font size: 24px (line 473)
  • spacing: 8px (line 478)
  • spacing: 0.5rem (line 511)
packages/frontend/@n8n/chat/src/components/Layout.vue:52
packages/frontend/@n8n/chat/src/components/Layout.vue
  • spacing: 1em (line 52)
packages/frontend/@n8n/chat/src/components/Message.vue:112
packages/frontend/@n8n/chat/src/components/Message.vue
  • spacing: 1rem (line 112)
  • spacing: 0.25rem (line 164)
  • spacing: 0.5rem (line 165)
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue:190
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/TextMessage.vue
  • font weight: 500 (line 190)
packages/frontend/@n8n/design-system/src/components/AskAssistantText/AssistantText.vue:22
packages/frontend/@n8n/design-system/src/components/AskAssistantText/AssistantText.vue
  • font size: 9px (line 22)
  • font size: 14px (line 32)
  • line height: 18px (line 33)
packages/frontend/@n8n/design-system/src/components/CanvasPill/CanvasPill.vue:28
packages/frontend/@n8n/design-system/src/components/CanvasPill/CanvasPill.vue
  • radius: 22px (line 28)
  • colour: rgba(65, 66, 68, 0.92) (line 30)
packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue:181
packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue
  • line height: 18px (line 181)

What Buoy would do about it

Maintainers: this scan used the MIT-licensed CLI at commit 4636a33. 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.