# Dashboard style guide: the RaceIntake look Version 1 · 2026-10-05 This guide fully describes the dark "navy" dashboard style that was first built for the RaceIntake dashboard. Use it to build a new dashboard or restyle an existing one on any stack: - plain HTML or server templates - React, Vue, Svelte or Angular - Tailwind - a component library - a tool that is not a web app (Grafana, Streamlit, native apps) Nothing in this guide depends on a particular machine, repository or server. Every value you need is written out below. | Section | Use it for | |---|---| | §1 The look, §2 Rules | What the result must look and feel like | | §3 Design tokens | Every colour (hex and rgba), font, size, spacing, radius and shadow. This is the source of truth for any stack. | | §4 Component specs | The anatomy, sizes and colours of each component, state by state | | §5 Reference CSS | Drop-in `theme.css` and `components.css` for web apps, plus how to load the fonts | | §6 Page skeleton, §7 Snippets | Ready-made HTML for the page shell and for each component | | §8 Other stacks | Tailwind, component libraries, charts and non-web tools | | §9 Behaviour, §10 Checklist | How pages behave, and how to check the result | **Quick start for an agent** 1. Read §1 and §2. 2. For a web app, copy §5.1 to §5.3 into `theme.css`, `components.css` and `page.css`, then load the fonts (§5.4). For another stack, map the §3 tokens into that stack's theme (§8). 3. Build your pages from §6 and §7. Map each of your own states onto one of the six status tones (§3.3). 4. Check the result against §10. --- ## 1. The look The UI is dark ink-navy. Surfaces are flat and get slightly brighter in steps: the sidebar is darkest, then the page, the cards and the chips. They are separated by 1 px borders and a faint top highlight. One azure accent (`#22B5DC`) marks links, focus, the primary button, selection and finished progress. Status colour appears only on small elements: dots, rails, rings, pill text and track segments. Large areas always stay navy. Text uses IBM Plex Sans. Every id, code, count and time uses IBM Plex Mono. Labels are quiet and in sentence case, so the data is the brightest thing on the page. Page layout: - **Sidebar (left, 232 px):** the brand, nav groups under small grey headings, and a "Services" health box pinned to the bottom. - **Header:** a 28 px semibold title, with a line under it holding a day pager and a summary. On the right is a toolbar: a label, a select, a search box, a mono "Updated" time and a Refresh button. - **Stage tiles:** a row of filter buttons. Each tile has a 2 px top rail in its status colour, a dot with a label, and a big mono count. The pressed tile glows in its status colour. - **Table and panel:** a card holding a dense table, next to a 400 px sticky detail panel. The table has a recessed header band, lifted group bands, and 52 px rows. Each row has a 5-segment pipeline track and a status pill. ``` ┌─ sidebar 232 ──────────┬─ main: padding 28 top, 32 sides ────────────────────────────────────────────────┐ │ ⌁ AppName │ Overview Source [All sources▾] [search] Updated… [Refresh] │ │ ▦ Overview ▌current │ ‹ Monday 28 September 2026 › 1 group · 1 item · 38 skipped · Show │ │ Pipeline │ (20 px between blocks) │ │ ↓ Load │ [All 1][Loaded 1][Built 0][Dispatching 0][Done 0][Needs review 0][Rejected 0] │ │ ⬡ Build (1) │ ┌ card: table ──────────────────────────────────────┐ ┌ detail panel 400 ─────┐ │ │ ➤ Dispatch │ │ Item Type Document and preprocess Pipeline … │ │ sticky, 28 px from top │ │ │ Setup │ │ Group A Feed A · AU · Daily import chip 1 item│ │ head · keys · error │ │ │ … │ │ A-1 Transcript · TXT ▬▭▭▭▭ (Loaded) 09:10│ │ timeline · actions │ │ │ ┌ Services ──────────┐ │ └────────────────────────────────────────────────────┘ └────────────────────────┘ │ │ │ ● Worker Idle │ │ (under 1280 px the panel moves below the table) │ │ └────────────────────┘ │ │ └────────────────────────┴───────────────────────────────────────────────────────────────────────────────────┘ ``` ## 2. Rules 1. **Dark only.** Use `color-scheme: dark`. Do not add a light theme or a theme toggle unless the product owner asks for one. 2. **Colours come only from the §3 tokens.** On the web, colour literals live only in `theme.css`, and every other rule uses `var(--…)`. To check, run `grep -nE '#[0-9A-Fa-f]{3,8}\b|rgba?\(' components.css page.css`. It must print nothing. 3. **Fonts.** Use IBM Plex Sans (400/500/600) and IBM Plex Mono (400/500) and nothing else. Use 400 for body text, 500 for labels, buttons and the current nav item, and 600 for titles only. 4. **Mono** is for ids, codes, file names, versions, counts and times. Numbers in tables are right-aligned. 5. **Use at most one primary (accent-filled) button per view:** one per page, plus one per open dialog. 6. **Status colour goes on small elements only.** Never fill a large area with a status colour, and never use pure black or pure white. 7. **Colour is never the only signal.** Every pill and tile has a word. Every track has an `aria-label`. Every dot sits next to text. 8. **There are six status tones (§3.3).** Map your states onto them. Do not invent new hues. 9. **Use sentence case** for every label, heading and button ("Needs review", not "NEEDS REVIEW"). 10. **Use real elements.** `` is for navigation, ` Monday 28 September 2026 1 group · 1 item · 38 skipped ·
Updated 11:37:26 GMT+5:30
ItemTypeDocument and preprocessPipelineStatusAt
Group AFeed A · AU · Daily importNo template1 item
Transcript · TXTNot set · choose in Build LoadedTo set in Build 09:10
``` ## 7. Component snippets **Buttons.** This row has one primary button. A disabled button carries its reason beside it. ```html
Nothing to resend yet
``` **Pills (with an optional mono sub-line), tracks and chips:** ```html
Loaded Sending Built Retrying 2/6Next 08:35 Accepted RejectedUNSUPPORTED_TYPE
plain type = transcript default-template v1 Template No template Step 1 Already loaded No step Source changed Edited Skipped
``` **Fields, the segmented control and notices.** A notice has `role="status"`; an error notice has `role="alert"`. ```html
Pick one before Build
Dispatch is live
Items are sent when you press Send.
API key expires 14 Oct
Rotate it before then.
Sent 3 items.
``` **Table states.** This table shows a selected row; note rows under a row (warn, error, busy); a muted (skipped) row; an empty state; and a skeleton (loading) row. ```html
ItemTypeDocumentPipelineStatusAt
Group BFeed B · UK · Hourly importdefault-template v14 items
Report Transcript · TXTParser v2 Needs reviewFIELD_NOT_FOUND 09:12
"Acme Ltd" is not in the reference list
Report Transcript · TXTParser v2 Rejected422 09:20
UNSUPPORTED_TYPE · summary
Report Transcript · TXTParser v2 BuildingQueue #2 09:31
Queue #2 · about 2 min
Report Reference record · JSONBy template · context only Skipped 09:31
No items on this day. Load a feed →
``` **Detail panel (with an item selected).** It goes in `.split__side`. On pages without a side panel, put it in a `.drawer` dialog instead. ```html ``` **Dialogs and the sign-in page.** Open a dialog with `dialog.showModal()`. When it closes, return focus to the button that opened it. ```html
…at most one primary button inside…
AppName

