Skip to content
arun-design-system

arun-design-system

Three independent packages — pure-CSS design tokens with white-label brand generation, unstyled React behaviour primitives, and a brand-agnostic component library built on both.
Get startedView on GitHub

Tokens, not themes

Every colour, space and radius is a CSS custom property. No theme object, no runtime style engine, no CSS-in-JS. @arun-dev/tokens ships zero JavaScript.

Brands from one colour

createBrand({ seed }) generates a full palette and semantic layer at build time. This site is one, the arun brand — also published as @arun-dev/tokens/brands/arun — and no component knows it.

Render anything

Every component takes a render prop, so a chip can be an li, a link can be a router's link, and a card can be a labelled nav.

Behaviour without styling

@arun-dev/headless ships the behaviour, keyboard handling and accessibility with no CSS and no class names. State reaches your stylesheet as data-* attributes.

Owns its contracts

The packages meet by name, not by import — token names, and data-* attribute names. A misspelling in either would fail silently, so a test guards each one.