# Perplexity — Product Home Design Spec

> Source: perplexity.ai (live DOM, full CSS token system), 2026-07-09 (desktop 1512px).
> Coverage: public product home (search app shell — no login needed): sidebar, ask-input, quick-action cards, top nav. This is Perplexity's public-facing surface; deep threads/settings behind login not captured. Responsive: token-based (mobile nav height, sidecar) but mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Calm, editorial "answer engine" design set on a warm near-black. The canvas is a warm charcoal `#171615` (not a cool grey), and text is a warm off-white `#d6d5d4` rather than pure white, so the whole surface reads soft and paper-like in the dark. A single peacock-teal `#4e99a3` is the brand accent — it appears as the logo, the glowing ask-input focus, primary actions and links, and nothing else competes with it. The signature move is typographic: answers are set in a serif (`pplxSerif`) while all UI/chrome uses the sans (`pplxSans`), giving results an editorial, considered feel. A large, quietly *glowing* ask-input is the gravitational center. A broad "decoration" palette (named teal/blue/green/gold/orange/purple…) is reserved strictly for source and category tags. Feels: warm, editorial, calm, focused.

## 2. Color Palette & Roles

### Neutrals (warm dark — "Odin/Umbra" ramp)
| Token | Hex | Role / usage |
|---|---|---|
| surface-underlay | `#121211` | Deepest bg (odin-50) |
| bg-base / canvas | `#171615` | Page background (odin-100) |
| bg-raised | `#1e1d1c` | Cards, raised panels (odin-200) |
| odin-300 | `#242322` | Inputs, hover surfaces |
| odin-400/500 | `#2a2928` / `#302f2e` | Higher surfaces |
| fg-primary | `#d6d5d4` | Body text (warm off-white) |
| fg-secondary | `rgba(214,213,212,.65)` | Secondary text |
| fg-tertiary | `rgba(214,213,212,.50)` | Muted / captions |
| white | `#ffffff` | Headings, high-emphasis |
| border-soft | `rgba(214,213,212,.07)` | Hairline dividers |
| border-medium | `rgba(214,213,212,.14)` | Card borders |
| border-heavy | `#d6d5d4` | Strong border / inverse |

### Accent + semantic
| Token | Hex | Role / usage |
|---|---|---|
| super / teal (brand) | `#4e99a3` | Logo, focus ring, primary action, links |
| teal-hover / active | `#22808c` / `#1a636c` | Solid-accent hover / active |
| positive | `#539e55` | Success |
| negative | `#dc6973` | Error / finance-negative |
| warning | `#d57141` | Warning / caution |

### Decoration palette (source & category tags only)
teal `#4e99a3` · blue `#5691c7` · green `#539e55` · gold `#bc811e` · indigo `#7989e7` · lime `#859531` · magenta `#d163a7` · orange `#d57141` · pink `#dc6973` · purple `#a96ee0` — each with a `29`-hex subtle bg.

Rule: chrome is warm-grayscale on `#171615`; peacock-teal `#4e99a3` is the only brand hue. The decoration colors appear only on tags/citations, never as UI chrome.

## 3. Typography Rules

- UI / sans stack: `pplxSans, ui-sans-serif, system-ui, -apple-system, sans-serif`
- **Answer / editorial stack: `pplxSerif`** (`--pplx-answer` / `--pplx-serif`)
- Mono: `pplxSansMono`
- Body: 16px / 24px / 400 / `#d6d5d4`
- Weight ramp is compressed: light/normal = 400, medium/semibold = 500, bold/black = **550** (never true 700).

| Role | Size/Line | Weight | Family |
|---|---|---|---|
| Wordmark / display | large | 400 | pplxSans |
| Answer body | ~18/28 | 400 | **pplxSerif** |
| UI body | 16 / 24 | 400 | pplxSans |
| UI emphasis | 16 | 500–550 | pplxSans |
| Labels / tags | 12–14 | 500 | pplxSans |

Pattern: serif for generated answers, sans for all controls; weight tops out at 550.

## 4. Component Stylings

### Ask-input (signature)
- Large rounded panel (radius 12–16px) on `bg-raised`, hairline border. On focus it lifts a **teal decorative glow**: `0 0 36px 4px oklch(68.25% .072 206.25 / .3)` with a teal border `oklch(68.25% .072 206.25 / .4)`. Houses tool pills (Search, Computer), a model selector, mic and submit.

### Buttons
- **Solid accent**: bg `#4e99a3`, hover `#22808c`, active `#1a636c`, radius 8px (`full` when a pill).
- **Solid neutral**: bg `#d6d5d4` (inverse), dark text.
- **Ghost / tonal**: transparent → `rgba(214,213,212,.07/.12)` hover; tonal-accent `rgba(78,153,163,.05→.20)`.
- Heights via tokens: sm 24 / md 32 / lg 40px.

### Quick-action cards
- Filled tonal panels (e.g. teal `#4e99a3` at low alpha), radius 12px, icon + title + one-line description, subtle border.

### Sidebar / nav
- Left sidebar `220px` (collapsed 90/56px) on `bg-base`, icon+label rows, ghost hover fills; top nav center links (Discover/Finance/Health/Academic/Patents) in muted sans.

## 5. Layout Principles

