Perplexity Brand Design System Deep-Dive

1. Brand Overview

Perplexity’s design language is deliberate. It’s stripped back, almost austere, but with just enough softness to avoid feeling clinical. The moment you load their site, the vibe is: clarity first, ego second. This isn’t a brand screaming for attention—it’s quietly confident, letting the content and the interaction do the talking.

Their choice of fkGroteskNeue as the primary typeface (across headings, body, links, buttons) signals a modern, functionalist approach. It’s not a personality-heavy display font—it plays nicely with data, UI elements, and dense content. The fallback stack is comprehensive, ensuring consistent rendering across platforms.

The color system is restrained. The primary hue is an OKLCH blue (oklch(0.5527 0.086 208.61)), clean and vivid without leaning into oversaturated tech-startup territory. It’s paired with a muted dark text (oklch(0.3039 0.04 213.68)) and generous use of transparency for layering. The transparency levels aren’t arbitrary—they’re used to create subtle depth without heavy shadows.

The layout is built on an 8px spacing scale—predictable, modular, and developer-friendly. Breakpoints are well-defined, starting as low as 640px and scaling up to 1536px, which tells me they’re thinking about every device tier, not just desktop and one mobile view.

Buttons have two personalities: pill-shaped minimal actions (border-radius: 9999px) and standard rounded rectangles (border-radius: 8px). This duality works—they can signal primary vs secondary actions through shape alone.

Shadows are sparse. Borders and subtle background shifts are the main tools for separation. This fits the brand’s lean, content-first philosophy: UI should be invisible until you need it.

Overall, Perplexity’s design system feels like it’s built for high-velocity reading and interaction. No ornamental flourishes. Every pixel has a reason to exist. I love how consistent it is—there’s no “one-off” style that breaks the rhythm.

2. Color System

2.1 Primary Colors

The primary brand color: oklch(0.5527 0.086 208.61) — a fresh, slightly cool blue. This is used for CTAs, active states, and key accents. It’s balanced—not neon, not dull. Blue is the safe, trusted tech color, but in OKLCH space, this one has a bit more life than a standard hex blue.

The text color across the site: oklch(0.3039 0.04 213.68) — a deep, muted blue-gray. This works because it avoids pure black, which can feel harsh on bright backgrounds. It also pairs well with the primary blue without clashing.

Background tones often use the same colors but with alpha tweaks—/0.16, /0.1, etc.—to create subtle panels and hover states.

Compared to competitors like ChatGPT (which goes monochrome) or Notion (which goes ultra-neutral), Perplexity’s blue gives them a recognizable accent without overwhelming the content.

2.2 Complete Palette

2.3 Color Relationships

• Primary on White: Excellent contrast. Passes WCAG AAA for normal text.
• Text on Light Blue Background: The blue tints are light enough that text color remains highly legible.
• Alpha Usage: They use /0.1, /0.16, /0.24 alpha stops consistently for borders. That’s smart—keeps the system predictable.
• Dark Mode: Not in extracted data, but the color model (OKLCH) is ready for perceptual adjustments.

2.4 Usage Guide

Do:

• Use oklch(0.5527 0.086 208.61) only for clickable or interactive elements.
• Use text color oklch(0.3039 0.04 213.68) for all primary content, never the primary blue.
• Use alpha-based dividers to create hierarchy without visual noise.

Avoid:

• Putting blue text on blue backgrounds without enough alpha separation.
• Using pure black #000—it breaks the visual warmth.
• Introducing new accent colors—this palette is intentionally narrow.

3. Typography

3.1 Font Families

• Primary Font: fkGroteskNeue
• Fallback Stack: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Hiragino Sans, PingFang SC, Apple SD Gothic Neo, Yu Gothic, Microsoft YaHei, Microsoft JhengHei, Meiryo
• Source: Not from Google or Adobe Fonts in extracted data — likely a self-hosted commercial license.

This is a modern grotesk with clean geometry. It works equally well for headings and body text because they’re using different weights for hierarchy instead of switching typefaces.

3.2 Type Scale

3.3 Hierarchy

They’ve flattened the traditional type scale. The largest point size here is 16px—which is unusual for headings in web design. This suggests headings are differentiated by weight and spacing, not size. It’s a very data-table, UI-component-first approach.

