---
version: alpha
name: Perplexity
description: "Warm paper, a peacock-teal spark, and a pantheon of summon-named color ramps."
colors:
  on-surface: "#27251e"
  surface: "#faf8f5"
  error: "#a23544"
  primary: "#006495"
  paper-raised: "#fdfbfa"
  pure-white: "#fff"
  underlay: "#f3f0ec"
  espresso: "#271a00"
  peacock-teal: "#016a71"
  teal-hover: "#0c4f54"
  teal-pressed: "#0f3639"
  teal: "#22808c"
  success-green: "#016b1d"
  warning-orange: "#97431a"
  gold: "#825503"
  indigo: "#3053b3"
  purple: "#7a3abb"
  magenta: "#a12c7b"
  dark-canvas: "#171615"
  dark-ink: "#d6d5d4"
typography:
  caption:
    fontFamily: PPLX Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0px
  body-md:
    fontFamily: PPLX Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0px
  body-lg:
    fontFamily: PPLX Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0px
  code-sm:
    fontFamily: PPLX Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: -0.24px
  code-md:
    fontFamily: PPLX Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.56px
  heading-section:
    fontFamily: PPLX Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0px
  heading-title:
    fontFamily: PPLX Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0px
  headline:
    fontFamily: PPLX Sans
    fontSize: 28px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.56px
  display:
    fontFamily: GT Canon
    fontSize: 36px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.72px
  hero:
    fontFamily: GT Canon
    fontSize: 46px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -0.92px
rounded:
  radius-2xs: 2px
  radius-xs: 4px
  radius-sm: 6px
  radius-md: 8px
  radius-lg: 12px
  radius-2xl: 16px
  radius-full: 9999px
  ask-input-measured-cards: 11px
spacing:
  one: 1px
  2xs: 2px
  xs: 4px
  sm: 6px
  md: 8px
  ml: 10px
  lg: 12px
  xl: 16px
  2xl: 20px
  3xl: 24px
  4xl: 28px
  5xl: 32px
  6xl: 36px
  7xl: 40px
  8xl: 44px
  9xl: 48px
---
# Perplexity — Style Reference
> Warm paper, a peacock-teal spark, and a pantheon of summon-named color ramps.

**Theme:** mixed

Perplexity is an answer engine that dresses like a reading room: a warm off-white "paper" canvas (`#faf8f5`), near-black warm ink (`#27251e`), and exactly one chromatic spark — a peacock teal (`#016a71`) reserved for the ask input, links, focus rings, and the top notice banner. What makes the system unusual is its scale: **706 declared design tokens** organized as a pantheon of named color ramps — Odin (the warm neutral spine), plus eleven hue families each christened after a mythic summon: Shiva (teal), Ifrit (red), Phoenix (orange), Titan (gold), Sylph (lime), Garuda (green), Leviathan (blue), Fenrir (indigo), Ramuh (purple), Jenova (magenta). Every ramp ships a complete light twin and dark twin (10 steps + alpha overlays), and semantic aliases (`--fg-primary`, `--accent-fg-primary`, `--action-solid-accent-bg-idle`) sit on top so surfaces recolor wholesale between themes. Typographically it takes a three-voice stance — proprietary **PPLX Sans** for chrome, **PPLX Serif** for answers (the reading voice), and condensed **GT Canon** for display headlines — a deliberate serif-for-content, sans-for-UI split. The layout is quiet and centered: a slim icon sidebar, a hero question set in serif, and a single glowing input that is the whole product.

## Tokens — Colors

The full set is a 700+ token machine-generated ramp; this table features the core identity + load-bearing roles. Every ramp step and alpha overlay is frozen verbatim in Quick Start.

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper | `#faf8f5` | `--bg-base` (`--odin-light-200`) | The canvas. Warm off-white, never pure white — the whole product sits on it. |
| Paper Raised | `#fdfbfa` | `--surface-raised` (`--odin-light-100`) | Cards and the ask input; one hair brighter than the canvas. |
| Pure White | `#fff` | `--odin-light-0` | Top highlight edge on raised chrome (`--action-border-highlight`) only. |
| Underlay | `#f3f0ec` | `--surface-underlay` (`--odin-light-300`) | Recessed wells beneath the base plane. |
| Warm Ink | `#27251e` | `--fg-primary` (`--odin-light-2000`) | Primary text and the inverse surface. A warm near-black, not `#000`. |
| Espresso | `#271a00` | `--odin-light-1000` | Deepest warm brown; the source of every neutral border/overlay tint. |
| Peacock Teal | `#016a71` | `--accent-fg-primary` (`--shiva-light-600`) | THE brand spark. Links, focus ring, notice banner, ask-input glow. The only saturated color on paper. |
| Teal Hover | `#0c4f54` | `--shiva-light-700` (`--link-accent-fg-hover`) | Link/accent hover — one step down. |
| Teal Pressed | `#0f3639` | `--shiva-light-800` (`--link-accent-fg-active`) | Active/pressed accent. |
| Teal (dark) | `#22808c` | `--shiva-dark-500` | The teal's dark-theme twin — brightened for the near-black canvas. |
| Success Green | `#016b1d` | `--positive-fg-primary` (`--garuda-light-600`) | Positive status only; never decorative. |
| Alert Red | `#a23544` | `--negative-fg-primary` (`--ifrit-light-600`) | Errors and destructive actions. |
| Warning Orange | `#97431a` | `--warning-fg-primary` (`--phoenix-light-600`) | Warnings and alert links. |
| Gold | `#825503` | `--decoration-gold-fg-primary` (`--titan-light-600`) | Category tint (Titan ramp) — editorial, not action. |
| Blue | `#006495` | `--decoration-blue-fg-primary` (`--leviathan-light-600`) | Category tint (Leviathan ramp). |
| Indigo | `#3053b3` | `--decoration-indigo-fg-primary` (`--fenrir-light-600`) | Category tint (Fenrir ramp). |
| Purple | `#7a3abb` | `--decoration-purple-fg-primary` (`--ramuh-light-600`) | Category tint (Ramuh ramp). |
| Magenta | `#a12c7b` | `--decoration-magenta-fg-primary` (`--jenova-light-600`) | Category tint (Jenova ramp). |
| Dark Canvas | `#171615` | `--static-bg-dark` (`--odin-dark-100`) | Dark-theme base surface; the warm-neutral inverse of Paper. |
| Dark Ink | `#d6d5d4` | `--odin-dark-1000` | Dark-theme primary text. |

