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
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.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for