Summary
Roycss is a composable interface foundation exploring how teams can ship consistent digital experiences faster. It pairs a token-driven theme layer with accessible, headless React primitives so product teams can theme, ship and iterate without rebuilding the UI chassis every engagement.
The problem
Most early-stage product teams rebuild the same UI chassis on every engagement — buttons, forms, modal flows, theming hooks, accessibility plumbing. The work is non-differentiating but expensive: it eats budget that should go to the actual product surface, and it makes every young product look slightly different from itself across screens.
Our approach
Roycss separates the theme layer (design tokens, typography, spacing, colour) from the component layer (headless primitives built on WAI-ARIA patterns). Product teams consume the tokens to define their visual identity, then compose the primitives into product surfaces. The result is a system that is opinionated about accessibility and structure, but unopinionated about appearance.
Where it stands
- Token-driven theming layer with light/dark and brand-override support
- Headless primitives covering the 80% surface (Button, Input, Dialog, Menu, Tabs, Toast)
- Accessibility baseline: WCAG 2.2 AA on all primitives, audited with axe-core
- Documentation site with live playground (in development)
Stack
- TypeScript
- React 19
- Tailwind CSS
- Radix UI primitives
- Style dictionary tokens
- Storybook