Style Dictionary Does:
- • Transform tokens from one format to another
- • Export to CSS, SCSS, JS, iOS, Android
- • Single source of truth for token values
- • Great build tool for design systems
Buoy Does:
- • Find where tokens aren't being used
- • Detect hardcoded values that bypass tokens
- • Measure token adoption across codebase
- • Enforce token usage in CI/CD
Feature Comparison
Feature
Style Dictionary
Buoy
Primary purpose
Transform & export tokens
Detect drift & measure adoption
Direction
Tokens → Code
Code → Analysis
Detects hardcoded values
No
Yes
Detects duplicates
No
Yes
Adoption metrics
No
Yes
CI enforcement
No
Yes
Use together?
—
Yes! Perfect pairing
The Gap Style Dictionary Doesn't Fill
The Scenario:
- 1. You set up Style Dictionary beautifully
- 2. Tokens export to
var(--color-primary) - 3. Developer asks Copilot to build a button
- 4. Copilot writes
color: #3b82f6 - 5. Code review misses it, PR merges
- 6. Your token exists but isn't being used
With Buoy:
Buoy scans the codebase and reports: "Found hardcoded color #3b82f6 — should use var(--color-primary)". The token exists. Now you know it's not being used.
The Perfect Pairing
Style Dictionary creates and transforms your tokens. Buoy ensures they're actually being used.
📖
Style Dictionary
Create tokens
→
💻
Codebase
Use tokens
→
âš“
Buoy
Verify usage
# buoy.config.mjs
export default {
// Point Buoy at your Style Dictionary output
tokens: './build/tokens.json',
}