design systems

primitives, tokens, and brand catalogs shared across products.

one small public primitive layer, one private composition layer, and a brand catalog that owns every identity — that's the whole trick. products assemble; they don't re-implement.

these notes cover the cascade order, the accessible-primitive contracts, the icon pipeline, and the /design gallery that keeps every product honest.

projects

ui — the public react-aria primitive layer everything builds on.
design-kit — charts, effects, and application compositions on the primitives.
site-footer — one canonical footer across every hraness property.
design gallery — the executable component specification, live on this site.

planned lessons

tokens, reset, components, product rules: the cascade order
accessible primitives without re-implementing focus or keyboard
an emoji-driven icon pipeline with checked provenance
a gallery as the contract: executable, not aspirational

these lessons are planned, not published. each ships as a page under this category when it is written.

AI-drafted at Ben Guo's direct request as category seeds; each planned lesson is unpublished until it is written.