Why do we need a design system?

What happens when you grow without a system?

Cappfinity’s growing product ecosystem had evolved with a bit of a scrappy start up energy. New features were spun up to meet immediate client needs without much regard for the broader technical architecture and design. Over time, this led to siloed experiences that reflected the preferences of individual teams more than Cappfinity. Without a common system to guide design decisions, consistency, usability, and scalability suffered. We needed a design system to bring cohesion and lay the foundations for productisation.

Foundations

You can’t fix what you can’t see

By mapping existing components, patterns, and usage across products, we identified gaps, inconsistencies, and areas of opportunity. This audit allowed us to turn a scattered ecosystem into a roadmap for change.

Collaboration

Working together to define the boundaries

By combining intra-product Same/Similar/Different mapping with cross-product component analysis, we created a shared understanding of where we could enforce alignment and where flexibility was needed. This collaborative process brought together product context, user needs, and technical considerations, helping me to begin to define the system structure.

Systematisation

Orbiting a single source of truth

This structure solves the challenge of systematising a complex product suite by anchoring consistency at the token level, while progressively allowing flexibility outward, so product teams can meet local needs without compromising global integrity.

Governance

Closing the loop between design and development

I introduced a Continuous Improvement Loop Model, using Figma and Storybook as tools, to improve communication, reduce drift, and support long-term maintenance. Paired with robust documentation in our Digital Media Toolkit, it ensured the system stayed usable and high quality.

Solution

Design system in action

Here’s how the system shows up in the real world. Every example demonstrates how shared foundations and scalable components create a more cohesive, efficient product experience without sacrificing brand nuance or product-specific needs.

Foundations and primitives

These foundational tokens ensure consistency across the system while allowing for theming for different brands and product types.

Design to code

Semantic tokens and structured overrides allowed for brand and product-specific variants, supporting different platform nuances, and UX goals, all while maintaining a a visual through line.

Between product type variations

Different platforms had unique UX and UI demands. The system had to support visual and functional divergence at the product level while preserving a shared foundation. This was enabled through themed tokens and product-level variants, backed by clear governance to manage how far components could flex without fragmenting.

Within product type variation

Within a product type variation was sometimes necessary. For example, adapting hero layouts on the B2C e-commerce site to better support conversion. These were handled through prop-based flexibility and scoped semantic tokens. The system had to make space for this kind of nuance without duplicating components or losing consistency.

Accessible by design

Mobile-specific guidelines and responsive variants ensure that components adapt smoothly to different screen sizes, supporting intuitive experiences across product types and use cases.

Documentation to support maintenance

Mobile-specific guidelines and responsive variants ensure that components adapt smoothly to different screen sizes, supporting intuitive experiences across product types and use cases.

Kimberley Christina

KC

Powering design and development at Cappfinity

What happens when you grow without a system?

You can’t fix what you can’t see

Working together to define the boundaries

Orbiting a single source of truth

Closing the loop between design and development

Design system in action

Foundations and primitives

Design to code

Between product type variations

Within product type variation

Accessible by design

Documentation to support maintenance

Laying the foundation for growth and scale

A cohesive design system supporting 10+ digital products

40+ reusable, accessible components created

Adopted across 4 digital products, with active contribution from design and engineering

More to explore

Cappfinity Design System Showcase

FORTH Website Showcase

Let's connect

Email

CV