Design System

Color palette, inputs, and component styling reference

Core Semantic Colors

background

var(--background)

foreground

var(--foreground)

card

var(--card)

card-foreground

var(--card-foreground)

popover

var(--popover)

popover-foreground

var(--popover-foreground)

primary

var(--primary)

primary-foreground

var(--primary-foreground)

secondary

var(--secondary)

secondary-foreground

var(--secondary-foreground)

muted

var(--muted)

muted-foreground

var(--muted-foreground)

accent

var(--accent)

accent-foreground

var(--accent-foreground)

destructive

var(--destructive)

destructive-foreground

var(--destructive-foreground)

border

var(--border)

input

var(--input)

ring

var(--ring)

Text Color Classes

text-foreground - Primary text color

text-muted-foreground - Secondary/muted text

text-primary - Primary accent (orange/amber)

text-secondary - Secondary accent (teal)

text-destructive - Error/destructive actions

Input Components

Text Inputs

Default Input

With Value

Disabled

Small (h-8)

Number Inputs

Default Number

With Percentage Suffix (variant="percent")

With Currency Prefix (variant="currency")

Percent with custom height (className="h-7")

Select Inputs

Default Select

Small Select (h-8)

Other Inputs

Checkbox

Check me

Switch

Toggle me

Slider

Textarea

Data Table

Matrix-style table with sticky header, sticky left column, and scrollable content.

Product

Units

RSP

Growth

Revenue

Margin %

Margin

Product Alpha 100g

£358.80

51.5%

£184.80

Product Beta 200g

£381.65

51.0%

£194.65

Product Gamma 50g

£375.90

52.5%

£197.40

Category A Total

415

—

£1116.35

51.7%

£576.85

Product Delta 150g

£213.85

51.4%

£109.85

Product Epsilon 300g

£1078.20

50.8%

£547.20

Category B Total

245

—

£1292.05

50.9%

£657.05

Grand Total

660

—

£2408.40

51.2%

£1233.90

Selected: 0 itemsClick rows to select

Buttons

Badges

Default

Secondary

Destructive

Outline

Number Display Styles

Positive Change

+25%

Negative Change

-15%

Currency

£1,234.56

Units

5,432units

Chart Colors

chart-1

chart-2

chart-3

chart-4

chart-5

chart-6

chart-7

chart-8

Sidebar Colors

sidebar

sidebar-foreground

sidebar-primary

sidebar-primary-foreground

sidebar-accent

sidebar-accent-foreground

sidebar-border

sidebar-ring

Background Classes

bg-background

bg-card

bg-muted

bg-accent

bg-primary

bg-secondary

bg-destructive

Common Patterns

Positive/Negative Values

+25% uplift (text-primary)

+25% uplift (text-secondary)

-15% discount (text-muted-foreground)

-15% discount (text-foreground)

Status Indicators

Active/Selected (bg-primary)

Info/Secondary (bg-secondary)

Inactive (bg-muted-foreground)

Error (bg-destructive)