Branding & Identity

A component library and design token system built for scale, covering typography, colour, spacing, and interactive states.

Client
Internal
Role
Lead Designer & Developer
Year
2025
Tools
Figma, React, TypeScript, Tailwind
Branding & Identity - main visual

Overview

The client needed a scalable design system to unify their product suite and accelerate development. The challenge was balancing flexibility with consistency—allowing teams to customise without fragmenting the visual language. We built a token-based system covering typography, colour, spacing, and interactive states, with a living component library and clear documentation.

Process & Concept

Early sketches
Moodboard
Token explorations

Final Designs

Typography scale
Typography scale
Component variants
Component variants
Interactive states
Interactive states

Applications & Mockups

Documentation view
Component in use