Building the Fynbos App Design System for consistency, clarity and speed.
Context
As Fynbos evolved from early product prototypes into a live investment platform, it became essential to create a unified design system that could scale efficiently across web and mobile. The goal was to ensure visual and functional consistency while improving collaboration between design and engineering.
Role
Head of Product Design
Goal
Develop a design system in Figma that combines Tailwind CSS and Material Design principles to streamline UI development and strengthen the Fynbos visual identity.
Challenge
The product was expanding quickly, with new features and interfaces being added at pace. Without a shared design foundation, visual inconsistencies and duplication of work began to surface. The challenge was to define a flexible system that maintained Fynbos’s minimalist, confident brand aesthetic while supporting technical implementation in Tailwind and Material-based frameworks.
Approach
I designed and documented a comprehensive design system in Figma that served as a single source of truth for both designers and developers.
Established core foundations including layout grids, spacing scales, colour palette, typography, iconography and motion principles.
Created component libraries that mirrored Tailwind utility classes and Material Design guidelines for seamless implementation.
Defined clear naming conventions and usage documentation for faster, more consistent development.
Collaborated with the engineering team to align Figma components with production-ready Tailwind classes and Material tokens.
Ensured accessibility and responsiveness across all breakpoints to maintain usability and brand clarity.
Outcome
A cohesive design system that improved product consistency and reduced design-to-dev friction.
Significantly faster design and build times through shared components and clear documentation.
A scalable visual language that supports the future growth of the Fynbos platform and maintains a strong, unified brand presence.
A flexible system that balances Tailwind’s speed and precision with Material’s usability and design depth.
