Colors

Our brand color palette and semantic color usage across the site.

Brand Colors

Charcoal

var(--color-brand-charcoal) #36342e

Burgundy

var(--color-brand-burgundy) #890000

Slate

var(--color-brand-slate) #565264

Beige

var(--color-brand-beige) #d6cfcb

Gray

var(--color-brand-gray) #707070

Semantic Colors - Light Mode

Container (Background)

Used as the page background

var(--color-background) #f5f5f5

Inner Surface

Cards, panels, and elevated areas.

var(--color-surface) #d6cfcb

Primary

Main brand action color

var(--color-primary) #890000

Secondary

Supporting accent color

var(--color-secondary) #565264

Accent

Emphasis and highlights

var(--color-accent) #36342e

Text Primary

Default text color

var(--color-text-primary) #36342e

Text Secondary

Body and secondary text

var(--color-text-secondary) #707070

Text Muted

Subtle captions and metadata

var(--color-text-muted) #9ca3af

Border

Default border color

var(--color-border) #e5e7eb

Border Muted

Subtle borders and dividers

var(--color-border-muted) #d6cfcb

Semantic Colors - Dark Mode

Container (Background)

Used as the page background

var(--color-background) #111111

Inner Surface

Cards, panels, and elevated areas.

var(--color-surface) #36342e

Primary

Main brand action color

var(--color-primary) #d6cfcb

Secondary

Supporting accent color

var(--color-secondary) #7672a0

Accent

Emphasis and highlights

var(--color-accent) #565264

Text Primary

Default text color

var(--color-text-primary) #f5f5f5

Text Secondary

Body and secondary text

var(--color-text-secondary) #d6cfcb

Text Muted

Subtle captions and metadata

var(--color-text-muted) #9ca3af

Border

Default border color

var(--color-border) #3f3f3f

Border Muted

Subtle borders and dividers

var(--color-border-muted) #565264