Perplexity

---
version: alpha
name: Perplexity-design-analysis
description: Perplexity's design language is a polished, answer-first search interface built on a distinctive teal `#20808d` against a near-black canvas. It pairs clean typography with card-based results, source citations, and a prominent search-first home. The teal is the single brand accent, and the interface feels like a modern, opinionated search engine rather than a chat window.

colors:
  primary: "#20808d"
  primary_dark: "#1a6b76"
  primary_light: "#2ca6b6"
  canvas_dark: "#0a0a0a"
  surface_dark: "#1f1f1f"
  surface_dark_2: "#2a2a2a"
  fg_dark: "#f5f5f5"
  fg_muted_dark: "#8a8a8a"
  canvas: "#ffffff"
  surface: "#f7f7f7"
  fg_default: "#1f1f1f"
  fg_muted: "#6b6b6b"
  border_default: "#e5e5e5"
  on_primary: "#ffffff"

typography:
  display-xxl:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Perplexity

## 1. Visual Theme & Atmosphere

Perplexity is an answer engine, and the interface is built around the query: a search-first home with a single large input, followed by card-based answers with inline source citations. The distinctive teal `#20808d` is the lone brand accent over a near-black `#0a0a0a` canvas. The tone is modern, academic, and trustworthy.

## 2. Color System

- **Perplexity teal** `#20808d` — logo, primary buttons, links, active accents.
- Dark surfaces `#0a0a0a` / `#1f1f1f` / `#2a2a2a`; text `#f5f5f5`, muted `#8a8a8a`.
- Light mode: `#ffffff` canvas, `#f7f7f7` surface, `#1f1f1f` text, hairlines `#e5e5e5`.
- Citations and source chips use a subtle secondary palette, never competing with the teal.

## 3. Typography

Inter (system fallback) with a clean, information-dense scale. Body 16px/1.6 for answers; source citations and footnotes are smaller and muted. Headings are medium-weight with tight tracking, giving a crisp editorial feel.

## 4. Components & Shape

The hero is a large rounded search bar with a teal "submit" affordance. Answers render as cards with a title, a threaded list of sources, and "Ask follow-up" controls. Buttons are 8px rounded rectangles; the primary is filled teal. Chips for sources and related questions are pill-shaped.

## 5. Layout & Spacing

A centered column (max ~768px) for reading, with the search bar front-and-center on the home screen. Sidebar (for threads) is collapsible. Generous 16-24px vertical rhythm separates answer blocks from their citations.

## 6. Motion

Subtle and fast: the answer streams in, sources highlight on hover, and follow-ups appear with a soft fade. Motion reinforces the "answers, not ads" focus and stays out of the way.