Wati

Overview

Wati is an enterprise-grade AI customer engagement platform that transforms WhatsApp, Instagram, and Messenger into revenue channels. The design system embodies 'Minimalist Dynamism'—a philosophy that pairs a clean, neutral foundation (white backgrounds, dark text at #1d1d1d) with vibrant accent colors (electric green #00e785, cyan #4fc3ff) to convey speed, reliability, and innovation. The interface is designed for B2B SaaS users who need to process high volumes of customer conversations without cognitive overload; every interaction feels purposeful and responsive. The emotional response is one of calm confidence: users trust that Wati handles complexity so they don't have to.

The brand voice is direct, conversational, and outcome-focused. Wati speaks in active verbs and concrete results: 'Automate your DMs. Answer every inbound call.' rather than abstract benefits. The vocabulary avoids jargon when possible ('your team takes over when it matters') and uses short, punchy sentences to mirror the speed of the platform itself. Example sentence in Wati's voice: 'Your AI handles the routine; your team closes the deal.'

Colors

The Wati color system is built on a neutral-first foundation with strategic accent deployment. **Primary (#1d1d1d)** is the dominant text and button color, used for all body copy, headlines, and the primary CTA ('Book a demo'). This near-black creates maximum contrast and readability on white surfaces (WCAG AAA compliant at 16.5:1 ratio). **Secondary (#00e785)** is the brand's signature accent—a vibrant, saturated green used sparingly on success states, positive indicators, and secondary CTAs to signal growth and momentum. **Tertiary (#4fc3ff)** is a bright cyan deployed on informational elements, badges, and tertiary actions to convey clarity and technical sophistication. The surface stack is minimal: white (#ffffff) for primary surfaces, light grays (#f5f5f4, #e7e9e8) for container hiera

Typography

The type system uses DM Sans exclusively across marketing and product interfaces, chosen for its geometric clarity and high legibility at small sizes. The hierarchy is built on a 58px display size (used for hero headlines like 'Automate your DMs') that scales down through headline-lg (40px, 700 weight) for section titles, headline-md (28px, 600 weight) for subsections, and body-md (16px, 400 weight) for body copy. All headlines use negative letter-spacing (-0.01em to -0.02em) to tighten the visual weight and create a sense of forward momentum; body text uses 0em letter-spacing for maximum readability. Line heights are generous: 68px for display (1.17x), 48px for headline-lg (1.2x), and 24px for body-md (1.5x) to ensure comfortable reading on screens. Labels and UI text use label-md (14px,

Layout

Wati uses a fluid 12-column grid with a max-width of 1160px, centered on the viewport. The page rhythm is built on a 24px gutter (md spacing) between columns and a 40px lg spacing for section separation. The hero section spans full-width with a 64px xl spacing above and below to establish breathing room. Cards and containers use 48px padding (md × 2) internally, creating a spacious, uncluttered feel. The layout philosophy prioritizes white space: sections are separated by 40–64px vertical gaps, and internal card padding is never less than 24px. On mobile (< 900px), the grid collapses to a single column with adjusted padding (24px gutter, 12px sm spacing for section breaks) to maintain the spacious aesthetic. Container max-widths are enforced at 1160px to prevent line lengths from exceeding

Elevation & Depth

Depth in Wati is conveyed through subtle shadows and border definition rather than color shifts or blur effects. The elevation system uses three levels: **Level 1 (Base)** has no shadow; surfaces sit flush on the white background with a 1px solid border at rgba(0, 0, 0, 0.08) to define edges. **Level 2 (Standard Card)** applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift that separates cards from the background without visual heaviness. **Level 3 (Modal/Elevated)** uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger spread that signals prominence and focus. Hover st

Shapes

The shape philosophy is 'Geometric Precision'—a balance between technical sharpness and approachability. Buttons and CTAs use full rounded corners (border-radius: 9999px, or {rounded.full}) to convey friendliness and reduce visual aggression; the pill shape is instantly recognizable as clickable. Cards and containers use 1.5rem (24px) border-radius ({rounded.xl}) to soften edges while maintaining a structured, professional appearance. Input fields and smaller components use 0.75rem (12px) border-radius ({rounded.DEFAULT}) for a tighter, more technical feel. Badges and micro-components use {rou

Components

Action Elements

Buttons are the primary interaction mechanism and use three distinct styles. **Primary buttons** (backgroundColor: #1d1d1d, textColor: #ffffff, padding: 15px 30px, border-radius: 9999px, fontWeight: 700) are reserved for the main CTA ('Book a demo'). On hover, the background shifts to #505451 (primary-container) over 150ms, and the cursor changes to pointer. **Secondary buttons** (backgroundColor: #ffffff, textColor: #1d1d1d, border: 1px solid #b7b9b7, padding: 10px 20px, border-radius: 9999px) are used for alternative actions ('Try for free', 'Log in'). On hover, the background becomes #f5f5f4 and the border darkens to #848a86. **Tertiary buttons** (backgroundColor: #4fc3ff, textColor: #1d1d1d, padding: 12px 24px, border-radius: 9999px) are used for informational or s

Do's and Don'ts

**Do**

• Do use primary (#1d1d1d) for all body text and headlines to maintain maximum contrast and readability.
• Do deploy secondary (#00e785) and tertiary (#4fc3ff) sparingly as accent colors on CTAs, badges, and success states to create visual hierarchy.
• Do maintain 24px minimum padding inside cards and 40px minimum spacing between sections to preserve the spacious, uncluttered aesthetic.
• Do use full-rounded buttons (border-radius: 9999px) for all CTAs to signal clarity and reduce friction.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards to create gentle depth without visual heaviness.
• Do use DM Sans at 16px or larger for body text to ensure legibility on screens; never go below 14px for UI labels.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff); use #1d1d1d for text and #ffffff for surfaces to reduce eye strain.
• Don't apply shadows to buttons or interactive elements; use border and background color changes instead to signal state.
• Don't mix border-radius values within the same component family (e.g., don't use 8px on one button and 16px on another).
• Don't exceed 1160px container max-width; wider layouts reduce readability and create awkward line lengths.
• Don't use glassmorphism, blur effects, or backdrop-filter; Wati prioritizes clarity and contrast over atmospheric effects.
• Don't apply more than one accent color (secondary or tertiary) to a single component; use one accent per element to maintain visual clarity.