About the Product

MyGuava Business Payment is a payment management platform designed for the CPG sector. The platform is used by merchants of all sizes — from local retailers to international chains. The challenge was to create a design system that is both consistent across the product and flexible enough to allow each merchant to customize the interface to match their brand.

MyGuava Design System project

Design System Goals

  • Establish a unified visual language across all interfaces (desktop + mobile)
  • Enable merchants to customize the interface to reflect their brand
  • Simplify scaling, maintenance, and feature development
  • Improve overall UX and UI quality through systemization
Design System Goals

System Architecture

1. Color Tokens

Color Tokens

2. Radius Tokens

Radius Tokens

3. Typography

Typography

Components

We followed an atomic approach and organized components into three levels:

  • Base Elements – Buttons, Inputs, Icons, Tags
  • UI Modules – Forms, Cards, Tables, Navigation, Alerts
  • Product-Specific Components – Payment Summary Block, Transaction Row, POS Keypad
Components
Components continued

Developer Handoff

Comprehensive documentation including component specifications, usage guidelines, and implementation details for seamless development integration.

Developer Handoff Documentation