Design Language
Mirrors
docs/design-language.mdin the repository. Update both together.
Every screen in the dashboard follows one visual language: the dense view at /, the wallboard at /wall, the classic dashboard at /classic, the admin console, and the sign-in screens.
Principles
- Healthy is quiet; problems are loud. Normal rows are dim and low-contrast. A problem gets a red tint, a red left edge or a solid red fill, so it is the first thing your eye lands on.
- Blue means normal, red means a problem. Those two colors carry all the meaning. Nothing else (green, amber, brand colors) is used for status, which keeps the signal unambiguous and works for most color-blind viewers.
- Color is never the only signal. Every state also has a word or a shape:
▪ OK,▲ WARN,■ DOWN,OFFLINE,OVERDUE. - Flat and dense. Panels are flat with a 1px hairline border, one corner radius (8px for panels, 4px for buttons, inputs and chips), no gradients, no glow, no blur, no animated backgrounds and no hover movement.
- Mono for data, sans for names. Labels, timestamps, chips and numbers use a monospace stack in small uppercase; names and prose use the system UI font.
- One primary action per screen. Outline buttons by default, and a single filled accent button for the action that matters (sign in, save settings).
Palette
| Token | Dark | Light | Used for |
|---|---|---|---|
| Page | #0f141b |
#f2f5f9 |
Background |
| Panel | #161d27 |
#ffffff |
Cards and panels |
| Panel (strong) | #1c2531 |
#f6f8fb |
Inputs, nested panels, hover |
| Line | #263140 |
#d3dce8 |
Hairline borders |
| Text | #e6ebf2 |
#17202b |
Body text |
| Muted | #8d9bb0 |
#5d6b80 |
Secondary text |
| Faint | #7b89a1 |
n/a | Timestamps and group labels (dense view and wallboard) |
| Accent (blue) | #5aa9ff |
#1f6fd0 |
Normal state, links, primary button |
| Problem | #ff5964 / #ff3b4a |
#a12f3a text on #fff0f1 |
Warnings and outages |
Accent presets (Blue, Cyan, Violet, Slate) change the accent only. Red is reserved for problems and is not an accent choice. Older saved preferences for Amber or Rose fall back to Blue.
Contrast
Text colors were measured against WCAG 2.1 (4.5:1 is the AA threshold for small text). Dark theme: body text 14.2:1, muted 6.0:1, faint 4.8:1, blue accent 6.9:1, red 5.5:1, button text on the accent 7.7:1. Light theme: body 16.4:1, muted 5.4:1, blue accent 4.95:1 (and white on it 4.95:1). All four accent presets pass in both themes.
Where the styles live
| File | Covers |
|---|---|
src/App.css |
Layout and component rules for the classic dashboard and admin, plus the theme tokens (.dashboard, .dashboard--light, the accent presets). |
src/theme.css |
The design-language layer, imported last: compact header, mono chips, outline and primary buttons, inputs, flat panels, admin navigation. Written only in terms of the tokens, so it covers dark and light. |
src/dense.css |
The dense view. |
src/wall.css |
The wallboard, on a fixed 1920 x 1080 canvas. |
To change the look of the classic dashboard or admin, change a token in App.css or a rule in theme.css; avoid adding hard-coded colors, gradients or shadows to component rules. After any visible change run npm run build && npm run docs:screenshots and look at the images, including the light theme (dashboard-classic-light.png).
What changed from the original look
The original styling used an animated gradient background, glowing headlines, translucent glass panels with blur, depth shadows, pill-shaped chips, heavy 800 to 950 font weights, per-service brand colors on every card, and green and amber for status. All of those were removed. The "panel depth" slider (glass transparency) was removed because panels are now opaque, and the Amber and Rose accents were replaced by Cyan and Slate.