Keeping a dozen sites on one palette, one type scale, and one spacing system is a correctness problem as much as a design one, and the Hraness sites handle it with a type checker. They style pages with StyleX compositions: typed style declarations whose props the compiler checks, built from a shared kit. A misspelled class string is invisible until someone looks at the page. A misspelled prop fails the build.
why style drift goes unnoticed
Styling drift makes no noise. text-gray-700 in one repository and text-slate-700 in another look close enough that nobody compares them, and a hardcoded hex in a third looks right until the palette changes. Tests miss these differences because a class string promises nothing a test can hold it to.
Style decisions are also code decisions. A missing contrast pair is an accessibility bug, a missing min-width: 0 is a layout bug, and a hardcoded font stack is a brand bug. Making styles something the compiler can check turns some of those bugs into build failures.
what typed styles catch
StyleX compiles typed style declarations to atomic CSS. That has three consequences for correctness.
Style props have types. A composition declares the properties it accepts, and a call site that passes an unknown prop or a value of the wrong type fails to compile. “The footer accepts a tone and a compact flag” is an interface the compiler enforces rather than a line in a doc.
Values come from one place. The palette and type scale live in @hraness/ui and @hraness/design-kit as constants, and sites compose from them instead of restating them. The muted text color is the same token on every site, so a palette change is one edit instead of a search across a dozen repositories.
The output is deterministic. The CSS is generated at build time from the same declarations, so the shipped stylesheet follows from the source and a test can assert on it. aicharts' CSS contract test does this, checking the compiled output against the declared design rules.
recipes and pinned stylesheets
The sites do not write ad hoc CSS. They build pages from named recipes (rows, panes, controls, prose widths), and each product supplies its own category colors through tokens. The product decides what it wants to look like, the kit decides how that renders, and the types keep the two in step.
Each site also bundles the released kit stylesheets with their licenses, and a checked-in file records the SHA-256 of every bundled file. The visual output is then a build artifact a test can hash, where a stylesheet loaded from a CDN could change underneath the site.