Perplexity

---
name: perplexity-ai-design-system
source: https://www.perplexity.ai/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#000000"
  text-muted: "#9ca3af"
  surface: "#d6d5d4"
  hairline: "#5f6368"
  accent: "#28170e"  # deep-orange
  accent-2: "#e8eaed"  # pale-blue
  accent-3: "#27251e"  # deep-yellow
fonts:
  primary: "Apple SD Gothic Neo"  # low-confidence: usage counts are low and close
---

# Perplexity — Design System

Extracted from **https://www.perplexity.ai/** on 2026-07-03.

> Perplexity is a free AI-powered answer engine that provides accurate, trusted, and real-time answers to any question.

Every value below is mined from the site's live CSS (120 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 138 light against 88 dark. The palette is chromatic: 12 saturated values against 6 neutrals, led by deep-orange (`#28170e`). Font usage counts are low and close together (Apple SD Gothic Neo: 12, PingFang SC: 12, Hiragino Sans: 12) — the extractor can't confidently call a primary face from CSS alone. Geometry mixes sharp corners (.125rem) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 36% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 138:88). Don't flip individual sections to the opposite mode.
- `.375rem` is the workhorse radius (x17); treat the other radii as exceptions, not options.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 129 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-200` | `#d6d5d4` | 9 | **surface** — neutral closest to canvas luminance |
| `neutral-400` | `#9ca3af` | 4 | **text-muted** — most-used mid-luminance neutral |
| `neutral-600` | `#5f6368` | 4 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-800` | `#333333` | 6 | — |
| `neutral-950` | `#000000` | 78 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `deep-orange` | `#28170e` | 20 | **accent** — most-used chromatic color |
| `pale-blue` | `#e8eaed` | 20 | **accent-2** — supporting chromatic color |
| `deep-yellow` | `#27251e` | 17 | **accent-3** — supporting chromatic color |
| `cyan` | `#1a73e8` | 15 | — |
| `deep-teal` | `#071f21` | 14 | — |
| `deep-red` | `#450a0a` | 8 | — |
| `teal` | `#016a71` | 7 | — |
| `red` | `#e10600` | 6 | — |
| `red-2` | `#a23544` | 6 | — |
| `orange` | `#97431a` | 6 | — |
| `orange-2` | `#825503` | 6 | — |
| `deep-lime` | `#536300` | 6 | — |

### Modern color values (kept verbatim)

- `oklch(var(--foreground-color)`
- `oklch(var(--dark-super-color)`
- `oklch(var(--super-color)`
- `oklch(var(--foreground-quiet-color)`
- `oklch(var(--offset-color)`
- `oklch(var(--border-focus-neutral-color)`
- `oklch(var(--pale-blue-200)`
- `oklch(var(--background-underlay-color)`
- `oklch(var(--background-base-color)`
- `oklch(var(--dalmasca-300)`
- `oklch(var(--dark-background-base-color)`
- `oklch(var(--dark-background-raised-color)`

### Dark mode

The source defines 60 dark-mode variants (via prefers-color-scheme). Both halves of the system, first 30:

