What is Perplexity's primary brand color?

Perplexity's signature voltage is a deep teal at #016a71, the single hex flagged as brand-layer across 118 extracted tokens. It carries the Sign In pill in the lower-left corner of the sidebar, the focus ring on every input via --border-focus, every accent text link, and the active state on tonal accent surfaces. The system uses the same teal at desktop scale for product chrome and at icon scale for accent decoration. Companion shades #00a1ac and #01838c fill the brighter and slightly-darker steps of the same shiva ladder, but only #016a71 lives in --accent-fg-primary.

What typography does Perplexity use, and what should I use if pplxSans is unavailable?

Perplexity ships a proprietary face named pplxSans that handles every text node — the lowercase 64px wordmark, the 16px search placeholder, the 14px sidebar labels, the 12px secondary captions. The fallback stack continues into ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial — plus a long CJK and emoji tail. If pplxSans is unavailable, Inter at the same weights (400 body, 500 label) is the closest open-source approximation because of its similar humanist proportions and matched 14px/20px UI grid. Söhne is another close substitute if licensed. Letter spacing across every token is normal — there is no negative tracking move.

Why are Perplexity's CSS variables named after Final Fantasy summons?

The 727 root variables are organized into 11 color summons — sylph, odin, phoenix, titan, shiva, leviathan, ramuh, jenova, fenrir, garuda, ifrit — each laddering -50 through -900 across light and dark twins with -a-5½ through -a-65 alpha siblings. The teal summon shiva carries the accent role through --accent-fg-primary, the warm-black summon odin carries every text and border tone, the cream summon also sits inside odin at -100 and -200. Mapping the namespace to functional tokens (--accent-*, --bg-*, --fg-*, --border-*) is how Perplexity unifies light and dark mode under one variable graph.

Why does Perplexity lean so hard on pill shapes?

Pill (9999px) is the most-frequent radius in the captured DOM at 21 occurrences, versus 17 uses of the 12px container radius and 12 uses of 6px chip radius. The sign-in OAuth buttons, the bottom-corner Sign In CTA, the suggestion chips under Try Computer (Recruiting, Organize my life, Create a prototype, Build a business), and the Search dropdown all sit at full pill radius. Container surfaces — the search composer card, the suggestion panel, the sign-in modal — stay at 12px instead. The pill-first geometry signals that everything you press is a soft target, while everything you read is a contained surface.

Can I use this DESIGN.md to build my own React app?

Yes — the file is structured to feed Claude, Cursor, or any AI tool that reads design tokens, and to reference manually. The agent reproduces the search-canvas voice — cream field, lowercase wordmark, single teal accent, pill OAuth buttons, dark-ink rail — instead of a generic shadcn theme. Every color, type style, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS custom properties, or your own component library. Pair button-primary (cream pill on cream) with button-apple (dark pill on cream) and you have the OAuth pattern; wrap a text-input at 8px radius inside a 12px composer-card and you have the search bar.

What's missing from this DESIGN.md spec?

A handful of items documented in the Known Gaps section. The proprietary pplxSans face has no public web font, and the closest substitute Inter only approximates the proportions. The captured screenshot is the sign-in-gated landing surface, so authenticated views — answer threads, citations, source cards, follow-up chains, Spaces, Artifacts — are not yet extracted. The mobile breakpoint is not documented because the capture was 1440px desktop only. Animation and transition timings (suggestion chip carousel, model selector dropdown, focus-ring bloom) are out of scope. The Discover, Finance, Health, Academic, Patents top-nav surfaces each carry their own internal chrome that is not captured here.

Perplexity Design System

Perplexity AI's design system as a DESIGN.md file.

About Perplexity DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source perplexity.ai

AI & LLM Platforms

Perplexity's interface inverts the AI-tool convention. Where most answer engines wrap a chat textarea in cool slate chrome and a saturated blue accent, Perplexity opens onto a warm cream canvas at #fdfbfa with a single teal voltage at #016a71 — the only color flagged as brand-layer across 118 extracted tokens. The wordmark itself is set lowercase in the proprietary pplxSans face at 64px, sitting above the search field as display copy rather than a separate logo glyph. A 256px dark-ink left rail carries the six product icons — New, Computer, Spaces, Artifacts, Customize, History — and pins a teal-tinted Sign In pill at the bottom corner, framing the central column as the focal canvas.

This page packages all of that into a single DESIGN.md file. Inside: 19 color tokens distilled from a 727-variable CSS root, 10 type styles built entirely on pplxSans, 6 corner radii (9999px pill, 16px, 12px, 8px, 6px, 4px), 8 spacing values on a 4px base, and 20 components spanning the wordmark lockup, search composer, sidebar rail, suggestion-card carousel, sign-in modal, account chip, OAuth pill, model selector, and the dark Apple-style button at the heart of the sign-in flow. Internal CSS variables surface a Final Fantasy summon namespace — sylph, odin, phoenix, titan, shiva, leviathan, ramuh, jenova, fenrir, garuda, ifrit — and the mapping is documented inline.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces the search-canvas voice rather than a generic chat-box theme — cream field, lowercase wordmark, teal-only voltage, pill geometry, dark-ink rail. Every token is a quoted hex or px value ready to paste into Tailwind config, CSS custom properties, or your component library. The system is worth studying because it argues, against the category norm, that an answer engine is a place to read rather than a console to operate.

What makes it distinct

Single teal accent #016a71the only brand-layer hex out of 118 extracted colors, carried by 29 CSS variables under the shiva summon
Mythological summon palettesylph, odin, phoenix, titan, shiva, leviathan, ramuh, jenova, fenrir, garuda, ifrit each ladder 50 to 900 across light and dark twins
Pill-first geometry9999px appears 21 times in the radii sample versus 17 uses of 12px container radius, with 6px chip radius for inline filters
Wordmark as display typelowercase pplxSans renders the brand at 64px instead of a logo glyph, the hero element of the search canvas
Two-ink chromeevery text node sits on #27251e and every border on #271a00, scoped over a #fdfbfa cream field rather than the cool slate convention

Live at perplexity.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

perplexity.ai

Explore Perplexity

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Perplexity design system FAQ

Common questions about Perplexity's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Perplexity — official site

The live answer engine the spec was extracted from — search canvas, sign-in flow, Discover finance feed.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Perplexity in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→