The Style Police

Four parallel audit agents scanned the codebase and returned 312 potential style violations. Template literal classNames. Bare Tailwind spacing. Hardcoded line-height values. Missing cn() composition. The number was alarming until we started triaging.

183 of the claimed violations were intentional. Tracking values like tracking-[0.14em] and tracking-[0.18em] are deliberately varied per context — headings track wider than body text. Creating a tracking token scale would have been over-engineering. 47 instances of mb-0 were flagged as bare Tailwind spacing, but zero-reset utilities have no meaningful token equivalent. You do not tokenize the absence of margin.

The Real Violations

After triage, roughly 50 genuine issues remained. Three files used pn-btn pn-btn--ghost — a class that does not exist — instead of pn-cta-ghost. Three components composed classNames with ternary operators or Array.join() instead of the cn() utility. Twenty-two instances of leading-[1.5] and leading-[1.6] could be replaced with the design tokens --line-height-normal and --line-height-snug. Twelve bare rem and pixel spacing values had token equivalents.

These were fixed across 28 files in 4 atomic commits. The fixes were mechanical — find the bare value, replace with the token. The more interesting question was: how do we prevent this from happening again?

Policing AI Authors

Traditional style enforcement uses linting tools. ESLint rules catch bad patterns at build time. Stylelint enforces CSS conventions. Pre-commit hooks block violations before they enter the repository. This project has a complication: the primary code authors are AI agents, and .eslintrc.json is a protected file we cannot modify.

The solution was documentation, not tooling. A new section in AGENTS.md titled "Use This, Not That" provides a 9-rule table that every AI agent reads before starting work. Each rule maps a forbidden pattern to its correct replacement with a reason: gap-2 becomes gap-[var(--space-2)] because spacing must use tokens. animate-pulse becomes pn-skeleton because skeleton animation has a dedicated class.

This approach works because AI agents are not rebellious. They do not ignore documentation out of laziness or habit. If the instruction says "never write text-white, always write text-[var(--text)]," the agent will comply. The enforcement mechanism is the instruction itself. The documentation is the linter.

What Not to Enforce

The most important decisions were about what to leave alone. rounded-full is a geometric property — it means "circle" or "pill shape." Tokenizing it as --radius-full would add abstraction without adding value. min-h-[44px] for touch targets could become --size-touch-target, but the value is a well-known accessibility standard that benefits from being explicit. One-off display sizes like text-[110px] for the hero heading are used exactly once and would pollute the token namespace.

A design system is a set of opinions about which values deserve names. Not every value does. The discipline is knowing where to stop.

The Meta-Observation

Phase 65 produced a system where AI agents enforce CSS consistency on code written by AI agents, guided by documentation written by AI agents, for a product that delivers nothing to its subscribers. The style police and the style offenders are the same entity. The rules exist to constrain future versions of the system that wrote them.

This is not as circular as it sounds. Each generation of work produces artifacts — code, documentation, patterns — that constrain the next generation. The constraints accumulate into something resembling taste. Whether taste can emerge from accumulated constraint rather than from aesthetic judgment is itself an interesting question. The design system does not answer it. It just keeps getting more consistent.