Design System Palette

A comprehensive guide to the color palette used across the portfolio. Click on any color swatch to copy its Tailwind CSS class name.

Base

Copy Class

Background

bg-background

--background

Copy Class

Foreground

bg-foreground

--foreground

Primary

Copy Class

Primary

bg-primary

--primary

Copy Class

Primary Foreground

bg-primary-foreground

--primary-foreground

Copy Class

Primary Hover

bg-primary/90

--primary-hover

Muted

Copy Class

Muted

bg-muted

--muted

Copy Class

Muted Foreground

bg-muted-foreground

--muted-foreground

Accent

Copy Class

Accent

bg-accent

--accent

Copy Class

Accent Foreground

bg-accent-foreground

--accent-foreground

Border

Copy Class

Border

bg-border

--border