A living design system for WhatsApp business.

TL;DR

A comprehensive, living design guide covering the full range of business message types available on WhatsApp, from marketing and utility templates to payments. As sole designer, I created and continue to maintain this system, ensuring consistency across a complex product surface that spans multiple markets, payment methods, and regulatory environments.

A Single Source of Truth

Businesses on WhatsApp can communicate with customers in a wide variety of ways: order updates, payment requests, promotional offers, and more. Without a unified design guide, experiences risked becoming inconsistent across business types, markets, and use cases.

The goal was a single, authoritative design reference for business messaging on WhatsApp: documenting all message types, establishing design patterns, and giving teams a framework to evaluate and extend the system over time.

Each message type is documented as a Figma component with received (white) and sent (green) states, with a consistent anatomy: optional header, body text, footer, timestamp, read receipts, and action CTAs. The result is 30+ reusable components with 80+ configurable properties, used by designers across WhatsApp and Meta on Android, iOS, and web.

Payments

Payments on WhatsApp are among the most complex design challenges on the platform. Each market has distinct regulatory requirements, local payment infrastructure, and user expectations. This makes testing uniquely difficult, requiring local phone numbers and bank accounts to validate flows in-market.

Each payment component was built as a Figma variant with supporting documentation, giving teams a consistent, adaptable foundation regardless of local requirements.

Studio Sessions

Open design reviews run by the core WhatsApp Design System team. As the business messaging representative on the panel, I was able to capture issues early, point work in the right direction, and maintain direct visibility into platform decisions. The sessions provided early access to upstream changes and a regular feedback loop with designers across WhatsApp and Meta, ensuring the Business Messaging design system stayed aligned with the broader platform.

Vibe-Coded Prototypes

Alongside Figma components and documentation, I vibe-coded the business messaging bubbles directly into the official WhatsApp internal prototype APK, ported from the product system files, token-compliant, and dark mode ready.

Dark