After years of working with design systems that looked perfect but acted broken, I wanted to create something cleaner, smarter, and actually usable. I studied systems from everywhere and realised most of them failed in real-world setups. This project is my answer to that frustration, shaped with clarity, accessibility, consistency, and logic.
Inconsistent UI, unpredictable components, dark mode disasters, confusing spacing, and developers guessing what designers meant. Teams lost time, users got confused, and the product suffered. I wanted a system that removed the confusion and brought structure back to the product experience.
Since 2019, I noticed the same patterns over and over. Systems looked beautiful but felt painful to customise. Dark mode lived in a different universe. Spacing was a gamble. Developers kept asking what the design actually meant.
So I built a system using Material for structure and my CSS logic and visual identity layered on top. The perfect mix of stability and flexibility.
I wanted a system that stays simple but powerful, reduces cognitive load, behaves predictably, is accessible by default, and scales without drama. These principles shaped every decision and kept the system clean.
This system is informed by studying a hundred design systems, observing user behaviour, analysing product inconsistencies, and learning from developer pain. Modern UI trends and accessibility standards shaped its structure and behaviour.
The audit phase revealed spacing chaos, duplicated components, unclear states, broken shadows in dark mode, and colour tokens that meant nothing. Once I saw the gaps clearly, it was easy to define what the system needed to solve.
The architecture uses a simple multi-layer approach. Material provides engineering stability. My CSS layer adds personality and clarity. Tokens control colour, spacing, typography, surfaces, and states. Figma components are built for speed with clean properties. Everything fits together without friction.
