Palette spec
The canonical Slatewave palette — raw values, semantic roles, and syntax token mappings.
The Slatewave palette is a Tailwind-slate foundation with a teal signature and sky, rose, purple, and amber accents. Values listed here are the source of truth; downstream themes mirror them.
See the colors page for a visual reference with copy-on-click.
Raw palette
Slate foundation
| Name | Value | Purpose |
|---|---|---|
| Slate 200 | #e2e8f0 |
Default foreground |
| Slate 300 | #cbd5e1 |
Muted text, parameters, properties |
| Slate 400 | #94a3b8 |
Descriptions, placeholders |
| Slate 500 | #64748b |
Comments, line numbers |
| Slate 600 | #475569 |
Secondary buttons hover |
| Slate 700 | #334155 |
Borders, secondary button bg |
| Slate Editor | #282c34 |
Editor background |
| Slate Chrome | #21252b |
Sidebar, activity bar |
| Slate 800 | #1e293b |
Status bar, inputs |
| Slate 900 | #0f172a |
Deepest surfaces |
Teal (signature)
| Name | Value | Purpose |
|---|---|---|
| Teal 200 | #99f6e4 |
Strings |
| Teal 300 | #5eead4 |
Accent — focus, selection, CTAs |
| Teal 400 | #2dd4bf |
Accent hover (light mode) |
| Teal 700 | #0f766e |
Button background |
Accents
| Name | Value | Purpose |
|---|---|---|
| Sky 300 | #7dd3fc |
Function names |
| Sky 400 | #38bdf8 |
Keywords, control flow, info |
| Rose 400 | #fb7185 |
Constants, numbers, booleans, errors |
| Purple | #b388ff |
Language built-ins (this, self) |
| Amber 300 | #fcd34d |
Terminal ANSI 11 (bright yellow) |
| Amber 400 | #fbbf24 |
Escape chars, warnings |
| Amber 500 | #f59e0b |
Terminal ANSI 3 (yellow) |
| Amber 700 | #b45309 |
Secondary warning surfaces |
The amber ramp carries two independent jobs, and they must not be collapsed into one another. Amber 400 and Amber 700 are the semantic warning pair — escape characters, warning diagnostics, deprecated markers — and appear in editor and UI themes. Amber 300 and Amber 500 are the terminal ANSI yellow pair, slots 11 and 3, and appear only in terminal palettes. Terminal themes originally reused the semantic pair, but Amber 700 rendered as dark orange next to true ANSI colors, so the ANSI slots were re-tuned to Amber 500 / Amber 300 to read as yellow / pale-yellow. Editor warning colors deliberately did not move.
Semantic roles
Component styles should consume semantic roles, never raw palette values. This keeps theme variants (dark/light) interchangeable.
| Role | Dark value | Consumed by |
|---|---|---|
bg.base |
#282c34 |
Page body, editor |
bg.raised |
#21252b |
Cards, sidebars |
bg.elevated |
#1e293b |
Status bar, inputs |
bg.inset |
#0f172a |
Inlaid panels |
fg.default |
#e2e8f0 |
Body text |
fg.muted |
#cbd5e1 |
Secondary text |
fg.subtle |
#94a3b8 |
Descriptions, placeholders |
fg.faint |
#64748b |
Comments, disabled |
accent |
#5eead4 |
Focus, selection, primary CTAs |
Syntax token map
Each accent carries specific meaning. Breaking this map breaks Slatewave’s cross-tool coherence.
| Token kind | Color | Example |
|---|---|---|
| Comment | Slate 500 | // a comment |
| String | Teal 200 | "hello" |
| Number / boolean | Rose 400 | 42, true, null |
| Keyword | Sky 400 | export, return, if |
| Function name | Sky 300 | greet() |
| Type / class | Teal 300 | interface Theme |
| Constant | Rose 400 | MAX_VALUE |
| Language built-in | Purple | this, self, super |
| Escape / entity | Amber 400 | \n, \\ |
Mirroring into a new theme
When adding a new theme (Ghostty, iTerm, Slack, tmux, etc.):
- Start from
vscode-slatewave/themes/slatewave-color-theme.json - Map semantic roles to the target tool’s own role system — not raw
colors. If the target only exposes a single
accentslot, use Teal 300. - Ensure the syntax token map is preserved where the tool supports syntax highlighting.
- Open a PR on this site’s repo
adding a
src/content/themes/<slug>.mdxentry pointing at the new repo.