WhatsApp for Business

Overview

WhatsApp for Business is a conversational commerce platform that transforms customer interactions into business outcomes. Serving 2+ billion users globally, it enables enterprises to drive engagement, marketing, sales, and customer support through AI-powered messaging. The design aesthetic is "Accessible Minimalism with Conversational Warmth"—a clean, light-dominant interface anchored by WhatsApp's signature vibrant green (#25d366) accent, which signals trust, action, and the human connection at the heart of every conversation. The UI prioritizes clarity and directness: white backgrounds (rgb(255, 255, 255)), deep neutral text (rgb(28, 30, 33)), and generous whitespace create an environment where business messaging feels natural, not corporate. The brand voice is conversational yet professional: precise, empathetic, and action-oriented. Example: "Start conversations that matter—turn inquiries into orders, support into loyalty."

Colors

The color system centers on WhatsApp's iconic green (#25d366 / rgb(37, 211, 102)) as the primary accent—used exclusively on CTAs, active states, and brand-critical interactive elements. This green is not decorative; it signals actionable moments and brand recognition. The surface stack is light-first: white (#ffffff) as the dominant background, with a subtle gray hierarchy (surface-container: #eeeeee, surface-container-high: #e8e8e8) for secondary containers and cards. Dark neutrals (on-surface: #1c1e21, rgb(28, 30, 33)) provide text contrast at WCAG AAA levels. Secondary accent blue (#0693e3) supports data visualization and secondary CTAs; tertiary orange (#ff6900) highlights promotional or urgent messaging. The alert banner uses a deep forest green (#103928) background with white text to

Typography

The type system uses WhatsApp Sans Var exclusively, a custom variable font optimized for legibility across all screen sizes and weights. Display (61px, 400 weight, -0.02em tracking) anchors hero sections with calm authority; headline-lg (40px) and headline-md (28px) structure content hierarchy without visual noise. Body text (16px, 400 weight) is set at the platform's native rendering size, ensuring no forced scaling. Label weights (500) distinguish interactive elements (buttons, badges) from passive content. The type pairing communicates "modern yet approachable": no serifs, no decorative flourishes, just precision. On small labels over busy backgrounds (e.g., badge text on cards), apply text-rendering: optimizeLegibility and letter-spacing: 0.04em to maintain crispness at 12px.

Layout

The layout follows a 12-column fluid grid with a fixed max-width of 1299px, centered on the viewport. Container padding is 20px on mobile, scaling to 48px on desktop (via --wp--custom--site-outer-padding). Section separation uses lg spacing (40px) vertically and md spacing (24px) horizontally between content blocks. The hero section spans full-width with 80px vertical padding and 48px horizontal padding, creating a breathing room that emphasizes the primary message. Cards and content containers use md spacing (24px) internally. Whitespace is intentional: the design avoids cramping, allowing the eye to rest and focus on conversational elements (chat bubbles, message previews). The grid is responsive, collapsing to single-column on screens below 1299px with maintained spacing ratios.

Elevation & Depth

Depth is achieved through subtle shadows and surface color shifts, not dramatic layering. The base level (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields) uses elevation.md: 0 4px 12px rgba(0, 0, 0, 0.08)—a soft, diffuse shadow that suggests a slight lift without visual weight. Level 3 (modals, expanded cards on hover) uses elevation.lg: 0 4px 24px rgba(0, 0, 0, 0.15)—a more pronounced shadow indicating modal prominence. The alert banner at the top of the page uses no shadow, relying instead on its dark background (#103928) and position to establish hierarc

Shapes

The shape philosophy is "Conversational Softness"—rounded corners signal approachability and reduce visual harshness, while maintaining enough definition to distinguish interactive elements. Buttons use full radius (9999px / border-radius: 48px on 48px-tall buttons), creating pill-shaped CTAs that feel inviting and clickable. Cards and containers use lg radius (16px), providing subtle rounding that softens edges without appearing cartoonish. Input fields use DEFAULT radius (8px), a middle ground that feels modern and controlled. The alert banner uses 0px radius (sharp edges) to signal its stru

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses the brand green (#25d366) background, white text (rgb(255, 255, 255)), full radius (9999px), and padding of 12px 48px on a 48px height. Font weight is 500 (medium), size 16px. On hover (button-primary-hover), the background shifts to #1fb854 (a darker green) with a 200ms ease-in-out transition. The secondary button (button-secondary) inverts this: white/light gray background (#dcdcdc or surface-container-highest), dark text (#1c1e21), and a 1px outline-variant border (#c4d0d4). Both buttons use the same dimensions and radius for consistency.

Containers & Surfaces Cards (card) use white background (#ffffff), lg radius (16px), md padding (24px), and elevation.md shadow (0 4px 12px r

Do's and Don'ts

**Do**

• Do use the primary green (#25d366) exclusively for CTAs, active states, and brand-critical moments—never for passive elements or backgrounds.
• Do maintain whitespace generously: use lg spacing (40px) between major sections and md spacing (24px) between related content blocks to avoid cognitive overload.
• Do apply full radius (9999px) to all buttons and interactive pills to signal approachability and conversational warmth.
• Do use WhatsApp Sans Var at 16px body size with 400 weight for maximum legibility; never force smaller sizes without explicit UX justification.
• Do layer shadows subtly: elevation.md for cards, elevation.lg for modals—never use harsh, dark shadows that feel heavy or corporate.

**Don't**

• Don't use the primary green for backgrounds, borders, or decorative elements—reserve it for interactive moments only.
• Don't apply sharp corners (0px radius) to buttons or cards; the brand relies on softness to feel conversational.
• Don't mix font families; WhatsApp Sans Var is the sole typeface—system fonts or serif alternatives break brand coherence.
• Don't exceed 3 levels of visual hierarchy in a single section; too many font sizes or colors fragment attention.
• Don't use dark overlays or heavy shadows to create depth; the light surface stack and subtle elevation system are sufficient.