What happened
The Choco web client received a complete visual rebrand across 5 structured phases. The old humanoid mascot was replaced with a cocoa bean character matching the GitHub organisation avatar. Multiple hidden bugs were found and fixed — fonts that never loaded, dark mode that was only partially working, and colours that didn’t meet accessibility standards.What was wrong
Three problems had been silently degrading the product since the initial scaffold:- Fonts weren’t loading. The design called for Inter and JetBrains Mono. The CSS referenced them, but nobody had connected the actual font files. Every visitor saw generic system fonts instead of the intended typography.
- Dark mode was broken. It switched the page background but left all the cards, buttons, and text in light-mode colours. On a dark screen, you’d see white cards floating on a dark background — unusable.
- Text was hard to read. The muted text colour didn’t have enough contrast against the cream background, failing accessibility standards (WCAG AA).
What we did
The work was split into 5 phases, each independently verified with a full production build before moving to the next:- Typography and colour fixes — Connected fonts, fixed dark mode across all components, improved text contrast.
- New mascot — Redesigned from humanoid Oompa Loompa to a cocoa bean with five expressions. Appears on 26 pages — all continued working without changes because we kept the same interface.
- App icons — Created a cocoa bean favicon (the small icon in browser tabs), an Apple touch icon, and a web app manifest. Previously there were no working icons at all.
- UI component polish — Improved buttons, cards, badges, and navigation with better shadows, hover effects, and golden accent colours on active items. Created a reusable statistics card component.
- Page layouts — Applied the new statistics component across all 7 factory room pages. Improved the floor plan hover effects, tour wizard progress bar, 404 page, and factory welcome page.
Business impact
Before: The web client had invisible quality issues — wrong fonts, broken dark mode, missing favicon, accessibility failures. These undermine credibility with technical users who notice these details. After: A visually coherent product with a distinctive cocoa bean identity, proper typography, working dark mode, browser icons, and polished interactions. 20 files modified across 18+ pages, all passing production build.Action items
- Visual QA in browser — verify cocoa bean character renders correctly at all 3 sizes
- Test dark mode toggle across all factory room pages
- Verify favicon appears in browser tabs on Chrome, Safari, Firefox
- Validate colour contrast with automated accessibility scanner
- Consider connecting dashboard statistics to live backend data (currently placeholder values)