---
title: "Delphi — Find Perspectives design system"
variant: extended
source: https://www.delphi.co/discover/perspectives
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/delphi-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Delphi — Find Perspectives · Design System

> A calm discovery canvas with vivid expert-led cards.

**Theme:** light · **Industry:** ai · **Source:** https://www.delphi.co/discover/perspectives · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Delphi pairs a quiet, warm-white discovery interface with bold, richly colored perspective cards. A centered question field and compact category filters lead users from open-ended intent to people with relevant lived experience.

## North star

Keep the discovery interface quiet and centered, using orange for action and saturated card colors to distinguish perspective content.

## Overview

The page uses a warm near-white canvas and white navigation to keep the discovery experience open and unhurried. Dark ink carries headings and navigation, while the saturated orange accent marks the primary action and selected category. The strongest color appears in the perspective cards: burgundy, plum, and deep green create distinct content groups, with occasional orange emphasis in card copy. FontPythia gives headings and card prompts an editorial serif character; Inter handles controls and supporting text with compact clarity. A centered search prompt anchors the upper page, followed by a horizontal row of rounded category pills and a three-column card grid within a broad, centered content area. Generous gaps separate these functional layers. Cards use rounded corners, fine pale borders, and subtle inset or soft elevation rather than heavy outlines. The screenshot shows text-led cards, not prominent photography, so color and typography do the visual work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f9f9f8` | `--color-soft-canvas` | surface | Warm near-white page canvas behind the discovery interface and content. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation, search field, and light card surfaces. |
| Oat Mist | `#f0eae4` | `--color-oat-mist` | neutral | Pale muted text or button treatment; use sparingly where low contrast is intentional. |
| Quiet Line | `#e3e3e1` | `--color-quiet-line` | neutral | Fine card borders and restrained separators. |
| Stone Gray | `#63635e` | `--color-stone-gray` | neutral | Secondary labels and inactive category-pill text. |
| Signal Orange | `#fd5400` | `--color-signal-orange` | accent | Primary create action, selected All filter, and highlighted card copy. |
| Warm Ink | `#21201c` | `--color-warm-ink` | neutral | Main headings, navigation text, and core body copy. |
| Oxblood | `#440411` | `--color-oxblood` | brand | Deep red perspective-card background. |
| Mulberry | `#4a1d40` | `--color-mulberry` | brand | Plum perspective-card background. |
| Forest Teal | `#044438` | `--color-forest-teal` | brand | Deep green perspective-card background. |
| Pewter Haze | `#bcbbb5` | `--color-pewter-haze` | neutral | Placeholder text in the question field. |
| Tangerine | `#fa7516` | `--color-tangerine` | accent | Occasional brighter orange text accent; not a dominant interface surface. |
| Ash Taupe | `#94908b` | `--color-ash-taupe` | neutral | Low-frequency muted text color; keep subordinate to Warm Ink. |
| Sage Gray | `#bcc5be` | `--color-sage-gray` | semantic | Low-frequency muted text color, not a primary page surface. |
| Mist Blue | `#89aece` | `--color-mist-blue` | semantic | Low-frequency text color; not part of the dominant page palette. |
| Blush Sand | `#dfc1b5` | `--color-blush-sand` | semantic | Measured gradient color associated with a button treatment, not a dominant surface. |

### Semantic aliases

