CLI tool to scan codebases for brand consistency issues - catches hardcoded colors, fonts, and styles that should use design tokens.
npm install blotdevScan codebases for brand consistency issues. Catches hardcoded colors, undefined CSS tokens, and non-brand fonts.
``bash`
npx blotdev --init
npx blotdev
That's it. The first command scans your codebase and creates blot.config.json with all detected colors, fonts, and CSS tokens. The second command scans for violations.
- Hardcoded colors - hex values not in your config
- Undefined tokens - var(--color-foo) where --color-foo isn't definedbg-foo
- Tailwind colors - classes where --color-foo isn't a tokenstyle={{}}
- Non-brand fonts - font-family declarations not in your config
- Inline styles - in JSX (optional)
blot.config.json is auto-generated but you can edit it:
`json`
{
"colors": ["#1a1a1a", "#ffffff"],
"fonts": ["Inter"],
"tokens": ["--color-ink", "--color-paper"],
"ignore": ["_archive", "storybook"],
"allowInlineStyles": true
}
| Option | Description |
|--------|-------------|
| colors | Allowed hex colors |fonts
| | Allowed font families |tokens
| | Defined CSS custom properties |ignore
| | Folders to exclude from scanning |allowInlineStyles
| | Allow style={{}} in JSX |
`bash`
npx blotdev --staged
Exits with code 1 if issues found. Use with husky/lint-staged:
`json`
{
"lint-staged": {
"*.{ts,tsx,css,scss}": "blotdev --staged"
}
}
`
-i, --init Create config (auto-detects values)
-s, --staged Scan staged files only
-h, --help Show help
MIT - Blot Studios, LLC