Plivo

Overview

Plivo is a developer-centric cloud communications platform that transforms voice, SMS, WhatsApp, and AI agent deployment into a unified, scalable infrastructure. The brand embodies "Technical Clarity"—a design philosophy that prioritizes precision, performance metrics, and transparent pricing while maintaining an approachable, human-centered interface. The UI aesthetic is minimalist-technical: clean white surfaces (rgb(255, 255, 255)), high-contrast dark text (rgb(9, 9, 11)), and a signature electric blue accent (rgb(50, 61, 254)) that signals interactivity and trust. The emotional response is one of confidence and capability: users feel they are working with a sophisticated, reliable platform that respects their time and technical expertise.

Plivo's voice is precise, direct, and jargon-aware without being pretentious. The brand speaks to developers and operations teams in their language—mentioning latency (<500ms), uptime (99.99%), and per-minute pricing ($0.0028/min)—while remaining accessible to non-technical decision-makers. Tone examples: "Deploy agents that sound human, on transparent per-minute pricing" (clarity + value proposition), "SIP + Audio Streaming from $0.0028/min" (technical specificity + cost transparency). The vocabulary favors concrete nouns (agents, latency, uptime, countries) over abstract marketing language.

Colors

The Plivo color system is built on a foundation of optical clarity and technical trust. Primary (#323dfe, electric blue) is the signature accent used exclusively for interactive elements—call-to-action buttons ("START FOR FREE", "SIGN UP FOR FREE"), focus states, and brand-critical UI components. This color appears sparingly but decisively, creating visual hierarchy without overwhelming the interface. Secondary (#007aff, iOS-style blue) provides a supporting accent for secondary actions and status indicators. Tertiary (#005c4b, teal) is reserved for success states and confirmatory UI elements.

The surface stack is deliberately light and minimal: surface (#ffffff) is the dominant background, with container variants (surface-container-low #f0f0f0, surface-container #eeeeee, surface-containe

Typography

The type system employs a three-tier hierarchy: Sora (geometric, modern sans-serif) for display and headline levels, Inter (neutral, highly legible) for body and UI text, and JetBrains Mono (technical monospace) for code snippets, pricing, and technical labels. Display-level text (Sora, 60px, 700 weight, -0.04em letter-spacing) is used sparingly for hero headlines like "Build human-like voice AI Agents"; headline-lg (Sora, 52px, 400 weight) provides a lighter, more approachable alternative for section headers. Body text (Inter, 16px, 400 weight, 24px line-height) is optimized for scanning and reading at standard viewing distances; label-sm (JetBrains Mono, 11px, 600 weight, 0.02em letter-spacing) is applied to button text and technical metadata to reinforce the platform's precision. When d

Layout

The layout system uses a 12-column fluid grid with a maximum container width of 1280px (1228px observed in practice), ensuring content remains readable on ultra-wide displays while maintaining focus on smaller screens. The gutter spacing is 24px (md spacing unit), applied consistently between grid columns and section margins. White-space philosophy emphasizes breathing room: hero sections use lg spacing (40px) for vertical separation between headline, subheading, and CTA; card grids use md spacing (24px) for inter-card gaps. The page rhythm alternates between full-width hero sections (80px vertical padding observed) and contained content sections (24px horizontal padding on mobile, expanding to gutter on desktop). Container max-widths vary by content type (820px for narrow text, 1200px for

Elevation & Depth

Depth in Plivo's design is achieved through subtle shadow layering and strategic use of borders rather than dramatic depth effects. The elevation system defines three levels: Level 1 (Base, no shadow) for flat surfaces like body background and input fields; Level 2 (Standard Card, 0 3px 8px rgba(0, 0, 0, 0.15)) for cards, dropdowns, and modals that lift slightly above the base; Level 3 (Elevated, 0 12px 32px -8px rgba(0, 0, 0, 0.14)) for navigation overlays and high-priority modals. Borders are used as a primary depth cue: 1px solid #e9ecef (surface-container-high) separates cards from the bac

Shapes

The shape philosophy is "Minimal Geometry"—favoring sharp, clean corners that reinforce the technical, no-nonsense brand personality while using subtle rounding only where interaction demands it. Buttons use rounded-sm (0.25rem / 2px) for a crisp, modern appearance that feels precise and intentional; this micro-radius prevents the harsh 90° corner while maintaining visual sharpness. Cards and containers use rounded-md (0.75rem / 12px) to create a softer, more approachable surface that invites interaction. Input fields use rounded-DEFAULT (0.5rem / 8px) as a middle ground between buttons and ca

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use #323dfe background with white text, JetBrains Mono 11px 600 weight, 10px vertical / 16px horizontal padding, and 2px border-radius. On hover, the background darkens to #1f2dcc with a subtle scale(1.02) transform applied over 140ms cubic-bezier(0.2, 0.8, 0.2, 1) for tactile feedback. Secondary buttons (button-secondary) use transparent background with #323dfe text, a 1px solid #667781 border, and the same padding and radius; on hover, the background becomes #f0f0f0 (surface-container-low). Ghost buttons (button-ghost) are identical to secondary but without the border, used for tertiary actions and navigation links. All buttons must include :focus-visible states with a 2px solid outline in p

Do's and Don'ts

**Do**

• Do use primary blue (#323dfe) exclusively for high-priority CTAs and interactive focus states; it should appear sparingly but decisively to guide user attention.
• Do apply 2px border-radius to buttons and 12px to cards to maintain the sharp-yet-approachable visual language; never use full rounding except for badges and status pills.
• Do maintain 24px (md spacing) as the default gap between cards, sections, and major layout elements; use lg (40px) only for hero-to-content transitions.
• Do use JetBrains Mono 11px 600 weight for all button text and pricing/technical labels to reinforce precision and technical credibility.
• Do include :focus-visible outlines (2px solid primary, 3px offset) on all interactive elements for keyboard accessibility; never remove focus indicators.
• Do apply 0 3px 8px rgba(0, 0, 0, 0.15) shadow to cards and 0 12px 32px -8px rgba(0, 0, 0, 0.14) to elevated modals; shadows must never exceed these values to maintain minimalism.

**Don't**

• Don't use primary blue (#323dfe) for body text, backgrounds, or non-interactive elements; reserve it exclusively for CTAs, focus states, and brand-critical UI.
• Don't apply border-radius greater than 12px to cards or containers; excessive rounding contradicts the technical, precise brand personality.
• Don't mix font families within a single component; use Sora for headlines, Inter for body, and JetBrains Mono for technical labels—never blend them.
• Don't use shadows deeper than 0 12px 32px -8px rgba(0, 0, 0, 0.14); excessive shadow depth creates visual noise and undermines the minimalist aesthetic.
• Don't apply color overlays or gradients to the white background; the surface must remain clean and unadorned to maintain clarity and legibility.
• Don't use secondary or tertiary colors as primary interactive elements; they are supporting accents only and must never compete with primary blue for user attention.