Elitez Meridian · LMS redesign · 25 Oct 2026, 01:07 UTC
Same LMS, same features, Keith's new design. Ready for your review on a preview link; the live LMS has not changed.
Delivery mode Hybrid · Design approval Just-build · Closure policy B · 17 correction rounds · Owner approval to go live: pending
All 56 LMS pages now use the Meridian look. Nothing was removed, and the live LMS stays untouched until you approve.
Every button, link and form field was compared before and after on 504 screens: none missing. On the live site (read-only), hard-to-read text spots fell from 4,982 to 26.
Your decision: approve the preview, then Derrick merges and it goes live.
Approve (recommended) · Ask for changes · Hold — fully reversible: going live and rolling back are one step each.
Open the preview →Sign in with any demo account; no real data.We will finish the final visual recheck and the live check on the final release, then remove the 3 test accounts.
One example per page group. Same screen size and same account on both sides.
What staff see: Keith's cover art fills the left half, one centred form on the right with an Email / Phone switch and one black button.
Desktop, same screen size and state on both sides · Sample-data mode (the demo shows only a placeholder on this page) · tap a picture for the full page
Large light greeting, one black main button, tasks and documents as quiet rows; every shortcut is still there.
Desktop, same screen size and state on both sides · Demo account · tap a picture for the full page
Same filters, voucher box and start button, now in Meridian type on soft stone panels instead of navy boxes.
Desktop, same screen size and state on both sides · Sample-data mode (the demo shows only a placeholder on this page) · tap a picture for the full page
The gold and pastel menu blocks become one calm rail with icons; the plan and skills sections keep their controls.
Desktop, same screen size and state on both sides · Sample-data mode (the demo shows only a placeholder on this page) · tap a picture for the full page
Boxed totals become clean numbers, and every coloured dot now has a word beside it, such as “behind plan”.
Desktop, same screen size and state on both sides · Demo account · tap a picture for the full page
Numbered tabs become quiet underlines and the empty starting line is a clear panel; same three tools and buttons.
Desktop, same screen size and state on both sides · Sample-data mode (the demo shows only a placeholder on this page) · tap a picture for the full page
Step pills become simple tabs and count boxes become plain numbers; the same library filters and quality review.
Desktop, same screen size and state on both sides · Sample-data mode (the demo shows only a placeholder on this page) · tap a picture for the full page
The toolbar becomes one family of light buttons with the symbols removed; the same cycle actions in the same order.
Desktop, same screen size and state on both sides · Sample-data mode (the demo shows only a placeholder on this page) · tap a picture for the full page
The purple selection bar and coloured menu blocks are gone; one black “Add user” button leads the page.
Desktop, same screen size and state on both sides · Sample-data mode (the demo shows only a placeholder on this page) · tap a picture for the full page
Filters, totals and the honest-score note sit on the calm canvas with readable labels; the same filters and tabs.
Desktop, same screen size and state on both sides · Sample-data mode (the demo shows only a placeholder on this page) · tap a picture for the full page
The free quiz page gains Keith's cover art and a hairline list of facts; the same start button and privacy link.
Desktop, same screen size and state on both sides · Demo account · tap a picture for the full page
The old LMS's dark mode left most text hard to read; the new one is fixed at the root.
4 journeys, each recorded twice: on the old LMS and on the new preview, both with demo accounts, from the sign-in screen through visible menus. New recordings show an earlier build; re-record on the final release
Starts at the sign-in screen: Sign in as Alice → Home → My Training → Dismiss welcome tour → Open menu (no rail on this page) → Development Plans → Performance Review → Glossary → Open profile menu → Theme → dark → Theme → light
Old LMS, demo mode · old version · 34 s
New preview, demo mode · earlier preview build · 36 s
Starts at the sign-in screen: Sign in as Bob → Overview → My Team → Filter: Off-track → Filter: All → Job Redesign → OJT Plans → IHRP Badges
Old LMS, demo mode · old version · 26 s
New preview, demo mode · earlier preview build · 27 s
Starts at the sign-in screen: Sign in as Derrick → Overview → Workforce Planning (HR area) → Roster & Headcount → Workforce Planning (HR area) → Workforce Insights → Learning & Development (HR area) → Content Studio → Learning & Development (HR area) → Skills Gap & OJT Plans
Old LMS, demo mode · old version · 30 s
New preview, demo mode · earlier preview build · 31 s
Starts at the sign-in screen: Sign in as Alice → Open drawer menu → Home → Open drawer menu → My Training → Dismiss welcome tour
Old LMS, demo mode · old version · 23 s
New preview, demo mode · earlier preview build · 22 s
5 admin tools are not in the demo admin's menu, in the old and the new version alike, so a walkthrough cannot reach them. These pages are shown as screenshots instead.
done All 56 pages restyled
done 504/504 screens match, 0 unexplained
done 0 sideways scrolling, 0 new dark-mode issues
done Live: 4,982 → 26 light, 6,603 → 18 dark
done Unchanged; live check read-only (3,301 reads, 26 writes blocked)
Page groups passed independent review: 11 of 11 + foundationCorrection rounds: 17Pending: 0
| What we checked | Result | Evidence |
|---|---|---|
| UI only: no data, sign-in or business logic changed | pass | Release check listed only look-and-feel changes; secrets scan clean |
| Nothing removed: every button, link and field still there | pass | 224/224 demo and 280/280 sample-data screens match; 0 hidden-element differences |
| Meridian colours only, old navy and gold removed | pass | Independent code review per page group |
| Meridian type: light headings, nothing heavier than medium | pass | Independent code review; shared rule caps bold text |
| One black action per view; every status colour has a word | pass | Status words added to every coloured dot; zero-count colours are a follow-up |
| Works on phone and desktop, no sideways scrolling | pass | 0 pages scroll sideways; live check: cut-off boxes on phone 772 → 0 |
| Dark mode readable | pass | 0 new hard-to-read spots in dark mode; live: 6,603 → 18 |
| Follows Keith's drawings, nothing invented | pass | Second fresh visual check by a senior reviewer on the final release |
| No new errors | pass | Click-through of every safe button: 0 new errors; live: 0 new |
| Page group | Result | Evidence |
|---|---|---|
| Sign-in | pass | Independent code review passed after 2 correction rounds |
| Employee home, profile, review, help, glossary | pass | Independent code review passed after 1 correction round |
| Training | pass | Independent code review passed after 1 correction round; course and quiz screens need real data, checked read-only on the live site |
| Development plans | pass | Independent code review passed after 1 correction round |
| Manager | pass | Independent code review passed after 2 correction rounds |
| Job redesign | pass | Independent code review passed first time |
| HR content and IHRP | pass | Independent code review passed after 1 correction round |
| HR performance, skills and exit | pass | Independent code review passed after 1 correction round |
| Admin console | pass | Independent code review passed after 1 correction round |
| Analytics | pass | Independent code review passed after 1 correction round |
| Events and public pages | pass | Independent code review passed after 1 correction round |
| What we checked | Result | Evidence |
|---|---|---|
| Shared Meridian look (foundation) | pass | Independent review passed after 2 correction rounds |
| Combined release: all page groups together | pass | All 56 pages load; 0 new errors; 0 pages scroll sideways |
| Live LMS untouched by the preview | pass | Production version checked identical before and after each preview upload |
| Final visual recheck | pass | Second fresh visual check by a senior reviewer on the final release |
| Final live check (read-only, real accounts) | pass | Read-only check on the live LMS with the final release |
| Change request to Derrick | open | Draft change request, not merged |
Live numbers come from a read-only run with three test accounts on the final release. Of the 26 remaining light-mode spots, 9 are white words on Keith's cover art, which the checker cannot judge; 0 are new in dark mode.
| ID | Criterion | Verdict | Evidence |
|---|---|---|---|
G1 | UI only. Only HTML markup and classes, CSS, and presentation strings inside renderers may change. Never change data access, Supabase calls, auth, routing, `_redirects`, `_headers`, `supabase/`, `data/`, service worker logic, or business logic in `js/`. A renderer change in `js/*.js` is allowed only for class names, wrapper markup or inline style values. | Release check listed only look-and-feel changes; secrets scan clean | |
G2 | Parity. For every page and role, the inventory of interactive elements must be identical before and after: element IDs, buttons and their accessible names, link hrefs, form fields (name, type, required), select options, dialogs, and `data-*` hooks used by JS. The proof lane's parity checker must pass, with zero unexplained diffs. | 224/224 demo and 280/280 sample-data screens match; 0 hidden-element differences | |
G3 | Tokens. Colours, radii and fonts come from the shared Meridian stylesheet variables. No old palette literals remain in restyled CSS (`#003a70`, `#0f172a`, slate/navy/gold accents), except data-viz series colours from the palette tokens. | Independent code review per page group | |
G4 | Type. Headings use Geist at weight 300–400, body uses Inter, and no weight exceeds 500. Caption is 11px. No bold black headings. | Independent code review; shared rule caps bold text | |
G5 | Colour law. Black is the only action colour, with at most one black primary button per view. Blue is used only for focus rings and inline links. Green means done, orange means waiting, coral means error. A status always carries a word, never colour alone. | Status words added to every coloured dot; zero-count colours are a follow-up | |
G6 | Layout. The 256px rail on desktop (≥1000px) and the existing drawer on phone both work. There is no horizontal overflow at 390px or 1440px. Lists use hairline rows, not a card per row. | 0 pages scroll sideways; live check: cut-off boxes on phone 772 → 0 | |
G7 | Dark mode. The existing theme toggle still switches and stays readable (AA contrast on body text), using the Meridian dark tokens. | 0 new hard-to-read spots in dark mode; live: 6,603 → 18 | |
G8 | Fidelity. Pages that have a Keith drawing follow its composition (page header, spotlight or hero card, hairline lists, right panel) using only content the page already has. Pages without a drawing use the same shared parts. Nothing new is invented: no new sections, numbers or controls. | Second fresh visual check by a senior reviewer on the final release | |
G9 | No console regressions. No new console errors compared with the baseline on the same page and role. | Click-through of every safe button: 0 new errors; live: 0 new | |
RD-00-AC1 | Before captures exist for every page × role that can open it, at 1440 and 390. | pass | Before captures and the no-change check built; repeat run 0 differences |
RD-00-AC2 | parity.mjs compares inventories (IDs, buttons, links, fields, options, data-hooks, dialogs) and exits non-zero on any diff. Baseline vs a second baseline run = 0 diffs. | pass | Before captures and the no-change check built; repeat run 0 differences |
RD-00-AC3 | clickthrough.mjs clicks every non-destructive control per page and records console errors and opened panels. The rail links, theme toggle and profile menu are verified. | pass | Before captures and the no-change check built; repeat run 0 differences |
RD-00-AC4 | tools/README.md lists commands, the role coverage and the demo-mode-limited pages. | pass | Before captures and the no-change check built; repeat run 0 differences |
RD-01-AC1 | css/meridian.css holds the v4.17 light and dark tokens, Geist/Inter/JetBrains Mono, the type scale with weight ceiling 500, and the shared `m-` parts (page header, hero, hairline row, table, field, buttons, status chip, tag, empty state, tabs, dialog). | pass | Foundation review passed |
RD-01-AC2 | The legacy bridge remaps every old colour variable used by pages, and the common legacy classes, so an untouched page already reads in the new palette. The tenant brand colour still applies. | pass | Foundation review passed |
RD-01-AC3 | The rail (256px), top bar, drawer, profile menu and help button match Keith's drawings. Every nav item, label, href, order and role gate is unchanged. | pass | Foundation review passed |
RD-01-AC4 | All 56 pages load the stylesheet after their inline styles. Every page still returns 200 and has no new console errors. | pass | Foundation review passed |
RD-01-AC5 | STYLE-GUIDE.md documents the variables, the `m-` parts with snippets, the patterns mapped to drawings, and the bridge table. | pass | Foundation review passed |
RD-02-AC1 | Each listed page follows the composition of its Keith drawing (sign-in (screen-sign-in-*), reset password, create a workspace, add your email, check a certificate, system status, your plan) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-02-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 2 fix round(s); integrated parity 0 unexplained |
RD-02-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/A/; no overflow. | pass | Code review pass after 2 fix round(s); integrated parity 0 unexplained |
RD-03-AC1 | Each listed page follows the composition of its Keith drawing (Home, Settings, Account menu, My review, Self-review, Help guides, Help glossary, new-joiner Home) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-03-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-03-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/B/; no overflow. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-04-AC1 | Each listed page follows the composition of its Keith drawing (Module and quiz, Courses for your role, Course page, Certificates) using only content the page already has. | needs-live | Composition passes on demo; module/quiz states need data |
RD-04-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-04-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/C/; no overflow. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-05-AC1 | Each listed page follows the composition of its Keith drawing (My plan, plan action states, Confirm a level, My skills) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-05-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-05-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/D/; no overflow. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-06-AC1 | Each listed page follows the composition of its Keith drawing (Manager My team, Team plans, Option A home rail, Company hub) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-06-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 2 fix round(s); integrated parity 0 unexplained |
RD-06-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/E/; no overflow. | pass | Code review pass after 2 fix round(s); integrated parity 0 unexplained |
RD-07-AC1 | Each listed page follows the composition of its Keith drawing (Job redesign Studio, Redesign a role, Scorecard, Cockpit) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-07-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 0 fix round(s); integrated parity 0 unexplained |
RD-07-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/F/; no overflow. | pass | Code review pass after 0 fix round(s); integrated parity 0 unexplained |
RD-08-AC1 | Each listed page follows the composition of its Keith drawing (Content Studio Upload / To review / Library / Reported questions, IHRP badges, IHRP courses, Check mappings) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-08-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-08-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/G/; no overflow. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-09-AC1 | Each listed page follows the composition of its Keith drawing (Calibration, Skills framework, Learning tracks, Review cycle (separate has no drawing: shared parts)) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-09-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-09-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/H/; no overflow. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-10-AC1 | Each listed page follows the composition of its Keith drawing (no drawing: shared parts + HR Team skills / Company hub patterns (tables, filters, hairline rows)) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-10-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-10-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/I/; no overflow. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-11-AC1 | Each listed page follows the composition of its Keith drawing (no drawing: HR Team skills and Confirmed levels patterns; charts use palette tokens) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-11-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-11-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/J/; no overflow. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-12-AC1 | Each listed page follows the composition of its Keith drawing (no drawing: shared parts; big-screen pages keep their large-display layout in the new palette and type) using only content the page already has. | pass | Code review pass; final visual recheck done |
RD-12-AC2 | G1–G9 hold for every listed page. Parity reports 0 unexplained diffs for the page × role set. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-12-AC3 | Light and dark are checked at 1440 and 390 with screenshots saved under after/K/; no overflow. | pass | Code review pass after 1 fix round(s); integrated parity 0 unexplained |
RD-13-AC1 | Integrated branch redesign/meridian-ui contains all lanes and all shared patches; every page returns 200. | pass | All lanes combined at 4d5680d |
RD-13-AC2 | Parity across all 56 pages × roles = 0 unexplained diffs; clickthrough shows no new console errors vs baseline. | pass | Parity 224/224 + 280/280, 0 unexplained; clickthrough 0 new |
RD-13-AC3 | Hybrid release gate: diff categories listed (expected tripwires: none); production-bundle secret grep clean; preview deployed to the elitez-lms Pages branch alias; production deployment unchanged (verified by comparing the production deployment ID before and after). | pass | Diff categories UI/CSS only; secret grep 0; preview on its own project; production unchanged |
RD-13-AC4 | A fresh visual verdict (Opus, high) on the preview against Keith's drawings per page group: pass, or the revise items are fixed. | pass | verdict r1 REVISE -> 8/11 fixed; r2 done |
RD-13-AC5 | The before/after report (exec summary, before/after per page group, walkthrough recordings per role, AC ledger, known gaps) is deployed on its own public link; draft PR opened to derrick-pixel/elitez-lms (not merged). | pending | This report (deploy by orchestrator); draft PR https://github.com/derrick-pixel/elitez-lms/pull/14 |
Reviewers: lane code reviews by Claude Sonnet 5.5 (high) in fresh contexts; rechecks by Claude Haiku/Sonnet 5.5 and one by OpenAI gpt-6.1-sol during a rate limit; visual verdict by Claude Opus 5.5 (high). 29 review or recheck tasks in the task log.
What each person sees right after signing in on the new preview (demo accounts), desktop and phone.
Main action
Browse training
Reach
On the first screen: 1 tap on desktop and phone
Main action
My Team
Reach
1 tap from the menu on desktop; 2 on phone (open menu, then My Team)
Main action
Add / manage employees
Reach
On the first screen: 1 tap on desktop and phone
Tracked in the GitHub epic #668 and Linear ELI-2606. Change request: https://github.com/derrick-pixel/elitez-lms/pull/14.
Out of scope by your rule “no new features”; each needs backend work and Derrick's agreement.
Left as they were to keep this release look-only.
For Derrick; not caused by the redesign.
The test accounts cannot open them; they were checked in demo and sample-data mode.
derrick-pixel/elitez-lms branch redesign/meridian-ui @ 4d5680daf1aa3888648315c97047f7886125bab2; base main @ 28444dbRELEASE preview r4: meridian-lms-preview deployment bdbefd4f @ 4d5680d; prod body sha unchanged 1d70cb0c….Production before preview (2026-10-24): - elitez-lms latest production deployment: 58770597-9231-4ccd-a6e9-55966a0d4204 (main @ 6ddf2a8, 1 week ago) - lms.elitez.com.sg / etag "c54cce73db792d28798be4ec47aa3077", body sha256 1d70cb0c941fb3aa88cfe129fa91a03ba82cfc55ff486ef54c33ccbea8323347
RELEASE preview r4: meridian-lms-preview deployment bdbefd4f @ 4d5680d; prod body sha unchanged 1d70cb0c….28444db; after: integrated captures of 4d5680d (demo, sample data, dark). Live captures exist but are never used here (real staff data).393e750: 3,301 reads allowed, 26 writes blocked, 0 writes./home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/PLAN.md (chrys-plan lms-ui-redesign v1), task log /home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/ACTIVE-TASKS.md/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/baseline/capture/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/baseline/stub/capture/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/integrated/capture/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/integrated/stub/capture/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/integrated/dark/capture/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/integrated/parity-demo.md/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/integrated/parity-stub.md/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/integrated/clickthrough-compare-demo.md/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/integrated/sweep/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/integrated/hidden/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/live/REPORT.md/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/verdict/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/verdict-r2/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/after/live-final/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/reports/media/walkthroughs/home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/reports/media/landingspython3 /home/t3worker/workspaces/MeridianOS/.planning/lms-ui-upgrade/reports/build-report.py · built 25 Oct 2026, 01:07 UTC · pending markers: none