Roadie design system
Consistent, accessible, and beautiful UI for Oztix applications.
Foundations
The building blocks behind every component — color, type, layout, and more.
Colors
OKLCH color scales and intents
Typography
Text styles and fluid scaling
Aa Bb Cc
Layout
Grid, spacing, and layout patterns
Elevation
Shadow scale and depth
Shape
Border-radius scale
Interactions
Interactive states and utilities
Linking
Smart href, RoadieLinkProvider, and tracking pattern
href<a>Iconography
Phosphor Bold icons and sizing
Accessibility
Inclusive design and semantic HTML
Motion
Duration, easing, and animation tokens
Performance
Speed principles and optimisation
Design tokens
Semantic CSS custom properties that power theming across intents and modes.
Components
Accessible React components built on Base UI, styled with intent and emphasis.
Button
Actions and CTAs
Card
Content containers
Badge
Status and labels
Accordion
Expandable content
Input
Text input fields
Select
Selection menus
Key features
Tailwind-native styling
Built on Tailwind CSS v4 with custom @utility directives for intent/emphasis theming.
intent-accent emphasis-strongAccessible by default
Components built on Base UI for robust accessibility and keyboard navigation.
Dark mode ready
OKLCH color scales with automatic dark mode via CSS custom properties.