This works for Perplexity because their interface is about dense information—oversized headings would disrupt scanability. The downside: in content-heavy marketing pages, this can feel visually flat if not paired with spacing and color contrast.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px system.

This is clean. The 8px multiples make alignment predictable. 12px is the only odd step—likely for padding inside inputs or between small inline elements.

4.2 Layout

Breakpoints extracted:

• 640px
• 680px
• 768px
• 970px
• 1024px
• 1224px
• 1280px
• 1536px

This range covers small phones up to widescreen monitors. The closeness of 640 and 680px is interesting—it suggests a nuanced adjustment for mid-size devices.

5. Visual Elements

Border Radius

The 8px radius is the workhorse. The 9999px pill shape is reserved for high-visibility, minimal buttons.

Shadows

They avoid heavy shadows. When used, they’re subtle:

• oklch(0.5527 0.086 208.61 / 0.1) 0px 1px 2px
• oklch(0.5527 0.086 208.61 / 0.3) 0px 1px 3px
• Layered light shadows with white and black alphas for subtle depth.

Borders & Dividers

They rely on borders more than shadows for separation:

• oklch(0.3039 0.04 213.68 / 0.1) for light dividers
• oklch(0.3039 0.04 213.68 / 0.16) for medium emphasis
• oklch(0.3039 0.04 213.68 / 0.24) for stronger separation

6. Components

6.1 Buttons

Variant 1 — Minimal Pill

• Default: background: oklch(0.6898 0.027 109.55 / 0.16), color: oklch(0.3039 0.04 213.68), border-radius: 9999px, border: none
• Hover: Background shifts to whitesmoke (via variable)
• Focus: Outline transparent, standard ring shadow

Variant 2 — Solid Blue

• Default: background: oklch(0.5527 0.086 208.61), color: oklch(0.9902 0.004 106.47), border-radius: 8px
• Hover: Whitesmoke background override (odd choice—likely a placeholder in extraction)
• Focus: Same transparent outline + ring

Variant 3 — White with Border

• Default: background: oklch(0.9902 0.004 106.47), color: oklch(0.3039 0.04 213.68 / 0.75), border: 1px solid oklch(0.3039 0.04 213.68 / 0.16), border-radius: 8px

6.2 Links

• Default: color: rgb(0, 0, 0), text-decoration: none
• No underline on hover (probably color change in live site)

6.3 Forms

• Text div: Transparent background, no border
• Email input: background: oklch(0.6898 0.027 109.55 / 0.16), border-radius: 8px, padding: 8px 16px

6.4 Cards

No explicit card component extracted, but border + subtle shadow + 8px radius is consistent.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: oklch(0.5527 0.086 208.61);
  --color-primary-light: oklch(0.6898 0.027 109.55 / 0.16);
  --color-text: oklch(0.3039 0.04 213.68);
  --color-text-muted: oklch(0.3039 0.04 213.68 / 0.75);
  --color-divider-light: oklch(0.3039 0.04 213.68 / 0.1);
  --color-divider-medium: oklch(0.3039 0.04 213.68 / 0.16);
  --color-divider-strong: oklch(0.3039 0.04 213.68 / 0.24);
  --color-surface: oklch(0.9902 0.004 106.47);
  --color-transparent: rgba(0, 0, 0, 0);

  /* Typography */
  --font-primary: 'fkGroteskNeue', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Hiragino Sans', 'PingFang SC', 'Apple SD Gothic Neo', 'Yu Gothic', 'Microsoft YaHei', 'Microsoft JhengHei', Meiryo;
  --font-size-16: 1rem;
  --font-size-14: 0.88rem;
  --font-size-12: 0.75rem;
  --font-size-11: 0.69rem;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;

  /* Radius */
  --radius-2: 2px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-light: oklch(0.5527 0.086 208.61 / 0.1) 0px 1px 2px;
  --shadow-medium: oklch(0.5527 0.086 208.61 / 0.3) 0px 1px 3px;
}

8. AI Coding Assistant Prompt

# Perplexity Design System Specification

You are a Perplexity design expert. Build UIs matching their visual language exactly.

## Brand Context
Perplexity is about clarity, minimalism, and precision. The design avoids decoration, relying on strict grids, clean typography, and a narrow color palette. Interactions should feel light and intentional.

