MyGuava Design System

I designed a shared system of tokens and reusable components for consistent, customizable MyGuava interfaces.

  • RoleLead Product Designer
  • PeriodJanuary–June 2026

Challenge

Keep interfaces consistent across products while allowing merchants to express their brand.

Solution

I built a shared foundation of design tokens, reusable components and flexible themes.

Outcome

A flexible design system with ready-made themes and full control over page styling.

0+Ready-made themes0%Customizable page styling

Goals

Unify desktop and mobile interfaces, support brand customization and simplify future updates.

Architecture

Shared tokens define colors, typography, spacing and corner radii, keeping visual changes consistent across components.

Color tokens

Global Tokenbrand/600
Alias Tokenbackground/brand
Component Tokenbutton/primary/background/rest
Button

Radius tokens

Buttonradius-noneradius/none
Buttonradius-smallradius/s
DefaultButtonradius-mediumradius/m
Buttonradius-largeradius/l
Buttonradius-fullradius/full

Components

Handoff

Component states, variants and usage guidelines give designers and developers a shared reference.

Best Practice

  • Use only one primary button per section or screen.
  • Don’t disable a button without providing context.
  • Avoid using too many variants together.
  • Keep labels short and actionable (“Save”, “Continue”).

Don’ts

  • Don’t use primary and destructive buttons side by side.
  • Don’t use buttons for navigation (use links for that).
  • Avoid placing multiple loading buttons on one screen.

States

StateDescription
RestIdle, ready to be clicked
HoverHighlighted on mouse over
PressedButton is being activated
FocusVisible focus ring for keyboard
DisabledAction not available
LoadingSpinner replaces label
Full size image
100%