Yappes Design system
Overview
In Yappes Technologies, product team was designing with minimal guidance, resulting in inconsistent UI. To address this, I initiated and built the Yappes Design System, a unified foundation that standardises the company’s visual language and accelerates product development.
The system adapts and extends the Mantine Design System, rebuilding component behaviours and accessibility layers to align with Yappes, while maintaining WCAG-compliant accessibility across platforms.
Goals & Objectives
Foundation
Color Palette
The original Yappes color system focused on bright orange and blue but lacked structure for accessibility and semantic usage in the new design system, I expanded the palette into primary, secondary, primitive, semantic scales, each with tone steps (25–900) to enhance contrast control and theming flexibility.
The result is a more scalable and brand-aligned palette that maintains Yappes system.
Foundations
Typography
Yappes products used Source Sans Pro and Open Sans, which offered good readability but lacked a distinct brand personality. I introduced Poppins as the primary typeface. Its geometric letterforms and circular proportions bring a modern, structured feel.
New type scale defines clear hierarchy levels (H1–H6, body, captions) with consistent line heights and spacing, mapped to semantic text tokens.
Foundation
Icons
In the earlier, icons were implemented inconsistently - a mix of outlined and filled styles sourced from different libraries such as Material, React Icons, and other quick finds.
As part of the design system, I established a unified iconography framework using Material Symbols – Rounded style, maintaining a consistent weight (400) and grade (0) across all use cases.
Foundations
Grid & Spacing System
Grid and spacing system ensures visual rhythm, alignment, and consistency across all Yappes products.
Spacing System
To remove guesswork and maintain consistency, spacing is defined using a modular scale based on 4px. This system standardises padding, margins, and gaps across components and layouts.
Radius System
Border radius tokens ensure consistent corner treatments and visual smoothness across UI components.
Grid Layout System
The grid defines the spatial structure and rhythm across layouts, ensuring alignment and scalability. Desktop to smaller screens, supporting a consistent rhythm between content blocks, sidebars, and cards.
Foundations
Breakpoints & Responsive Behaviour
To ensure the design system scales smoothly across devices, I defined a clear breakpoint structure for both screen sizes and content areas.
UI Elements
Buttons
Created a unified button framework built on semantic tokens for color, radius, spacing, typography, and interaction states. The system includes a clear hierarchy of Primary, Secondary, Ghost, Outlined, and Text buttons, each designed to work across light and dark themes.
Each variant follows a shared anatomy consistent padding, icon gaps, and spatial rules and includes accessible states for hover, active, focus, and disabled.
UI Elements
Input Fields
Defined a unified input with a clear anatomy: label, field container, placeholder/input text, helper text, error message, and optional leading or trailing icons.
The system includes multiple input variations such as default fields, compact fields for dense UIs, text-areas, and inputs with leading or trailing drop-downs or prefixes.
UI Elements
Checkbox, Radio & Toggle
Checkboxes and radios now follow a shared anatomy with predictable spacing, clear labels, optional supporting text, and full state coverage - default, hover, focus, selected, indeterminate, error, and disabled.
Toggles were redesigned with default, success, and warning states, supporting both small and large sizes with complete on/off states.
UI Elements
Badges
As part of the design system, badges were standardised. Each badge follows consistent padding, typography, and corner radius tokens, ensuring visual alignment across tables, cards, and headers.
UI Elements
Data Table
The table system is designed to support data-dense workflows while maintaining clarity. Multiple system states are built into the component, including loading, empty, error, selectable (checkbox), text-based, and filtered states, ensuring predictable behaviour across scenarios.
UI Elements
Action Bar
The action bar provides a context related to selected content, most commonly within tables and list views. Multiple type of filter types where added to handled consistently at the system level.
UI Elements
Filters
The filter system is built as a drawer-based component, allowing advanced filtering without occupying persistent screen space. It is composed using existing UI elements such as dropdowns, checkboxes, radio buttons, text inputs, and date pickers, ensuring consistency across the system.
UI Patterns
Patterns & repeated screens
UI patterns define how individual elements and components come together to support common user workflows across Yappes products. These patterns focus on repeatable interaction structures such as authentication flows, data exploration, configuration management, and status-driven actions.
By standardising these flows, the design system ensures users experience consistent behaviour and feedback regardless of the product or feature they are using.
Outputs & Impact
The Yappes Design System resulted in a complete, production ready foundation adopted across the platform.
It introduced a structured token system for color, typography, spacing, radius, and elevation, along with a comprehensive component library covering both core UI elements and complex, data-heavy components.
As a result, teams moved from isolated UI decisions to a shared design language, enabling faster iteration and stronger collaboration between design and engineering. Reusable components and tokens significantly reduced rework, allowing teams to focus on solving product problems rather than rebuilding UI foundations.
Key Learning
Note
Designing the Yappes Design System strengthened my ability to think in systems, design for scale, and collaborate closely with engineers to ensure the system remained practical, adaptable, and grounded in real product needs as the platform evolved.