Design system foundations
Built on shadcn/ui and Tailwind CSS v4. Tokens live in src/index.css.
Colors
Semantic color tokens designed for clarity and calm interfaces across light and dark modes.
Brand
| Color token | Light value | Dark value | Preview |
|---|---|---|---|
| bg-brand | oklch(0.50 0.20 260) | oklch(0.50 0.20 260) | |
| border-brand-border | oklch(0.90 0.05 260) | oklch(0.35 0.05 260) | |
| bg-brand-bg | oklch(0.95 0.02 260) | oklch(0.25 0.02 260) | |
| text-brand-foreground | oklch(0.98 0 0) | oklch(0.93 0 0) |
Actions
| Color token | Light value | Dark value | Preview |
|---|---|---|---|
| bg-primary | oklch(0.10 0 0) | oklch(0.90 0 0) | |
| text-secondary-foreground | oklch(0.10 0 0) | oklch(0.93 0 0) | |
| text-accent-foreground | oklch(0.10 0 0) | oklch(0.93 0 0) | |
| bg-secondary | oklch(0.95 0 0) | oklch(0.25 0 0) | |
| bg-accent | oklch(0.95 0 0) | oklch(0.25 0 0) | |
| text-primary-foreground | oklch(0.98 0 0) | oklch(0.20 0 0) |
Page and surfaces
| Color token | Light value | Dark value | Preview |
|---|---|---|---|
| text-foreground | oklch(0.10 0 0) | oklch(0.93 0 0) | |
| text-card-foreground | oklch(0.10 0 0) | oklch(0.93 0 0) | |
| text-popover-foreground | oklch(0.10 0 0) | oklch(0.93 0 0) | |
| bg-background-vivid | oklch(0.98 0 0) | oklch(0.17 0 0) | |
| bg-background | oklch(0.99 0 0) | oklch(0.15 0 0) | |
| bg-card | oklch(0.99 0 0) | oklch(0.20 0 0) | |
| bg-popover | oklch(0.99 0 0) | oklch(0.20 0 0) | |
| bg-app-bg | oklch(1 0 0) | oklch(0 0 0) |
Muted
| Color token | Light value | Dark value | Preview |
|---|---|---|---|
| text-muted-foreground | oklch(0.50 0 0) | oklch(0.70 0 0) | |
| text-outline | oklch(0.7 0 0) | oklch(0.55 0 0) | |
| bg-muted-vivid | oklch(0.92 0 0) | oklch(0.25 0 0) | |
| bg-muted | oklch(0.95 0 0) | oklch(0.25 0 0) |
Semantic
| Color token | Light value | Dark value | Preview |
|---|---|---|---|
| bg-destructive | oklch(0.50 0.20 27.325) | oklch(0.70 0.19 22.216) | |
| bg-warning | oklch(0.70 0.15 70) | oklch(0.60 0.15 70) | |
| text-destructive-foreground | oklch(0.98 0 0) | oklch(0.93 0 0) | |
| text-warning-foreground | oklch(0.98 0 0) | oklch(0.93 0 0) |
Borders and inputs
| Color token | Light value | Dark value | Preview |
|---|---|---|---|
| ring-ring | oklch(0.50 0 0) | oklch(0.55 0 0) | |
| border-border | oklch(0.90 0 0) | oklch(0.30 0 0) | |
| border-input | oklch(0.90 0 0) | oklch(0.20 0 0) | |
| border-border-muted | oklch(0.95 0 0) | oklch(0.20 0 0) |
Sidebar
| Color token | Light value | Dark value | Preview |
|---|---|---|---|
| text-sidebar-foreground | oklch(0.145 0 0) | oklch(0.985 0 0) | |
| border-sidebar-border | oklch(0.92 0 0) | oklch(0.25 0 0) | |
| bg-sidebar-accent | oklch(0.94 0 0) | oklch(0.23 0 0) | |
| bg-sidebar | oklch(0.97 0 0) | oklch(0.19 0 0) |
Charts
| Color token | Light value | Dark value | Preview |
|---|---|---|---|
| fill-chart-1 | oklch(0.20 0 0) | oklch(0.92 0 0) | |
| fill-chart-2 | oklch(0.35 0 0) | oklch(0.78 0 0) | |
| fill-chart-3 | oklch(0.50 0 0) | oklch(0.64 0 0) | |
| fill-chart-4 | oklch(0.62 0 0) | oklch(0.50 0 0) | |
| fill-chart-5 | oklch(0.74 0 0) | oklch(0.38 0 0) |
Typography
A clean, hierarchical type scale built with Inter (--font-sans) for optimal readability.
| Name | Size | Weight | Color token | Preview |
|---|---|---|---|---|
| D1 | text-9xl (128px) | font-semibold (600) | text-foreground | |
| D2 | text-7xl (72px) | font-semibold (600) | text-foreground | |
| D3 | text-5xl (48px) | font-semibold (600) | text-foreground | |
| H1 | text-4xl (36px) | font-semibold (600) | text-foreground | |
| H2 | text-2xl (24px) | font-semibold (600) | text-foreground | |
| H3 | text-base (16px) | font-semibold (600) | text-foreground | |
| Title | text-sm (14px) | font-semibold (600) | text-foreground | |
| Subtitle | text-sm (14px) | font-normal (400) | text-muted-foreground | |
| Body | text-sm (14px) | font-normal (400) | text-foreground | |
| Label | text-xs (12px) | font-medium (500) | text-muted-foreground |
Spacing
Padding, gaps, and margins in 4px steps. Use the table to find the right class and use case.
| Name | Pixels | Classes | Use cases | Preview |
|---|---|---|---|---|
| 1 | 4px | p-1, gap-1 | Icon padding | |
| 2 | 8px | p-2, gap-2 | Compact card padding | |
| 4 | 16px | p-4, gap-4 | Default margin and padding | |
| 6 | 24px | p-6, gap-6 | Modal padding | |
| 8 | 32px | p-8, gap-8 | Section spacing |
Corner rounding
One base value sets every corner size: --radius at 0.625rem (10px). Sm subtracts 4px, md subtracts 2px, lg matches the base, xl adds 4px. Full is a fixed pill (9999px), not derived from the base.
| Name | Pixels | Classes | Calculation | Preview |
|---|---|---|---|---|
| sm | 6px | rounded-sm | calc(var(--radius) - 4px) | |
| md | 8px | rounded-md | calc(var(--radius) - 2px) | |
| lg | 10px | rounded-lg | var(--radius) | |
| xl | 14px | rounded-xl | calc(var(--radius) + 4px) | |
| full | 9999px | rounded-full | 9999px |
Elevation
Shadow shows what sits above what. Use flat for the page, raised for cards, and overlay for menus and dialogs. Use elevation sparingly, too much shadow adds noise and pulls focus from the content.
| Name | Shadow | Preview |
|---|---|---|
| Flat | no shadow | |
| Raised | shadow-sm | |
| Overlay | shadow-lg |
Button sizing
Interactive elements share a compact scale in 4px steps, from 24px to 36px. Use xs and sm in dense UI, default for most controls, and lg when a target needs more presence.
| Name | Pixels | Classes | Preview |
|---|---|---|---|
| xs | 24px | h-6, w-6, size-6 | |
| sm | 28px | h-7, w-7, size-7 | |
| default | 32px | h-8, w-8, size-8 | |
| lg | 36px | h-9, w-9, size-9 |
Icons
Use Lucide React outline icons at 16px with a 2px stroke. This matches shadcn and keeps every icon consistent and balanced.
| Attribute | Specification | Preview |
|---|---|---|
| Library | Lucide React | |
| Size | size-4 (16px) | |
| Stroke | strokeWidth={2} | |
| Style | outline only |
Feedback states
Feedback states show users that their action worked. They confirm clicks, highlight focus, and signal when something is disabled, loading, or wrong.
| State | Classes | Preview |
|---|---|---|
| Hover | hover:bg-muted/50 | |
| Press | active:translate-y-px | |
| Active | active:bg-muted, active:text-foreground | |
| Focus | focus-visible:ring-3, focus-visible:ring-ring/50 | |
| Disabled | disabled:opacity-25, disabled:pointer-events-none | |
| Invalid | aria-invalid:border-destructive, aria-invalid:ring-destructive/20 | |
| Loading | Skeleton, Loader2 with animate-spin | |
| Destructive | variant="destructive" |
Responsiveness
Users need apps to work across many window sizes. Many desktop users work with two windows side by side. The layout must adapt at breakpoints to stay readable and usable.
| Name | Min width | Prefix | Preview |
|---|---|---|---|
| sm | 640px | sm: | |
| md | 768px | md: | |
| lg | 1024px | lg: |
Page layout
| Area name | Use case | Preview |
|---|---|---|
| Left sidebar | Global navigation | |
| Right sidebar | AI chat | |
| Toolbar | Page actions and controls | |
| Primary pane | Main content for selected page | |
| Secondary pane | Supporting content in a split view |
Read the rest of the design system
Enter your details to unlock the remainder of this page, plus the principles, foundations, components and interactions pages in full.