Custom CSS class reference
These class names and variables stay the same when a site is updated, so CSS written against them keeps working. Selectors that are not on this page can change without notice.
#Colour and layout variables
Set colours in both :root, :root.light and :root.dark. Colours you pick in Appearance set the same variables; Custom CSS wins where both set one.
Variable | What it changes | Light | Dark |
|---|---|---|---|
| Page background | #ffffff | #0f172a |
| Sidebar, cards, table headers, hover | #f8fafc | #1e293b |
| Sidebar background only | uses --color-bg-secondary | your light value |
| Body text | #1a1a2e | #f1f5f9 |
| Bylines, captions, the footer | #64748b | #94a3b8 |
| Links, current page, buttons, focus rings | #1a3bff | #60a5fa |
| Tint behind the current page and on hover | #dbeafe | #1e3a5f |
| Links in page content only | uses --color-primary | your light value |
| Borders and dividers | #e2e8f0 | #334155 |
| Code background | #f1f5f9 | #1e293b |
| Header background | your accent colour | your light value |
| Header text and icons | #ffffff | your light value |
| Info panel background | #DEEBFF | #0c2a4d |
| Note panel background | #EAE6FF | #2b1f5c |
| Warning panel background | #FFFAE6 | #3d3000 |
| Error panel background | #FFEBE6 | #3d1510 |
| Success panel background | #E3FCEF | #0f2d1a |
| Text font | system font | |
| Code font | system monospace font | |
| Widest the page content grows | 820px | |
| Sidebar width | 280px |
#Page
Selector | What it is |
|---|---|
| Every content page |
| Content pages in one space |
| The page grid: sidebar, content and On this page |
| The content column |
| The page content |
| The page title |
| The announcement banner above the header |
#Header
Selector | What it is |
|---|---|
| The top bar |
| The site name in the top bar |
| The logo image |
| Each header link |
| The search box |
| The light and dark mode button |
#Navigation
Selector | What it is |
|---|---|
| The left sidebar |
| Each page in the sidebar tree |
| The page being viewed |
| Each space tab, when navigation uses tabs |
| The On this page panel |
| Each heading in On this page |
| The previous and next page links |
#Content
Selector | What it is |
|---|---|
| The author and date line under the title |
| Every panel |
| Info panels (also --note, --warning, --error, --success) |
| Status lozenges; each also has .status-<colour> |
| Expand sections |
| Tables |
| Code blocks |
| Quotes |
#Macros
Selector | What it is |
|---|---|
| Every Capable macro |
| One macro by name, for example .c-macro--buttons or .c-macro--tabs |
#Footer
Selector | What it is |
|---|---|
| The page footer |
| Your footer text |
#Home page
Selector | What it is |
|---|---|
| The site home page |
| The heading area of the home page |
| The site name on the home page |
| Each space card |
#Ask AI
Selector | What it is |
|---|---|
| The Ask AI chat, including where other websites embed it |
#A few things worth knowing
The footer always stays a block. You can restyle its colours, spacing and borders, but not turn it into a grid or flex row.
body[data-space="KEY"] uses the space key, not the space name.
Variables are the safer route. A colour set as a variable follows both modes; a colour set on a selector does not.
#Related
Stable names. Your CSS keeps working.
