Goal
Align operator-panel-v1's body text colour to the brandbook standard so the panel does not feel "uncanny valley" when reviewed alongside admin-panel v5/v6/v7 with Ilya. Brandbook becomes the single visual lever for any further changes the team requests.
Success Criteria
When Sergey opens the 5 files (brandbook v1, admin-panel v5/v6/v7, operator-panel v1) side-by-side in a browser, operator panel body text reads as the same product family as the admin variants — meaning text colour matches and no visible tonal divergence distracts from the architectural review.
Approach
Surgical. Change --text-900 value in operator-panel-v1.html :root block. Rationale:
- This is the only visibly distracting divergence. Audit confirmed v5/v6/v7 already use brandbook tokens (
--text-900: #323840). - Other operator divergences (stone hex variations, status naming
--sa-bg, radius--r-sm: 4pxvs brandbook2px) are subtle and do not distract Ilya's tech-feasibility focus. - A full token sync would change radius (4→2px) and visibly sharpen all corners — possibly making operator panel look worse. Deferred until team picks an admin direction.
Implementation Steps
- Edit
operator-panel-v1.htmlline 20:--text-900: #1A1917→--text-900: #323840 - Audit —
grep "#1A1917"in operator-panel-v1.html to confirm no other usages remain (or decide they are non-text contexts and acceptable) - Visual QA — open file in browser, scroll through Overview / Projects / Settings tabs, confirm body text reads similar to admin-panel-v7
- Commit with message describing the brandbook alignment
Files to Create/Modify
docs/mockups/operator-panel-v1.html— single-line change in:rootblock
Dependencies
None.
Testing & Verification
- Visual diff: side-by-side screenshot of operator-panel-v1 and admin-panel-v7, body text colour matches
- Grep verification:
grep "#1A1917" docs/mockups/operator-panel-v1.htmlreturns no occurrences (or only non-text contexts)
Workstreams
| Name | Priority | Depends On | Tags | Tasks |
|---|---|---|---|---|
| operator-panel-text-align | P1 | — | ux | Steps 1-4 |
Risks & Edge Cases
- Other inline
#1A1917usages — possible the hex appears elsewhere (borders, shadows). Audit step catches this. - Surfaces desire for full token sync — likely Sergey or Ilya will want full alignment after seeing this works. Out of scope; capture as separate plan if requested.
- Team picks a different direction — if admin v6 (atmospheric photo BG) wins, operator may need re-skin to match that visual language. Not addressed by this plan.
From Learnings DB
- L "Brandbook implementation-idea callouts: deferential framing for tech-team docs" [ux, architecture, ops] — NOT directly applicable here (no tech-team callouts being added in this plan), but flagged because future operator-panel iterations may include tech notes that should follow the deferential pattern.
Evaluation
| Field | Description |
|---|---|
| Artefact | git diff showing single-line change + before/after browser comparison of operator-panel + admin-panel-v7 |
| 2-min check | Sergey opens operator-panel-v1.html, scrolls through 3 tabs, confirms body text "reads lighter / less heavy" than before |
| Agent self-check | grep "#1A1917" returns zero occurrences (or all remaining occurrences are non-text contexts) |