The built-in theme exposes all design tokens as CSS custom properties. Override any of them in docs/theme/main.css after importing braised:theme/base.
Color tokens
All color tokens are scoped to [data-theme="dark"] and [data-theme="light"]. The built-in palette uses the Radix Colors cyan scale — a perceptually balanced 12-step scale that inverts cleanly between themes.
Backgrounds
| Variable |
Role |
--bg-base |
Page background |
--bg-surface |
Sidebar, header, raised surfaces |
--bg-elevated |
Code blocks, callout backgrounds, inputs |
--bg-hover |
Hover state background |
Borders
| Variable |
Role |
--border |
Default border color |
--border-strong |
Emphasized borders (callout left-edge, etc.) |
Text
| Variable |
Role |
--text-primary |
Body copy, headings |
--text-secondary |
Nav links, supporting text |
--text-muted |
Section labels, placeholders, timestamps |
Accent
| Variable |
Role |
--accent |
Interactive elements, active indicators |
--accent-bright |
Hover state for accent |
--accent-text |
Accent-colored text (links, active nav) |
--accent-subtle |
Accent tint for backgrounds (active nav bg, etc.) |
Code
| Variable |
Role |
--code-text |
Inline code foreground |
Semantic colors
| Variable |
Role |
--amber |
Warning border/icon |
--amber-text |
Warning text |
--amber-subtle |
Warning background tint |
--callout-tip |
Tip callout accent |
--callout-danger |
Danger/caution callout accent |
Typography tokens
These are set on :root and are theme-independent.
| Variable |
Default |
Role |
--font-sans |
IBM Plex Sans |
UI, headings, nav |
--font-serif |
IBM Plex Serif |
Body copy |
--font-mono |
IBM Plex Mono |
Code |
Layout tokens
Also set on :root.
| Variable |
Default |
Role |
--sidebar-width |
260px |
Left nav width |
--toc-width |
220px |
Right TOC width |
--content-max |
680px |
Max width of article body |
--header-height |
52px |
Fixed header height |
--shell-max |
1280px |
Max width of the page grid on wide viewports; header content aligns to this boundary while the header background stays full-width |