Colours
The design system uses semantic colour tokens to ensure consistent styling across all components and applications.
Quick Start
Colours are applied through semantic Tailwind utility classes.
1<Button> 2 Primary Action 3</Button>
Semantic Colours
Core semantic colours used throughout the design system.
Example Text
Primary
bg-primarytext-primary-foregroundExample Text
Secondary
bg-secondarytext-secondary-foregroundExample Text
Accent
bg-accenttext-accent-foregroundSurface Colours
Colours intended for layouts and content containers.
Example Text
Background
bg-backgroundtext-foregroundExample Text
Card
bg-cardtext-card-foregroundExample Text
Popover
bg-popovertext-popover-foregroundSidebar
bg-sidebartext-sidebar-foregroundExample Text
Header
bg-headertext-header-foregroundStatus Colours
Communicate success and error states.
Example Text
Success
bg-successtext-blackExample Text
Error
bg-errortext-whiteExample Text
Warning
bg-warningtext-blackForeground Pairings
Each semantic surface has a matching foreground token.
1bg-primary text-primary-foreground 2bg-secondary text-secondary-foreground 3bg-accent text-accent-foreground 4bg-card text-card-foreground 5bg-popover text-popover-foreground 6bg-sidebar text-sidebar-foreground 7bg-header text-header-foreground
API Reference
Background Colours
Property | Type | Default | Description |
|---|---|---|---|
| bg-primary | utility | - | Primary brand colour. |
| bg-secondary | utility | - | Secondary brand colour. |
| bg-accent | utility | - | Highlight colour. |
| bg-card | utility | - | Card surfaces. |
| bg-popover | utility | - | Popover surfaces. |
| bg-sidebar | utility | - | Sidebar surfaces. |
| bg-header | utility | - | Header surfaces. |
Foreground Colours
Property | Type | Default | Description |
|---|---|---|---|
| text-primary-foreground | utility | - | Foreground colour for primary surfaces. |
| text-secondary-foreground | utility | - | Foreground colour for secondary surfaces. |
| text-accent-foreground | utility | - | Foreground colour for accent surfaces. |
Visual Reference
Overview of the available colour tokens.
Primary
Secondary
Accent
Card
Popover
Header
Success
Warning
Error
Gray