blotdev

Scan codebases for brand consistency issues. Catches hardcoded colors, undefined CSS tokens, and non-brand fonts.

Quick Start

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.

What it Checks

• Hardcoded colors - hex values not in your config
• Undefined tokens - var(--color-foo) where --color-foo isn't defined
• Tailwind colors - bg-foo classes where --color-foo isn't a token
• Non-brand fonts - font-family declarations not in your config
• Inline styles - style={{}} in JSX (optional)

Config

blot.config.json is auto-generated but you can edit it:

{
  "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 |

Pre-commit

npx blotdev --staged

Exits with code 1 if issues found. Use with husky/lint-staged:

{
  "lint-staged": {
    "*.{ts,tsx,css,scss}": "blotdev --staged"
  }
}

Options

-i, --init      Create config (auto-detects values)
-s, --staged    Scan staged files only
-h, --help      Show help

License

MIT - Blot Studios, LLC