How It Works
1
Scan
Buoy scans your codebase for all hardcoded style values
2
Dedupe
Groups similar values and suggests consolidation
3
Generate
Outputs token files in your preferred format
See it in action
buoy-cli
$
âš“ Scanning codebase for style values...
Found 47 unique colors
Found 12 unique spacing values
Found 8 unique font sizes
✓ Generated tokens.css
✓ Generated tokens.json
✓ Generated tailwind.config.js extension
Output Formats
CSS Variables
tokens.css JSON
tokens.json Tailwind Config
tailwind.config.js SCSS Variables
_tokens.scss TypeScript
tokens.ts Style Dictionary
tokens.sd.json Example: tokens.css output
:root {
/* Colors - extracted from codebase */
--color-primary: #3b82f6;
--color-primary-dark: #2563eb;
--color-secondary: #10b981;
--color-text: #1f2937;
--color-text-muted: #6b7280;
--color-bg: #ffffff;
--color-bg-secondary: #f3f4f6;
/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
/* Typography */
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 24px;
} Pro Feature
Bootstrap is available in Buoy Pro. The CLI will scan and show what it found, but token generation requires a Pro subscription.
View pricing →