buoy drift
Detect design drift in your codebase. Shows detailed information about each instance where
code diverges from your design system.
Usage
buoy drift check [options]
Options
| Option | Description |
--type <type> | Filter by drift type (color, spacing, typography) |
--severity <level> | Filter by severity (high, medium, low) |
--file <path> | Check specific file only |
--json | Output as JSON for scripting |
Drift Types
| Type | Description |
hardcoded-value | Raw values instead of design tokens |
close-match | Values near tokens (likely typos) |
naming-inconsistency | Component names that don't follow conventions |
deprecated-pattern | Usage of deprecated design patterns |
Example Output
$ buoy drift check
Drift Analysis
──────────────
~ Hardcoded Value
Component: Card
Location: src/components/Card.tsx:14
Issue: backgroundColor: #f9fafb (not a design token)
Actions:
1. Replace with design token
2. Example: var(--color-gray-50) or theme.colors.gray[50]
~ Close Match (Possible Typo)
Component: Button
Location: src/components/Button.tsx:28
Issue: color: #3b83f6 (close to #3b82f6)
Actions:
1. Verify if this is intentional
2. If typo, replace with #3b82f6
~ Hardcoded Value
Component: Modal
Location: src/components/Modal.tsx:45
Issue: padding: 15px (not a spacing token)
Actions:
1. Use spacing token: 16px (--spacing-4)
──────────────────────────────────────
Total: 47 drift signals found
High severity: 12
Medium severity: 23
Low severity: 12
Filtering Examples
# Only color issues
buoy drift check --type color
# Only high severity
buoy drift check --severity high
# Specific file
buoy drift check --file src/components/Card.tsx
# Combine filters
buoy drift check --type spacing --severity high
JSON Output
buoy drift check --json
{
"signals": [
{
"type": "hardcoded-value",
"severity": "medium",
"file": "src/components/Card.tsx",
"line": 14,
"category": "color",
"value": "#f9fafb",
"suggestion": "var(--color-gray-50)"
}
],
"summary": {
"total": 47,
"high": 12,
"medium": 23,
"low": 12
}
}
Related Commands