A portfolio of sites has a correctness problem most people file under design: one palette, one type scale, one spacing grammar, across a dozen codebases. Class-string frameworks cannot enforce it; a misspelled utility is invisible until someone looks. The portfolio's answer is to make style a typed API: StyleX compositions whose props the compiler can check.
the consistency problem
Styling drift is silent. A text-gray-700 in one repo and text-slate-700 in another look similar enough that nobody diffs them; a hardcoded hex in a third looks exactly right until the palette shifts. The failures are consistency failures, and they are invisible to tests because nothing about a class string is a contract.
The deeper issue is that style decisions are code decisions. A missing contrast pair is an accessibility bug; a missing min-width: 0 is a layout bug; a hardcoded font stack is a brand bug. Treating them as data the compiler can check is a correctness stance, not a design preference.
what stylex gives
StyleX compiles styles to atomic CSS from typed declarations. The practical consequences for correctness:
The style surface is typed. A composition declares which properties it accepts; a call site passing an unknown prop or a wrong-typed value fails to compile. "The footer accepts a tone and a compact flag" is an interface the compiler enforces, not a convention in a doc.
Values are shared by construction. The palette and type scale live in @hraness/ui and @hraness/design-kit as constants; sites compose from them rather than restating them. The shared theme means the "same" muted text is the same token everywhere, and a palette change is one edit instead of a grep across a dozen repos.
Output is deterministic. Compiled CSS is generated at build time from the same declarations, so the shipped stylesheet is a deterministic artifact of the source. A test can assert on it: AI Charts' CSS contract test does exactly that, checking the compiled output against the declared design contract.
how the portfolio uses it
The sites do not write raw CSS ad hoc; they compose recipes. A page is built from named compositions (rows, panes, controls, prose measures) with product-owned categorical color injected through tokens. The recipe boundary is the correctness boundary: the product decides what it wants to look like, the kit decides how the grammar renders it, and the type system keeps the two from drifting.
The bundled-stylesheet rule closes the loop: each site bundles the released kit stylesheets with their licenses, and the checked receipts pin the exact bytes. The visual contract is then a build artifact a test can hash, not a CDN promise.