Preview image. Unlock full-res
Warm, secure communication.
WhatsApp's visual system evokes a friendly, secure communication platform. It builds upon a soft, warm neutral base with a consistent, vibrant green acting as the core accent for primary calls to action. Rounded forms are prevalent, especially in buttons and imagery, contributing to a welcoming, approachable feel. Typography is direct and legible, maintaining clarity within a spacious layout. The overall impression is one of calm competence. Use Forest Green (#25d366) exclusively for primary action button backgrounds and critical active states. Do not use it for text or borders (unless outlined button). Apply a 50px border-radius to all buttons and input fields to maintain the soft, rounded aesthetic. Utilize Warm Canvas (#fcf5eb) as the default page background for sections, creating a consistent light foundation. Pair Midnight Graphite (#1c1e21) for primary text and headings against lighter backgrounds like Warm Canvas (#fcf5eb) or Pure White (#ffffff). Maintain generous padding of 16px vertically and 28px/32px horizontally for buttons to ensure clear touch targets and visual comfort. Structure primary content areas with a default vertical spacing of 64px between sections. Use WhatsApp Sans Var for all text hierarchy, with weights 400 for body and 700 for high-impact headlines and calls to action. Avoid using bright, saturated colors for decorative elements; stick to the defined accent and brand colors for functional highlights only. Do not introduce sharp, angular corners; all interactive elements and image containers should adhere to 25px or 50px radii. Do not add drop shadows to cards or primary elements; the design relies on flat surfaces and clear visual separation through background colors and spacing. Refrain from using thin, light fonts larger than body text; important headings should be WhatsApp Sans Var weight 700. Do not use multiple font families; WhatsApp Sans Var is the single typeface for all UI elements. Avoid tight element spacing; ensure a minimum of 16px gap between interactive elements and content blocks. Do not use dark backgrounds indiscriminately; reserve Dark Forest (#111b21) for specific footer or input contexts.
