# Design Reference - Perplexity AI
> Ivory Desk, Graphite Tools — a pristine, brightly lit workspace filled with essential gray instruments.

## Source
- Original site: https://perplexity.ai
- Captured: 2026-04-11T16:07:53.579Z

## Tags
- minimal
- utilitarian
- typographic
- monochromatic
- compact
- clean
- informational
- app-like

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Inkwell | `#000000` | neutral | Primary text, interactive icons, active states – commands immediate attention against the subtle backgrounds. |
| Paper White | `#FFFFFF` | neutral | Main page background, pristine canvas for content. The brightest neutral. |
| Parchment | `#FAF8F5` | neutral | Interactive element backgrounds like search bars and buttons in inactive states, providing a soft contrast to the main background. |
| Graphite | `#27251` | neutral | Secondary text, subtle backgrounds for elevated elements, and borders for input fields – registers as dark but softer than pure black. |
| Faded Stone | `#92918B` | neutral | Placeholder text, subtle contextual information, providing low-contrast visual guiding. |
| Dusk Gray | `#72706B` | neutral | Tertiary text, inactive icons, divider lines – defines softer visual cues and non-critical information. |

## Typography
- role: All text elements, including body, navigation, and headings. Its use across all types creates a cohesive, restrained tone. The custom font contributes to a distinctive feel, avoiding common system fonts for a unique subtle character.; sizes: 12px, 14px, 16px; family: pplxSans; weight: 400, 500; lineHeight: 1.33, 1.43, 1.50, 2.00; substitute: Inter; letterSpacing: normal

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "16px",
      "inputs": "8px",
      "buttons": "9999px",
      "navigation": "8px"
    },
    "elementGap": "8px",
    "sectionGap": "32px",
    "cardPadding": "12px"
  },
  "radius": {
    "cards": "16px",
    "inputs": "8px",
    "buttons": "9999px",
    "navigation": "8px"
  }
}
```

## Component Patterns
- name: Search Input Field
- name: Sidebar Navigation Menu
- name: Try Computer Suggestion Cards
- name: Primary Navigation Item (Active); role: Indicates current selected item in the sidebar navigation.
- name: Primary Navigation Item (Inactive); role: Non-selected items in the sidebar navigation.
- name: Search Input Field; role: Main input area for user queries.
- name: Pill Button (Default); role: General action button with a rounded style.
- name: Pill Button (Accent); role: Interactive elements within the search bar or filter tags.

## Do
- Prioritize Graphite (#27251E) for secondary text and subtle UI elements to maintain a restrained aesthetic.
- Use Paper White (#FFFFFF) as the predominant background, with Parchment (#FAF8F5) for interactive surfaces to create depth without strong shadows.
- Apply 9999px border-radius to all interactive buttons and tags for a distinctive pill shape.
- Maintain 8px border-radius for input fields and active navigation items to denote interactive, contained elements.
- Use Inkwell (#000000) exclusively for primary text and critical interactive icons for maximum clarity and contrast.
- Ensure 4px vertical padding for list items and 8px for internal element gaps to maintain a compact density.
- Use the `pplxSans` font at weight 400 for all body and informational text for consistent tone.

## Don't
- Avoid chromatic colors; this system relies exclusively on shades of gray and off-white.
- Do not use box-shadows that are anything other than extremely subtle; surface differentiation comes from color variants, not elevation.
- Do not introduce square buttons or elements if they contain interactive copy or serve as primary actions; use the 9999px radius.
- Do not vary font families; stick strictly to `pplxSans` (or 'Inter') for all typographic elements.
- Do not use font weights other than 400 or 500.
- Avoid large spacing values; the design emphasizes information density with 4px and 8px increments.