| Token | Light | Dark |
| --- | --- | --- |
| `--super-color` | `var(--light-super-color)` | `var(--dark-super-color)` |
| `--caution-color` | `var(--light-caution-color)` | `var(--dark-caution-color)` |
| `--warning-color` | `var(--light-warning-color)` | `var(--dark-warning-color)` |
| `--positive-color` | `var(--light-positive-color)` | `var(--dark-positive-color)` |
| `--negative-color` | `var(--light-negative-color)` | `var(--dark-negative-color)` |
| `--background-underlay-color` | `var(--light-background-underlay-color)` | `var(--dark-background-underlay-color)` |
| `--background-base-color` | `var(--light-background-base-color)` | `var(--dark-background-base-color)` |
| `--background-quiet-color` | `var(--light-background-quiet-color)` | `var(--dark-background-quiet-color)` |
| `--background-subtle-color` | `var(--light-background-subtle-color)` | `var(--dark-background-subtle-color)` |
| `--background-raised-color` | `var(--light-background-raised-color)` | `var(--dark-background-raised-color)` |
| `--background-inverse-color` | `var(--light-background-inverse-color)` | `var(--dark-background-inverse-color)` |
| `--foreground-color` | `var(--light-foreground-color)` | `var(--dark-foreground-color)` |
| `--foreground-quiet-color` | `var(--light-foreground-quiet-color)` | `var(--dark-foreground-quiet-color)` |
| `--foreground-quieter-color` | `var(--light-foreground-quieter-color)` | `var(--dark-foreground-quieter-color)` |
| `--foreground-subtle-color` | `var(--light-foreground-subtle-color)` | `var(--dark-foreground-subtle-color)` |
| `--foreground-subtlest-color` | `var(--light-foreground-subtlest-color)` | `var(--dark-foreground-subtlest-color)` |
| `--foreground-inverse-color` | `var(--light-foreground-inverse-color)` | `var(--dark-foreground-inverse-color)` |
| `--border-focus-neutral-color` | `var(--light-border-focus-neutral-color)` | `var(--dark-border-focus-neutral-color)` |
| `--button-color` | `var(--light-button-color)` | `var(--dark-button-color)` |
| `--button-hover-color` | `var(--light-button-hover-color)` | `var(--dark-button-hover-color)` |
| `--button-active-color` | `var(--light-button-active-color)` | `var(--dark-button-active-color)` |
| `--shadow-overlay-border` | `#0000000d` | `#ffffff1a` |
| `--offset-color` | `var(--light-offset-color)` | `var(--dark-offset-color)` |
| `--bg-inverse` | — | `var(--odin-dark-1000)` |
| `--bg-soft` | — | `var(--odin-dark-1000-a-7)` |
| `--bg-subtle` | — | `var(--odin-dark-1000-a-3½)` |
| `--bg-base` | — | `var(--odin-dark-100)` |
| `--bg-raised` | — | `var(--odin-dark-200)` |
| `--bg-backdrop` | — | `var(--odin-dark-100-a-70)` |
| `--surface-base` | — | `var(--odin-dark-100)` |

`variables.css` ships these as a `prefers-color-scheme: dark` override block.

## Typography

Usage counts here are low and close together, so no family can be confidently called primary from CSS declarations alone — sites that set fonts via shorthand or JS under-count. Verify visually. Full list by usage:

| Family | Usage |
| --- | --- |
| Apple SD Gothic Neo | 12 |
| PingFang SC | 12 |
| Hiragino Sans | 12 |
| KaTeX_Main | 8 |
| KaTeX_SansSerif | 7 |
| KaTeX_Fraktur | 4 |
| KaTeX_Math | 4 |
| KaTeX_Size1 | 4 |

**Size scale (px):** `10`, `11`, `12`, `13.71`, `14`, `16`, `18`, `19.2`, `20`, `24`, `30`, `36`

**Weights in use:** `300` (x4), `400` (x22), `450` (x5), `500` (x9), `600` (x7), `700` (x18)

**Line-heights (unitless):** `1`, `1.2`, `1.25`, `1.33`, `1.43`, `1.5`, `1.6`, `1.71`

**Letter-spacing values:** `-.05em`, `-.025em`, `0em`, `.25px`, `.3px`, `.18em`

## Spacing

Most-used values (px): `1`, `2`, `3`, `4`, `6`, `8`, `10`, `12`, `16`, `20`, `24`, `32`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `.125rem` | 6 |
| `radius-md` | `4px` | 14 |
| `radius-lg` | `.375rem` | 17 |
| `radius-xl` | `.5rem` | 11 |
| `radius-2xl` | `.75rem` | 11 |
| `radius-3xl` | `1rem` | 7 |
| `radius-4xl` | `1.25rem` | 6 |
| `radius-full` | `9999px` | 14 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 0 2px 2px #0096ff` (x2)

### Focus rings (spread-only box-shadows, kept out of the elevation scale)

- `0 0 0 2px #0000001a` (x1)
- `0 0 0 2px buttontext` (x1)

## Breakpoints