## Tokens — Typography

### PPLX Sans — the UI voice · `--pplx-sans`, `--family-r4-sans`
Perplexity's proprietary variable sans (`"pplxSans"` / `"PPLX Sans Beta R4 VF"`) carries all chrome: navigation, captions, buttons, body UI. It runs a five-stop weight axis and a slightly-heavy "medium" (480) as its default emphasis — subtler than a true bold.
- **Substitute:** `ui-sans-serif`, `system-ui`, `-apple-system`
- **Weights:** 320 light · 400 regular · 480 medium · 560 semibold · 640 bold
- **Sizes:** 12 · 14 · 16px (UI); caption 12/16, body-md 14/20, body-lg 16/24
- **Line height:** 16–24px (1.33–1.5)
- **Letter spacing:** 0px across UI — the sans is set flush.
- **Role:** Everything the user operates. Never used for long-form answers.

### PPLX Serif — the answer voice · `--pplx-serif`, `--pplx-answer`
The serif twin (`"PPLX Serif Beta R4 VF"`) is aliased directly to `--pplx-answer` — answers and article body are rendered in serif. This is the signature editorial choice: the machine speaks in a reading typeface, not a UI one.
- **Substitute:** `Georgia`, `'Times New Roman'`, serif
- **Weights:** 435 regular · 535 medium · 635 semibold · 735 bold
- **Sizes:** body-serif 16/24; title 20/28 (635); section 18/26 (635)
- **Line height:** 24–28px (1.4–1.5)
- **Letter spacing:** 0px
- **Role:** Answers, article prose, and card titles — the content the user reads.

### GT Canon — display · `--ui-heading-headline-family`
A licensed condensed serif (`"GT Canon VF"`, width axis 75) reserved for headlines, display, and hero. It gives the big "What do you want to know?" moment its confident, tightly-tracked editorial weight.
- **Substitute:** `'Playfair Display'`, `Georgia`, serif
- **Weights:** 400 (headline/display/hero) · 500 (article headline serif)
- **Sizes:** headline 28/36 · display 36/48 · hero 46/56
- **Line height:** 36–56px (~1.2)
- **Letter spacing:** negative and scaling with size: -.56px → -.72px → -.92px
- **Role:** Hero questions and big display headlines only.

### PPLX Mono — code · `--pplx-mono`, `--family-r4-mono`
The monospace member (`"PPLX Sans Mono Beta"`) for code spans and blocks, with tightened tracking.
- **Substitute:** `ui-monospace`, `'SF Mono'`, `Menlo`, monospace
- **Weights:** 400 regular · 500 medium
- **Sizes:** code-sm 12/16 (-.24px) · code-md 14/20 (-.56px)
- **Line height:** 16–20px
- **Letter spacing:** negative (-.24px to -.56px)
- **Role:** Inline code and code blocks.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 16px | 0px | `--ui-text-caption-*` |
| Body md | 14px | 20px | 0px | `--ui-text-body-md-*` |
| Body lg | 16px | 24px | 0px | `--ui-text-body-lg-*` |
| Code sm | 12px | 16px | -.24px | `--ui-text-code-sm-*` |
| Code md | 14px | 20px | -.56px | `--ui-text-code-md-*` |
| Heading section | 16px | 24px | 0px | `--ui-heading-section-*` |
| Heading title | 20px | 28px | 0px | `--ui-heading-title-*` |
| Headline | 28px | 36px | -.56px | `--ui-heading-headline-*` |
| Display | 36px | 48px | -.72px | `--ui-heading-display-*` |
| Hero | 46px | 56px | -.92px | `--ui-heading-hero-*` |

## Tokens — Spacing & Shapes
**Base unit:** 4px (with a 2px sub-grid — `--spacing-2xs` 2px, `--spacing-one` 1px)   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| one | 1px | `--spacing-one` |
| 2xs | 2px | `--spacing-2xs` |
| xs | 4px | `--spacing-xs` |
| sm | 6px | `--spacing-sm` |
| md | 8px | `--spacing-md` |
| ml | 10px | `--spacing-ml` |
| lg | 12px | `--spacing-lg` |
| xl | 16px | `--spacing-xl` |
| 2xl | 20px | `--spacing-2xl` |
| 3xl | 24px | `--spacing-3xl` |
| 4xl | 28px | `--spacing-4xl` |
| 5xl | 32px | `--spacing-5xl` |
| 6xl | 36px | `--spacing-6xl` |
| 7xl | 40px | `--spacing-7xl` |
| 8xl | 44px | `--spacing-8xl` |
| 9xl | 48px | `--spacing-9xl` |

