UI Design System
Industry
Retail
Client
Felix Mobile
Service
UI Design
Date
2022
Felix required a scalable UI foundation to support marketing pages, app content, and future product expansion. The goal was to create a modular design system that ensured consistency, flexibility, and rapid page assembly across teams.
SCOPE
My tenure at Felix Mobile focused on defining foundational tokens, building reusable components, and demonstrating real-world implementation through assembled desktop layouts.
DESIGN TOKENS
To ensure scalability and long-term maintainability, the system was built from foundational design tokens and structural rules.
Key elements included:
Defined primary and secondary colour tokens
Established typographic hierarchy across display, heading, and body scales
Defined spacing system and layout rhythm for consistent vertical alignment
Standardised grid system
UI-specific semantic colours (error, valid states)
These foundations enabled consistent visual language across all modules and future extensions.
COMPONENTS
With the foundations established, I developed a set of reusable UI components that could be combined to build consistent, scalable pages.
Components included:
Button hierarchy (primary, secondary, link styles)
Card modules for feature and content presentation
Icon system aligned to Felix’s brand tone
Semantic states (error, success, validation)
Structured content groupings for predictable layout behaviour
Each component was designed to be flexible enough for multiple use cases, while maintaining visual consistency across the system.
MODULES
The system was structured around configurable modules that could be rearranged to build multiple page types without redesigning layouts from scratch.
Section modules included:
Multiple hero/banner variants
Feature grid layouts
Carousel components
Plan comparison blocks
Testimonials
App/content feature sections
Purpose and brand narrative modules
This modular approach allowed for rapid assembly of marketing pages while maintaining consistency across variations.
PAGES
Using the defined foundations and components, full desktop and mobile layouts were assembled to demonstrate flexibility across themes and content structures.
Examples included:
Marketing landing pages
Plan explanation pages
Feature-driven content pages
Header variations with interchangeable hero structures
OUTCOME
The modular design system enabled marketing and product teams to assemble new pages quickly using predefined UI blocks, reducing the need for ad-hoc design decisions and improving cross-page visual consistency.
Support for light and dark themes ensured the system could scale across future product surfaces, while structured documentation provided a clear foundation for ongoing design expansion.
By approaching the project as a system rather than isolated screens, the work supported both immediate marketing needs and faster iteration for future product updates.