Sign in

``` ## 8. Other stacks ### 8.1 React, Vue, Svelte, Angular - Import `theme.css`, `components.css` and the fonts once, at the app entry. Use the same class names (`className` in React). - Write small components that output the §6 and §7 markup: `Sidebar`, `PageHeader`, `StageTiles`, `DataTable`, `StatusPill`, `PipelineTrack` and `DetailPanel`. Each takes a tone or state as a prop and picks the modifier class from it. - Keep the token names. Never copy hex values into components or inline styles. ### 8.2 Tailwind Keep `theme.css` loaded and point the Tailwind colours at its variables. The tone colours are named `tone-*` so they do not override Tailwind's built-in `neutral` palette. Tailwind v3 (`tailwind.config.js`): ```js module.exports = { theme: { extend: { colors: { page: "var(--bg-page)", card: "var(--bg-card)", subtle: "var(--bg-subtle)", raised: "var(--bg-raised)", group: "var(--bg-group)", chip: "var(--bg-chip)", well: "var(--bg-control)", "row-hover": "var(--row-hover)", line: "var(--border)", "line-row": "var(--border-row)", "line-control": "var(--border-control)", ink: "var(--text)", "ink-strong": "var(--text-strong-secondary)", "ink-2": "var(--text-secondary)", "ink-3": "var(--text-muted)", accent: "var(--accent)", "accent-hover": "var(--accent-hover)", "tone-neutral": "var(--st-neutral)", "tone-active": "var(--st-active)", "tone-ready": "var(--st-ready)", "tone-warn": "var(--st-warn)", "tone-ok": "var(--st-ok)", "tone-fail": "var(--st-fail)", }, fontFamily: { sans: ['"IBM Plex Sans"', "system-ui", "sans-serif"], mono: ['"IBM Plex Mono"', "ui-monospace", "monospace"] }, borderRadius: { control: "8px", inner: "10px", card: "12px", chip: "6px" }, }, }, }; ``` In Tailwind v4, declare the same mapping in CSS, after importing `theme.css`. Use `@theme inline { --color-page: var(--bg-page); --color-card: var(--bg-card); --color-accent: var(--accent); … }`. ### 8.3 Component libraries (MUI, Chakra, Ant Design, shadcn/ui, Vuetify and others) Set the library's dark theme from the tokens: | Theme slot | Value | |---|---| | Mode | Dark | | Primary | `#22B5DC` (hover `#4FCBEA`); text on primary `#111A2B` | | Background: default / paper (surface) | `#0A101C` / `#111A2B` | | Text: primary / secondary / disabled | `#E8EEF7` / `#A3B1C6` / `#8C9BB2` | | Divider / border | `#1F2B42` (controls `#3A4A68`) | | Success / warning / error / info | `#34D399` / `#F2B33D` / `#F87171` / `#6B9BFF` | | Radius | 8 px for controls, 12 px for cards | | Typography | IBM Plex Sans, 14 px base, h1 28 / 600; code in IBM Plex Mono | | Elevation | Off, except the card shadow (§3.8) | | Density | Controls 40 px, table rows 52 px | Then turn off ripples, gradients and glass effects, and restyle tables, chips and tags to match §4. ### 8.4 Charts (an extension: the original dashboard has no charts) - **Series colours,** in this order: `#22B5DC`, `#6B9BFF`, `#A78BFA`, `#34D399`, `#F2B33D`, `#F87171`, `#94A3B8`. When a series *is* a status (failures, for example), use that status tone instead. - **Plot area:** draw on the card background with a transparent canvas. - Grid lines `#19233A`, axis lines `#1F2B42`. - Tick labels: mono 11 to 12 px, `#8C9BB2`. - Axis titles: 12 px, `#A3B1C6`. - **Tooltip:** background `#16223A`, 1 px `#3A4A68` border, radius 8, 12 px `#E8EEF7` text, values in mono. - **Lines** are 1.5 to 2 px. Area fills use the series colour at about 15 % opacity. No 3D, no gradients, no drop shadows. ### 8.5 Tools that are not web apps - For tools with their own theming (Grafana, Superset, Metabase, Streamlit, Qt, Flutter, SwiftUI and others), set: - dark mode; - the page background `#0A101C` and panel/card background `#111A2B`; - text `#E8EEF7` and secondary text `#A3B1C6`; - primary `#22B5DC`; - status thresholds from the tones: ok `#34D399`, warn `#F2B33D`, fail `#F87171`; - fonts IBM Plex Sans and Mono; - radii 8 / 12; - the §8.4 chart colours. - Native sizes: read the CSS px values as dp (Android) or pt (iOS). - Streamlit example (`.streamlit/config.toml`): ```toml [theme] base = "dark" primaryColor = "#22B5DC" backgroundColor = "#0A101C" secondaryBackgroundColor = "#111A2B" textColor = "#E8EEF7" font = "sans serif" ``` ## 9. Behaviour conventions - **Polling:** refresh about every 30 s and show `Updated HH:MM:SS `. - If a refresh fails, keep the last data on screen, change the text to `Last refresh failed at HH:MM:SS`, and turn it amber (`.updated.is-stale`). - The Refresh button polls immediately. - **No flicker, no stolen focus:** key rows by id. Re-render a row only when its data changed, and never while it holds keyboard focus. Update tile counts in place. - **Tiles are filters:** exactly one tile is pressed (`aria-pressed`), and "All" comes first. A count of 0 keeps the normal look. - **Row selection:** a click anywhere on a row clicks the `.row-btn` in its first cell. The row gets `.is-selected` and the detail panel shows that item. Under 1280 px, the panel moves below the table. - **Nothing is hidden silently:** the summary counts skipped or filtered-out items ("38 skipped · Show", a `.btn--link` with `aria-pressed`). When they are shown, they appear as muted rows (`tr.is-muted`). - **States:** - *Loading:* three skeleton rows, with `aria-busy="true"` on the table. - *Empty:* one sentence plus a link to the next step. - *Error:* a `.notice--error` with the code, the message and a Retry button. - **Sidebar badges** count items that need action. A badge turns amber (`.nav-badge--warn`) when something is retrying, and is hidden at 0. Put the count in the link's `aria-label` too. - **Services box:** the server decides each row's state, and the right-hand text always names it ("Idle", "OK", "503 at 08:31"). - Before the first answer, a row shows "Checking…" in grey. - If the backend cannot be reached, rows show "Unknown" and a banner says the page keeps retrying. - **Density:** `body.compact` makes rows 44 px high. - **Screen width:** pages are designed at 1440 px and work down to about 1280 px. Below that, the detail panel stacks under the table, and the summary under the title wraps before the toolbar moves. ## 10. Done checklist - [ ] The body background is `#0A101C` (computed `rgb(10, 16, 28)`). The sidebar is 232 px wide on `#070C16`. `document.fonts.check('14px "IBM Plex Sans"')` returns `true`. - [ ] There are no colour literals outside the tokens (run the grep in §2). - [ ] There is at most one primary button per view. - [ ] Every state maps to one of the six tones. Every pill and tile has text. Every track has an `aria-label`. - [ ] Ids, codes, counts and times are mono, and the time zone is shown once. - [ ] When you press Tab through the page, the azure focus ring shows everywhere (light azure inside the sidebar). - [ ] Labels are in sentence case. Large areas are navy, and status colour sits only on small elements. - [ ] Render the §6 skeleton unchanged at 1440 × 900 next to your page. The sidebar, header, tiles, table and panel geometry match.