How Token Detection Works
Auto-Detection
Buoy scans your codebase for CSS custom properties, JS/TS theme objects, and Tailwind config to build a token map automatically.
Token Import
Import tokens from JSON files, CSS custom properties, or Tokens Studio format using buoy dock tokens import.
Value Matching
When Buoy finds a hardcoded value like #3b82f6, it suggests the matching token: var(--color-primary).
Supported Token Formats
CSS Custom Properties
Variables defined in :root or theme files
--color-primary JSON Token Files
Standard token JSON format
tokens.json JavaScript Theme Objects
Exported theme configs (styled-components, etc.)
theme.ts Tailwind Config
Token values from your Tailwind configuration
tailwind.config.* Get started
Run the CLI to auto-detect your tokens and start catching drift.
$
npx ahoybuoy dock