CPF Design System
creative technologist
·
2023
Designed new components and maintained a design language system deployed across Singapore's government digital services.
Designed new components and maintained a design language system deployed across Singapore's government digital services.
Problem & Solution
CPF Design Language System (DLS)
Contributed to and helped maintain CPF's (Central Provident Fund Board) Design Language System — a React component library that standardised UI across CPF's digital products. Built with React, TypeScript, and Sass, and documented end-to-end in Storybook, giving designers and developers a single source of truth for components, foundations, and usage guidelines.
The Challenge
A new product initiative called for components that didn't yet exist in the system. Extending a mature, widely-adopted library meant new components had to slot in cleanly — consistent with existing patterns, without introducing breaking changes or fragmenting the system.
How We Got There
We worked closely with CPF's internal design team to design and build the new components, making sure they matched the DLS's existing conventions in structure, styling, and documentation. Each addition went through the same Storybook documentation process as the rest of the library, keeping the system coherent as it grew to support new use cases.
Results
Faster delivery for the new initiative — teams building the new product could pull ready-made, on-brand components instead of building from scratch
Consistent design language maintained — new additions matched existing DLS patterns closely enough that designers and developers couldn't tell old from new components
No breaking changes — new components shipped without disrupting existing screens or workflows across CPF's product teams