---
version: alpha
name: Perplexity
description: Warm paper-white answer engine where Perplexity's bespoke pplxSans sets every word in near-black, the chrome stays whisper-quiet, and a single deep peacock teal — "True Turquoise" — does all the work the moment you touch it.

colors:
  # Surface / canvas
  background: "#faf8f5"          # warm paper-white canvas — the answer surface
  surface: "#fdfbfa"             # raised cards, the ask-anything composer
  surface-quiet: "#f2efe9"       # quiet section bands, hovered list rows
  surface-inverse: "#1f1c14"     # dark embedded blocks, inverse chips

  # Ink / text
  ink: "#1f1c14"                 # near-black warm ink — headings and body  # was oklch(26.42% .013 93.9) — Google format requires hex
  ink-quiet: "#46433c"           # supporting copy  # was foreground-quiet rgba — Google format requires hex
  ink-quieter: "#6b6962"         # captions, metadata  # was foreground-quieter rgba — Google format requires hex
  ink-subtle: "#9b988f"          # faint helper text, placeholders  # was foreground-subtle rgba — Google format requires hex
  on-accent: "#ffffff"           # text on the teal solid button
  on-inverse: "#fdfbfa"          # text on dark/inverse surfaces

  # Brand accent — Perplexity peacock teal ("True Turquoise")
  primary: "#016a71"             # the singular accent: links, focus ring, solid CTA, active nav
  primary-hover: "#0c4f54"       # solid-button and link hover (deepens)
  primary-active: "#0f3639"      # pressed accent / active link
  primary-soft: "#e3eeee"        # accent tint fill for tonal chips  # was #016a7117 — Google format requires hex
  primary-container: "#d2e6e6"   # accent badge / pill fill  # was #016a7129 — Google format requires hex
  super: "#3a9ba3"               # brighter cyan "super" accent — Pro / sparkle moments  # was oklch(55.25% .085 207.66) — Google format requires hex

  # Borders (warm-tinted)
  border: "#e8e3da"              # hairline dividers, card edges  # was #271a0012 — Google format requires hex
  border-medium: "#dcd5c8"       # input and secondary-button outlines  # was #271a0024 — Google format requires hex
  border-heavy: "#27251e"        # strong dark outline

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.05) — Google format requires hex
  shadow-overlay: "#27251e"      # was rgba(39,37,30,0.65) — Google format requires hex

typography:
  display-hero:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.6px
  display:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.8px
  heading:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.4px
  heading-sub:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.2px
  body-large:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  label:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  micro:
    fontFamily: "pplxSans, FK Grotesk, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 48px
  5xl: 64px
  6xl: 96px

rounded:
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-accent}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-accent}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 10px 18px
  button-secondary-hover:
    backgroundColor: "{colors.surface-quiet}"
    textColor: "{colors.ink}"

  button-tonal:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 14px
  button-tonal-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-quiet}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 14px
  button-ghost-hover:
    backgroundColor: "{colors.surface-quiet}"
    textColor: "{colors.ink}"

  composer:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.xl}"
    padding: 16px 16px
  composer-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 20px
  card-quiet:
    backgroundColor: "{colors.surface-quiet}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 20px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-quiet}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 8px 12px
  nav-item-active:
    backgroundColor: "{colors.surface-quiet}"
    textColor: "{colors.ink}"

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary-hover}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-active}"
    typography: "{typography.micro}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-super:
    backgroundColor: "{colors.super}"
    textColor: "{colors.on-accent}"
    typography: "{typography.micro}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  source-chip:
    backgroundColor: "{colors.surface-quiet}"
    textColor: "{colors.ink-quiet}"
    typography: "{typography.micro}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
---

# Perplexity Design System

## Overview

