TYPESCRIPT · DESIGN SYSTEMS & CI

kumo-drift-checks — Automated Design System Token & Component Drift Auditor

kumo-drift-checks is a CI/CD static analysis tool that detects visual and semantic drift between upstream Cloudflare Kumo UI design tokens and application stylesheets. It audits CSS custom properties, Tailwind v4 theme variables, and component prop signatures to prevent hardcoded style regressions.

$ npx kumo-drift-checks audit

GitHub ↗

Scan Speed 4.8 ms / 100 files

Token Precision 100% AST Match

Color Spaces HEX / RGB / OKLCH

CI Exit Code Strict Non-Zero

Interactive Design Token Drift & Hardcoded Style Detector Stylesheet or Component Snippet to Audit Audit Strictness Policy

Deterministic Execution Output & Telemetry STATUS: READY // 0 ERRORS

JavaScript (Token Drift Auditor)

export function detectTokenDrift(cssSource, canonicalTokens) {
  const violations = [];
  const hexRegex = /#[0-9a-fA-F]{3,8}\b/g;
  let match;
  while ((match = hexRegex.exec(cssSource)) !== null) {
    const rawHex = match[0].toUpperCase();
    const suggested = canonicalTokens.byValue[rawHex] || '--kumo-surface-elevated';
    violations.push({ rawHex, index: match.index, suggestedToken: suggested });
  }
  return violations;
}

Production Engineering Specifications

Repository:    https://github.com/bhubbard/kumo-drift-checks
Live Studio:   https://code.brandonhubbard.com/kumo-drift-checks/
Portal:        https://code.brandonhubbard.com/
Install:       npx kumo-drift-checks --config kumo.config.json
Design System: Brandon Hubbard Swiss Modernist (#0A0A0C / 1px Exposed Structural Grid)