Palette

The Slatewave palette.

A slate foundation with a teal signature and sky, rose, purple, and amber accents. Click any value to copy it.

Semantic roles

The stable API consumed by the site's component styles. Prefer these over raw colors.

bg.base

Primary surface — editor and page body.

bg.raised

Cards, sidebars, elevated chrome.

bg.elevated

Status bar, input backgrounds.

bg.inset

Deepest surfaces — inlaid panels.

fg.default

Body text and primary foreground.

fg.muted

Secondary text, labels.

fg.subtle

Descriptions, placeholders.

fg.faint

Comments, disabled states.

accent

Slatewave signature — focus, selection, CTAs.

Slate foundation

The base scale. Every Slatewave surface is built from these.

Slate 200

fg.default

Slate 300

fg.muted

Slate 400

fg.subtle

Slate 500

fg.faint

Slate 600

Slate 700

Slate Editor

bg.base

Slate Chrome

bg.raised

Slate 800

bg.elevated

Slate 900

bg.inset

Teal signature

The Slatewave accent — used for focus, selection, buttons, and the primary signal.

Teal 200

syntax.string

Teal 300

accent — signature

Teal 400

Teal 700

button.bg

Accents

Sky, rose, purple, and amber — carrying semantic meaning in syntax highlighting.

Sky 300

syntax.function

Sky 400

syntax.keyword

Rose 400

syntax.constant / error

Purple

syntax.language

Amber 400

syntax.escape / warn

Amber 700