Goal
Land the shared CSS + assets + role-switch JS that every subsequent screen consumes. No screen-level UI yet — pure scaffolding.
Tasks
- [x] Phase 1 task 1 (amended H6 + H10): create
design-system/admin/colors_and_type.css— use@import url('../bundle/project/colors_and_type.css');then rename every consumed token to--color-*/--font-*/--tracking-*/--radius-*/--shadow-*/--ease-*/--duration-*(Tailwind v4@theme inlineconvention). Record old→new mapping inREGISTER-NOTES.md. - [x] NEW (H6): create
design-system/admin/_admin-overrides.css— onlyunset/ delete the gold + glass + Navy + Warn leftovers (--gold: unset; --gold-light: unset; --gold-dim: unset; --gold-border: unset; --skel-accent: unset; --navy: unset; --warn: unset; etc.). Brand workstream co-signs at Phase 1 close. - [x] NEW (M14): create
design-system/admin/admin.csssingle entry:@import url('colors_and_type.css'); @import url('_admin-overrides.css'); @import url('_shell.css'); @import url('_components.css');. Every HTML links this one file. - [x] Phase 1 task 2 (amended H3 + H11 + M16 + M18 + M21): create
design-system/admin/_shell.css— shell layout primitives scoped to[data-app="admin"]:.shell(CSS grid sidebar 280px + main 1fr,clamp()so degrades 1440→1024→768 without breakage),.shell__sidebarwith Essentials group (Theme/Buildings/Galleries/Units) always expanded + Advanced group collapsed by default (Features/Labels/Levels/Amenity/Plans/Plates/Location),.shell__topbar(64px),.shell__trial-bannerwithdata-banner-scope="owner-admin"attribute driving counter visibility (Owner/Admin → full counters; Manager/Editor/Agent → tier + days only; Free Guest → "Guest access" chip only),.shell__content(Warm Stone 32px padding max-width 1240px),.shell__section-header,.shell__footerwith Privacy · Terms · Cookies row. - [x] Phase 1 task 3 (amended M7 + M9 + M19 + M22): create
design-system/admin/_components.css— reusable bits with motion tokens (var(--duration-*)+var(--ease-*)on everytransition:) and decision-tree comment for hide-vs-lock pattern (destructive on others → hide; non-sensitive write → lock-icon). Components:.btn-primary/secondary/ghost/danger,.input,.textarea,.select,.table+.table--editable,.tabs,.chip+.chip--filter,.status-pill(consumes--color-status-*only, no hex),.panel(no glass),.modal-stubships with generic post-trial copy "Your Trial ended. Contact [email protected] to reactivate or upgrade →" + Phosphorclock-counter-clockwise(H8),.banner+ variants,.role-badge(5-stop role-badge token set from Stone + Moss scale per M7),.lock-icon. - [x] Phase 1 task 4 (unchanged): assemble Phosphor SVG sprite at
design-system/admin/assets/icons.svg. ~30 icons. Pull from Phosphor 2.x regular. Source URLs documented inscripts/build-phosphor-sprite.sh(L10). - [x] Phase 1 task 5 (amended M8): copy three wordmark variants from
design-system/sales/assets/brand/(or assemble) intodesign-system/admin/assets/brand/:wordmark.svg,wordmark-mark.svg,wordmark-on-dark.svg. - [x] NEW (H12 + H13): create
design-system/admin/assets/role-switch.js(~20 lines). Readslocation.search, setsbody[data-role="<role>"]on the body element. Header comment MUST state: "MOCKUP-ONLY. React role-preview MUST be server-issued ephemeral token, Owner+Admin only (cf. View-as-Agent §4.6). Never URL-parse role client-side in production." - [x] Phase 1 task 6 (unchanged): create
design-system/admin/index.html— review menu page with thumb grid + name + screen number for each of the 16 screens (15 listed + new02b-overview-guest.html). - [x] NEW (L10): create
scripts/build-phosphor-sprite.sh— tiny shell script documenting source URLs, idempotent re-run. - [x] NEW (M5): every voice-bearing string in
_components.css.modal-stuband_shell.css.shell__trial-bannerplaceholder copy carries<!-- [copy:provisional] -->HTML comment. - [x] Verification (amended H4 + M17): drift grep
grep -REn 'rgba\(\s*255\s*,\s*255\s*,\s*255\s*,\s*0?\.[0-9]+\)|backdrop-filter|-webkit-backdrop-filter|Cormorant|Garamond|--gold|--navy|--warn' design-system/admin/returns 0. Token-only-via-var grepgrep -REn '#[0-9A-Fa-f]{3,8}' design-system/admin/_shell.css design-system/admin/_components.cssreturns 0. AU English grep returns 0. All 3 mechanical gates passed CONV-37 (drift uses refined regex per REGISTER-NOTES verification-scope clarification). - [ ] Phase 1 exit gate:
index.htmlopens; all 16 thumb slots placeholder-render; no console errors. Brand workstream co-sign on_admin-overrides.cssrecorded inREGISTER-NOTES.md. Phase-gate handoff:Gate-passed: phase-1. Visual half PASSED CONV-37 (Playwright walk @ 1440×900; 16/16 thumbs; 0 console errors). Remaining: brand-language-and-identity co-sign on_admin-overrides.css.
What's Next
Build complete + visual gate passed (CONV-37). Only outstanding item is brand-language-and-identity workstream co-sign on _admin-overrides.css — once that lands in REGISTER-NOTES sign-off, flip status → done, emit Gate-passed: phase-1, unblock admin-panel-onboarding-overview.
Key Context
- Plan:
plans/admin-panel-redesign.md(Phase 1) - SPEC-AMEND v1.1 (CONV-36): 16 HIGH findings applied inline; this workstream absorbs H4 + H6 + H10 + H11 + H12 + H13 + M14 + M15 + M16 + M17 + M18 + M21 + M22 + L10
- Token source:
design-system/bundle/project/colors_and_type.css - Brandbook canon:
design-system/bundle/project/reference/brandbook-v2.html - ADR 0015 (canonical design inputs): atelier NOT canon; bundle + Nadezhda + audit only
- ADR 0002 (Phosphor iconset)
- Sibling workstream:
brand-language-and-identity(token revisions may land mid-build)
Session Log
- CONV-36 (2026-05-11): Workstream created from ratified
plans/admin-panel-redesign.md+ SPEC-AMEND v1.1 - CONV-38 (2026-05-11): completed Phase 1 task 1 —
colors_and_type.css(@import bundle +--color-*alias layer for 50+ tokens, NEW role-badge 5-stop scale per M7) +REGISTER-NOTES.md(mapping table + H4 verification-scope clarification) - CONV-38 (2026-05-11): completed H6 —
_admin-overrides.cssdefensive guardunset-ing gold/skel-accent/navy/warn/glass tokens (plus their--color-*aliases); brand co-sign pending Phase 1 close - CONV-38 (2026-05-11): completed M14 —
admin.csssingle-entry stylesheet (4 ordered @imports). Every HTML links this one file - CONV-38 (2026-05-11): completed Phase 1 task 2 —
_shell.css(~310 lines): shell grid w/ clamp() 1440→1024→768, Essentials/Advanced sidebar groups via<details>, 64px topbar,data-banner-scopetrial-banner counter scoping (M21),data-role="free-guest"topbar chip, content+section-header, M18 footer Privacy/Terms/Cookies. All 6 transitions consumevar(--duration-*)+var(--ease-*)(M9) - CONV-38 (2026-05-11): completed Phase 1 task 3 —
_components.css(~530 lines): full button library, inputs (focus rings via moss-bg), table + table--editable, tabs (aria-selected), chips (filter active state),.status-pill(status-* tokens only — M17 hex 0),.panel(no glass),.modal-stub(H8 canonical HTML template baked in as comment, M22 server-strip-vs-opacity doc),.banner(info/warning/success),.role-badge(M7 — 5 stops + guest),.lock-icon. HIDE-vs-LOCK decision-tree commented at file top (M19). Refined drift-grep regex with non-letter boundary so.banner--warningdoesn't false-positive on--warnsubstring. - CONV-38 (2026-05-11): completed Phase 1 task 4 + L10 —
scripts/build-phosphor-sprite.shfetches 37 icons fromphosphor-icons/core@main/raw/regular, strips outer<svg>, rewraps as<symbol viewBox="0 0 256 256">, writes todesign-system/admin/assets/icons.svg(21.9 KB). Idempotent. Covers navigation + actions + RBAC + billing + banner-status glyphs. - CONV-38 (2026-05-11): completed Phase 1 task 5 (M8) — 3 wordmark variants in
design-system/admin/assets/brand/:wordmark.svg(copied from sales — 56×38 Rib Fan, currentColor),wordmark-mark.svg(NEW — compact 32×32 mark for sidebar/favicon, currentColor),wordmark-on-dark.svg(NEW — 56×38 with explicit#F6F5F2skel-bg stroke for dark surfaces). - CONV-38 (2026-05-11): completed H12 + H13 —
assets/role-switch.js(~37 lines), reads?as=URL param, validates against ALLOWED list (owner/admin/manager/editor/agent/free-guest), sets<body data-role="…">. Header comment carries verbatim MOCKUP-ONLY production warning + references View-as-Agent §4.6. Node syntax check passes. - CONV-38 (2026-05-11): completed Phase 1 task 6 + M5 —
design-system/admin/index.htmlreview menu, 16 thumb cards across 3 sections (Onboarding+Overview / Project editor / RBAC+Activity log). Cards link to target HTMLs (currently 404, render placeholder Phosphor icon + "Pending · Phase N" chip). Voice-bearing copy tagged<!-- [copy:provisional] -->. Hero wordmark inlined for currentColor recolouring. Final verification: 16/16 thumbs, 16/16 icon refs resolve in sprite, HTML well-formed, drift+AU+hex hard gates all 0 hits. - CONV-38 (2026-05-11): closed mechanical-verification checklist — 7/7 gates pass (drift, hex, AU, sprite refs, motion tokens, JS syntax, shell syntax). Exit-gate status table recorded in
REGISTER-NOTES.md. Outstanding: Sergei in-browser walk + brand-language co-sign. - CONV-38 (2026-05-11): Playwright walk @ 1440×900 — 16/16 thumbs render, Phosphor icons resolve, Skeleton White / Warm Stone canon visually holds, 0 console errors/warnings. Visual exit-gate ✓ passed. Only outstanding gate item is brand-language workstream co-sign.