Standard Bank Design System
The design system was created to establish a single source of truth, where designers and developers can access the latest branding, foundational elements, guidelines, components and templates to use in feature or product implementation.
Project Overview
Role:
Design System leadership(current), UI Designer (previously)
Company:
Standard Bank CIB
The Authenticated Web Design System was created to unify and scale the design language across authenticated digital platforms at Standard Bank.
What began as a component library initiative evolved into a cross-functional design-to-code system. Over time, my role transitioned from hands-on component builder to Design System Lead, where I now manage delivery, governance, adoption, and cross-team alignment between design and engineering.
Today, the system spans:
-
Figma component architecture
-
Design tokens (variables)
-
Coded web components (Lit JS)
-
Storybook documentation
-
Developer workflow integration
The challenge
After moving to Figma, a pattern emerged:
-
Designers rebuilt components for every new project
-
UI inconsistencies appeared across teams
-
No standardized use of spacing, colours, or typography
-
Handover to developers required clarification and rework
​
This resulted in:
-
Wasted effort
-
Visual inconsistency
-
Slower development cycles
-
Growing UI technical debt
What I contributed
Part A — Design System build (UI Design)
-
Built reusable Figma components (buttons, inputs, containers, accordions, headers)
-
Created usage guidelines and documentation
-
Applied atomic design principles (atoms → molecules → organisms)
-
Maintained and evolved the component library
-
Supported designers with UI queries and design system adoption
-
Collaborated with developers to simplify design-to-code translation
​
Part B — Scaling and leading the design system
I now:
-
Manage roadmap and delivery
-
Oversee governance and contribution processes
-
Drive adoption across teams
-
Support UI designers, UX leads, dev lead, and developers
-
Facilitate design–engineering alignment
-
Oversee scalable rebuild of components
-
Lead operational processes for long-term sustainability
Evolving the Design System
-
We refined our use of atomic design:
-
Fix once, update everywhere
-
Reuse atoms and molecules to build new components
-
Improve long-term maintainability
2. Design tokens
To properly scale, we restructured the system using Figma variables:
-
Colour tokens
-
Spacing (padding & margins)
-
Typography
-
Border radius
This created:
-
Centralized visual control
-
Easier brand updates
-
Cleaner translation into CSS
-
Stronger design–dev parity
3. Bridging Design & Code
We extended the system beyond Figma.
Components are now:
-
Designed in Figma
-
Rebuilt as agnostic web components using Lit JS
-
Documented in Storybook
-
Supported by Code Connect for smoother workflows
This enabled:
-
A true design-to-code pipeline
-
Reduced interpretation during handover
-
Framework-agnostic reuse
-
Improved developer adoption
Governance and adoption
Scaling a design system requires structure.
We implemented:
-
Clear inclusion criteria (shared, reusable components only)
-
Contribution and approval workflows
-
Continuous maintenance cycles
-
Ongoing designer and developer support
-
Balance between flexibility and over-customisation
Result and impact
​
-
Reduced duplicated design effort
-
Increased UI consistency across platforms
-
Improved developer efficiency
-
Reduced UI-related technical debt
-
Strengthened cross collaboration
Key learnings
​
-
A design system is a product, and enterprise capability: It is not just a component library but plays a big role in client experience and company strategy.
-
Iteration and governance: Continuous iteration, maintenance and governance are essential to a design system’s scalability.
-
Token usage and atomic design: Getting these two right ensures the system is easy to maintain and is essential for alignment between design and development.
-
Not everything goes here: To minimise over-customisation and a clunky design system, there must be selective inclusion of components.
-
Driving adoption: To drive adoption across teams requires ongoing enablement, support and collaboration.
-
Alignment: Stronger alignment between design and development leads to reduced rework, duplication and technical debt.