A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
5radius steps
8pxspacing base
Perplexity, in one page
Perplexity's iOS app is the answer engine made tactile. Where ChatGPT and Claude are chat surfaces optimized for conversation, Perplexity is a search engine optimized for one shape of interaction: ask a question, get a cited answer. The interface reflects this — a near-black canvas (#0A0A0A), a single signature cyan-teal accent that Perplexity calls "Sky" or "True Turquoise" (#20B8CD-ish, varying slightly across surfaces), and a hierarchy that puts the question at the top, the answer in the middle, and the source list directly underneath. The app reads as a research notebook, not a chat.
The accent — a clean cyan-teal — is Perplexity's most distinctive design choice. It's not the warm orange of ChatGPT or the terracotta of Claude; it's a cool, slightly desaturated turquoise that connotes information, water, clarity, depth. It carries the send button, the active state of the search bar focus ring, the citation chip outlines, and the brand mark — a stylized triple-circle / asterisk that evokes a search field's autocomplete dropdown. Everything else is white type on dark canvas, with a tight ladder of grey for secondary text and chip surfaces. The restraint is intentional: Perplexity is an information tool, and information needs to read clean.
Typography is FK Grotesk Neue and Inter — Perplexity uses both, with FK Grotesk for the brand voice (headings, the model picker, "Sources" labels) and Inter for the bulk of the answer prose. Both are geometric humanist sans serifs; Perplexity deliberately avoids the editorial-essayist serif voice of Claude in favor of a more technical, encyclopedic register. The answer text is sized at 16pt with a moderately tight 1.5 line-height — Perplexity reads like a Wikipedia paragraph, not a Tiempos essay.
Key Characteristics:
- Near-black canvas (
#0A0A0A) with elevated surface (#171717) for input fields and source cards - Perplexity Teal (
#20B8CD) — cool cyan-teal — as the single signature accent for sends, focus rings, citation outlines, and the brand mark - Citation chips — small numbered pills (
[1],[2],[3]) inline in the answer that link to the source list below - Source card row — horizontal scroll of source cards (favicon + truncated title + domain) at the top of every answer
- The triple-circle / asterisk brand mark in Perplexity Teal — sits on the splash, the empty-state, and the avatar of every answer
- Pro Search toggle — a switch that turns the answer into a multi-step reasoning trace, visible as a "Steps" expandable list above the answer
- Discover / Library / Spaces tabs — a 4-tab bottom nav including the Discover feed of trending searches
- Inter for answer body, FK Grotesk for chrome — clean geometric sans typography
- Hard edges, low elevation, no glass — the app is a tool, not a chat
Do's and don'ts
Do
- Use the near-black canvas (
#0A0A0A) as the default — Perplexity's brand is dark-first - Reserve Perplexity Teal (
#20B8CD) for the send button, focus rings, citation chip outlines, brand mark, and active states - Render citation chips inline within the answer prose as
[1],[2],[3]— never as a footer-only mechanism - Use FK Grotesk for chrome and brand voice; Inter for answer body
- Use off-white (
#FAFAFA) for primary text, not pure white — softer on dark canvas - Render the source card row above every answer with horizontal scroll, 12pt gap, 200pt fixed-width cards
- Use the Perplexity triple-circle mark in teal — never any other color
- Show the "Searching the web…" indicator immediately on submit, before sources arrive
- Use the teal focus glow on the search input —
rgba(32, 184, 205, 0.25) 0 0 0 4px - Use dark text (
#0A0A0A) on Perplexity Teal CTAs — teal needs dark contrast for WCAG AA - Add a Pro badge in teal on subscription touchpoints, with optional Pro Gold accent on premium upsell
Don't
- Don't use a chat-bubble pattern with tails for the question or the answer — Perplexity is search, not chat
- Don't use serif typography for the answer body — Perplexity's voice is encyclopedic, not editorial
- Don't replace the triple-circle mark with a generic search glyph or a stylized "P"
- Don't put citation chips only at the end of the answer — they live inline within the prose
- Don't show the answer without the source card row above it — the citation pattern is the brand
- Don't use a warm accent like orange or red — Perplexity Teal is cool, informational; warm accents break the visual register
- Don't blur the canvas with heavy glass — Perplexity is information-first, not chrome-first
- Don't use pure white
#FFFFFFfor primary text —#FAFAFAoff-white is the correct value on dark - Don't show Pro Search toggle in the off-state without the "Pro" label — the affordance must be discoverable
- Don't use Perplexity Teal for body text — it's a verb, not a color
- Don't skip the streaming cursor — Perplexity's "live answer" feel depends on it
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Perplexity design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Perplexity Teal: #20b8cd
- Teal Bright: #3dd6ec
- Teal Deep: #1591a3
- Teal Soft: #0f3a42
- Canvas: #0a0a0a
- Surface 1: #171717
- Surface 2: #1f1f1f
- Surface 3: #2a2a2a
- Divider: #2a2a2a
- Text Primary: #fafafa
Type:
- families: FK Grotesk Neue, Inter, FK Grotesk, FK Grotesk Mono
- scale: 10, 11, 12, 13, 14, 15, 16, 18, 22
- weights: 400, 500, 600, 700
Shape:
- radius: 4, 8, 10, 12, 24
Spacing: 8, 12, 14
Rules:
- Use the near-black canvas (`#0A0A0A`) as the default — Perplexity's brand is dark-first
- Reserve Perplexity Teal (`#20B8CD`) for the send button, focus rings, citation chip outlines, brand mark, and active states
- Render citation chips inline within the answer prose as `[1]`, `[2]`, `[3]` — never as a footer-only mechanism
- Use FK Grotesk for chrome and brand voice; Inter for answer body
- Use off-white (`#FAFAFA`) for primary text, not pure white — softer on dark canvas
- Render the source card row above every answer with horizontal scroll, 12pt gap, 200pt fixed-width cards
Avoid:
- Don't use a chat-bubble pattern with tails for the question or the answer — Perplexity is search, not chat
- Don't use serif typography for the answer body — Perplexity's voice is encyclopedic, not editorial
- Don't replace the triple-circle mark with a generic search glyph or a stylized "P"
- Don't put citation chips only at the end of the answer — they live inline within the prose
- Don't show the answer without the source card row above it — the citation pattern is the brand
- Don't use a warm accent like orange or red — Perplexity Teal is cool, informational; warm accents break the visual register
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Perplexity Teal (
#20B8CD): The signature accent — send button, focus rings, citation chip outlines, brand mark, "Pro" badge fill, active tab indicator. - Teal Bright (
#3DD6EC): Hover / pressed state on the send button; the streaming response cursor. - Teal Deep (
#1591A3): Dark-state variants — pressed Pro badge, secondary teal accents. - Teal Soft (
#0F3A42): Background of the active source-card hover state on dark; "Searching the web…" indicator soft fill.
Canvas (dark-first — Perplexity defaults to dark)
- Canvas (
#0A0A0A): Primary near-black canvas — every screen by default. - Surface 1 (
#171717): Input field background, source card fill, modal surfaces. - Surface 2 (
#1F1F1F): Pressed states, hover, chip fills on dark. - Surface 3 (
#2A2A2A): Higher elevation — sheets, sticky headers above content. - Divider (
#2A2A2A): 0.5pt hairlines on dark.
Text (on dark)
- Text Primary (
#FAFAFA): Primary text — answer body, question titles, model name. - Text Secondary (
#A1A1A1): Secondary text — source domains, citation hints, metadata. - Text Tertiary (
#6E6E6E): Tertiary — placeholder, helper, disabled labels. - Text Muted (
#4A4A4A): Very-secondary metadata, separator dots.
Code & Syntax (inside code blocks)
- Code BG (
#0E0E0E): Slightly darker than canvas — code blocks pop subtly - Code FG (
#E5E5E5): Default code text - Syntax Keyword (
#20B8CD): Keywords — Perplexity Teal - Syntax String (
#A8E063): Strings — lime green - Syntax Number (
#F2A65A): Numbers — soft orange - Syntax Comment (
#6E6E6E): Comments - Syntax Function (
#B988F2): Function names — soft purple
Semantic
- Success Green (
#22C55E): "Copied", citation source verified - Warning Amber (
#F59E0B): "Limited results", paywall warnings - Error Red (
#EF4444): Failed queries, source unavailable - Pro Gold (
#E0B341): "Pro" subscription badges (used sparingly — gold is reserved for premium identity)
Light Mode
Perplexity supports light mode, but the brand defaults to dark. Light mode preserves all teal accents.
- Light Canvas (
#FFFFFF): Primary light canvas. - Light Surface 1 (
#F7F7F7): Input fields, source cards. - Light Surface 2 (
#EFEFEF): Pressed states, chip fills on light. - Light Divider (
#E5E5E5): Hairlines on light. - Light Text Primary (
#111111): Primary text on light. - Light Text Secondary (
#555555): Secondary. - Light Text Tertiary (
#999999): Tertiary. - Perplexity Teal (light) (
#1591A3): Slightly darker teal for WCAG AA on light background.
Type scaleRead the full spec
Font Family
- Primary (chrome, headings, brand voice):
FK Grotesk Neue— a geometric humanist sans by Florian Karsten, used by Perplexity for the brand identity - Body (answer text):
Inter— Rasmus Andersson's geometric humanist sans, used for the bulk of answer prose - Weights available: FK Grotesk: Regular (400), Medium (500), Bold (700); Inter: Regular (400), Medium (500), Semibold (600), Bold (700)
- Fallback stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif - Google Fonts substitute:
Interfor both — both faces have similar geometric humanist characteristics and Inter ships everywhere
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display (Discover hero) | FK Grotesk | 30pt | 700 | 1.15 | -0.5pt | "Discover", "Library", "Spaces" |
| Question Title | FK Grotesk | 22pt | 600 | 1.25 | -0.3pt | The user's question at the top of every answer |
| Section Header | FK Grotesk | 18pt | 600 | 1.3 | -0.1pt | "Sources", "Related", "Steps" |
| Subsection | FK Grotesk | 16pt | 600 | 1.3 | 0pt | "Web", "Reddit", subsection headings inside answers |
| Answer Body | Inter | 16pt | 400 | 1.5 | 0pt | The bulk of the answer prose |
| Answer Body Bold | Inter | 16pt | 600 | 1.5 | 0pt | Emphasis within answers |
| List Item | Inter | 16pt | 400 | 1.5 | 0pt | Bulleted / numbered lists inside answers |
| Source Card Title | Inter | 13pt | 500 | 1.3 | 0pt | Source title in the source row, 2-line truncate |
| Source Card Domain | Inter | 11pt | 400 | 1.3 | 0pt | "wikipedia.org", "arxiv.org" |
| Citation Chip | FK Grotesk Mono | 11pt | 500 | 1.0 | 0pt | The 1 / 2 numerals inside citation chips |
| Search Placeholder | Inter | 16pt | 400 | 1.4 | 0pt | "Ask anything…" |
| Button (Primary) | FK Grotesk | 15pt | 600 | 1.0 | 0pt | "Search", "Save to Library" |
| Button (Pro) | FK Grotesk | 13pt | 700 | 1.0 | 0.2pt | "Pro" badge label |
| Tab Label | FK Grotesk | 10pt | 500 | 1.0 | 0.2pt | Bottom tab labels |
| Metadata | Inter | 12pt | 400 | 1.3 | 0pt | Timestamps, "12 sources" |
| Code Block | JetBrains Mono | 14pt | 400 | 1.5 | 0pt | Code inside answers |
| Inline Code | JetBrains Mono | 14pt | 500 | 1.4 | 0pt | inline code |
| Caption | Inter | 11pt | 400 | 1.3 | 0pt | "Powered by Perplexity Pro" |
Principles
- Two-face system: FK Grotesk carries the chrome and brand voice; Inter carries the answer body. The split is intentional — the chrome speaks "Perplexity", the body speaks "encyclopedia".
- Answer body at 16pt with 1.5 line-height: This is the most-read text in the app, and it's intentionally tighter than Claude's 1.55. Perplexity reads denser, more reference-book.
- Numeric citations are typeset matter:
[1],[2],[3]use FK Grotesk Mono — a monospace variant — at 11pt 500 to ensure they hold their pill shape and align in lists. - Off-white primary text, never pure white:
#FAFAFAreads softer on near-black canvas than pure#FFFFFF; reduces glare and feels more typographic. - Dynamic Type respected on answer body, headings, lists: Citation chips, tab labels, source domain text, and code block language labels are fixed (layout-sensitive).
- Tight tracking at display: -0.5pt at 30pt falling to 0pt at body — geometric sans needs slight negative tracking at headlines to feel composed.
Components and layoutRead the full spec
Buttons
Send / Search Circle (the teal icon-only send)
- Diameter: 36pt
- Background:
#20B8CD(Perplexity Teal) when input has text;#2A2A2A(Surface 3) when empty - Icon: 14pt arrow-up glyph,
#0A0A0Awhen active (dark text on teal),#6E6E6Ewhen disabled - Pressed: scale 0.94, background
#3DD6EC - Haptic:
.impactOccurred(.medium)on send - Sits trailing the search input
Primary Pill (Save to Library, Sign in, etc.)
- Background:
#20B8CDPerplexity Teal - Text:
#0A0A0A(dark on teal for WCAG) - Padding: 12pt vertical, 24pt horizontal
- Corner radius: 10pt (medium — Perplexity avoids capsule corners outside of citation chips)
- Pressed: background
#1591A3
Secondary Pill (Copy, Share, Pro Search)
- Background:
#1F1F1F(Surface 2) - Border: 1pt
#2A2A2A - Text:
#FAFAFA, FK Grotesk 14pt Medium - Padding: 8pt vertical, 16pt horizontal
- Corner radius: 8pt
Pro Search Toggle (the multi-step reasoning toggle)
- Pill-shaped switch sitting above the search input
- Off state:
#1F1F1Ffill, "Pro" label in#A1A1A1FK Grotesk 13pt Medium, no fill - On state:
#20B8CDPerplexity Teal fill, "Pro" label in#0A0A0AFK Grotesk 13pt Bold - 28pt tall, 60pt wide, 14pt radius
- A small
sparkleglyph leads the "Pro" text on hover - Tap toggles with a
.selectionChanged()haptic + a 200ms slide animation on the indicator
Citation Chip (the most-rendered button in the app)
- Inline within answer text — replaces what would otherwise be a footnote
- Width: auto, min 18pt; height: 18pt
- Background:
#1F1F1F(Surface 2) — or#0F3A42(Teal Soft) when hovered/focused - Border: 1pt
#2A2A2Adefault; 1pt#20B8CDPerplexity Teal when focused - Text:
[1],[2],[3]— number only, FK Grotesk Mono 11pt Medium, color#A1A1A1default /#20B8CDon focus - Padding: 0pt vertical (height controlled by font), 5pt horizontal
- Corner radius: 4pt
- Tap: scrolls to / opens the matching source card; brief
.impactOccurred(.soft)haptic - Hover (iPad): reveals a tooltip with the source title + favicon
Cards & Containers
Search Input (the home of the app)
- Width: full minus 24pt margins
- Background:
#171717(Surface 1) - Border: 1pt
#2A2A2Adefault; 1.5pt#20B8CDfocused - Corner radius: 24pt (capsule-ish on single line; softer when grown)
- Min height: 56pt; auto-grow up to 200pt
- Padding: 14pt vertical, 18pt left, 60pt right (room for send circle)
- Placeholder: "Ask anything…" in Inter 16pt Regular
#6E6E6E - Text: Inter 16pt Regular
#FAFAFA - Trailing: paperclip-attach button + 36pt send circle stacked horizontally
- Below the input (when empty): a row of suggested-prompts chips ("Trending", "Compare", "Summarize this URL") — pills with
#1F1F1Ffill,#A1A1A113pt Medium text
Source Card (horizontal scroll above answer)
- Width: 200pt × 80pt
- Background:
#171717(Surface 1) - Border: 1pt
#2A2A2A - Corner radius: 12pt
- Padding: 12pt all around
- Top row: 16pt favicon + Inter 11pt Regular
#A1A1A1domain ("wikipedia.org") - Bottom: Source title in Inter 13pt Medium
#FAFAFA, 2-line truncate with ellipsis - A small numeric badge top-right (
1,2,3) matching the inline citation —#1F1F1Ffill with the number in#A1A1A1FK Grotesk Mono 10pt Bold - Horizontal scroll row, 12pt gap between cards, 12pt leading inset
- After the last card, a "Show all 12 sources" chevron card with
#1F1F1Ffill
Answer Block (the conversation hero)
- Full-width flow of typography — no container background, no bubble
- Top: a 20pt Perplexity-mark icon at the leading edge + "Answer" label in FK Grotesk 13pt Medium
#A1A1A1 - Below: the answer body in Inter 16pt Regular
#FAFAFAwith 1.5 line-height - Citation chips inline within the prose, looking like superscript-but-pill —
[1],[2]etc. - Markdown rendering: headings get FK Grotesk Semibold treatment (h2 18pt, h3 16pt, h4 14pt); lists get 8pt gap; bold/italic/inline-code distinct
- Action row at the bottom of the answer: Copy / Share / Pro Search retry / Save to Library — secondary pill buttons
- 32pt gap between the answer block and the related-questions section below
Related Questions Card (under every answer)
- "Related" label in FK Grotesk 13pt Medium
#A1A1A1at the top - A vertical stack of 3-5 question rows
- Each row: 56pt tall, full width, 1pt
#2A2A2Abottom border, padding 12pt vertical / 16pt horizontal - Row content: question text in Inter 15pt Regular
#FAFAFA+ a 14ptarrow.rightchevron in#A1A1A1trailing - Tap: starts a new search with that question
- Hover/press:
#1F1F1Ffill on the row
Pro Steps List (when Pro Search is on)
- A collapsible card above the answer
- Header: 14pt
sparkleglyph in#20B8CDPerplexity Teal + "Steps" label in FK Grotesk 13pt Medium#FAFAFA+ step count "(4)" in#A1A1A1 - Each step: a row showing the step name (e.g., "Searching for: 'Bayesian inference history'") + a small completed-check
#20B8CDglyph - Collapsed by default; tap header to expand with a 300ms ease accordion
- Background:
#0F3A42Teal Soft, 12pt corner radius, 16pt internal padding
Code Block
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Source card width drops 200pt → 180pt; the related questions card uses 1-line truncate |
| iPhone 13/14/15 | 390pt | Standard 200pt source cards, 24pt search input margins |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected; the 56pt header sits below status bar |
| iPhone 15/16 Pro Max | 430pt | Source cards can grow to 220pt; answer body gains slight extra horizontal margin |
| iPad | 768pt+ | Persistent 260pt sidebar; answer max-width 720pt centered; source card row keeps 200pt cards but adds scroll arrows |
| iPad Pro 12.9 | 1024pt+ | Two-column layout: answer left (60%), sources expanded right (40%) — the source list moves from a horizontal row to a vertical sidebar |
Dynamic Type
- Answer body, all headings, list items, source titles, question titles: full scale
- Citation chips, source domain text, tab labels, code block language label: fixed
- Code block font scales but caps at 18pt to prevent overflow
Orientation
- All screens: portrait + landscape supported
- On landscape iPhone: sidebar opens as a 60%-width panel, not full-screen
- On iPad: sidebar persistent both orientations; the source list switches between horizontal (portrait) and vertical (landscape) when in two-column mode
Touch Targets
- Send circle: 36pt button on a 56pt hit area
- Citation chip: 18pt visual on a 32pt hit area (tap-target padding)
- Source card: 200pt × 80pt full-card tap
- Tab bar icons: 22pt icon, full 56pt row
- Related question row: full 56pt row
Safe Area Handling
- Top: safe area honored — the 56pt header sits below status bar / Dynamic Island
- Bottom: search input pins above home indicator with full safe area inset; tab bar sits above home indicator
- Sides: 16-24pt content insets depending on screen
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-perplexity {--page-bg: #0a0a0a;
--page-bg-gradient: none;
--text-color: #fafafa;
--heading-color: #fafafa;
--link-color: #f59e0b;
--link-hover-color: #c57f08;
--border-color: #353535;
--card-bg: #0a0a0a;
--card-shadow: 0 1px 2px rgba(250,250,250,0.06);
--card-hover-shadow: 0 6px 18px rgba(250,250,250,0.12);
--header-bg: #1e1e1e;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #0a0a0a;
--footer-text-color: #a6a6a6;
--button-bg: #f59e0b;
--button-text-color: #000000;
--button-hover-bg: #c57f08;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #181818;
--button-secondary-text-color: #fafafa;
--button-secondary-hover-bg: #272727;
--button-secondary-border: 1px solid #353535;
--prompt-bg: #161616;
--prompt-text-color: #fafafa;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 81.4%
- vimeo 81.0%
- clubhouse 80.2%
- coffee meets bagel 78.9%
- copilot 78.7%
Where this came from
- Source document
ios/design-md/misc/perplexity/DESIGN.md· 30.6 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.