Case study
Design System
A scalable design system that unified UI patterns across product teams.
- Role
- Design system lead
- Team
- Design, Engineering, Product
- Timeline
- 1 year+
Overview
Worked on maintaining the design system for products and digital experiences. With the Design Language as its foundation, the system consists of working code, design tools and resources and a human interface guidelines.
Naming convention
We applied a system of variables used for component-based tokens to ensure consistent naming and usage across the design system, making it easier for designers and developers to collaborate.
Dimensional tokens
Dimensional tokens define spacing, sizing, and layout values that create visual rhythm and consistency across all components and interfaces, providing a foundation for responsive and scalable design.
Color tokens
A comprehensive color token system with carefully selected palettes for semantic meanings such as primary, secondary, success, warning, and error states. Each token adapts intelligently to light and dark modes.
Design variables
Design variables provide default settings for specific usages including surface colors for backgrounds, text colors for readability, border colors for definition, and state variables for interactive elements, enabling quick and consistent component styling.
Patterns