### Border Radius
| Element | Value |
|---------|-------|
| `--radius-2xs` | 2px |
| `--radius-xs` | 4px |
| `--radius-sm` | 6px |
| `--radius-md` | 8px |
| `--radius-lg` | 12px |
| `--radius-2xl` | 16px |
| `--radius-full` | 9999px |
| Ask input / measured cards | 11px, 15px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Subtle | `rgba(0,0,0,0.05) 0px 1px 2px 0px` | (default raise) |
| Dropdown | `0 4px 6px -1px #00000014, 0 2px 4px -2px #00000014` | `--ask-input-dropdown-shadow` |
| Dropdown (dark) | `0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a` | `--ask-input-dropdown-shadow-dark` |
| Super glow | `0 0 36px 4px oklch(var(--super-color) / .3)` | `--ask-input-decorative-glow-shadow` |
| Glow (idle) | `0 0 36px 4px oklch(var(--super-color) / 0)` | `--ask-input-decorative-glow-shadow-idle` |

### Layout
- **Page max-width:** contained; centered content column (~640px input) on a full-bleed paper canvas
- **Section gap:** 24–48px (`--spacing-3xl`–`9xl`)
- **Card padding:** 16px (`--spacing-xl`)
- **Element gap:** 6–12px (`--spacing-sm`–`lg`)
- **Sidebar:** ~200px, icon + label rows on the base canvas

### Input Sizes
| Name | Value | Token |
|------|-------|-------|
| 2xs | 14px | `--input-2xs` |
| xs | 16px | `--input-xs` |
| sm | 24px | `--input-sm` |
| md | 32px | `--input-md` |
| lg | 40px | `--input-lg` |

## Components

### Ask Input
**Role:** The single hero surface — "Ask anything…" — where the entire product begins.
A raised paper card (`--surface-raised` `#fdfbfa`) on the canvas, ~12–16px radius, a soft neutral border, and the signature decorative glow: a teal halo (`oklch(var(--super-color) / .3)`, `0 0 36px 4px`) that fades to transparent when idle. Placeholder is tertiary ink; the input caret picks up the peacock teal focus color.

### Notice Banner
**Role:** Full-width top announcement ("Privacy Notice updated · Review Privacy Notice").
A solid peacock-teal bar (`#016a71`) spanning the viewport with white text and an underlined inline link, plus a dismiss ×. The only place the accent is used as a large fill rather than a spark.

### Sidebar Nav Item
**Role:** Primary navigation (New, Computer, Spaces, Artifacts, Customize, History).
Icon + PPLX Sans label rows on the base canvas. Idle is transparent; the active/hover state is a faint neutral wash (`--action-ghost-neutral-bg-hover` = `--odin-light-1000-a-3½` `#271a0009`) with warm-ink text. No borders — separation is by weight and spacing.

### Search Pill
**Role:** The mode toggle inside the ask bar ("Search ⌄").
A fully-rounded pill (`--radius-full` 9999px) with a search glyph, label, and chevron, set in 12px PPLX Sans. Transparent-to-tonal ghost neutral background; sits inline with the "+" and model controls.

### Solid Accent Button
**Role:** The primary committed action.
Idle `--action-solid-accent-bg-idle` (`#016a71`), hover `--shiva-light-700` (`#0c4f54`), active `--shiva-light-800` (`#0f3639`), disabled `--shiva-light-600-a-40` (`#016a7166`). White/inverse label. Radius follows the element (pill or `--radius-lg` 12px).

### Ghost Neutral Button
**Role:** Low-emphasis chrome actions (the "+", icon toggles).
Transparent idle, hover `--odin-light-1000-a-3½` (`#271a0009`), active `--odin-light-1000-a-7` (`#271a0012`). Warm-ink glyph. This is the workhorse — most buttons in the bar are ghosts.

### Voice / Audio Button
**Role:** The circular black control at the ask-bar's right edge.
A solid near-black neutral circle (`--action-solid-neutral-bg-idle` = `#27251e`) with a light waveform glyph — deliberately the one high-contrast anchor in an otherwise pale bar.

### Model Dropdown
**Role:** Inline model selector ("Model ⌄") in the ask bar.
Ghost-neutral trigger, secondary-ink label, chevron; opens a menu using `--ask-input-dropdown-shadow`. Kept visually lighter than the accent so it never competes with the primary action.

### Card
**Role:** Content container (measured dark variant on a dark surface).
Radius ~11px, 16px padding. On dark surfaces the card fills to Espresso (`#271a00`); on paper it rises to `--surface-raised`. Border-soft (`--odin-light-1000-a-7`) rather than a hard rule.

### Link
**Role:** Inline navigation and citations.
Idle `--link-accent-fg-idle` (`#016a71`), hover `#0c4f54`, active `#0f3639`; alert links use the Phoenix orange ramp. Underlined in banners, color-only inline.

### Focus Ring
**Role:** Keyboard focus and active input.
`--border-focus` = `--shiva-light-600` (`#016a71`) — the accent doubles as the focus color, so focus reads as "this is live."

### Category Chip (Decoration)
**Role:** Source/topic tinting across the answer UI.
Draws from the 11 `--decoration-*` families — each has `-bg-strong`, `-bg-subtle` (16% alpha), and `-fg-primary`. Tints are editorial identity, never actions.

## Do's and Don'ts

### Do
- Keep the canvas warm off-white (`#faf8f5`) and text warm near-black (`#27251e`). Nothing here is pure `#fff`/`#000` on paper.
- Reserve peacock teal (`#016a71`) for the ask input, links, focus, and the notice banner — the single deliberate spark.
- Set answers and article prose in PPLX Serif (`--pplx-answer`); keep all chrome in PPLX Sans.
- Use GT Canon condensed only for hero/display, with its negative tracking (-.56 to -.92px).
- Reach into the `--decoration-*` summon ramps for category/source tinting, at their subtle (16% alpha) fills.
- Let the ask input's teal glow breathe — it fades to transparent at rest and blooms on focus.

