Original Capitec input, button and feedback specimens arranged over a modular blue and white sculpture

Capitec Design systems

Capitec Design System

A shared language for consistent banking experiences.

Role: Senior UX Designer
Platforms: Web and mobile
Contribution: Principles, components and QA
Tools: Sketch and Anima

The overview

Capitec had components for its new mobile app, but they were not yet versatile enough for other platforms. The team also needed shared principles to guide consistent decisions across digital products.

The goal

Create a reusable design language for designers, developers and partner agencies.

My contribution

I facilitated workshops, designed and maintained components, prototyped patterns, and worked with the central front-end team on implementation and quality assurance.

Capitec system overview: Hind Vadodara, product colours, form states, actions, feedback, anatomy and file-upload patterns

Agree on what good looks like.

I facilitated workshops to define four principles aligned with Capitec’s values: Client First, Clarity, Consistency and Engagement. They gave teams a common way to evaluate decisions beyond visual styling.

Workshop board of notes used to define Capitec’s design principles — Turning shared values into practical design principles.

Build a common foundation.

We used an atomic design approach, connecting colours, typography, icons and patterns into larger reusable parts. Components needed to adapt their behaviour across platforms while keeping the experience familiar.

Atomic design diagram from atoms through molecules, organisms, templates and pages — A structure for moving from foundations to complete experiences.

Original input states, typed fields, button states and feedback components — Shared components, with their interaction states defined.

Make consistency practical.

The library defined how colour communicates status and action, established a shared digital typeface, and provided custom icons and illustration guidance. Reusable patterns helped teams apply those decisions in real interfaces.

Capitec’s original Transact, Save, Insure and Credit colours alongside five status colours — Product and status colours, each with a clear purpose.

Hind Vadodara with the original headline scale, body sizes and line-height rule — A shared typeface and a practical hierarchy.

Original file-upload pattern with upload progress and error recovery states

Keep design and development connected.

Sketch and Anima supported responsive components, while collaboration with the front-end team and ongoing design QA helped align the library with implementation. The aim was to let developers assemble interfaces from shared components without rebuilding their styles.

Original button usage rules, responsive behaviour, design principles, icon guidance and component anatomy — Usage guidance and component specifications supported design QA and implementation.

Where it landed.

The work created a shared foundation for web and mobile design. Dedicated documentation in Zeroheight and a move to Figma were proposed next steps; neither was completed during my time on the project.

Next project

Capitec Business Banking

Capitec · Product design