`410px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #28170e */
  color: var(--color-canvas); /* #ffffff — contrast 17.2:1 */
  border-radius: 9999px; /* pill — mined as 9999px */
  font-weight: 500;
}

.card {
  background: var(--color-surface); /* #d6d5d4 */
  border: 1px solid var(--color-hairline); /* #5f6368 */
  border-radius: .375rem; /* most-used finite radius */
  box-shadow: var(--shadow-sm);
}

.input {
  background: var(--color-canvas); /* #ffffff */
  color: var(--color-ink); /* #000000 — contrast 21.0:1 */
  border: 1px solid var(--color-hairline); /* #5f6368 */
  border-radius: .125rem;
  /* placeholder color: var(--color-text-muted) #9ca3af */
}

.nav {
  background: var(--color-canvas); /* #ffffff */
  border-bottom: 1px solid var(--color-hairline); /* #5f6368 */
  color: var(--color-ink); /* #000000 */
  /* inactive links: var(--color-text-muted) #9ca3af */
  /* active link: var(--color-accent) #28170e — contrast vs canvas 17.2:1 */
}

.modal {
  background: var(--color-surface); /* #d6d5d4 */
  border-radius: .375rem;
  box-shadow: var(--shadow-sm); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #000000 */
}

.input-error {
  border-color: #450a0a; /* mined token: deep-red */
  /* error text: #450a0a on canvas — contrast 16.1:1 */
}
```

## Observations

- 6 of 18 extracted colors are neutrals.
- 1 distinct shadow; the softest reaches 0px blur.
- 1 breakpoints, from 410px to 410px.
- The site ships a large native token system (120+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 120:

```css
:root {
  --ask-input-decorative-glow-border-color: oklch(var(--super-color) / .4);
  --ask-input-decorative-glow-shadow: 0 0 36px 4px oklch(var(--super-color) / .3);
  --ask-input-decorative-glow-shadow-idle: 0 0 36px 4px oklch(var(--super-color) / 0);
  --ask-input-dropdown-shadow: 0 4px 6px -1px #00000014, 0 2px 4px -2px #00000014;
  --ask-input-dropdown-shadow-dark: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --mint-50: 98.85% .012 170.28;
  --mint-150: 93.8% .015 171.04;
  --pale-blue-200: 30.39% .04 213.68;
  --hydra-350: 71.92% .112 205.51;
  --hydra-450: 55.27% .086 208.61;
  --terra-350: 70.73% .133 38.31;
  --terra-450: 52.75% .13 37.37;
  --jenova-250: 84.44% .092 .32;
  --jenova-450: 49.39% .109 9.38;
  --rosa-350: 68.18% .207 22.93;
  --rosa-450: 51.72% .199 21.85;
  --costa-300: 80.62% .151 67.71;
  --costa-350: 73.83% .169 62.71;
  --costa-400: 65.87% .163 54.96;
  --dalmasca-300: 83.9% .132 96.6;
  --dalmasca-400: 69.87% .123 97.59;
  --gridania-350: 75.63% .107 109.92;
  --gridania-450: 60.17% .065 108.2;
  --limsa-350: 73.11% .113 232.51;
  --limsa-450: 53.86% .101 231.01;
  --kuja-350: 72.5% .119 316.63;
  --kuja-450: 54.3% .097 316.69;
  --warm-carbuncle-0: 68.25% .072 206.25;
  --warm-carbuncle-500: 55.25% .085 207.66;
  --warm-ifrit-300: 72.01% .178 11.8;
  --warm-ifrit-600: 49.18% .143 16.18;
  --warm-phoenix-300: 72.82% .166 39.4;
  --warm-phoenix-600: 49.02% .107 45.28;
  --warm-garuda-300: 69.92% .166 144.58;
  --warm-garuda-600: 45.93% .133 145.32;
  --warm-astra-0: 100% 0 0;
  --warm-astra-100: 98.93% .003 48.72;
  --warm-astra-200: 97.98% .005 78.3;
  --warm-astra-300: 95.63% .006 75.41;
  --warm-astra-400: 93.5% .007 80.72;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-deep-orange`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.