Find drift. Fix it. Measure the improvement.

Not just another linter. Buoy finds design drift, auto-fixes what it can, and shows you the measurable improvement in your design system adoption.

Get started free
🔒 100% Deterministic
| No AI. No API keys. No data sent externally.

Drift Types Detected

Buoy categorizes drift by severity to help you prioritize fixes

🎨 Warning

Hardcoded Values

Colors, spacing, fonts not using tokens

📦 Warning

Duplicate Components

Similar components that should be consolidated

🏷️ Info

Naming Inconsistency

Component/prop names that don't match conventions

⚠️ Warning

Deprecated Patterns

Components marked @deprecated still in use

🔧 Warning

Prop Type Mismatch

Same prop with different types across components

Critical

Accessibility Conflict

Missing ARIA labels, focus issues

🌐 Warning

Framework Sprawl

Multiple UI frameworks in same codebase

👻 Info

Orphaned Components

Components in code but not in design

How Drift Detection Works

1

Scan

Buoy parses your codebase to build a map of all components, props, and style values.

2

Analyze

Compares against your design system config to identify patterns that don't match.

3

Report

Outputs drift signals with severity, location, and suggested fixes.

Step 1: Find Drift

Every issue includes the exact file, line, and what to change.

buoy-cli
$
Scanning for design drift...
Found 31 issues across 89 files
CRITICAL (3)Auto-fixable: 2
├─ Button.tsx:12 Missing aria-label
→ Fix: Add aria-label={buttonText}
└─ Modal.tsx:45 Focus trap conflict
→ Fix: Use FocusTrap from design system
WARNING (12)Auto-fixable: 10
├─ Card.tsx:8 Hardcoded #ffffff → var(--color-bg)
├─ Header.tsx:3 NavHeader deprecated → Navigation
└─ ... and 10 more
Run buoy fix --auto to apply 12 auto-fixes

Step 2: Auto-Fix

One command applies all safe fixes. No manual editing required.

buoy-cli
$
Applying auto-fixes...
Fixed Card.tsx: #ffffff → var(--color-bg)
Fixed Button.tsx: Added aria-label
Fixed Badge.tsx: 8px → var(--spacing-sm)
Fixed Header.tsx: NavHeader → Navigation
... and 8 more
12 issues fixed. 3 need manual review.
Coverage improved: 52%68%

What You Get

Clarity, not just data. Every scan ends with concrete next steps.

🔧

Auto-Fixes Applied

Hardcoded colors → tokens. Deprecated components → current ones. Done automatically.

buoy fix --auto
📋

Manual Review Queue

Complex issues get a clear explanation and exactly what needs to change.

buoy fix --interactive
📈

Coverage Score

Before: 52%. After: 68%. Show leadership exactly how much you improved.

buoy status

Visible Outcomes

👩‍💻 For Developers

  • No guessing — exact file, line, and fix
  • Auto-fix handles the tedious work
  • PR checks catch issues before review
  • Less time debating, more time building

📊 For Leaders

  • Real adoption numbers, not estimates
  • Track improvement week over week
  • Prove design system ROI with data
  • Identify which teams need help

Why Design Drift Matters

Without Drift Detection

  • Inconsistent UI across the app
  • Design system becomes optional
  • Harder to maintain and update
  • No way to measure adoption

With Buoy

  • Consistent, cohesive UI
  • Design system enforcement
  • Easy global updates via tokens
  • Real adoption metrics

Ready to catch design drift?

Free. Open source. No signup required.

Related Features

Coverage Metrics

Measure design system adoption with real data

GitHub Action

Catch drift in every PR automatically

CI Integration

Add drift checks to your CI pipeline