# Perplexity — DESIGN.md Quiet research terminal: off-white answer canvas, near-black sidebar, serif marketing display, single dark CTA — citations and answers lead. Independent reference guide from ScreenRove browser captures (signed-in Free plan + public marketing). Not an official brand guide. Values describe captured desktop states with **observed** / **sampled** / **recommended** labels. Responsive rules are recommendations. Captured: 2026-09-30 (BST) · Account: Alex Christou · Plan: Free · Signed in: yes ## Agent task Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content. ## Font Observed families: **serif display** on marketing headlines (“Where curiosity meets capability”); **geometric sans** for UI chrome and product home headline; **serif body** for answer prose on the query-result surface. A family name is not a bundled font licence. Recommended substitutes: Newsreader / Source Serif for display+answer; Inter / system-ui for UI. --- ## 1. Visual Theme & Atmosphere - Product home: centred prompt (“What do you want to know?”) on a pale canvas with a large rounded ask box — calm, spacious, almost empty until a query starts. - Answer view: conversational research layout — user bubble, “Researched …” meta, serif answer, Answer / Links / Images tabs. - Marketing pricing: generous whitespace, three plan cards, dense comparison table, monochrome with a small blue “Popular” badge. - Philosophy: reduce chrome so sources and answers breathe; dark sidebar organizes sessions without competing with content. ## 2. Color Palette & Roles | Token | Value | Role | Confidence | |---|---|---|---| | Canvas | `#fcfcfc` / soft off-white `#fcf0fc` tint | Page & answer background | sampled | | Soft gray | `#f0f0f0` / `#e4e4e4` | Sidebar, chips, borders | sampled | | Ink | near-black `#242418`–`#000` | Headlines, primary UI | sampled / observed | | Muted | `#a8a8a8`–`#c0c0c0` | Secondary labels, placeholders | sampled | | Primary CTA fill | near-black | “Get started”, “Try Perplexity”, send/mic control | observed | | CTA on-color | `#ffffff` | Labels on dark buttons | observed | | Popular badge | blue | “Popular” on Pro plan | observed | | Pro banner accent | blue/green tint | Free preview of advanced search strip | observed | | Computer promo | dark thumbnail + black button | In-product feature promo | observed | No loud second brand chroma on resting product chrome — accent appears as small badges, checkmarks, and the geometric mark. ## 3. Typography Rules | Role | Size / line height | Weight | Tracking | Notes | |---|---|---|---|---| | Marketing hero (serif) | ~48–64px / tight | 400–500 | slight negative | Pricing headline | | Product home headline | ~28–36px | 500 | normal | “What do you want to know?” | | Answer body (serif) | ~17–19px / ~1.55 | 400 | normal | Query result prose | | Section / list heading | ~16–18px | 600 | normal | “Core principles” | | UI / nav | ~13–14px | 400–500 | normal | Sidebar, tabs | | Plan price | large sans | 500–600 | tight | Pricing cards | | FAQ title (serif) | ~28–36px | 500 | normal | Pricing FAQ | | Footer tagline | very large faint serif italic | 400 | normal | “AI for the curious” | ## 4. Component Stylings ### Navigation - Left sidebar: logo mark, New, Computer, Automations, Artifacts, Customize; Projects + Sessions lists; Upgrade + profile footer. - Answer tabs: Answer (underline active) / Links / Images; Share control. ### Buttons - Primary: filled near-black, white label, high corner radius (pill-ish on marketing; circular send/audio on ask box). - Secondary: light “Select” on Free plan card. - Upgrade plan: outline/soft button in sidebar footer. ### Cards - Pricing: three bordered cards; Pro gets blue Popular badge + dark Get started. - Computer promo banner under home ask box: horizontal card with dark visual + Get Started. - Artifact / automation surfaces: sparse lists or empty states (Artifacts captured empty). ### Inputs - Home ask box: large rounded rect, “Ask anything…”, toolbar with +, Search toggle, Computer, Model dropdown, mic, waveform send. - Follow-up: “Ask a follow-up” bar under answers. ### Connectors / customize - Connectors catalog visible without authorizing (captured). Treat as browse-only evidence. ## 5. Layout Principles - Product: narrow sidebar + wide centred content column. - Home focuses a single ask box mid-viewport; answer view shifts to left-aligned thread with optional right context (not fully expanded in capture). - Pricing: Individual / Enterprise toggle, 3-up cards, then full-width comparison + FAQ. - Whitespace is a first-class material — do not pack marketing denser than captured. ## 6. Depth & Elevation - Mostly flat surfaces with hairline borders and soft gray fills. - Ask box and plan cards use light elevation / border rather than dramatic shadow. - Sidebar is a quiet gray slab against the off-white canvas. ## 7. Do's and Don'ts ### Do - Lead with the question and answer; keep chrome minimal. - Pair serif for marketing/answer reading with sans for controls. - Use near-black as the scarce primary action color. - Label empty Artifacts honestly. - Cite-style answer structure (meta “Researched…”, numbered principles). ### Don't - Don’t add gradient heroes or playful illustration systems on the product home. - Don’t invent citation hover cards or Image-tab grids not captured. - Don’t authorize or depict connected third-party accounts beyond the catalog list. - Don’t claim Pro/Max capabilities on a Free-plan capture. ## 8. Responsive Behavior - Desktop captures only. Recommended: sidebar → drawer <768px; pricing 3→1 column; ask box full-bleed; ≥44px targets. ## 9. Agent Prompt Guide - Canvas off-white; sidebar light gray; CTA near-black. - Home: centred “What do you want to know?” + large rounded ask box. - Answer: user bubble + serif prose + Answer/Links/Images tabs. - Pricing: three cards, blue Popular on mid tier, comparison table, serif FAQ. - Prompt starter: “Build an AI research chat with a light gray sidebar of sessions, an off-white answer canvas using serif body text, and a black primary ask control. Original branding only.” --- ## Implementation recommendations - Own branding and sample queries; do not ship Perplexity’s mark in a product build. - Accessible contrast on gray-on-gray sidebar labels. - 4px spacing base; implement empty/loading; no inferred billing checkout. ## Interaction inventory - Pre-signup welcome / auto-redirect. Screenshots: `flow/00-presignup-perplexity-welcome.jpg`, `flow/00-presignup-perplexity-auto-redirect.jpg`. - Marketing home / pricing / pro. Screenshots: `marketing/perplexity-marketing-*.jpg`. - Product home. `product/perplexity-product-home.jpg`. - Completed query (“key principles for a focused product launch?”). `product/perplexity-product-query-result.jpg`. - Computer sessions. `product/perplexity-product-computer-sessions.jpg`. - Automations. `product/perplexity-product-automations.jpg`. - Artifacts empty. `product/perplexity-product-artifacts-empty.jpg`. - Customize / connectors. `product/perplexity-product-connectors.jpg`. ## Avoid - Presenting Max/Enterprise admin or Comet browser UI as captured product. - Fabricating Images-tab mosaics or paid Computer sessions. ## Reference pages - https://www.perplexity.ai/ - https://www.perplexity.ai/hub/pricing - https://www.perplexity.ai/pro ## Capture scope Free plan onboarding with synthetic choices; no paid plan. Artifacts empty by nature. Connectors browsed only. Mobile/hover not exercised. Marketing pro page captured (thin content in file — treat as limited evidence). ## Format inspiration - https://github.com/voltagent/awesome-design-md - Structure adapted; values from ScreenRove captures. Not a copy of third-party DESIGN.md prose.