Perplexity's surface is built to disappear so the answer can speak. The canvas is a warm paper-white (`{colors.background}`) — not the clinical pure white of most SaaS, but a faintly toasted off-white that reads like a clean sheet of premium stationery. Every word lands in a near-black warm ink (`{colors.ink}`), and the chrome around the answer — the sidebar, the section labels, the metadata — is kept so quiet it almost vanishes. There is no gradient wash, no hero photograph, no decorative noise competing with the text. For an "answer engine," the design thesis is legibility as luxury: the page is mostly type on paper, and it trusts that to be enough.

The signature move is the accent discipline. Perplexity owns a single deep peacock teal (`{colors.primary}`) — internally "True Turquoise" — and it is the only saturated color on the page. It does not fill backgrounds or paint headers. It waits. The moment you touch the product, it appears: the focus ring around the "Ask anything" composer, the underline on a citation link, the fill of the one solid call-to-action, the active nav item. Hover deepens it to `{colors.primary-hover}`, press to `{colors.primary-active}`. A brighter cyan sibling (`{colors.super}`) is reserved for "super"/Pro moments — the sparkle of a premium model. Because the teal is rationed so tightly, it reads as a stamp of intent rather than decoration, the way Clerk rations its purple.

Typography is the other quiet flex. Perplexity ships a bespoke grotesk, **pplxSans** (a cut in the FK Grotesk lineage), and uses it for everything from the 64px wordmark down to 12px metadata. Display sizes are set at a confident medium weight (500) with tight negative tracking; body holds at a comfortable 16px/1.5 with zero tracking. The system rarely reaches for bold — hierarchy comes from size and the warm ink/quiet-ink ladder (`{colors.ink}` → `{colors.ink-quiet}` → `{colors.ink-quieter}` → `{colors.ink-subtle}`), not from heavy weights. The overall impression is calm, editorial, and intelligent: a tool that looks like it reads more than it shouts.

**Key Characteristics:**
- Warm paper-white canvas (`{colors.background}`) — toasted off-white, never clinical pure white
- Bespoke **pplxSans** grotesk (FK Grotesk lineage) across the entire scale — display to metadata
- A single deep peacock teal (`{colors.primary}`) as the only saturated color — rationed to interaction, never decoration
- Brighter cyan "super" accent (`{colors.super}`) reserved for Pro / premium moments
- Near-black **warm** ink (`{colors.ink}`) and warm-tinted hairline borders (`{colors.border}`) — the whole palette leans warm, not gray
- Display type set at medium weight (500) with tight negative tracking (`{typography.display-hero}` at -1.6px)
- Hierarchy built from a four-step ink ladder (`{colors.ink}` → `{colors.ink-subtle}`), not bold weights
- Pill-shaped buttons and nav items (`{rounded.pill}`) — soft, conversational interaction targets
- The "Ask anything" composer (`{components.composer}`) is the visual anchor: a raised rounded card with a teal focus state
- Citations rendered as quiet numbered source chips (`{components.source-chip}`) — research as a first-class UI primitive
- Whisper-quiet chrome: the sidebar and labels sit in `{colors.ink-quiet}`, deferring to the answer text
- Soft, sparse shadows — separation comes mostly from warm hairlines, elevation is reserved for the composer and overlays

## Colors

### Surface & Canvas
- **Paper White** (`{colors.background}`): The dominant warm off-white canvas — the answer surface that fills nearly the whole page.
- **Raised White** (`{colors.surface}`): Slightly lifted fill for cards and the composer — a hair brighter than the canvas.
- **Quiet Sand** (`{colors.surface-quiet}`): Hovered list rows, quiet section bands, and source-chip fills.
- **Inverse Ink** (`{colors.surface-inverse}`): Dark embedded blocks and inverse chips.

### Ink / Text
- **Warm Black** (`{colors.ink}`): Headings and body. A near-black with a warm cast, not a cool blue-black.
- **Quiet Ink** (`{colors.ink-quiet}`): Supporting copy and the default chrome/label color.
- **Quieter Ink** (`{colors.ink-quieter}`): Captions and metadata.
- **Subtle Ink** (`{colors.ink-subtle}`): The faintest helper text and input placeholders.

