Design System
The @avi/ds component library and @avi/tokens design tokens — the building blocks used across all slashAvi apps.
The slashAvi design system lives in the monorepo at packages/ds and packages/tokens. Every app in the workspace imports from these packages.
Components
All components are in @avi/ds:
import { Button, Card, Badge, Callout, GradientText } from '@avi/ds'
import { Tabs, Input, Dialog, Accordion } from '@avi/ds'
import { Prose, ScrollArea, Separator, Tooltip } from '@avi/ds'Tokens
Design tokens live in @avi/tokens. The token system defines colours, typography, and spacing as CSS variables:
import { colors } from '@avi/tokens'Colour tokens
| Token | Light | Dark |
|---|---|---|
--background | #ffffff | #0a0a0b |
--surface | #f7f7f8 | #111113 |
--border | #e5e5e7 | #1f1f23 |
--text-primary | #0a0a0b | #ededed |
--text-secondary | #6b7280 | #888891 |
--accent | #e63329 | #e63329 |
Brand gradient
The signature red gradient used across headings, active states, and labels:
background-image: linear-gradient(135deg, #ff6b4a 0%, #e63329 60%, #b91c1c 100%);
background-clip: text;
-webkit-text-fill-color: transparent;Applied via the .gradient-tomato CSS class.
Typography
Display font: Poppins (600, 700, 800) — loaded via next/font/google, available as --font-display and font-display Tailwind utility.
Body font: Geist Sans — clean, readable, developer-oriented.
Mono font: Geist Mono — code blocks and the /avi wordmark.
Usage in apps
Each app imports tokens and components:
// In your globals.css
@import "tailwindcss";
// Tokens auto-applied via CSS variables in apps/web/app/globals.css
// Components
import { Button } from '@avi/ds'Extending
Add new components to packages/ds/src/components/ and export from packages/ds/src/index.ts. Tokens are extended in packages/tokens/src/colors.ts.