Design System
The slashAvi design system — components, tokens, and patterns used across all apps.
The slashAvi design system, documented in Storybook. Every component, token, and pattern used across the apps — built once, used everywhere.
What's in it
- Components — buttons, cards, callouts, badges, gradient text, and more
- Design tokens — colours, spacing, typography, and shadows as CSS variables
- Patterns — how components compose together across different contexts
Stack
Built with:
- React + TypeScript — all components are strongly typed
- Tailwind CSS v4 — utility-first styling, co-located with components
- Storybook 8 — interactive documentation with live props
Using the design system
The design system lives in the @avi/ds package within the monorepo. Import components directly:
import { Button } from '@avi/ds'
import { Card } from '@avi/ds'Tokens are available as CSS variables via the @avi/tokens package.