Whispering Infinity — Design System
The visual and interaction system behind Whispering Infinity's app — and eight real UX problems it was built to solve.
Overview
Context & Transition
Alongside the Whispering Infinity mobile app itself, the design system's job is to make it possible for a large team recurring on the challenge, the same underlying practice while the app grows in scale and product surface.
Approach & Designing for Judgement
Rather than patch each screen individually, I treated every design decision as a challenge worth its own study, then documented as tokens or the same reasoning could be reused the next time a similar problem was needed.
The Design System
Purple / pink token scale
A full 50-900 purple scale plus a lavender-accent alternate palette, tuned for meditative meditation screens.
Typography & spacing scale
A display-to-caption type scale with a consistent 4pt spacing rhythm used across every component.
Component library
Buttons, badges, form inputs, cards and media player controls documented in every variant.
A curated icon set
27 lucide-style icons mapped to app actions with play, save, share and the rest of the core icon library.
Eight Design-System Case Studies
Content Card System
Navigation Architecture
Media Player UX
Modal & Overlay Layer
Playlist Management
Search & Discovery
Color & Accessibility
Responsive Layout System
Outcome
The eight case studies became the design system's own charging dock — navigation resolves in three clear tiers, and every overlay shares one elevation and motion language. Every text/background pairing in the app passes WCAG AA at an average 4.6:1 contrast ratio.