`--color-canvas` → `#f9f9f8` (Soft Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#440411` (Oxblood) · `--color-surface-3` → `#4a1d40` (Mulberry) · `--color-surface-4` → `#044438` (Forest Teal) · `--color-text` → `#21201c` (Warm Ink) · `--color-text-muted` → `#f0eae4` (Oat Mist) · `--color-text-subtle` → `#63635e` (Stone Gray) · `--color-border` → `#e3e3e1` (Quiet Line) · `--color-accent` → `#fd5400` (Signal Orange) · `--color-accent-2` → `#4a1d40` (Mulberry) · `--color-accent-3` → `#044438` (Forest Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#21201c` | `#f9f9f8` | 15.48:1 | AAA |
| `#21201c` | `#ffffff` | 16.3:1 | AAA |
| `#21201c` | `#440411` | 1.01:1 | fail |
| `#21201c` | `#4a1d40` | 1.2:1 | fail |
| `#f0eae4` | `#f9f9f8` | 1.13:1 | fail |
| `#f0eae4` | `#ffffff` | 1.19:1 | fail |
| `#f0eae4` | `#440411` | 13.84:1 | AAA |
| `#f0eae4` | `#4a1d40` | 11.42:1 | AAA |
| `#63635e` | `#f9f9f8` | 5.73:1 | AA |
| `#63635e` | `#ffffff` | 6.04:1 | AA |

### Gradients

- `linear-gradient(color(srgb 1 1 1) 0%, color(srgb 1 1 1 / 0.9888) 6.25%, color(srgb 1 1 1 / 0.957) 12.5%, color(srgb 1 1 1 / 0.9077) 18.75%, color(srgb 1 1 1 / 0.8438) 25%, color(srgb 1 1 1 / 0.7681) 31.25%, color(srgb 1 `
- `radial-gradient(140% 85% at 50% 118%, oklch(0.44962 0.153569 37.5711 / 0.27), rgba(0, 0, 0, 0) 72%)`
- `radial-gradient(140% 85% at 50% 118%, oklch(0.485858 0.100825 336.031 / 0.27), rgba(0, 0, 0, 0) 72%)`
- `radial-gradient(140% 85% at 50% 118%, oklch(0.591325 0.0430082 176.465 / 0.27), rgba(0, 0, 0, 0) 72%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| fontPythia | `--font-display` | webfont | 600, 500 | Editorial headings, perspective-card prompts, and uppercase eyebrow labels. | DM Serif Display |
| Inter | `--font-body` | webfont | 500, 400 | Body copy, navigation, category controls, buttons, and input text. | Inter |

- **fontPythia:** Measured weights 500 and 600; headings use tight negative tracking, while eyebrow labels are uppercase with expanded tracking.
- **Inter:** Measured weights 400 and 500; compact functional text with restrained tracking and natural casing.

### Type scale — Major Third (ratio ≈ 1.247, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 28px | 500 | 1.02 | -0.025em | — | fontPythia | Centered page headline above the question input. |
| h2 | 22px | 600 | 1.15 | -0.025em | — | fontPythia | Section headings and prominent content titles. |
| body | 18px | 400 | 1.44 | -0.01em | — | Inter | Question prompts and supporting descriptive copy. |
| caption | 14px | 500 | 1.43 | 0 | — | Inter | Category labels and compact card metadata. |
| button | 14px | 500 | 1.43 | 0 | — | Inter | Navigation CTA and category filter controls. |
| eyebrow | 11px | 600 | 1 | 0.09em | uppercase | fontPythia | Small uppercase labels introducing supporting content. |

OpenType features in use: `"cv03", "cv04", "cv06", "cv09", "cv11", "ss08"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 8, 9, 10, 12, 16, 20, 22, 40 px.
- Section rhythm 64px · element gap 12px · card padding — · max content width 1072px.

A centered content area uses a measured maximum width of 1072px, with a 12-column structure and comfortable density. The header spans the viewport; the discovery headline and input sit centered beneath it. Category pills form a single horizontal row, followed by a left-aligned section heading and three-column perspective cards. The measured section rhythm is 64px, with a 12px element gap. Preserve generous outer whitespace and keep the filter-to-grid transition compact.

## Shape & elevation

- Radius: button `9999px` · card `24px` · xs `24px` · pill `9999px`
- Shadow `inset` (card): `rgba(0, 0, 0, 0.09) 0px 12px 12px 0px, rgba(0, 0, 0, 0.03) 0px 17.2px 17.2px -8.6px, rgba(0, 0, 0, 0.03) 0px 8.6px 8.6px -4.3px, rgba(0, 0, 0, 0.03) 0px 4.3px 4.3px -2.15px, rgba(0, 0, 0, 0.03) 0px 1.`
- Shadow `hairline` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 2px 2px 0px, rgba(0, 0, 0, 0.03) 0px 0.5`
- Motion: standard transition `0.2s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

Cards are defined by rounded corners and a fine pale border, with a subtle soft shadow or inset finish. The search field sits slightly above the canvas through restrained shadowing. Keep navigation and page background flat; avoid dramatic depth, thick outlines, or stacked floating panels.

## Imagery

The visible page is primarily typographic and interface-led rather than photography-led. Perspective cards use solid, saturated color fields with small brand marks, text prompts, and compact category/count labels. Avoid adding decorative imagery, gradients, or mockups that compete with the text. If card artwork is needed, keep it subordinate and preserve the strong color-block treatment.

## Components

### Navigation

White full-width top bar with a compact Delphi mark at left, Sign In text link, and orange pill-shaped Create Your Delphi action at right.

### Question input

Broad white rounded field centered beneath the headline; large Inter prompt text uses muted placeholder color, with a small microphone control near the lower right.

### Category filters

One horizontal row of rounded pills. The selected All filter uses Signal Orange with white text; inactive categories use pale gray fills and Stone Gray labels.

### Perspective card

Rounded, colored text card with a small brand mark, serif prompt, and compact category plus perspective-count labels near the bottom.

### Card grid

Three equal-width columns of perspective cards with consistent narrow gutters and clear row spacing.

### Section heading

Left-aligned Warm Ink heading introduces the card collection, with a small shuffle-style control aligned to the far right.

### Measured component styles

- **Primary button** (“Career”): background #eeeeed · text #63635e · radius 3.35544e+07px · padding 10px 16px · 500 14px Inter
- **Secondary button** (“Create Your Delphi”): background #fd5400 · text #ffffff · border 1px solid · radius 26px · padding 0px 12px · 500 14px Inter
- **Input**: transparent background · text #21201c · radius 0px · padding 0px · 400 18px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“How can I get myself in a confident stat”): background #ffffff · text #21201c · border 1px solid #e3e3e1 · radius 24px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0.09) 0px 12px 12px 0px, rgba(0, 0, 0, 0.03) 0px 17.2px 17.2px -8.
- **Navigation item** (“Sign In Create Your Delphi”): transparent background · text #21201c · radius 0px · padding 0px · 400 16px Inter

## Do

- Use Soft Canvas as the primary page background.
- Keep the headline and question field centered.
- Reserve Signal Orange for selected or primary actions.
- Use Mulberry, Oxblood, and Forest Teal for perspective-card surfaces.
- Set editorial headings in FontPythia and controls in Inter.
- Keep card borders and shadows quiet.
- Maintain a clear three-column content grid.

## Don't

- Do not turn the page into a dark interface.
- Do not use orange as a large background field.
- Do not add prominent photography to text-led cards.
- Do not use heavy borders or dramatic shadows.
- Do not scatter filters across multiple rows without need.
- Do not make secondary labels compete with headings.

## Agent prompt

Build a new Delphi-style discovery page with a calm, warm-neutral canvas. Use Soft Canvas (#f9f9f8) behind a white (#ffffff) navigation bar and input; set primary text in Warm Ink (#21201c), muted labels in Stone Gray (#63635e), and fine borders in Quiet Line (#e3e3e1). Reserve Signal Orange (#fd5400) for the primary CTA, selected filter, and occasional highlighted text. Center the main discovery headline and question field, then place a compact horizontal pill-filter row above a broad three-column grid. Use FontPythia for editorial headlines and card prompts, Inter for controls and body copy. Give perspective cards rounded corners and distinct Mulberry (#4a1d40), Oxblood (#440411), or Forest Teal (#044438) surfaces. Keep elevation subtle, spacing comfortable, and imagery secondary to readable text.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Full-width navigation above centered headline and input; horizontal category filters lead into a three-column card grid. | question-led discovery, category filtering, shuffle suggestions | centered search field, rounded filter pills, color-block cards, compact metadata labels |

## Source CSS custom properties (selected)

```css
--surface-primary: white;
--surface-secondary: #f9f9f8;
--fg-high: #21201c;
--fg-mid: #63635e;
--fg-low: #82827c;
--fg-placeholder: #bcbbb5;
--fg-inverted: white;
--fg-error: #dc3e42;
--fg-success: #218358;
--fg-warning: #ab6400;
--fg-info: #0d74ce;
--brand-accent: oklch(.67 .22 42);
--bubble-accent: oklch(.67 .22 42);
--background: white;
--foreground: #21201c;
--card-foreground: #21201c;
--popover-foreground: #21201c;
--primary: #21201c;
--primary-foreground: white;
--secondary: #f9f9f8;
--secondary-foreground: #21201c;
--muted-foreground: #63635e;
--accent: #f9f9f8;
--accent-foreground: #21201c;
--border: #dad9d6;
--radius: .625rem;
--sidebar-foreground: #21201c;
--sidebar-primary: #21201c;
--sidebar-primary-foreground: white;
--sidebar-accent: #f9f9f8;
--sidebar-accent-foreground: #21201c;
--sidebar-border: #dad9d6;
--border-hairline: 1px;
--duration-exit: 90ms;
--duration-enter: .14s;
--duration-move: .22s;
--avatar-shadow-inset: 0 2px 4px 0 #ffffff80 inset, 0 -2px 4px 0 #fff6 inset;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/delphi-ai