Warm near-black answer engine: warm off-white text on #171615, a single peacock-teal accent, serif answers vs sans UI, and a softly glowing teal ask-input.
Browse Perplexity in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
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.
pplxSans, ui-sans-serif, system-ui, -apple-system, sans-serifpplxSerif (--pplx-answer / --pplx-serif)pplxSansMono#d6d5d4| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.