Perplexity AI

Overview

Perplexity AI embodies a design philosophy of "Intelligent Minimalism"—a warm, accessible aesthetic that demystifies AI-powered search. The brand serves users seeking trustworthy, real-time answers without cognitive overload. The visual language combines a soft, warm neutral palette (#fcfcf9 background, #27251e primary) with precise typography and generous whitespace, creating an environment where information feels curated rather than overwhelming. The emotional response is one of calm clarity: users feel they're consulting a knowledgeable assistant, not wrestling with a complex tool.

Perplexity's voice is conversational yet authoritative—direct without being terse, helpful without being patronizing. The brand vocabulary favors active verbs ("Ask anything," "Get work done") and avoids jargon. Tone is confident but never arrogant; the UI acknowledges uncertainty gracefully. Example sentence in brand voice: "Search anything—get fast and accurate answers from the most trusted sources."

Colors

The color system is built on a warm, near-neutral foundation that prioritizes legibility and approachability. The primary color (#27251e, a warm dark brown) serves as the signature accent for CTAs, interactive elements, and text hierarchy—it's the color users click on. The surface stack ranges from #fcfcf9 (warm off-white, used for the page background) through progressively warmer grays (#faf8f5, #ece9e4, #dedbd4) to create subtle depth without harsh contrast. Secondary (#32b8c6, a teal) provides a supporting accent for status indicators and secondary actions, while tertiary (#1a73e8, Google Blue) is reserved for links and informational highlights. Error red (#b91c1c) is used sparingly for destructive actions and validation states. All surfaces use the outline-variant (#d8d4cd) for subtle

Typography

The type system uses pplxSans (Perplexity's custom sans-serif, with fallbacks to system fonts) across all scales, creating visual cohesion and a distinctly modern feel. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines; headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) breaks up content; title-lg (20px, 600 weight) labels cards and subsections; body-lg (18px, 400 weight) is used for article prose and longer-form content; body-md (16px, 400 weight) is the default for UI labels and descriptions; label-md (14px, 480 weight) is used for buttons and interactive elements; label-sm (12px, 500 weight) is for badges and metadata. The 480 fontWeight on label-md (between regular 400 and semibold 600) creates a subtle visual emphasis withou

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile and tablet (full bleed with 24px gutters) and a centered container on desktop. The spacing scale is semantic: unit (8px) is the baseline; xs (4px) is used for micro-spacing within components; sm (12px) for tight grouping; md (24px) for standard padding and section separation; lg (40px) for major section breaks; xl (64px) for hero-to-content transitions. The ask-input component (the primary search interface) uses md (24px) padding internally and is centered with lg (40px) margin above and below. Cards and containers use md (24px) padding with sm (12px) gaps between child elements. The sidebar (visible in the screenshot) uses a fixed width of approximately 240px with sm (12px) padding, le

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle color shifts rather than dramatic layering. Level 1 (Base): the surface (#fcfcf9) with no shadow; Level 2 (Standard Card): surface-container-lowest (#fdfbfa) with elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)), used for cards, input fields, and floating elements; Level 3 (Elevated/Hover): surface-container-low (#faf8f5) with elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), applied on card-hover and modal backgrounds. The ask-input component uses a custom decorative glow (var(--ask-input-decorative-glow-shadow)) on focus, creating a sub

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently but conservatively, balancing approachability with precision. Buttons use full (9999px) border-radius for a pill shape, creating a friendly, clickable appearance; this is applied to primary CTAs ("Sign In", "Got it") and secondary buttons. Cards and containers use lg (1rem, 16px) border-radius, providing subtle rounding that feels modern without appearing playful. Input fields use lg (1rem) to match cards, creating visual consistency. Small UI elements (badges, tags, dropdown options) use md (0.75rem, 12px) or sm (0

Components

Action Elements Buttons are the primary interactive element and follow a strict hierarchy. **Primary buttons** (backgroundColor: #27251e, textColor: #fdfbfa, height: 40px, padding: 12px 24px, rounded: full, fontWeight: 480) are used for main CTAs like "Sign In" and "Got it"; they use a solid background with no border. On hover, the background darkens to #3d3a32 with a 0.2s ease transition. **Secondary buttons** (backgroundColor: transparent, textColor: #27251e, border: 1px solid #d8d4cd, height: 40px, padding: 12px 16px, rounded: lg) are used for alternative actions; on hover, the background becomes rgba(39, 37, 30, 0.08). **Ghost buttons** (backgroundColor: transparent, textColor: #27251e, height: 36px, padding: 8px 12px, rounded: md) are used for tertiary actions and sidebar navigati

Do's and Don'ts

**Do**

• Do use primary (#27251e) exclusively for main CTAs and interactive focus states—it's the brand's signature accent and should never be diluted.
• Do maintain the warm, off-white background (#fcfcf9) as the default surface; it's core to Perplexity's approachable, calm aesthetic.
• Do apply md (24px) padding and lg (40px) section spacing consistently to create the visual rhythm that defines the layout.
• Do use full (9999px) border-radius on all primary buttons to make CTAs immediately recognizable and clickable.
• Do apply the 0.2s ease transition to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do use label-md (14px, 480 weight) for all button text to create subtle emphasis without the heaviness of full bold.

**Don't**

• Don't use secondary (#32b8c6) or tertiary (#1a73e8) as primary button backgrounds—they're supporting accents, not CTAs.
• Don't apply shadows deeper than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)); the design system prioritizes soft depth, not dramatic layering.
• Don't use border-radius smaller than sm (0.25rem) on interactive elements; it reduces clickability and feels overly technical.
• Don't mix font families; pplxSans (with system fallbacks) is the only typeface—no serif, no decorative fonts.
• Don't apply more than one level of elevation change on hover; use either a background color shift OR a shadow increase, not both.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use the defined surface and on-surface tokens instead.