Process
The work began with a comprehensive audit of existing interfaces. A UI inventory was created by cataloguing every button, form field, and typographic style across the product. Redundancies and inconsistencies were identified, and feedback from developers was incorporated to ensure technical feasibility.
The system was then structured according to atomic design principles, where components were organised as atoms, molecules, organisms, templates, and pages. Small elements such as buttons scaled into larger patterns like authentication flows, ensuring consistency while allowing flexibility.
Three pillars supported the design system: foundations, components, and documentation. Foundations established the brand’s visual building blocks, including colour palettes, typography, spacing rules, and iconography. Components such as buttons, inputs, modals, and navigation patterns were designed, documented, and paired with usage guidelines and code snippets. Each element was tested for accessibility and aligned with engineering requirements to enable smooth adoption.
Collaboration played a central role. Workshops were conducted to introduce the system, and naming conventions were established to bridge design and code. Developers were closely involved so that design tokens could be integrated directly into front-end frameworks. Documentation was hosted in Figma for designers, while developer-aligned tokens ensured consistency at the code level.
Building a design system for a tech startup
Creating consistency and scalability across web and mobile products
As Hammoq’s product suite expanded, inconsistencies emerged across web and mobile platforms. Different teams were re-inventing patterns, and developers faced challenges with inefficient handoffs. To address these issues, a scalable design system was developed using atomic design principles, bringing clarity, efficiency, and consistency to both design and development.
Context and Problem
As multiple products were designed in parallel, the lack of a shared visual language led to disjointed interfaces and redundant work. Buttons, forms, and navigation elements looked different from one feature to another, while developers spent time rebuilding similar components in silos. The challenge was clear: a unified design language was needed, one that could work seamlessly across platforms and scale as the product evolved.
Atomic Architecture
The system was structured using Atomic Design so that foundations could scale predictably into flows:
Atoms (colour, type, grids, spacing, icons, elevation) formed the base vocabulary; Molecules (buttons, inputs, chips, messages, tooltips) combined atoms into functional units; Organisms (navigation bars, calendars, footers, collections) composed screens; and Templates/Pages defined layout structures that could be populated with content. This layering made reuse explicit and implementation reliable.
Testing and Iteration
The system was tested continuously as implementation progressed. Components were trialled within live product flows to uncover gaps and edge cases, while developers validated ease of implementation. Feedback loops were intentionally kept short, enabling rapid resolution of issues. Several iterations were made, including refinements to component flexibility, improvements to documentation clarity, and the expansion of component variants to cover real-world use cases.
Outcomes
The resulting design system established a unified language that changed how products were built at Hammoq. Interfaces across web and mobile were standardised, reducing cognitive load for users and improving overall experience. Development time was shortened as reusable components replaced redundant builds, and handoffs between design and engineering became more efficient. Comprehensive documentation and structured onboarding supported smooth adoption, embedding the system into everyday workflows.