### Don't
- Don't paint large surfaces with the teal — its only big fill is the notice banner. Everywhere else it is a spark.
- Don't use the semantic ramps (Garuda green, Ifrit red, Phoenix orange) decoratively — they carry status meaning.
- Don't set body/answers in the sans, or headlines in the serif's non-condensed cut — the three voices have fixed jobs.
- Don't add heavy shadows; elevation here is a 1px/2px whisper (`rgba(0,0,0,0.05)`) or a soft dropdown, nothing more.
- Don't introduce a second accent hue — the whole system is monochromatic warm-neutral plus one teal.
- Don't hard-rule cards; separate with soft alpha borders and luminance steps.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| -1 | Underlay | `#f3f0ec` (`--surface-underlay`) | Recessed wells beneath base. |
| 0 | Canvas / Base | `#faf8f5` (`--bg-base`) | The paper the product sits on. |
| 1 | Raised | `#fdfbfa` (`--surface-raised`) | Cards, ask input, menus. |
| 2 | Highlight edge | `#fff` (`--odin-light-0`) | Top border-highlight on raised chrome. |
| — | Inverse | `#27251e` (`--surface-inverse`) | Dark chip/tooltip on a light page. |
| — | Dark base | `#171615` (`--static-bg-dark`) | Dark-theme canvas. |
| — | Dark raised | `#1e1d1c` (`--odin-dark-200`) | Dark-theme cards. |

## Elevation
Depth is conveyed by **luminance step, not shadow**. The three paper planes (Underlay → Canvas → Raised) each shift by roughly one Odin step, so a card reads as "raised" because it is a hair brighter than the paper, edged by a soft alpha border (`--border-soft`) and at most a `rgba(0,0,0,0.05) 0 1px 2px` whisper. Menus add a slightly deeper dropdown shadow. The one exception is expressive, not structural: the ask input's teal **glow** (`0 0 36px 4px`) — a colored bloom that signals liveness rather than height.

## Imagery
Chrome-first and near-imageless. The product surface is typography and the input; the only fixed marks are the geometric Perplexity logo (a bracketed-Q infinity glyph, `currentColor`) and lightweight line icons for the nav. Answers embed source thumbnails and inline citations, but the shell itself avoids photography and illustration — the paper canvas and serif reading voice are the whole aesthetic. Color-as-imagery is delegated to the `--decoration-*` summon ramps that tint sources and categories.

## Layout
Full-bleed paper canvas with a contained, centered content column. A slim (~200px) left sidebar holds icon+label nav (New, Computer, Spaces, Artifacts, Customize, Connectors, Skills, History) and a Sign-In footer. The stage is vertically centered: a small "Search" eyebrow, a large serif hero question, then the single ask input (~640px) with its glow. A dismissible teal notice banner spans the very top; a compact icon cluster sits top-right. The rhythm is generous whitespace and restraint — one thing to do, centered, on paper.

## Typography Voice
Perplexity runs a deliberate **three-voice split**: sans operates, serif reads, condensed-serif announces. The load-bearing move is aliasing `--pplx-answer` straight to `--pplx-serif` — the engine's answers arrive in a reading typeface, framing generated text as editorial prose rather than UI output. Chrome stays in PPLX Sans with flush 0px tracking and a soft 480 "medium" as default emphasis (lighter than a true bold, so the interface never shouts). The hero question escalates to GT Canon at width-75 condensed with tightening negative tracking (-.56 → -.92px as size grows), giving the "What do you want to know?" moment magazine-cover confidence. The effect: the machine feels literate and calm — a research desk, not a chat box.

## The Summon-Ramp System
The signature architecture is **706 declared tokens** built as named color ramps. **Odin** is the warm-neutral spine (light 0–2000, dark 0–1000, each with `-a-*` alpha overlays for backgrounds/borders). Eleven hue families are named after mythic summons — **Shiva** (teal, the brand), **Ifrit** (red/negative), **Phoenix** (orange/warning), **Titan** (gold), **Sylph** (lime), **Garuda** (green/positive), **Leviathan** (blue), **Fenrir** (indigo), **Ramuh** (purple), **Jenova** (magenta) — each a full 50→900 ramp with a light twin and a dark twin. Above the raw ramps sit **semantic aliases** (`--fg-*`, `--bg-*`, `--surface-*`, `--accent-*`, `--positive/negative/warning-*`, `--action-solid/ghost/tonal-*`, `--decoration-*`), so switching theme or intent recolors entire surfaces by re-pointing aliases, never by editing components. A parallel easing scale (`--ease-out-cubic`, `--ease-out-soft` with a 1.3 overshoot, `--ease-out-quint`) and a 1–48px spacing grid complete a system engineered for scale and consistency over expressiveness.

## Agent Prompt Guide

## Quick Color Reference
- background: `#faf8f5` (raised `#fdfbfa`, underlay `#f3f0ec`)
- text: `#27251e` (secondary `#27251ea6`, tertiary `#27251e80`)
- surface: `#fdfbfa` / dark `#171615`
- border: `#271a0012` (soft) · `#271a0024` (medium) · `#27251e` (heavy)
- accent: `#016a71` (peacock teal — links, focus, glow)
- primary action: `#016a71` idle → `#0c4f54` hover → `#0f3639` active

