Singpass Component Library
Design infrastructure serving 5M+ users.
Role
Product Designer
Duration
Ongoing
Outcome
· Unified design across app and web platforms· Aligned visual language for 4 web products
Singpass app background
In 2021, the Singpass app underwent a rebrand in tandem with the digital NRIC launch. The design system needed to evolve to support this new visual direction and scale across growing product needs.
Singpass app from 2018–2020
Singpass updated visual direction in 2021 onwards
I joined the team during this transition and observed how the team established the updated visual direction and engineering best practices. When several design team members left, I stepped up to extend and maintain the system.
What I built
1. Color token system
Created a comprehensive token structure that cleanly mapped to engineering code, supporting both light and dark modes with consistent implementation across platforms.
2. Responsive components
Designed new components with built-in responsiveness, ensuring consistent experiences across different screen sizes and devices.
Defining drawer heights in percentages instead of pixels
3. Platform-specific components
Built separate component libraries for iOS and Android, respecting each OS's native patterns and interaction models while maintaining visual consistency.
Tackling Web Fragmentation
The Singpass app had a cohesive system. The web products didn't. User portal, developers' portal, Corppass, and Findex were each built on different libraries by different designers, creating inconsistency and technical debt. During a management change, I stepped up to align them.
4 products, 4 visual languages
Singpass Web Design System
Building the Foundation
Trustworthy yet approachable
We handle citizens' most sensitive data. Design must earn that trust while staying approachable.
Clear and functional
Reduce cognitive load in high-stakes moments.
Accessible and inclusive
Serve all Singaporeans regardless of ability.
Modern and confident
Signal the future of digital identity, not legacy government tech.
My approach
· Started with the Singpass brand guide (human, trustworthy, empathetic) as foundation
· Audited existing color palettes for contrast ratios and accessibility
· Mapped visual traits across all Singpass products, identifying where they aligned and diverged
· Studied government digital services globally, fintech apps, and authentication products to understand how they achieved similar goals
What I built
1. Color system 🎨
79 color primitives and 43 semantic tokens that mapped cleanly to code.
2. Responsive typography scale
Clear hierarchy for content organization.
3. Components library
We built 20 components across different variants and states. Working with 2 other designers, we created a component library that could scale across products while maintaining that "trustworthy yet human" feeling.
Outcome
We now have a unified design language across all Singpass web and app products.
