KPiQ Design System
Built "Artemis," a full atomic design system for a fast-growing marketing analytics platform.
The Challenge
As Director of Product Design at KPiQ, I led a team of three designers building an ambitious marketing analytics platform. Without a shared design language, inconsistency was creeping in; components diverged across features, handoffs to developers were slow, and the team was reinventing the same UI patterns repeatedly. We needed a system.
A design system is a collection of reusable components and guidelines that maintains consistency while improving efficiency, collaboration, accessibility, and usability. We researched industry examples from Material Design, Ant Design, and Shopify Polaris before building our roadmap.
Iconography
KPiQ is a large product with extensive iconographic needs. Rather than spend time and resources creating hundreds of icons from scratch, we purchased a library from UntitledUI and made custom modifications where needed. This let us move faster while maintaining a cohesive visual language.
Color and Typography
We used Figma variables to create an accessible color palette meeting WCAG standards, verified with the Stark plugin. For typography, Inter was selected for its versatility across web and mobile applications, with multiple weights and OpenType features made it a strong fit for a data-heavy product.
Grid and Components
An 8px grid system was implemented to align elements consistently across the product. Components followed atomic design methodology, organizing into atoms, molecules, organisms, templates, and pages. Features include auto-layout, variants for different states, and full light/dark mode support.
"Artemis gave our external dev team one clear source of truth to build against — we stopped chasing which Figma file was current."
— Engineering lead, KPiQ
The Outcome: Artemis
The system, named Artemis, delivered measurable improvements: enhanced designer efficiency and productivity, improved team collaboration with a single source of truth, increased product quality and consistency, and better accessibility features throughout the product.
Challenges and the Road Ahead
Figma's cloud-based nature requires internet connectivity and the tool was evolving fast, and components sometimes needed reworking for new features. There's also no automatic code generation, which still requires close developer coordination. Plans for Artemis include expanding components, improving documentation via Storybook or Zeroheight, testing usability, and deepening team education.