design systems
primitives, tokens, and brand catalogs shared across products.
hraness products share a small public primitive layer, a public composition layer built on it, and a brand catalog that holds each product's identity. products build from those pieces instead of re-implementing them.
these notes cover the cascade order, accessible primitives, the icon pipeline, and the /design gallery that serves as the shared interface specification.
lessons
- token cascades across a product family: one brand, many surfacesstart here · tokens, reset, components, product rules, in that order
- accessible primitives without re-implementing focus or keyboard · react-aria as a custody decision
- an icon pipeline agents can read: manifest, provenance, immutable releases · icons as checked data, not pasted svg
- a /design gallery as the executable specsubscriber · the executable component specification
projects
- ui · the public react aria primitive layer the other packages build on.
- design-kit · charts, effects, and application compositions on the primitives.
- site-footer · the shared footer and email signup for hraness sites.
- design gallery · the executable component specification, live on this site.
by hraness · drafted with ai assistance