## Example Component Prompts
1. **Ask input**: Build a centered ~640px input card on a warm off-white canvas (`#faf8f5`). Card fill `#fdfbfa`, 12–16px radius, 1px soft border (`#271a0012`), placeholder "Ask anything…" in tertiary warm-ink (`#27251e80`). Add a teal focus glow `box-shadow: 0 0 36px 4px rgba(1,106,113,0.3)` that fades to transparent when unfocused. Below: a "+" ghost button, a fully-rounded "Search ⌄" pill, a "Model ⌄" dropdown, a mic icon, and a solid near-black (`#27251e`) circular voice button with a light waveform glyph.
2. **Notice banner**: A full-width top bar filled peacock teal (`#016a71`), white 14px PPLX-Sans text "Privacy Notice updated", an underlined inline link "Review Privacy Notice →", and a right-aligned dismiss ×.
3. **Sidebar nav**: A ~200px left rail on the base canvas with icon+label rows (14px PPLX Sans, warm ink `#27251e`). Idle transparent; hover a faint wash `#271a0009`; active adds `#271a0012`. No borders. A "Sign In" pill anchored at the bottom.
4. **Answer block**: Render answer prose in a serif (PPLX Serif / Georgia), 16px/24px, warm ink `#27251e`, with inline citation links in teal `#016a71`. Section headings in the same serif at 20px/28px, weight 635.
5. **Hero question**: A centered display headline "What do you want to know?" in a condensed serif (GT Canon / Playfair Display), 46px/56px, weight 400, letter-spacing -0.92px, warm ink — preceded by a small 12px "Search" eyebrow in secondary ink.

