Perplexity
A search-native AI canvas built around a near-black surface (#1C1C1C in dark, white in light) with a distinctive teal-cyan accent (#20B2AA / #00B4D8) that appears on the logo, source citations, and interactive elements. The interface reads as serious and trustworthy — closer to Google Scholar than ChatGPT — with inline citations, source cards, and a focus on verifiability. Typography is set in a clean, unobtrusive system stack with clear hierarchy between query, answer, and sources. The product aesthetic communicates: this is research, not chat.
Color Tokens
version: alpha name: Perplexity description: "A search-native AI canvas built around a near-black surface (#1C1C1C in dark, white in light) with a distinctive teal-cyan accent (#20B2AA / #00B4D8) that appears on the logo, source citations, and interactive elements. The interface reads as serious and trustworthy — closer to Google Scholar than ChatGPT — with inline citations, source cards, and a focus on verifiability. Typography is set in a clean, unobtrusive system stack with clear hierarchy between query, answer, and sources. The product aesthetic communicates: this is research, not chat."
colors: primary: "#20B2AA" on-primary: "#ffffff" primary-hover: "#1A9B93" ink: "#1A1A1A" ink-muted: "#6B7280" canvas: "#ffffff" surface-1: "#F9FAFB" surface-2: "#F3F4F6" border: "#E5E7EB" canvas-dark: "#1C1C1C" surface-dark-1: "#252525" surface-dark-2: "#2F2F2F" border-dark: "#3A3A3A" ink-dark: "#F9FAFB" ink-muted-dark: "#9CA3AF" citation: "#20B2AA" source-card: "#F0FDFC"
typography: display: fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: -0.02em body: fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64]
radius: sm: 6px md: 12px lg: 16px pill: 9999px
shadows: card: "0 1px 3px rgba(0,0,0,0.08)" elevated: "0 4px 16px rgba(0,0,0,0.1)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Perplexity reimagines search as a reading experience. The answer surface prioritizes legibility and trust: clean white (or dark) backgrounds, numbered inline citations that link to real sources, and a sidebar of source cards that shows the provenance of every claim. The teal accent is used sparingly — citations, the logo, focus rings — keeping the answer text the dominant visual element. The product feels like an answer engine built by people who actually care about accuracy.
2. Color System
- Canvas: #ffffff (light) / #1C1C1C (dark) — maximum contrast for reading
- Teal primary: #20B2AA — logo, citations, interactive states; cool and trustworthy
- Source cards: Tinted #F0FDFC backgrounds in light mode — distinct from answer text
- Ink: #1A1A1A / #F9FAFB — high contrast text
- Muted: #6B7280 / #9CA3AF — question labels, timestamps, secondary UI
- Border: Hairline #E5E7EB (light) / #3A3A3A (dark) — separates content zones subtly
3. Typography
System font stack — no custom typeface, keeping the experience focused on content rather than brand expression. Query text runs larger (18–20px) and bolder. Answer body is comfortable reading size (16px) with generous line-height (1.7). Citation superscripts are teal-colored and interactive. Source titles in cards use semi-bold weight.
4. Components & Patterns
- Search bar: Centered, large, minimal border — the entire page organizes around it
- Answer block: Full-width reading column, 720px max, inline citations as superscript [1]
- Source cards: Horizontal scrollable strip above answer; favicon, domain, excerpt
- Follow-up questions: Auto-suggested pill chips below the answer
- Pro search toggle: Subtle toggle for deeper, multi-step searches
- Copilot sidebar: Related questions tree on the right
5. Spacing & Layout
Single-column answer focus. Max content width ~720px centered in viewport. Source strip runs full width above. Sidebar appears at wider viewports. Comfortable padding (24–32px) around the answer block.
6. Motion & Interaction
Streaming answer text renders progressively. Source cards slide in as citations are generated. Follow-up suggestions appear after answer completes. Hover on citations highlights the corresponding source card. All transitions are 200ms or less — fast enough to feel real-time.