Design System Inspiration of Perplexity

1. Visual Theme & Atmosphere

Perplexity is an AI answer engine, and its design is built around a single idea: get out of the way of the answer. Where most AI products lean on neon gradients, glassmorphism, and a cold sci-fi chrome, Perplexity went the opposite direction — a calm, editorial, almost Scandinavian aesthetic where the interface dissolves and the text takes the stage. The brand was crafted by studio Smith & Diction, who described the brief as "creating an invisible brand": the product is a reading experience, so the chrome should feel like good paper and good ink, not a dashboard.

The atmosphere is quiet and literary. Surfaces are warm off-white and bone-paper tones (#FBFAF4, #FCFCF9) rather than clinical pure white, paired with a deep near-black ink (#091717) that reads like printed type. The one expressive move is the signature Peacock / True Turquoise teal (#20808D) — a muted, slightly grayed teal that nods to terminal phosphor and to the Perplexity "answer cursor" without tipping into the saturated cyan that every other AI startup uses. It is confident but never loud.

Typographically the brand runs on FK Grotesk and FK Display (Florian Karsten's grotesque family), a choice that gives the UI a precise, subway-signage neutrality with just enough idiosyncratic character (the alternates, the display weight) to feel authored rather than defaulted. Body copy frequently uses FK Grotesk Neue for legibility at small sizes. The result is an interface that feels like a well-set magazine that happens to think.

Key Characteristics:

• Peacock teal (#20808D) as the single brand accent — muted, terminal-adjacent, never neon
• Warm paper backgrounds (#FBFAF4 / #FCFCF9), not pure white — an editorial, low-glare reading surface
• Deep teal-black ink (#091717) for type — reads like print, not #000
• FK Grotesk / FK Display / FK Grotesk Neue — neutral grotesque with quiet character
• "Invisible brand" philosophy: the answer is the hero, the chrome recedes
• First-class dark mode built on the same teal, on a near-black #0D1117-family canvas
• Generous radii (8–12px) and soft, low-contrast borders for a paper-soft feel

2. Color Palette & Roles

Primary

• True Turquoise / Peacock (#20808D): The brand teal. Primary interactive accent — the submit/answer button, active links, focus rings, source highlights, the answer cursor. The single hue allowed to carry brand voice.
• Teal Hover (#1A6873): Darkened Peacock for hover/pressed states on teal surfaces.
• Teal Deep (#13343B): Inky teal for emphasis on light surfaces, selected-source rails, and quiet brand washes.
• Teal Tint (#E5F2F2): Pale teal wash for informational backgrounds, hovered list rows, citation chips on light surfaces.

Ink & Paper (Neutrals — light mode)

• Offblack Ink (#091717): Primary text. A teal-tinted near-black that reads like printed ink, never harsh #000000.
• Paper (#FBFAF4): Primary page background — warm bone-white, the editorial reading surface.
• Paper Raised (#FCFCF9): Card and panel surface, fractionally lighter/cooler than the page.
• Pure White (#FFFFFF): Reserved for input wells and elevated overlays that need to pop off Paper.
• Ink 700 (#2E3A3A): Strong body text, sub-headings.
• Ink 500 (#5C6A6A): Secondary text, metadata, captions.
• Ink 400 (#8A9494): Placeholder text, disabled labels, timestamps.
• Line 200 (#E4E4DC): Default borders and dividers on Paper — soft, warm, low-contrast.
• Line 100 (#EFEFE9): Hairline separators inside grouped lists.

Dark Mode (the canonical reading mode for many users)

• Canvas (#0D1117): Primary dark page background — near-black with a cool cast.
• Surface (#161B22): Cards, the composer well, source panels.
• Surface Raised (#1C2128): Hovered rows, popovers, menus.
• Ink Inverse (#F2F2ED): Primary text on dark — warm off-white, matching the Paper temperature.
• Ink Inverse 500 (#9BA1A6): Secondary text on dark.
• Line Dark (#2A2F37): Borders and dividers on dark surfaces.
• Teal on Dark (#34B4C4): A brightened Peacock used as the accent on dark canvas so the teal keeps its contrast.

Semantic

• Success (#1F9D6B): Confirmations, copied-to-clipboard, completed runs.
• Error (#E0524A): Failed queries, destructive actions, rate-limit notices.
• Warning (#D9923A): Soft cautions, "this answer may be outdated" flags.
• Info (#20808D): Informational notes reuse the brand teal — info and brand are the same voice here.

Source / Citation Accents

Citation chips and source pills cycle through a restrained set so users can distinguish references at a glance without a rainbow:

• Source Teal (#20808D), Source Slate (#4B5A66), Source Plum (#6E5A86), Source Clay (#A86A4B). All muted, all sitting quietly under the text.

3. Typography Rules

Font Family

• Display / Wordmark: "FK Display", "FK Grotesk", Georgia, serif-fallback — used for the logotype and the largest hero moments only.
• Primary UI / Headings: "FK Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
• Body / Answer text: "FK Grotesk Neue", "FK Grotesk", "Inter", sans-serif — the Neue cut is optimized for small-size legibility, used for answer bodies and dense reading.
• Monospace: "Berkeley Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace — code blocks, model names, API snippets.

Hierarchy

Principles

• Reading-first leading: Answer body uses ~1.6 line-height — well above typical UI. The product is text, so the text breathes like a magazine column, not a form.
• Display is rare: FK Display appears only in the wordmark and the largest marketing moments. The UI itself is almost entirely FK Grotesk / Neue. Restraint keeps the display weight special.
• Negative tracking on big type: Headings and display tighten slightly (-0.01 to -0.02em) for an editorial, set-by-hand feel. Body and small sizes stay at normal tracking for legibility.
• Three weights: 400 (body), 500 (labels/display), 600 (headings). No black, no thin — the grotesque carries authority at mid-weights.
• Inline citations are typographic: Source numbers [1] render as superscript teal tokens inside the answer flow, part of the type system rather than separate UI.

4. Component Stylings

Buttons

Primary (Submit / Ask)

• Background: #20808D
• Text: #FFFFFF
• Border: none
• Radius: 10px
• Padding: 0 18px (height 44px)
• Font: 14px / 500 / FK Grotesk
• Hover: #1A6873
• Pressed: #13343B
• Disabled: #20808D at 40% opacity
• Use: The ask/submit action, primary CTA on marketing pages

Secondary (Outline)

• Background: transparent
• Text: #091717
• Border: 1px solid #E4E4DC
• Radius: 10px
• Padding: 0 18px (height 44px)
• Font: 14px / 500 / FK Grotesk
• Hover: background #FCFCF9, border #D6D6CC
• Use: Secondary actions next to a primary (e.g. "Rewrite", "Copy")

Ghost / Quiet

• Background: transparent
• Text: #5C6A6A
• Border: none
• Radius: 8px
• Padding: 0 12px (height 36px)
• Font: 14px / 500 / FK Grotesk
• Hover: background #EFEFE9, text #091717
• Use: Toolbar actions, icon+label buttons in the thread (Share, Sources, More)

Pill (Focus mode / Filter)

• Background: #FFFFFF
• Text: #2E3A3A
• Border: 1px solid #E4E4DC
• Radius: 9999px
• Padding: 6px 14px (height 34px)
• Font: 13px / 500 / FK Grotesk
• Active: border #20808D, text #13343B, background #E5F2F2
• Use: Search-focus selectors (Web, Academic, Writing), source filters

Composer (the Ask box)

The composer is the signature surface — a large rounded well where the user types.

• Background: #FFFFFF (light) / #161B22 (dark)
• Text: #091717 / #F2F2ED
• Border: 1px solid #E4E4DC / #2A2F37
• Radius: 16px
• Padding: 16px 18px
• Font: 16px / 400 / FK Grotesk Neue
• Placeholder: #8A9494 ("Ask anything…")
• Focus: border #20808D, soft ring 0 0 0 3px rgba(32,128,141,0.12)
• Shadow: 0 1px 3px rgba(9,23,23,0.06)
• Inner toolbar: focus-mode pills left, attach/voice/submit icons right; submit is the teal Primary button

Inputs (standard)

Text Field

• Background: #FFFFFF
• Text: #091717
• Border: 1px solid #E4E4DC
• Radius: 10px
• Padding: 10px 14px
• Font: 15px / 400 / FK Grotesk Neue
• Placeholder: #8A9494
• Focus: border #20808D, ring 0 0 0 3px rgba(32,128,141,0.12)
• Error: border #E0524A, ring rgba(224,82,74,0.12)

Cards

Answer Card

• Background: #FCFCF9
• Border: 1px solid #EFEFE9
• Radius: 12px
• Padding: 20px 24px
• Shadow: none (separation via warm border, editorial flat)
• Use: The container for a generated answer block in a thread

Source Card

• Background: #FFFFFF
• Border: 1px solid #E4E4DC
• Radius: 10px
• Padding: 12px 14px
• Shadow: 0 1px 2px rgba(9,23,23,0.05)
• Hover: border #20808D, lift to 0 2px 8px rgba(9,23,23,0.08)
• Content: favicon 16px + domain (13px #5C6A6A) + title (14px #091717), 2-line clamp
• Use: Horizontal scroll rail of cited sources above an answer

Discover / Feed Card

• Background: #FCFCF9
• Border: 1px solid #EFEFE9
• Radius: 12px
• Padding: 0 (image top, 16px text)
• Use: Discover-tab editorial story cards

Citation Chips

• Background: #E5F2F2 (light) / rgba(52,180,196,0.16) (dark)
• Text: #13343B / #34B4C4
• Border: none
• Radius: 6px
• Padding: 1px 6px
• Font: 11px / 600 / FK Grotesk (or superscript [1] inline)
• Use: Inline source references inside answer text; hover reveals a source popover

Badges

Pro / Model Badge

• Background: #13343B
• Text: #FFFFFF
• Border: none
• Radius: 6px
• Padding: 2px 8px
• Font: 11px / 600 / FK Grotesk
• Use: "PRO", model labels (Sonar, GPT-5, Claude)

Status Badge (Weak)

• Background: #E5F2F2
• Text: #20808D
• Border: none
• Radius: 6px
• Padding: 2px 8px
• Font: 11px / 600 / FK Grotesk
• Use: "New", "Beta", focus-mode labels

Tabs

Top Nav Tab

• Inactive: text #5C6A6A, transparent
• Active: text #091717, 2px bottom border #20808D
• Font: 14px / 500 / FK Grotesk
• Use: Home / Discover / Spaces / Library navigation

Toasts

Default

• Background: #091717
• Text: #F2F2ED
• Border: none
• Radius: 10px
• Padding: 12px 16px
• Shadow: 0 4px 16px rgba(9,23,23,0.18)
• Font: 14px / 400 / FK Grotesk Neue
• Use: "Copied", "Shared", transient confirmations — bottom-center, 3s dismiss

Dialogs

Centered Modal

• Background: #FBFAF4
• Text: #091717
• Border: none
• Radius: 16px
• Padding: 28px
• Shadow: 0 16px 48px rgba(9,23,23,0.20)
• Backdrop: rgba(9,23,23,0.40)
• Use: Sign-in, settings, share, upgrade prompts

Toggles

Switch

• On: #20808D track / off: #D6D6CC track
• Thumb: #FFFFFF 18px circle, 0 1px 2px rgba(9,23,23,0.20)
• Radius: 9999px
• Use: Settings (e.g. AI Profile, dark mode, auto-suggestions)

Tier 1 sources: https://www.perplexity.ai (live production site, verified via live DOM getComputedStyle).

5. Layout Principles

Spacing System

• Base unit: 4px
• Common values: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px
• Reading column gets generous vertical rhythm (24–32px between answer blocks)

Grid & Container

• Centered single reading column, max-width ~768px for answer/thread content (a magazine measure)
• Marketing pages: 1200px max container with 24px gutters
• Three-zone app shell: collapsible left rail (nav/library), centered content column, optional right rail (sources/related)
• Discover feed: responsive 1–3 column masonry of story cards

Whitespace Philosophy

• The answer breathes: Generated text gets a constrained measure (~68ch) and ~1.6 leading so it reads like an article, never a wall.
• Quiet chrome: Toolbars and nav sit in muted ink grays so they recede; only the teal and the answer text earn the user's eye.
• Source rails are calm: Citations live in a horizontal scroll above or beside the answer, never crowding the prose.

Border Radius Scale

• Small (6px): chips, citation tokens, badges
• Standard (10px): buttons, inputs, source cards
• Comfortable (12px): answer/feed cards
• Large (16px): composer well, modals
• Pill (9999px): focus-mode pills, toggles

6. Depth & Elevation

Shadow Philosophy: Perplexity is paper-flat by default. Most separation comes from warm, low-contrast borders and the temperature shift between Paper (#FBFAF4) and Paper Raised (#FCFCF9), not from drop shadows. Shadows are reserved for genuinely floating layers, and they're tinted with the ink color (rgba(9,23,23,…)) rather than pure black, keeping the whole surface warm. The brand's restraint is the point — depth is a tool, not decoration.

Blur Effects

• Source popovers and the command palette use a light backdrop blur (blur(8px)) over a translucent scrim
• The sticky composer applies a subtle blur as content scrolls beneath it

7. Do's and Don'ts

Do

• Use Peacock teal (#20808D) as the single accent — buttons, links, focus rings, active states
• Background with warm paper tones (#FBFAF4 / #FCFCF9), not pure white
• Use teal-tinted ink (#091717) for text, never #000000
• Set answer body in FK Grotesk Neue at ~1.6 line-height for a reading experience
• Constrain the answer column to a ~68ch measure
• Keep chrome quiet (#5C6A6A ink grays) so the answer is the hero
• Render inline citations as small teal [1] tokens in the type flow
• Provide a first-class dark mode on #0D1117 with brightened teal #34B4C4

Don't

• Don't use saturated neon cyan or AI-startup gradients — the teal is muted on purpose
• Don't put the answer in pure white boxes with heavy shadows — stay paper-flat
• Don't crowd the reading column with dense toolbars or rails
• Don't use bright multi-color accents for sources — keep the muted source palette
• Don't set body text below 15px or above 16px in the answer flow
• Don't use #000000 text or #FFFFFF page backgrounds in light mode
• Don't let the brand teal decorate non-interactive elements — it signals action and citation

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: 44px primary, 36px ghost — comfortable thumb targets on mobile
• Composer submit: 40px circular/rounded target, always reachable
• Source cards: full-width tappable rows on mobile

Collapsing Strategy

• Left navigation rail collapses to icon-only, then to a hamburger drawer on mobile
• Source rail: right-side on desktop → horizontal scroll strip above the answer on mobile
• Related questions: sidebar list on desktop → stacked chips below the answer on mobile
• Composer: inline on desktop, sticky-bottom with safe-area inset on mobile

Image Behavior

• Source favicons: fixed 16px
• Discover story images: 16:9, full-bleed card tops, lazy-loaded
• Generated/answer images: responsive, max content-width, rounded 10px

9. Agent Prompt Guide

Quick Color Reference

• Primary accent: Peacock Teal (#20808D)
• Teal Hover: (#1A6873)
• Page background: Paper (#FBFAF4)
• Card surface: Paper Raised (#FCFCF9)
• Input/overlay surface: White (#FFFFFF)
• Heading/body ink: Offblack (#091717)
• Secondary text: Ink 500 (#5C6A6A)
• Placeholder: Ink 400 (#8A9494)
• Border: Line 200 (#E4E4DC)
• Teal tint bg: (#E5F2F2)
• Dark canvas: (#0D1117), dark teal accent (#34B4C4)
• Success (#1F9D6B) · Error (#E0524A) · Warning (#D9923A)

Example Component Prompts

• "Build the Ask composer: white well, 16px radius, 1px #E4E4DC border, 16/18 padding. Placeholder 'Ask anything…' in #8A9494, 16px FK Grotesk Neue. Focus: #20808D border + 3px rgba(32,128,141,0.12) ring. Bottom toolbar: focus-mode pills left, teal submit button right."
• "Create a primary button: #20808D bg, white text, 14px/500 FK Grotesk, 44px tall, 10px radius, 18px h-padding. Hover #1A6873, pressed #13343B."
• "Design a source card: white bg, 10px radius, 1px #E4E4DC border. 16px favicon + domain (13px #5C6A6A) + title (14px #091717, 2-line clamp). Hover: teal border, 0 2px 8px rgba(9,23,23,0.08) lift."
• "Lay out an answer block: #FCFCF9 card, 12px radius, 1px #EFEFE9 border, no shadow, 20/24 padding. Body in FK Grotesk Neue 16px, line-height 1.63, color #091717, max-width 68ch. Inline [1] citations as #13343B superscript on #E5F2F2."
• "Make a focus-mode pill row: white pills, 9999px radius, 1px #E4E4DC border, 13px/500 FK Grotesk, 6/14 padding. Active pill: #E5F2F2 bg, #20808D border, #13343B text."

Iteration Guide

1. Page = warm Paper (#FBFAF4), never pure white. Ink = #091717, never #000.
2. Teal #20808D is the only accent and signals action or citation — use it sparingly.
3. Answer text is the hero: FK Grotesk Neue, 16px, ~1.6 leading, ~68ch measure.
4. Paper-flat by default — separate surfaces with warm borders, not shadows.
5. Radii: 6px chips, 10px buttons/inputs, 12px cards, 16px composer/modals.
6. Provide dark mode on #0D1117 with brightened teal #34B4C4.
7. Keep chrome quiet (#5C6A6A) so it recedes behind the answer.

---

10. Voice & Tone

Perplexity speaks like a sharp, well-read research assistant: direct, neutral, citation-obsessed, and allergic to hype. The product's core promise is trust, so the copy never overclaims — it answers, then shows its sources. Sentences are clean and declarative. There's a quiet curiosity to the brand voice (the tagline lineage is literally "Where knowledge begins"), but it stays understated; Perplexity would rather be right than clever.

Forbidden phrases. No Oops, no magic, no revolutionary, no exclamation-stacked hype, no emoji in answers. Never present a synthesized claim without a path to its source — unsourced confidence is the one thing the brand will not do.

11. Brand Narrative

Perplexity AI was founded in 2022 by Aravind Srinivas, Denis Yarats, Johnny Ho, and Andy Konwinski as an "answer engine" — a search product that responds in synthesized, cited prose instead of ten blue links. The thesis was that the future of search is a conversation that always shows its work. That single conviction — answers with citations — drives every design decision.

When the brand identity needed to mature past a developer prototype, Perplexity worked with Philadelphia studio Smith & Diction, who framed the work as building "an invisible brand." The logic: Perplexity is a reading and thinking tool, so the most respectful design recedes. They reached for an editorial, Scandinavian-leaning system — warm paper grounds, a precise grotesque type family (FK Grotesk / FK Display), and a single muted teal (#20808D) chosen specifically because it was not the saturated cyan of the AI gold rush. The teal reads a little like terminal phosphor and a little like a peacock — technical and natural at once.

What Perplexity refuses is instructive: no gradient meshes, no glassmorphic dashboards, no neon "AI" sheen, no mascot. In a category sprinting toward maximal sci-fi spectacle, Perplexity bet on the opposite — calm, literacy, and trust. The interface should feel like the best version of reading a really good article, where the answer is the design and the chrome is just good paper and good ink.

12. Principles

1. The answer is the hero. Every pixel of chrome exists to deliver the user to the text faster and then disappear. If a UI element competes with the answer for attention, it's wrong.
2. Always show your work. No claim without a path to its source. Citations are a first-class, typographic part of the answer, not an afterthought panel.
3. Calm over spectacle. Warm paper, muted teal, quiet grays. The brand earns trust by not shouting in a category that shouts.
4. One accent, used with discipline. Teal #20808D means action or citation. It never decorates. Restraint makes the teal legible as a signal.
5. Read like print. Answer text gets a constrained measure and generous leading. The product is text; it should typeset like a magazine, not a form.
6. Paper-flat depth. Separation comes from warm borders and surface temperature, not drop shadows. Elevation is reserved for things that truly float.
7. Dark mode is not an afterthought. Many users read at night; the dark theme is designed in parallel with the same teal logic, not bolted on.
8. Invisible brand. The strongest identity here is the one you stop noticing — the brand succeeds when the user only remembers the answer.

13. Personas

Personas below are fictional archetypes informed by publicly described knowledge-worker and researcher segments, not individual people.

Maya, 29, San Francisco. Product manager who replaced her default search engine with Perplexity six months ago. Uses it 15+ times a day for quick fact-finding, competitive research, and drafting. She trusts it specifically because every answer shows sources — she clicks through to verify the ones that matter. Reads in dark mode all day. Gets irritated by any AI tool that sounds confident without proof.

Daniel, 44, Boston. Academic researcher in public health. Uses Perplexity's Academic focus to scan literature and find primary sources fast, then follows citations into the actual papers. Values the muted, distraction-free reading surface — it lets him stay in long research sessions without eye strain. Skeptical of "AI magic" language; the citation rail is what keeps him on the product.

Priya, 23, London. Graduate student and heavy Discover-feed reader. Treats Perplexity as both a research tool and a morning news habit. Loves the editorial card layout and the clean type — says it "feels like a magazine that answers back." Switches between web, academic, and writing focus modes constantly. Shares answer threads with classmates.

14. States

15. Motion & Easing

Durations:

Easings:

Signature motions.

1. Answer streaming. The defining motion. Generated text appears token-by-token in reading order, trailed by a teal block cursor (#20808D). Sources resolve and fade in slightly ahead of the text that cites them, so citations are "ready" by the time you read past them. Never reveal a full answer in one flash — the streaming is the brand telling you it's thinking and sourcing in real time.
2. Source-card lift. On hover, a source card raises with motion-standard / ease-standard, its border warming from #E4E4DC to teal #20808D. A quiet, confident invitation to click through.
3. Citation popover. Hovering an inline [1] opens a source preview with motion-fast / ease-enter and a light backdrop blur — fast, so it feels like the source was always there.
4. Reduce motion. Under prefers-reduced-motion: reduce, streaming collapses to a single fade-in of the completed answer, the cursor blink stops, and all motion-* tokens drop to motion-instant. The product stays fully usable — just static.