AI Assistants / iOS / Android / Web

Perplexity

Perplexity treats the question box as the whole product and tints its ink with blue-green, so a near-monochrome page still feels like its own.

Download
  • #016A71
  • #0B2833
  • #FBFBFB
  • #252525
  • #15171B
  • #A23544

Color

Every color token in the file, grouped by role.

Brand

  • primary#252525
  • on primary#FBFBFB
  • accent#016A71
  • dark accent#1A636C

Surfaces

  • canvas#FBFBFB
  • surface#FFFFFF
  • dark canvas#15171B

Text

  • ink#0B2833
  • ink black#000000
  • dark ink#DBDEE3

Status

  • positive#016B1D
  • negative#A23544
  • warning#97431A

More

  • dark page#100E12

Typography

Each style is set with the file's own family, size, weight and spacing.

  • pplxSanspplxSans is private and not available in open fonts. Shown in Schibsted Grotesk, the closest open match.
  • display26px / 400 / 39px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 500 / 20px

    Continue to checkout

  • button large18px / 500 / 28px

    Continue to checkout

  • caption12px / 500 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • radius 44px
  • radius 66px
  • radius 88px
  • radius 1212px
  • radius 1616px
  • radius 2020px
  • radius 2424px
  • full9999px

Spacing

The spacing scale, drawn to size.

  • space 88px
  • space 1212px
  • space 1414px
  • space 1616px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button large
    button-large
  • search box
    search-box
  • news card
    news-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 96 lines
version: alpha
name: Perplexity-design-analysis
description: "An AI search product built around one question box: paper white, deep blue-green ink (#0b2833), a teal accent (#016a71), pplxSans at regular weight and full pills, with lighter weights in dark mode."
status: Draft
appVersion: "measured in a browser from the logged-out product and the tokens it ships, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#252525"
  on-primary: "#fbfbfb"
  accent: "#016a71"
  canvas: "#fbfbfb"
  surface: "#ffffff"
  ink: "#0b2833"
  ink-black: "#000000"
  positive: "#016b1d"
  negative: "#a23544"
  warning: "#97431a"
  dark-canvas: "#15171b"
  dark-page: "#100e12"
  dark-ink: "#dbdee3"
  dark-accent: "#1a636c"

typography:
  # Font note: "pplxSans" is a private font and is not available in open fonts. Closest open alternative: "Schibsted Grotesk".
  display:
    fontFamily: "pplxSans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 39px
    letterSpacing: -0.13px
  body:
    fontFamily: "pplxSans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "pplxSans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  button-large:
    fontFamily: "pplxSans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 28px
  caption:
    fontFamily: "pplxSans, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px

rounded:
  radius-4: 4px
  radius-6: 6px
  radius-8: 8px
  radius-12: 12px
  radius-16: 16px
  radius-20: 20px
  radius-24: 24px
  full: 9999px

spacing:
  space-8: 8px
  space-12: 12px
  space-14: 14px
  space-16: 16px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 32px
    padding: 0 10px
  button-large:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-large}"
    rounded: "{rounded.radius-12}"
    height: 56px
  search-box:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-20}"
    width: 640px
    height: 120px
  news-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-12}"

Overview

Perplexity is an AI search product on the web and in iOS and Android apps. Logged out, the real home page and Discover feed load, so the web layer describes the product itself. It ships a role-named token set for text, borders, actions and status. [Measured]

What defines the look:

  1. Ink with a hue. #0b2833 replaces black for text, and borders are the same ink at 15 and 7 percent. [Measured]
  2. A dark teal accent. #016a71 marks accent text, links and solid accent actions. [Measured]
  3. One centered question. The home page is a 26px prompt over one box. [Measured]
  4. Full pills for controls. Mode buttons and chips are round and 32 high. [Measured]
  5. Weights drop in dark. 400 becomes 360 and 500 becomes 470. [Measured]

Source for this file: the logged-out home, Discover and Pro pages, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass, plus the role-named tokens on the root element. No app captures were used. See Known Gaps.

Core

Colors

RoleValueToken name in the shipped set
Ink#0b2833fg primary, shiva light 900 [Measured]
Ink stepsink at 75 and 50 percent[Measured]
Accent#016a71, hover #0c4f54, active #0f3639action solid accent, link accent [Measured]
Page#fbfbfb, root #fcfcf9odin light 100 [Measured]
Solid button#252525 on #fbfbfbodin light 2000 [Measured]
Bordersink at 15 and 7 percentborder base, border soft [Measured]
Positive, negative, warning#016b1d, #a23544, #97431agaruda, ifrit, phoenix 600 [Measured]
Darkpage #15171b, root #100e12, text #dbdee3[Measured]

Typography

RoleSizeFace and weight
Prompt26 on 39pplxSans 400, dark 350 [Measured]
Body16 on 24pplxSans 400, dark 360 [Measured]
Button14 on 20pplxSans 500, dark 470 [Measured]
Large button18pplxSans 500 [Measured]
Small12 on 16pplxSans 500, dark 470 [Measured]

Discover also loads a pplxSerif face. Its roles were not separated. [Measured]

Shape and spacing

Radius tokens are 2, 4, 6, 8, 10, 12, 16, 20 and 24 plus full. In use: chips full, the search box 20, Discover cards 12, small buttons 8, large buttons 12. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light and dark, following the system setting. Weights change between themes as well as colors. [Measured]

Platform: iOS

How the Perplexity app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

Not measured. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the blue-green ink, the teal accent and full pill controls with the web. [Inferred]

Platform: Android

How the Perplexity app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

Not measured. [Inferred]

Main action

Expected on Android: Floating action button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the blue-green ink, the teal accent and full pill controls with the web. [Inferred]

Platform: Web

The logged-out home, Discover and Pro pages, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A left rail with New and product links on desktop. At the mobile width an Open in App pill leads. Discover uses 56 high text tabs. [Measured]

Main action

Expected on Web: Page-level button.

The question box, a white 640 by 120 panel at 20 radius, with Search, Computer and Model controls as 32 high pills. Upgrade buttons are 56 high at 12 radius with 18px medium text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured beyond the cookie prompt, which is excluded. [Inferred]

Controls

Expected on Web: Native or custom.

Ghost pills are 32 high with #0b2833 text, and selected text is full ink while idle text is 75 percent. View plans is a 24 high pill with a 15 percent border. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixels across the two widths. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Controls are 32 high and many sit under 44, including at the mobile width. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The question box is shown logged out, and Sign In sits in the rail. Sending a question was not tried. Other rules were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

Very little changes between widths except navigation. [Measured]

Cross-platform consistency

Consistent across platforms: the blue-green ink, the teal accent and full pill controls. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Tint ink and borders with blue-green instead of using gray.
  • Keep the page to one clear question box.
  • Use teal for links and accent actions only.
  • Lighten weights slightly on dark surfaces.

Don't

  • Don't use pure black for reading text.
  • Don't add a second brand color.
  • Don't fill large areas with teal.

Known Gaps

  • Signed-in history and account screens were not measured.
  • The iOS and Android apps were not captured, so every mobile topic is inferred.
  • Icons, motion, dialogs and pplxSerif roles were not measured.
  • pplxSans is private. Schibsted Grotesk is within 1 percent at 16px. Plus Jakarta Sans matched width but has wider, rounder forms.
  • Account deletion and store sign-in rules were not verified.