## Color Palette
- Primary Blue: oklch(0.5527 0.086 208.61) — Primary buttons, key actions
- Primary Blue Light: oklch(0.6898 0.027 109.55 / 0.16) — Backgrounds for subtle emphasis
- Text Primary: oklch(0.3039 0.04 213.68) — Main text
- Text Secondary: oklch(0.3039 0.04 213.68 / 0.75) — Muted text
- Divider Light: oklch(0.3039 0.04 213.68 / 0.1) — Light borders
- Divider Medium: oklch(0.3039 0.04 213.68 / 0.16) — Medium emphasis borders
- Divider Strong: oklch(0.3039 0.04 213.68 / 0.24) — Strong separators
- White Surface: oklch(0.9902 0.004 106.47) — Cards, backgrounds
- Transparent: rgba(0, 0, 0, 0) — Resets

## Typography
- Font Family: 'fkGroteskNeue', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Hiragino Sans', 'PingFang SC', 'Apple SD Gothic Neo', 'Yu Gothic', 'Microsoft YaHei', 'Microsoft JhengHei', Meiryo

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| Heading 1 | 16px | 500 | 1.50 | Page titles |
| Heading 1 | 16px | 450 | 2.00 | Section headings |
| Heading 1 | 16px | 475 | 2.00 | UI headings |
| Body | 16px | 400 | 1.50 | Main text |
| Link | 16px | 400 | 1.50 | Interactive text |
| Button | 16px | 450 | 1.50 | Large buttons |
| Button | 14px | 450 | 2.00 | Medium buttons |
| Caption | 14px | 400 | 1.10 | Small labels |
| Caption | 14px | 475 | 2.00 | Meta info |
| Caption | 14px | 675 | 1.43 | Emphasized small text |
| Small Button | 12px | 475 | 1.33 | Compact actions |
| Tiny Caption | 11px | 400 | 1.10 | Notes |

## Spacing & Grid
Base: 8px
- 2px — hairline gaps
- 4px — tight inline gaps
- 8px — default component padding
- 12px — input vertical padding
- 16px — section gaps
- 24px — large vertical spacing
- 32px — card padding

## Border Radius
- 2px — micro elements
- 6px — small panels
- 8px — buttons, inputs, cards
- 10px — rare panels
- 12px — rare panels
- 16px — large containers
- full: 9999px — pills, avatars

## Shadows & Depth
- Light: oklch(0.5527 0.086 208.61 / 0.1) 0px 1px 2px
- Medium: oklch(0.5527 0.086 208.61 / 0.3) 0px 1px 3px
Use sparingly—borders preferred for separation.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: oklch(0.5527 0.086 208.61);
  color: oklch(0.9902 0.004 106.47);
  border-radius: 8px;
  border: none;
  font-weight: 450;
  font-size: 14px;
  padding: 0;
  transition: background 150ms ease;
}
.btn-primary:focus {
  outline: 2px solid transparent;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
}

Minimal Pill Button

.btn-pill {
  background: oklch(0.6898 0.027 109.55 / 0.16);
  color: oklch(0.3039 0.04 213.68);
  border-radius: 9999px;
  border: none;
  font-weight: 475;
  font-size: 16px;
}

Input Field

.input {
  background: oklch(0.6898 0.027 109.55 / 0.16);
  color: oklch(0.3039 0.04 213.68);
  border-radius: 8px;
  border: none;
  padding: 8px 16px;
}
.input:focus {
  outline: none;
}

Layout & Responsive Rules

• Breakpoints: 640px, 680px, 768px, 970px, 1024px, 1224px, 1280px, 1536px

Interaction Rules

• State changes: 150ms ease
• Focus: Transparent outline + ring shadow
• Hover: Light background shift

DO

• Use only palette colors
• Maintain 8px spacing multiples
• Keep typography weights consistent
• Use pill shapes only for minimal actions
• Prefer borders over shadows

DON'T

• Invent new colors
• Use pure black text
• Mix sharp and rounded corners
• Overuse shadows

---

## 9. Summary

**TL;DR** — Perplexity’s design system is minimal, precise, and built for speed. Blue accents, muted text, and an 8px grid keep everything consistent. Shapes and weights—not sizes—signal hierarchy.

**Brand Keywords**:  
- clarity-first  
- tech-minimalist  
- grid-disciplined  
- restrained-color