Back to portfolio

Foundations

Colors

Brand palette mapped to semantic OKLCH tokens. Surface layers come from the neutral preset (data-neutral); --section aliases --muted so alternating sections stay in sync. Use the palette icon to preview presets live.

Semantic

Background

--background

Foreground

--foreground

Section

--section

Section foreground

--section-foreground

Card

--card

Card foreground

--card-foreground

Popover

--popover

Primary

--primary

Primary foreground

--primary-foreground

Secondary

--secondary

Muted

--muted

Muted foreground

--muted-foreground

Accent

--accent

Destructive

--destructive

Border

--border

Input

--input

Ring

--ring

Chart

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Sidebar

Sidebar

--sidebar

Sidebar foreground

--sidebar-foreground

Sidebar primary

--sidebar-primary

Sidebar accent

--sidebar-accent

Sidebar border

--sidebar-border