⚛️ MyKuya's Design System

At MyKuya we were a small team with big ambitions. As we set out to elevate and modernize the product, I knew a redesign alone wouldn't cut it. We needed a foundation that could scale with us, fast.

That's why we built the MyKuya Design System. It let us move quickly without sacrificing consistency, made collaboration between design and engineering so much smoother, and gave the whole team something to rally around. It wasn't just a toolkit, it became the thing that let us build better, together.

After going through the feedback and data on the app's existing design, it was clear that most users found the old style confusing. The product design lead and I sat down and decided the real fix had to start with how our colors, type, and components worked together, not just a fresh coat of paint.

Before we could redesign the app itself, we needed to fix what was underneath it.

To bring some real structure to the system, we leaned on Atomic Design. Breaking the interface down into fundamental building blocks made everything faster to build, easier to maintain, and a lot more intuitive to scale.

Atoms are the foundation of any design system, the smallest, simplest pieces like buttons, labels, and input fields. On their own they're nothing special, but combined they're powerful. As we built more complex components and pages, that atomic blueprint kept us consistent and focused on what actually mattered: a great experience for the people using the app.

Color palette. Together with our developer, we landed on a more contemporary palette: white as the neutral background, blue as the brand color for depth and contrast, and orange as the accent. We built it on the HSB and HSL color models so it would be systematic, and made sure the token names lined up with what engineering was using too.

Typography. Based on the stylescape we'd put together, MyKuya needed to feel friendly but still trustworthy. Poppins fit that brief perfectly, the geometric letterforms and clean spacing gave us exactly the tone we wanted. Since the app was built in Hybrid, we didn't need to juggle multiple typefaces either.

Spacing. We standardized on 8px so the design could scale responsively. Most screen sizes divide evenly by 8 on at least one axis, and it helps avoid anti-aliasing headaches down the line.

Iconography. We kept the icons simple and unobtrusive so they wouldn't add to anyone's cognitive load, and made sure they stayed recognizable even at small sizes.

Input text and buttons. Forms are some of the trickiest things to get right, especially long ones, so we made sure each input's title, placeholder, value, and error state were clearly distinct from each other. For buttons we defined primary and secondary types with their own use cases, and designed placement around how people actually hold and reach their phones.

A design system isn't a one-and-done project, it's a living product of its own. It needs to be used, looked after, and refined constantly. The real win isn't building it, it's making it part of how the team actually works.

That starts with buy-in. Once the whole organization sees how a design system speeds up work, cuts down on inconsistencies, and helps everyone build better, it stops being a side project and becomes a shared mission.

When you have that kind of buy-in, what you've built isn't just a set of components anymore. It's a system that grows with your product and genuinely saves time, effort, and resources. That's when it really starts to pay off.