Yappes Design system
Feb 2025 - May 2025
Overview
When I joined Yappes Technologies, each product team was designing in isolation - resulting in inconsistent visuals, repetitive component creation, and longer delivery cycles.
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 provides a shared source of truth for designers and developers through theming, design tokens, and reusable components.
Built by adapting and extending the Mantine Design System, I customised its token structure, component behaviours, and accessibility layers to align with Yappes’ brand language and product requirements, ensuring consistency in color, typography, and interaction patterns while maintaining WCAG-compliant accessibility across platforms.
Beyond visual harmony, the design system strengthened collaboration between design and engineering teams, reducing handoff time and enabling faster, more reliable releases.
Goals & Objectives
Establish a unified visual language that aligns all Yappes products under one consistent design identity.
Streamline design-to-development handoff through the use of design tokens, documented component behaviours.
Enable scalability by creating flexible foundations adaptable to future products and features.
Ensure accessibility and usability by adhering to WCAG 2.1 AA standards and inclusive design principles.
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, and neutral scales, each with tone steps (25–900) to enhance contrast control and theming flexibility.
These refinements ensure consistency across light and dark modes, provide semantic mapping for UI states (text, background, error, success), and align with WCAG 2.1 AA accessibility standards.
The result is a more scalable and brand-aligned palette that maintains Yappes’ energetic orange and trustworthy blue while improving legibility and usability across all digital products.
Typography
Earlier Yappes products used Source Sans Pro and Open Sans, which offered good readability but lacked a distinct brand personality. Their neutral tone made interfaces feel generic and inconsistent with Yappes’ evolving, technology driven identity.
To establish a stronger visual voice, I introduced Poppins as the primary typeface. Its geometric letterforms and circular proportions bring a modern, structured feel that reflects Yappes’ focus on precision and innovation.
The new type scale defines clear hierarchy levels (H1–H6, body, captions) with consistent line heights and spacing, mapped to semantic text tokens in Figma for design-to-dev parity.
This shift elevated the product’s visual tone from neutral to modern and confident, improving readability, rhythm, and brand cohesion across all Yappes interfaces.
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. This lack of consistency created visual noise and weakened the overall interface harmony.
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. The rounded style complements the geometric nature of the Poppins typeface and aligns with Yappes’ approachable yet modern visual tone.
This shift eliminated style fragmentation, improved scalability, and enhanced UI clarity — making the overall experience visually consistent and easier to interpret at a glance.
Grid & Spacing System
The grid and spacing system ensures visual rhythm, alignment, and consistency across all Yappes products. It defines how content and components align responsively across screen sizes, helping designers and developers create balanced layouts faster.
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. This structure creates a centered, flexible layout foundation that scales from desktop to smaller screens, supporting a consistent rhythm between content blocks, sidebars, and cards.
Breakpoints & Responsive Behavior
To ensure the design system scales smoothly across devices, I defined a clear breakpoint structure for both screen sizes and content areas. This keeps layouts readable, centered, and consistent across desktop and tablet environments.
Buttons
Buttons were one of the most inconsistent elements in the earlier Yappes products - used mixed padding, irregular icon spacing, and multiple color variations that didn’t follow a predictable hierarchy.
In the new design system, 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.
Five size presets (sm–2xl) ensure consistency across use cases, from compact toolbar buttons to large hero CTAs. All buttons support leading/trailing icons, icon-only versions, and keyboard-friendly focus states.
Each variant follows a shared anatomy consistent padding, icon gaps, and spatial rules and includes accessible states for hover, active, focus, and disabled. The result is a flexible, scalable button system that reduces visual noise, strengthens hierarchy, and improves usability across all Yappes interfaces.
Input Fields
Defined a unified input framework with a clear anatomy: label, field container, placeholder/input text, helper text, error message, and optional leading or trailing icons. This structure ensures predictable behavior across all form elements.
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. All inputs support a full set of interactive and validation states default, hover, focus (with accessible focus ring), filled, error, disabled, and read-only.
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 a simple track-and-thumb structure and semantic color types for default, success, and warning, supporting both small and large sizes with complete on/off states.
Next item
How might we develop a user-friendly platform that is easy to use for delivery personnel by integrating various types of delivery jobs, such as food, e-commerce, and grocery deliveries. while also solving client requirements.
Next item
How might we develop a user-friendly platform that is easy to use for delivery personnel by integrating various types of delivery jobs, such as food, e-commerce, and grocery deliveries. while also solving client requirements.