## Similar Brands
- **Linear** — kindred in its token-dense, semantic-alias design system and restrained single-accent monochrome discipline.
- **Anthropic / Claude** — shares the warm paper canvas, near-black-not-black ink, and calm editorial serif register.
- **Arc (The Browser Company)** — a similarly playful naming instinct over a quiet, product-first chrome.
- **Notion** — the same off-white reading-surface calm and typography-led, near-imageless UI.
- **Stripe** — comparable rigor in a large layered token architecture with a single confident accent hue.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* ===== Fonts ===== */
  --pplx-sans: "pplxSans";
  --pplx-mono: "pplxSansMono";
  --pplx-serif: "pplxSerif";
  --pplx-answer: var(--pplx-serif);
  --family-r4-sans: "PPLX Sans Beta R4 VF";
  --family-r4-serif-normal: "PPLX Serif Beta R4 VF";
  --family-r4-mono: "PPLX Sans Mono Beta R4 VF";
  --font-heading-display: "GT Canon VF";

  /* ===== Font weights ===== */
  --font-weight-sans-light: 320;
  --font-weight-sans-regular: 400;
  --font-weight-sans-medium: 480;
  --font-weight-sans-semibold: 560;
  --font-weight-sans-bold: 640;
  --font-weight-serif-regular: 435;
  --font-weight-serif-medium: 535;
  --font-weight-serif-semibold: 635;
  --font-weight-serif-bold: 735;
  --font-weight-mono-regular: 400;
  --font-weight-mono-medium: 500;

  /* ===== Odin — warm neutral spine (light) ===== */
  --odin-light-0: #fff;
  --odin-light-100: #fdfbfa;
  --odin-light-200: #faf8f5;
  --odin-light-300: #f3f0ec;
  --odin-light-400: #ece9e4;
  --odin-light-500: #e5e2dc;
  --odin-light-600: #dedbd4;
  --odin-light-700: #d8d4cd;
  --odin-light-1000: #271a00;
  --odin-light-2000: #27251e;
  --odin-light-200-a-65: #faf8f5a6;
  --odin-light-1000-a-10half: #271a001b;
  --odin-light-1000-a-7: #271a0012;
  --odin-light-1000-a-3half: #271a0009;
  --odin-light-2000-a-65: #27251ea6;
  --odin-light-2000-a-50: #27251e80;
  --odin-light-2000-a-20: #27251e33;
  --odin-light-1000-a-14: #271a0024;
  --odin-light-700-a-70: #d8d4cdb3;

  /* ===== Odin (dark) ===== */
  --odin-dark-0: #000;
  --odin-dark-50: #121211;
  --odin-dark-100: #171615;
  --odin-dark-200: #1e1d1c;
  --odin-dark-300: #242322;
  --odin-dark-400: #2a2928;
  --odin-dark-500: #302f2e;
  --odin-dark-600: #363534;
  --odin-dark-700: #3c3b3a;
  --odin-dark-1000: #d6d5d4;
  --odin-dark-100-a-65: #171615a6;
  --odin-dark-0-a-30: #0000004d;
  --odin-dark-1000-a-65: #d6d5d4a6;
  --odin-dark-1000-a-50: #d6d5d480;
  --odin-dark-1000-a-20: #d6d5d433;
  --odin-dark-1000-a-10half: #d6d5d41b;
  --odin-dark-1000-a-7: #d6d5d412;
  --odin-dark-1000-a-3half: #d6d5d409;
  --odin-dark-1000-a-14: #d6d5d424;
  --odin-dark-100-a-70: #171615b3;

  /* ===== Ifrit — red (light) ===== */
  --ifrit-light-50: #fcf1f1;  --ifrit-light-100: #fdd2d3;
  --ifrit-light-200: #ffabae; --ifrit-light-300: #fd848d;
  --ifrit-light-400: #f46776; --ifrit-light-500: #cd495a;
  --ifrit-light-600: #a23544; --ifrit-light-700: #792b34;
  --ifrit-light-800: #522024; --ifrit-light-900: #330f13;
  /* Ifrit (dark) */
  --ifrit-dark-50: #fff2f2;  --ifrit-dark-100: #fececf;
  --ifrit-dark-200: #f7abad; --ifrit-dark-300: #e7848a;
  --ifrit-dark-400: #dc6973; --ifrit-dark-500: #c34a58;
  --ifrit-dark-600: #a63143; --ifrit-dark-700: #792b34;
  --ifrit-dark-800: #5c1420; --ifrit-dark-900: #330f13;

  /* ===== Phoenix — orange (light) ===== */
  --phoenix-light-50: #ffede5;  --phoenix-light-100: #ffd5c1;
  --phoenix-light-200: #ffb08b; --phoenix-light-300: #ff874e;
  --phoenix-light-400: #eb7035; --phoenix-light-500: #bf5421;
  --phoenix-light-600: #97431a; --phoenix-light-700: #713417;
  --phoenix-light-800: #4b2614; --phoenix-light-900: #28170e;
  /* Phoenix (dark) */
  --phoenix-dark-50: #fff2ed;  --phoenix-dark-100: #fcd0bc;
  --phoenix-dark-200: #f5ae8d; --phoenix-dark-300: #e28a60;
  --phoenix-dark-400: #d57141; --phoenix-dark-500: #ba5525;
  --phoenix-dark-600: #9a3d10; --phoenix-dark-700: #713417;
  --phoenix-dark-800: #522109; --phoenix-dark-900: #28170e;

  /* ===== Titan — gold (light) ===== */
  --titan-light-50: #ffefde;  --titan-light-100: #fcd6a6;
  --titan-light-200: #f8b85b; --titan-light-300: #e39b22;
  --titan-light-400: #c58300; --titan-light-500: #a36c03;
  --titan-light-600: #825503; --titan-light-700: #623f02;
  --titan-light-800: #422b06; --titan-light-900: #251905;
  /* Titan (dark) */
  --titan-dark-50: #fff3e5;  --titan-dark-100: #f7d3a6;
  --titan-dark-200: #eab56c; --titan-dark-300: #d1953a;
  --titan-dark-400: #bc811e; --titan-dark-500: #a06a07;
  --titan-dark-600: #7c5209; --titan-dark-700: #623f02;
  --titan-dark-800: #3e2d15; --titan-dark-900: #231a0b;

  /* ===== Sylph — lime (light) ===== */
  --sylph-light-50: #f0f2db;  --sylph-light-100: #dae49c;
  --sylph-light-200: #b8c95e; --sylph-light-300: #9db138;
  --sylph-light-400: #82961d; --sylph-light-500: #6b7d0d;
  --sylph-light-600: #536300; --sylph-light-700: #3f4a05;
  --sylph-light-800: #2c3208; --sylph-light-900: #1b1d08;
  /* Sylph (dark) */
  --sylph-dark-50: #f4f7da;  --sylph-dark-100: #d8dea9;
  --sylph-dark-200: #bbc57d; --sylph-dark-300: #9ba850;
  --sylph-dark-400: #859531; --sylph-dark-500: #6a7c08;
  --sylph-dark-600: #526200; --sylph-dark-700: #3e4a00;
  --sylph-dark-800: #2c3400; --sylph-dark-900: #1b1d05;

  /* ===== Garuda — green / positive (light) ===== */
  --garuda-light-50: #d9f7d6;  --garuda-light-100: #c0ebbd;
  --garuda-light-200: #8ed88d; --garuda-light-300: #63bf66;
  --garuda-light-400: #44aa4c; --garuda-light-500: #18882d;
  --garuda-light-600: #016b1d; --garuda-light-700: #0c5218;
  --garuda-light-800: #0b3811; --garuda-light-900: #0a2007;
  /* Garuda (dark) */
  --garuda-dark-50: #eaf9e8;  --garuda-dark-100: #bbe5b8;
  --garuda-dark-200: #94cd92; --garuda-dark-300: #73b572;
  --garuda-dark-400: #539e55; --garuda-dark-500: #328439;
  --garuda-dark-600: #136a22; --garuda-dark-700: #0c5218;
  --garuda-dark-800: #02390c; --garuda-dark-900: #0a2007;

  /* ===== Shiva — teal / brand accent (light) ===== */
  --shiva-light-50: #ddf6f8;  --shiva-light-100: #b1eaef;
  --shiva-light-200: #72d3dc; --shiva-light-300: #3abbc6;
  --shiva-light-400: #00a1ac; --shiva-light-500: #01838c;
  --shiva-light-600: #016a71; --shiva-light-700: #0c4f54;
  --shiva-light-800: #0f3639; --shiva-light-900: #071f21;
  --shiva-light-600-a-16: #016a7129;
  /* Shiva (dark) */
  --shiva-dark-50: #e7f2f3;  --shiva-dark-100: #bdd9dd;
  --shiva-dark-200: #90bfc5; --shiva-dark-300: #64a6af;
  --shiva-dark-400: #4e99a3; --shiva-dark-500: #22808c;
  --shiva-dark-600: #1a636c; --shiva-dark-700: #0c4f54;
  --shiva-dark-800: #0c3236; --shiva-dark-900: #081d20;

  /* ===== Leviathan — blue (light) ===== */
  --leviathan-light-50: #e9f2fc;  --leviathan-light-100: #bcdbfa;
  --leviathan-light-200: #87c4f8; --leviathan-light-300: #57adec;
  --leviathan-light-400: #1595da; --leviathan-light-500: #007ebb;
  --leviathan-light-600: #006495; --leviathan-light-700: #004c73;
  --leviathan-light-800: #003451; --leviathan-light-900: #061e2e;
  /* Leviathan (dark) */
  --leviathan-dark-50: #eef4fc;  --leviathan-dark-100: #c6ddf7;
  --leviathan-dark-200: #9dc3ec; --leviathan-dark-300: #77aadc;
  --leviathan-dark-400: #5691c7; --leviathan-dark-500: #3778ac;
  --leviathan-dark-600: #1e608f; --leviathan-dark-700: #004c73;
  --leviathan-dark-800: #09334f; --leviathan-dark-900: #091d2e;

  /* ===== Fenrir — indigo (light) ===== */
  --fenrir-light-50: #f0f0f9;  --fenrir-light-100: #d1d3fc;
  --fenrir-light-200: #b1b8fc; --fenrir-light-300: #8e9cf6;
  --fenrir-light-400: #6c82ea; --fenrir-light-500: #4a69d4;
  --fenrir-light-600: #3053b3; --fenrir-light-700: #1f3d8c;
  --fenrir-light-800: #172a63; --fenrir-light-900: #111a3b;
  /* Fenrir (dark) */
  --fenrir-dark-50: #f4f4ff;  --fenrir-dark-100: #d6d8fd;
  --fenrir-dark-200: #b7bcfb; --fenrir-dark-300: #939def;
  --fenrir-dark-400: #7989e7; --fenrir-dark-500: #596fd0;
  --fenrir-dark-600: #3c57b3; --fenrir-dark-700: #1f3d8c;
  --fenrir-dark-800: #182d6a; --fenrir-dark-900: #0f1a3e;

  /* ===== Ramuh — purple (light) ===== */
  --ramuh-light-50: #f5eefa;  --ramuh-light-100: #e6cff7;
  --ramuh-light-200: #d4aff3; --ramuh-light-300: #c18fed;
  --ramuh-light-400: #ab70e3; --ramuh-light-500: #9354d3;
  --ramuh-light-600: #7a3abb; --ramuh-light-700: #5f269a;
  --ramuh-light-800: #431673; --ramuh-light-900: #290c46;
  /* Ramuh (dark) */
  --ramuh-dark-50: #faf3ff;  --ramuh-dark-100: #e5d0f5;
  --ramuh-dark-200: #d1acef; --ramuh-dark-300: #be8ce9;
  --ramuh-dark-400: #a96ee0; --ramuh-dark-500: #9151d1;
  --ramuh-dark-600: #7737ba; --ramuh-dark-700: #5f269a;
  --ramuh-dark-800: #43196e; --ramuh-dark-900: #280f41;

  /* ===== Jenova — magenta (light) ===== */
  --jenova-light-50: #f8eef3;  --jenova-light-100: #ffcce9;
  --jenova-light-200: #ffa4da; --jenova-light-300: #f47fc8;
  --jenova-light-400: #d958ab; --jenova-light-500: #c24397;
  --jenova-light-600: #a12c7b; --jenova-light-700: #7d1f5e;
  --jenova-light-800: #561741; --jenova-light-900: #301024;
  /* Jenova (dark) */
  --jenova-dark-50: #fff1f9;  --jenova-dark-100: #fac9e4;
  --jenova-dark-200: #f1a3d1; --jenova-dark-300: #e381bc;
  --jenova-dark-400: #d163a7; --jenova-dark-500: #b94891;
  --jenova-dark-600: #9c3077; --jenova-dark-700: #7d1f5e;
  --jenova-dark-800: #591342; --jenova-dark-900: #330d25;

  /* ===== Semantic aliases (light theme) ===== */
  --bg-inverse: var(--odin-light-2000);
  --bg-soft: var(--odin-light-1000-a-7);
  --bg-subtle: var(--odin-light-1000-a-3half);
  --bg-base: var(--odin-light-200);
  --bg-raised: var(--odin-light-100);
  --bg-backdrop: var(--odin-light-700-a-70);
  --surface-base: var(--odin-light-200);
  --surface-raised: var(--odin-light-100);
  --surface-underlay: var(--odin-light-300);
  --surface-inverse: var(--odin-light-2000);
  --fg-primary: var(--odin-light-2000);
  --fg-secondary: var(--odin-light-2000-a-65);
  --fg-tertiary: var(--odin-light-2000-a-50);
  --fg-disabled: var(--odin-light-2000-a-20);
  --fg-inverse: var(--odin-light-100);
  --border-heavy: var(--odin-light-2000);
  --border-medium: var(--odin-light-1000-a-14);
  --border-soft: var(--odin-light-1000-a-7);
  --border-inverse: var(--odin-light-100);
  --border-focus: var(--shiva-light-600);
  --accent-bg-strong: var(--shiva-light-600);
  --accent-fg-primary: var(--shiva-light-600);
  --accent-border-strong: var(--shiva-light-600);
  --positive-fg-primary: var(--garuda-light-600);
  --negative-fg-primary: var(--ifrit-light-600);
  --warning-fg-primary: var(--phoenix-light-600);
  --link-accent-fg-idle: var(--shiva-light-600);
  --link-accent-fg-hover: var(--shiva-light-700);
  --link-accent-fg-active: var(--shiva-light-800);
  --link-alert-fg-idle: var(--phoenix-light-600);
  --static-fg-light: var(--odin-dark-1000);
  --static-fg-dark: var(--odin-light-2000);
  --static-bg-light: var(--odin-light-200);
  --static-bg-dark: var(--odin-dark-100);
  --action-solid-neutral-bg-idle: var(--odin-light-2000);
  --action-solid-accent-bg-idle: var(--shiva-light-600);
  --action-solid-accent-bg-hover: var(--shiva-light-700);
  --action-solid-accent-bg-active: var(--shiva-light-800);
  --action-ghost-neutral-bg-hover: var(--odin-light-1000-a-3half);
  --action-ghost-neutral-bg-active: var(--odin-light-1000-a-7);

  /* ===== Ask-input glow ===== */
  --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;

  /* ===== Type scale ===== */
  --text-caption: 12px;   --leading-caption: 16px;
  --text-body-md: 14px;   --leading-body-md: 20px;
  --text-body-lg: 16px;   --leading-body-lg: 24px;
  --text-heading-section: 16px; --leading-heading-section: 24px;
  --text-heading-title: 20px;   --leading-heading-title: 28px;
  --text-headline: 28px;  --leading-headline: 36px;
  --text-display: 36px;   --leading-display: 48px;
  --text-hero: 46px;      --leading-hero: 56px;

  /* ===== Spacing ===== */
  --spacing-one: 1px;  --spacing-2xs: 2px; --spacing-xs: 4px;
  --spacing-sm: 6px;   --spacing-md: 8px;  --spacing-ml: 10px;
  --spacing-lg: 12px;  --spacing-xl: 16px; --spacing-2xl: 20px;
  --spacing-3xl: 24px; --spacing-4xl: 28px;--spacing-5xl: 32px;
  --spacing-6xl: 36px; --spacing-7xl: 40px;--spacing-8xl: 44px;
  --spacing-9xl: 48px;

  /* ===== Radius ===== */
  --radius-2xs: 2px; --radius-xs: 4px; --radius-sm: 6px;
  --radius-md: 8px;  --radius-lg: 12px; --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ===== Input sizes ===== */
  --input-2xs: 14px; --input-xs: 16px; --input-sm: 24px;
  --input-md: 32px;  --input-lg: 40px;

  /* ===== Easing ===== */
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1);
  --ease-out-soft: cubic-bezier(.36, 1.3, .64, 1);
  --ease-in-out-quart: cubic-bezier(.76, 0, .24, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-in-cubic: cubic-bezier(.32, 0, .67, 0);
  --ease-in-out-sine: cubic-bezier(.37, 0, .63, 1);
}
```
### Tailwind v4
```css
@theme {
  /* Fonts */
  --font-sans: "pplxSans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "pplxSerif", Georgia, "Times New Roman", serif;
  --font-mono: "pplxSansMono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "GT Canon VF", "Playfair Display", Georgia, serif;

  /* Neutrals — Odin (light) */
  --color-paper: #faf8f5;
  --color-paper-raised: #fdfbfa;
  --color-white: #fff;
  --color-underlay: #f3f0ec;
  --color-ink: #27251e;
  --color-ink-secondary: #27251ea6;
  --color-ink-tertiary: #27251e80;
  --color-espresso: #271a00;
  --color-border-soft: #271a0012;
  --color-border-medium: #271a0024;
  /* Neutrals — Odin (dark) */
  --color-dark-canvas: #171615;
  --color-dark-raised: #1e1d1c;
  --color-dark-ink: #d6d5d4;

  /* Accent — Shiva teal */
  --color-teal-50: #ddf6f8;  --color-teal-100: #b1eaef;
  --color-teal-200: #72d3dc; --color-teal-300: #3abbc6;
  --color-teal-400: #00a1ac; --color-teal-500: #01838c;
  --color-teal-600: #016a71; --color-teal-700: #0c4f54;
  --color-teal-800: #0f3639; --color-teal-900: #071f21;
  --color-teal-dark-500: #22808c;

  /* Semantic hue leads (600 light) */
  --color-positive: #016b1d;   /* Garuda green */
  --color-negative: #a23544;   /* Ifrit red */
  --color-warning: #97431a;    /* Phoenix orange */
  --color-gold: #825503;       /* Titan */
  --color-lime: #536300;       /* Sylph */
  --color-blue: #006495;       /* Leviathan */
  --color-indigo: #3053b3;     /* Fenrir */
  --color-purple: #7a3abb;     /* Ramuh */
  --color-magenta: #a12c7b;    /* Jenova */

  /* Aliases */
  --color-background: #faf8f5;
  --color-foreground: #27251e;
  --color-accent: #016a71;
  --color-border-focus: #016a71;

  /* Type scale */
  --text-caption: 12px;   --text-caption--line-height: 16px;
  --text-body-md: 14px;   --text-body-md--line-height: 20px;
  --text-body-lg: 16px;   --text-body-lg--line-height: 24px;
  --text-title: 20px;     --text-title--line-height: 28px;
  --text-headline: 28px;  --text-headline--line-height: 36px;
  --text-display: 36px;   --text-display--line-height: 48px;
  --text-hero: 46px;      --text-hero--line-height: 56px;

  /* Spacing */
  --spacing-one: 1px; --spacing-2xs: 2px; --spacing-xs: 4px;
  --spacing-sm: 6px;  --spacing-md: 8px;  --spacing-ml: 10px;
  --spacing-lg: 12px; --spacing-xl: 16px; --spacing-2xl: 20px;
  --spacing-3xl: 24px;--spacing-4xl: 28px;--spacing-5xl: 32px;
  --spacing-6xl: 36px;--spacing-7xl: 40px;--spacing-8xl: 44px;
  --spacing-9xl: 48px;

  /* Radius */
  --radius-2xs: 2px; --radius-xs: 4px; --radius-sm: 6px;
  --radius-md: 8px;  --radius-lg: 12px; --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Easing */
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --ease-out-soft: cubic-bezier(.36, 1.3, .64, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
}
```