### Brand Accent
- **Peacock Teal** (`{colors.primary}`): The singular brand color — "True Turquoise." Links, focus rings, the solid CTA, active nav. Used only on interaction.
- **Teal Hover / Active** (`{colors.primary-hover}`, `{colors.primary-active}`): Deepening states for the solid button and links.
- **Teal Soft / Container** (`{colors.primary-soft}`, `{colors.primary-container}`): Light tints for tonal chips and badges.
- **Super Cyan** (`{colors.super}`): Brighter cyan-teal for Pro / sparkle moments — the only place the palette gets loud.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Warm-tinted card edges and dividers — the primary structural device.
- **Medium Border** (`{colors.border-medium}`) / **Heavy Border** (`{colors.border-heavy}`): Input outlines and strong dark edges.
- **Shadow Tints** (`{colors.shadow-soft}`, `{colors.shadow-overlay}`): Opaque stand-ins for the soft card and overlay shadows (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `pplxSans` — Perplexity's bespoke grotesk in the FK Grotesk family. Fallbacks: `ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif`. Carries the entire scale.
- **Tracking**: tight negative tracking on display (-1.6px at 64px), tapering to zero on body and below.
- **Weight range**: the system lives between 400 (body) and 500 (display, labels, emphasis). It rarely goes to 600+ — weight is not the hierarchy tool.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 64px / 500 / -1.6px — the marquee wordmark and hero |
| `display` | 40px / 500 / -0.8px — major section titles |
| `heading` | 28px / 500 — feature headings |
| `heading-sub` | 20px / 500 — sub-section headings |
| `body-large` | 18px / 400 — the composer input and lead copy |
| `body` | 16px / 400 — standard answer body |
| `body-medium` | 16px / 500 — emphasized body, inline emphasis |
| `caption` | 14px / 400 — supporting captions |
| `label` | 14px / 500 — button text, nav labels |
| `micro` | 12px / 400 — metadata, source-chip numbers |

### Principles
- **One typeface, full range**: pplxSans does everything — there is no secondary display or mono face in the marketing/answer surface.
- **Size and ink do hierarchy, not weight**: drop from `{colors.ink}` to `{colors.ink-quiet}` and step the size down rather than reaching for bold.
- **Tighten the big, relax the small**: heavy negative tracking on display; zero tracking on body for maximum readability.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 4px, settling on an 8/12/16/24 rhythm. Generous vertical breathing room (`{spacing.6xl}` = 96px) separates major regions; component internals stay tidy (`{spacing.md}`–`{spacing.2xl}`).

### Grid & Container
- The shell is a persistent left sidebar (nav: New, Spaces, Artifacts, History) paired with a centered content column.
- Answer content is held in a comfortable reading-width column (~720px), centered under the composer.
- The "Ask anything" composer is a full-width raised card pinned near the top of the content area.

### Whitespace Philosophy
- **The page is mostly paper**: warm whitespace is the dominant separator, not boxes or fills.
- **Quiet chrome, loud content**: the sidebar and labels recede; the answer text and composer hold the visual weight.
- **One anchor**: the composer is the single element granted real elevation and a teal focus state.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, warm hairline `{colors.border}` only | Page content, list rows, section bands |
| Subtle (Level 1) | `0 1px 2px` at ~5% black (`{colors.shadow-soft}`) | Resting cards, source chips |
| Raised (Level 2) | `0 2px 8px` at ~6% black + hairline | The composer and raised cards — the signature lift |
| Overlay (Level 3) | `0 8px 28px` ambient (`{colors.shadow-overlay}`) + hairline | Dropdowns, model picker, dialogs |
| Focus Ring | `0 0 0 2px` `{colors.primary}` | The teal focus ring on the composer and inputs |

**Shadow Philosophy**: Perplexity's elevation is soft and sparse. Most of the page is flat, separated by warm hairlines. Real shadow is spent on the composer and floating overlays, and even there it stays gentle. The one piece of true emphasis is the teal focus ring — the moment the page lights up is when you click into the "Ask anything" field.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 6px | Source chips, small tags |
| `md` | 8px | Inputs, nav items, small containers |
| `lg` | 12px | Cards — the default container radius |
| `xl` | 16px | The composer, large cards |
| `2xl` | 20px | Hero panels, oversized cards |
| `pill` | 9999px | Buttons, nav pills, badges, avatars |

The system reads soft and conversational: pill-shaped interactive elements (buttons, nav, badges) against gently rounded 12-16px containers. No sharp corners — the geometry matches the friendly, chat-like posture of the product.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Peacock teal (`{colors.primary}`) fill, white text, pill radius. The one solid CTA; hover deepens to `{colors.primary-hover}`, press to `{colors.primary-active}`.
- **`button-secondary`** — Raised white fill, warm-black text, pill radius. The neutral default; hover fills `{colors.surface-quiet}`.
- **`button-tonal`** — Teal-soft (`{colors.primary-soft}`) fill, teal text — a low-key accent action.
- **`button-ghost`** — Transparent on canvas, quiet-ink text — toolbar and inline actions.

### Composer & Cards
- **`composer`** — The "Ask anything" input: raised white surface, 16px radius, generous padding, large body type. **`composer-focus`** brings in the teal focus ring.
- **`card`** / **`card-quiet`** — Raised or quiet-sand surfaces, 12px radius, warm hairline edge.

### Inputs
- **`input`** — Raised white fill, `{colors.border-medium}` outline, 8px radius. **`input-focus`** swaps the outline for the teal focus ring.

### Navigation
- **`nav-item`** — Quiet-ink label on transparent canvas, 8px radius. **`nav-item-active`** fills `{colors.surface-quiet}` and brings the label to full `{colors.ink}`.

### Accent & Research
- **`link`** — Peacock teal text; hover deepens to `{colors.primary-hover}`.
- **`badge`** — Teal-container fill, teal-active text, pill radius — quiet status markers.
- **`badge-super`** — Bright cyan (`{colors.super}`) fill — the Pro / premium stamp.
- **`source-chip`** — Quiet-sand fill, quiet-ink numbered citation chip — research surfaced as a first-class UI primitive.

## Do's and Don'ts

### Do
- Keep the canvas warm paper-white (`{colors.background}`) — toasted, not pure white; the warmth is part of the brand
- Set everything in **pplxSans** (`{typography.body}`) — one grotesk across the whole scale
- Ration peacock teal (`{colors.primary}`) to interaction only: focus rings, links, the single solid CTA, active nav
- Build hierarchy from the ink ladder (`{colors.ink}` → `{colors.ink-subtle}`) and size, not from heavy weight
- Use tight negative tracking on display type (-1.6px at hero size) at medium weight 500
- Make the composer the visual anchor — give it the raised lift and the teal focus ring
- Use pill shapes (`{rounded.pill}`) for buttons, nav, and badges; 12-16px for cards
- Render citations as quiet numbered source chips (`{components.source-chip}`)
- Reserve the brighter cyan "super" (`{colors.super}`) for Pro / premium moments only

### Don't
- Don't use pure white (`#ffffff`) or a cool gray-black — the palette is committedly warm
- Don't fill backgrounds or headers with teal — it is an interaction accent, never decoration
- Don't reach for bold (700+) to create hierarchy — step the ink and the size instead
- Don't introduce gradients, hero photography, or decorative illustration — legibility is the design
- Don't scatter shadows — most of the page is flat with warm hairlines; reserve elevation for the composer and overlays
- Don't pair a second display or mono typeface — pplxSans carries everything
- Don't sharpen the corners — the soft pill/rounded geometry is the friendly posture of the product

---

## Responsive Behavior

### Breakpoints
*(The site behaves to standard Tailwind-style stops; explicit values below.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Sidebar collapses to a bottom bar / hamburger; composer goes full-width; hero scales 64px → ~36px; reading column full-bleed with side padding |
| Tablet | 640–1023px | Sidebar may collapse to icons; content column widens; composer stays prominent |
| Desktop | 1024–1279px | Full persistent sidebar + centered content column |
| Large | ≥1280px | Sidebar + wider centered reading column (~720px); generous vertical rhythm (`{spacing.6xl}`) |

### Touch Targets
- Pill buttons and nav items run ~40px tall with comfortable horizontal padding
- The composer is a large, easy tap target; micro metadata stays legible at 12px

### Collapsing Strategy
- **Navigation**: persistent left sidebar → icon rail → hamburger / bottom bar on mobile
- **Composer**: stays the anchor at every width, going edge-to-edge on mobile
- **Type**: display drops from 64px toward ~36px while keeping proportional negative tracking
- **Spacing**: vertical rhythm compresses from 96px toward ~48px

### Image Behavior
- The product is near-imageless; "images" are answer media, source thumbnails, and avatars that reflow as flex/grid children

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm Paper White (`{colors.background}`)
- Text: Warm Black (`{colors.ink}`)
- Brand accent: Peacock Teal (`{colors.primary}`)
- Secondary text: Quiet Ink (`{colors.ink-quiet}`)
- Border: Warm Hairline (`{colors.border}`)
- Primary CTA: Peacock Teal (`{colors.primary}`) — the only saturated fill

### Example Component Prompts

- "Create a hero on warm paper-white (`{colors.background}`) with a 64px warm-black (`{colors.ink}`) headline in pplxSans at weight 500, letter-spacing -1.6px, and a single peacock-teal (`{colors.primary}`) pill CTA below it"
- "Build the 'Ask anything' composer: raised white (`{colors.surface}`) card, `{rounded.xl}` radius, 16px padding, 18px placeholder in quiet ink (`{colors.ink-subtle}`), and a 2px peacock-teal (`{colors.primary}`) focus ring on focus"
- "Create a secondary pill button: raised white (`{colors.surface}`) fill, warm-black text, `{rounded.pill}` radius, 10px 18px padding, hover fills `{colors.surface-quiet}`"
- "Render an inline citation source chip: quiet-sand (`{colors.surface-quiet}`) fill, quiet-ink (`{colors.ink-quiet}`) numbered text in `{typography.micro}`, `{rounded.sm}` radius, 4px 8px padding"
- "Design a nav item: quiet-ink (`{colors.ink-quiet}`) label on transparent canvas, `{rounded.md}` radius; active state fills `{colors.surface-quiet}` and brings the label to full `{colors.ink}`"
- "Add a Pro badge: bright cyan (`{colors.super}`) fill, white text, `{rounded.pill}` radius, `{typography.micro}`"

### Iteration Guide

1. Start on warm paper-white (`{colors.background}`). If you reached for pure white or a cool gray, warm it up — Perplexity's canvas is toasted.
2. Teal (`{colors.primary}`) is interaction-only. If it's filling a background or a header, recolor it warm-neutral and save teal for the focus ring, links, and the one CTA.
3. Set everything in pplxSans. Build hierarchy from size and the ink ladder (`{colors.ink}` → `{colors.ink-subtle}`), not from bold.
4. Display type stays compressed at medium weight — verify -1.6px tracking at hero size before moving on.
5. Make the composer the anchor: raised lift, 16px radius, teal focus ring.
6. Keep the geometry soft — pills for buttons/nav/badges, 12-16px for cards. No sharp corners.
7. Surface citations as quiet numbered source chips — research is a first-class element, not an afterthought.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Perplexity. Brand names and trademarks belong to their respective owners.