Roadie design system
Brand and writing guidelines, tokens, React components, and widgets for consistent, accessible Oztix products.
Explore
Guides
Installation
Add Roadie to a React app: packages, CSS, and fonts.
Building with AI
Set up Claude Code and other coding agents to build with Roadie: the plugin, its skills, and the docs agents read.
Philosophy
The core goals, principles, and mental model behind the Roadie Design System.
Vue integration
Use Roadie design tokens and utility classes in Vue applications without the React component library.
Linting
Catch Roadie mistakes in your app at lint time with @oztix/roadie-lint-plugin in oxlint, or in ESLint until your app can move.
Changelog
What each Roadie release changed, and what the next one brings.
How Roadie works
Philosophy- AccentSuccessDanger
Intent picks the palette
One
intent-*class sets the colours, and everything inside inherits them. - StrongNormalSubtle
Emphasis sets the weight
emphasis-*presets pair background, text and border, with their hover states. Grid first
Stacks are
grid gap-*, not margins, so spacing lives in one place.