From 7445c30cafe09e24b5e3f95f8af05505002b2e5f Mon Sep 17 00:00:00 2001
From: nickviljoen <nick.viljoen@brandtech.plus>
Date: Sun, 17 May 2026 10:26:39 +0200
Subject: [PATCH] Document UI & brand conventions in CLAUDE.md

Adds a "UI & Brand (2026-05)" section covering the OLIVER design tokens
(yellow #FFCB05, near-black #1A1A1A, Montserrat), signature motifs
(.page-title highlight, .stat-tile, card-header accent), and the two
gotchas to avoid re-introducing (don't override .navbar position in
nav.html; tabs must use button data-bs-target, not a href).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index b23155d..84d97ca 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -390,4 +390,40 @@ Both `agent_management.html` and `admin/dashboard.html` agent views support filt
 - "Compliance risks" quick toggle — shows agents where `pii.handles_pii=true` OR `ip_ownership="Shared/TBD"` OR `autonomy_level="Autopilot"`
 
 ### CSV roundtrip for backfilling
-`/api/admin/agents/export/csv` includes 21 new columns covering all governance fields. Import accepts them; nested objects (`safety`, `pii`, `declarations`) only build up if at least one cell is populated, so partially-filled CSVs don't clobber existing data with `False`. Defensive `_csv_bool()` helper returns `None` for empty cells.
\ No newline at end of file
+`/api/admin/agents/export/csv` includes 21 new columns covering all governance fields. Import accepts them; nested objects (`safety`, `pii`, `declarations`) only build up if at least one cell is populated, so partially-filled CSVs don't clobber existing data with `False`. Defensive `_csv_bool()` helper returns `None` for empty cells.
+
+## UI & Brand (2026-05)
+
+The frontend was rebranded to the OLIVER master template (`/Users/nickviljoen/Documents/Optical_Projects/Pres Template/OLIVER Master PPT Template.potx`). The old muddy-orange `#f3ae3e` palette and Inter font are gone. See `PLAN-ui-refresh.md` for design rationale.
+
+### Design tokens (`static/style.css` `:root`)
+Always use these tokens — do **not** introduce new hex codes:
+- `--brand-yellow: #FFCB05` — primary accent (page-title highlight, stat-tile left strip, card-header icons, active states, primary buttons)
+- `--brand-yellow-soft: #FFF5C4` — subtle hover backgrounds, dropdown-item hover
+- `--brand-orange: #FF5C00` — destructive accent (btn-danger, Microsoft SSO button, logout link)
+- `--brand-dark: #1A1A1A` — body text, table headers, modal headers, nav text
+- `--brand-grey: #626262` — secondary text / muted copy
+- `--brand-grey-light: #DEE2E5` — borders, dividers
+- `--brand-off-white: #F6F7F7` — page background, table row hover
+- Font: **Montserrat** 400/500/600/700/800 (loaded from Google Fonts in `base.html`)
+
+### Signature motifs
+- **Page title** — `.page-title` class. Yellow highlight rectangle behind black text via a `linear-gradient` (yellow up to 70% of the height, transparent above). Apply to every page `<h2>`; subtitle goes in `<p class="page-subtitle">` below. **Don't** wrap with a leading icon — the highlight is the visual.
+- **Stat tile** — `.stat-tile` class. White card with 8px yellow `::before` strip on the left, yellow Font Awesome icon, big near-black `.stat-tile-value` and uppercase `.stat-tile-label`. Replaced the old orange-gradient `.stat-card`.
+- **Card section accent** — every `<h5>` / `<h6>` inside `.card-header` automatically gets a leading yellow icon (CSS targets `.card-header h5 > i.fas:first-child`) and a 28×3px yellow underline accent (`::after`). The accent doesn't apply to modal headers or to header titles displaying counts (those go in `.card-body`).
+- **Modal header** — solid `--brand-dark` background, white text, white close button.
+- **Active nav-link / nav-tab** — 2-3px `--brand-yellow` bottom border, never a coloured background pill.
+
+### Gotchas (don't re-introduce these bugs)
+- **Navbar must use `position: fixed`** (set in `style.css`). Do **not** add `position: relative` or `position: sticky` overrides in `templates/nav.html` — a previous inline `<style>` rule there silently overrode the fixed positioning and made the navbar scroll away with the page.
+- **Bootstrap tabs must use `<button data-bs-target="#x">`**, not `<a href="#x">`. The anchor form causes the browser to scroll to the tab pane on click (visible as the page "jumping down"). Bootstrap 5 recommends buttons for this reason.
+- **Body has `padding-top: 64px`** to clear the fixed navbar — keep it whenever you change navbar height.
+- **No `transform: scale(...)` on table-row hover** — jittery and shifts neighbour rows. Use a background-color change.
+- **Chart.js colours** in `templates/admin/dashboard.html` reference the brand palette directly (`#FFCB05`, `#1A1A1A`, `#FF5C00`) because the library can't read CSS vars. Keep them aligned when adding charts.
+
+### Where things live
+- `static/style.css` — all tokens + component styles (palette, navbar, tabs, buttons, forms, tables, cards, stat-tile, page-title, modal, alerts).
+- `templates/base.html` — Google Fonts link (Montserrat).
+- `templates/nav.html` — navbar markup + scoped styles for user-avatar / dropdown.
+- `templates/admin/dashboard.html` — inline `<style>` block has admin-specific overrides (column widths, audit risk badge colours, tabs); kept in-file because they're not reused elsewhere.
+- Page templates apply `.page-title` to their main `<h2>` and `.page-subtitle` to the description line.
\ No newline at end of file