Pages
Contents
1. Tokens & Colour System
All colours, spacing and typography values are controlled via CSS custom properties.
Colour Tokens
| Token | Swatch | Description |
|---|---|---|
--xpulse-bg | Page background — largest surface of the app | |
--xpulse-surface | Cards, panels, boxes | |
--xpulse-surface-strong | Hover, active and highlighted surfaces | |
--xpulse-text | Primary text colour | |
--xpulse-text-dim | Secondary text, meta info | |
--xpulse-border | Lines, dividers, field borders | |
--xpulse-accent | Primary action colour — buttons, focus, active nav | |
--xpulse-accent2 | Secondary accent — positive states, hints | |
--xpulse-warning | Warnings and pending states | |
--xpulse-danger | Errors and destructive actions |
Layout & Size Tokens
| Token | Default | Description |
|---|---|---|
--xpulse-content-width |
1100px |
Maximum width of the app shell content |
--xpulse-sidebar-width |
260px |
Width of sidebars and TOC navigation |
--xpulse-gap-layout |
24px |
Default gap between layout elements |
--xpulse-font-size-display |
clamp(34px, 5vw, 56px) |
H1 and display texts |
--xpulse-font-size-lead |
19px |
Lead paragraphs and introductions |
--xpulse-button-radius |
14px |
Button shape |
--xpulse-button-padding-x |
18px |
Horizontal padding inside buttons |
--xpulse-radius-md |
2px |
Standard element radius |
Noise Overlay
The characteristic xPulse grain texture only appears in dark mode.
| html[data-theme="dark"] body::before { /* grain texture */ } |
Overriding Tokens
In your own theme, just re-set the variables you need:
| html[data-theme="my-theme"] { |
| --xpulse-bg: #0a0a1f; |
| --xpulse-accent: #00ffcc; |
| --xpulse-accent2: #ff00aa; |
| --xpulse-warning: #d6a43a; |
| --xpulse-danger: #d46a7a; |
| } |
Tip: Always override tokens before writing new classes. That way all existing components update automatically.