- Thread width `1100px`; answer content column `720px`; context pane `336px`.
- Header height `56px` (in-app 50px); sidebar `220px`; page horizontal padding `16px`.
- Home is centered: wordmark → glowing ask-input → two quick-action cards.
- Spacing scale: 2/4/6/8/10/12/16/20/24/28/32/36/40/44/48.

## 6. Depth & Elevation

- Radii: xs 4 / sm 6 / md 8 / lg 12 / 2xl 16 / full 9999.
- Shadows are minimal and soft: dropdowns `0 4px 6px -1px #00000014, 0 2px 4px -2px #00000014`; small `0 1px 2px #0000000d`. Elevation mostly via `bg-raised` + hairline borders.
- **Signature glow**: teal ask-input glow (see §4) is the one dramatic shadow.
- Overlay border highlight `rgba(255,255,255,.10)`.

## 7. Motion

- Rich easing token set: `ease-out-cubic (.33,1,.68,1)`, `ease-in-out-quart (.76,0,.24,1)`, `ease-out-quint (.22,1,.36,1)`, and an overshoot `ease-out-soft cubic-bezier(.36,1.3,.64,1)`.
- Ask-input glow fades in on focus (`36px 4px` teal, from `/0` to `/.3`); micro-transitions on hover fills; answers stream in. Calm, soft-landing motion, no bounce-heavy or scroll-jacking behavior.

## 8. Backgrounds, Effects & WebGL

- Flat warm-charcoal `#171615` canvas; no background video or WebGL on the home.
- The one atmospheric effect is the teal ask-input glow (radial box-shadow in oklch).
- `backdrop-filter` used on overlays/backdrops (`#171615b3` layer-backdrop).
- Otherwise flat surfaces separated by warm hairlines and `bg-raised` steps.

## 9. Do's and Don'ts

### Do
- Use a warm near-black `#171615` canvas with warm off-white `#d6d5d4` text (never pure-white body, never cool grey).
- Reserve peacock-teal `#4e99a3` as the single brand accent (logo, focus glow, primary action, links); hover `#22808c`, active `#1a636c`.
- Set generated answers in the serif (`pplxSerif`) and all UI in the sans (`pplxSans`).
- Cap font weight at 550; use 400/500/550 only.
- Give the ask-input a soft teal focus glow (`0 0 36px 4px` oklch teal at ~.3 alpha) — it is the signature.
- Reserve the decoration palette (blue/green/gold/orange/purple…) for source and category tags only.
- Radius 8px controls, 12–16px panels; elevate with bg-raised + hairline, not heavy shadows.

### Don't
- Don't use a cool/neutral grey background or pure-white body text — warmth is the point.
- Don't introduce a second brand accent; teal stands alone.
- Don't set answers in the sans or UI in the serif — the split is deliberate.
- Don't use font weight 700+.
- Don't spill the decoration colors into chrome/buttons.
- Don't over-shadow; the teal input glow is the only dramatic elevation.

## 10. Responsive Behavior

- Token-driven: `--mobile-nav-height`, `--mobile-sidecar-content-height: calc(100dvh - 24px)`, `--sidebar-width-collapsed: 90px`, min touch target `2.75rem`.
- Sidebar collapses; content column caps at 720px; sidecar becomes a bottom drag-sheet on mobile.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#171615` · Raised `#1e1d1c` · Text `#d6d5d4` · Muted `rgba(214,213,212,.65)` · Border `rgba(214,213,212,.14)` · Accent `#4e99a3`
- Fonts: pplxSans (UI) + **pplxSerif (answers)** · Body 16/24 · Weight ≤550 · Radius 8 control / 12–16 panel · Sidebar 220px · Header 56px
- Focus/glow: teal ring + `0 0 36px 4px oklch(68.25% .072 206.25 / .3)` · Solid accent hover `#22808c`

<perplexity_design_language>
Use the Perplexity design language: warm near-black canvas #171615 with raised #1e1d1c panels and warm off-white text #d6d5d4 (never pure white, never cool grey), muted rgba(214,213,212,.65). A single peacock-teal #4e99a3 brand accent for the logo, links, primary actions and focus (hover #22808c, active #1a636c); a broad decoration palette (blue #5691c7, green #539e55, gold #bc811e, orange #d57141, purple #a96ee0, magenta #d163a7…) reserved strictly for source and category tags, never chrome. The signature is typographic: generated answers set in a serif (pplxSerif) while every control and label uses the sans (pplxSans); body 16/24, weight capped at 550 (use 400/500/550 only). The gravitational center is a large rounded (12–16px) ask-input that lifts a soft teal glow on focus — box-shadow 0 0 36px 4px oklch(68.25% .072 206.25 / .3) with a teal border. Left sidebar 220px, header 56px, answer column 720px within an 1100px thread. Elevate with bg-raised steps and warm hairline borders (rgba(214,213,212,.07–.14)) rather than heavy shadows; radius 8px controls. Motion is calm with soft-landing easings (ease-out-quint, an overshoot ease-out-soft) and a fade-in input glow. Feels: warm, editorial, calm, focused. Avoid: cool-grey backgrounds or pure-white body text, a second brand accent, setting answers in sans or UI in serif, weights 700+, decoration colors in chrome, or heavy drop shadows.
</perplexity_design_language>