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

# Parallel · Design System

> Quiet technical clarity with vivid product moments

**Theme:** light · **Industry:** ai · **Source:** https://parallel.ai/ · **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._

Parallel pairs a restrained white canvas and compact technical typography with vivid, oversized product visuals. Its long-form homepage alternates clear editorial explanations, interface demonstrations, customer proof, and trust details.

## North star

Keep the page quiet and spacious, then use vivid product media and orange actions to make the important moments unmistakable.

## Overview

The page is built on a near-continuous white canvas, with dark near-black headings and muted gray supporting copy creating a calm, technical hierarchy. Signal Orange (#fb631b) marks the primary action and small points of emphasis; the blue hero media and warm gray product-demo panels supply most of the larger color fields. Gerstner Programm gives headings and body copy a compact, modern sans-serif voice, while FT System Mono is reserved for navigation, labels, code-like details, and uppercase controls. A narrow announcement bar and restrained header lead into a large headline and broad video demonstration. Below, alternating two-column feature sections and card grids use generous white space rather than colored section bands. Customer logos and testimonials add credibility, while thin gray rules, softly tinted cards, and restrained shadows separate content without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, open section backgrounds, and light interface cards. |
| Signal Orange | `#fb631b` | `--color-signal-orange` | brand | Primary build CTA, login button, and small emphasis marks. |
| Soft Graphite | `#858483` | `--color-soft-graphite` | neutral | Muted supporting copy, secondary navigation, and subdued labels. |
| Peach Wash | `#fcddcf` | `--color-peach-wash` | surface | Measured flat gradient tone; treat as a subtle media or decorative tint, not a core page band. |
| Rule Gray | `#eeeeee` | `--color-rule-gray` | neutral | Card outlines, fine separators, and pale badge backgrounds. |
| Ink Black | `#181818` | `--color-ink-black` | neutral | Primary headings, body text, and dark interface details. |
| Warm Stone | `#ebe9e3` | `--color-warm-stone` | surface | Warm neutral backing for product demonstrations and selected cards. |
| Status Green | `#00ae4c` | `--color-status-green` | semantic | Small status or success badge detail; not a defining page color. |
| Mint Tint | `#c5efd0` | `--color-mint-tint` | semantic | Pale badge accent in interface details; use only for status-like highlights. |
| Ember Orange | `#f4793f` | `--color-ember-orange` | accent | Secondary orange within product cards, links, and illustrated interface details. |
| Porcelain Gray | `#f5f4f1` | `--color-porcelain-gray` | surface | Soft card and demo-panel fill, especially in the industry and product sections. |
| Button Charcoal | `#434343` | `--color-button-charcoal` | neutral | Secondary CTA backgrounds and dark control surfaces. |
| Link Blue | `#0d6ea5` | `--color-link-blue` | accent | Occasional inline link or technical text accent. |
| Mist Blue | `#8fb6cc` | `--color-mist-blue` | surface | Blue-toned media or card surface, mainly inside product visuals. |
| Weathered Taupe | `#a8a497` | `--color-weathered-taupe` | surface | Muted testimonial or illustration panel color rather than a general page background. |
| Sky Blue | `#6fa2e8` | `--color-sky-blue` | accent | Large blue hero-demo imagery; an expressive media color, not a base UI surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ebe9e3` (Warm Stone) · `--color-surface-2` → `#f5f4f1` (Porcelain Gray) · `--color-surface-3` → `#8fb6cc` (Mist Blue) · `--color-surface-4` → `#a8a497` (Weathered Taupe) · `--color-text` → `#181818` (Ink Black) · `--color-text-muted` → `#858483` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#eeeeee` (Rule Gray) · `--color-accent` → `#fb631b` (Signal Orange) · `--color-accent-2` → `#f4793f` (Ember Orange) · `--color-accent-3` → `#0d6ea5` (Link Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#181818` | `#ffffff` | 17.76:1 | AAA |
| `#181818` | `#ebe9e3` | 14.63:1 | AAA |
| `#181818` | `#f5f4f1` | 16.14:1 | AAA |
| `#181818` | `#8fb6cc` | 8.23:1 | AAA |
| `#858483` | `#ffffff` | 3.73:1 | AA-large |
| `#858483` | `#ebe9e3` | 3.07:1 | AA-large |
| `#858483` | `#f5f4f1` | 3.39:1 | AA-large |
| `#858483` | `#8fb6cc` | 1.73:1 | fail |
| `#ffffff` | `#ebe9e3` | 1.21:1 | fail |
| `#ffffff` | `#f5f4f1` | 1.1:1 | fail |

### Gradients

- `linear-gradient(rgb(252, 221, 207), rgb(252, 221, 207))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| gerstnerProgramm | `--font-body` | webfont | 500, 400 | Headings, body copy, feature descriptions, and most links and buttons. | Inter |
| ftSystemMono | `--font-mono` | webfont | 400, 500 | Navigation, uppercase CTAs, technical labels, badges, and code-like content. | IBM Plex Mono |

- **gerstnerProgramm:** Measured weights 400 and 500; compact modern sans-serif with modest positive tracking on body and controls.
- **ftSystemMono:** Measured weights 400 and 500; small, precise monospace labels often use uppercase.

### Type scale — Major Third (ratio ≈ 1.26, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 500 | 1.13 | 0 | — | gerstnerProgramm | Primary hero headline and major page-level statement. |
| h2 | 26px | 500 | 1.23 | 0 | — | gerstnerProgramm | Section headings introducing product capabilities and proof. |
| h3 | 20px | 500 | 1.4 | 0 | — | gerstnerProgramm | Subsection titles and individual feature or FAQ prompts. |
| body | 16px | 500 | 1.5 | 0.009em | — | gerstnerProgramm | Explanatory copy across product, trust, and customer sections. |
| caption | 13px | 500 | 1.23 | 0.012em | — | gerstnerProgramm | Compact card labels, supporting notes, and metadata. |
| button | 16px | 500 | 1.5 | 0.009em | — | gerstnerProgramm | CTA labels and interactive control text. |
| nav | 13px | 400 | 1.23 | 0.012em | — | ftSystemMono | Header navigation and compact menu labels. |
| link | 16px | 500 | 1.5 | 0.009em | — | gerstnerProgramm | Inline actions and case-study links. |
| code | 13px | 400 | 1.23 | 0.012em | — | ftSystemMono | Onboarding prompts, API examples, and technical snippets. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 6, 7, 8, 9, 10, 12, 15, 16, 20, 24, 48, 80 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1296px.

The page uses a centered, wide content frame with a measured maximum width of 1296px and a comfortable density. The header and announcement are compact, while the hero gives its headline and demo substantial breathing room. Content alternates between two-column feature splits, multi-column card groups, and full-width media. Section rhythm is generous, with measured 80px section gaps, and alignment is mostly left-led; customer proof and logo areas use centered groupings. Fine dividers structure the long scroll without introducing strong background bands.

## Shape & elevation

- Radius: button `4px` · card `4px` · media `4px` · badge `4px` · nav `4px` · link `4px` · xs `1px` · sm `2px` · md `3px` · lg `4px` · xl `5px` · 2xl `6px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.07) 0px 83.282px 66.626px 0px, rgba(0, 0, 0, 0.05) 0px 34.793px 27.835px 0px, rgba(0, 0, 0, 0.04) 0px 18.602px 14.882px 0px, rgba(0, 0, 0, 0.04) 0px 10.428px 8.343px 0px, rgba(0, 0, 0,`
- Shadow `hairline` (card, other): `rgba(0, 0, 0, 0.03) 0px 1.5px 0.75px 0px, rgba(0, 0, 0, 0.02) 0px 3px 0.5px 0px, rgba(0, 0, 0, 0.01) 0px 5px 0.5px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.12) 0px 4px 4px 0px`
- Shadow `inset` (other): `rgba(31, 27, 12, 0.043) 0px 0px 18px 0px inset`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- Shadow `sm-3` (other): `rgba(0, 0, 0, 0.02) 0px 0px 0px 0.6px, rgba(0, 0, 0, 0.1) 0px 1.2px 1.2px 0px, rgba(0, 0, 0, 0.12) 0px 2.4px 3.6px -2.4px`
- Motion: standard transition `0.15s ease` on interactive elements.

Most sections sit flat on white, separated by whitespace and hairline gray borders. Cards use subtle fills, small corner radii, and occasional soft layered shadows rather than pronounced elevation. Product demos may appear inset into larger neutral panels, with the media itself providing depth and contrast.

## Imagery

Large product demos and interface mockups carry the visual storytelling. The hero uses a broad blue video-like scene with a floating white task interface; later sections show search, monitoring, extraction, and API output in framed UI panels. Most imagery is product illustration or screenshot-like media rather than lifestyle photography. Warm gray panels and occasional bright testimonial cards frame these visuals, while logos remain small and unobtrusive.

## Components

### Announcement and navigation

A slim announcement strip sits above a minimal header. Navigation uses compact monospace labels; the dark contact control and orange login action stand apart.

### Primary CTA

Orange action button with white uppercase monospace text and a measured 4px radius; secondary actions use charcoal.

### Hero product demo

A broad media panel anchors the opening, with a floating light task interface, compact mode tabs, and a dark state control.

### Feature split

Alternating two-column text-and-demo sections pair concise explanations and links with framed interface visuals.

### Product cards

Product and use-case cards combine soft neutral fills, small labels, short descriptions, and screenshot-like media.

### Trust and testimonial panels

Customer proof uses logo groupings and colored quote cards; enterprise trust follows with concise credential details.

### FAQ accordion

A compact question list uses dark text, clear row separation, and simple expand controls on a white background.

### Measured component styles

- **Primary button** (“LOG IN P”): background #fb631b · text #ffffff · border 1px solid · radius 4px · padding 9px 16px 7px 16px · 400 13px ftSystemMono · uppercase
- **Secondary button** (“Task”): background #ffffff · text #333333 · radius 4px · padding 10px · 400 16px gerstnerProgramm
- **Link** (“Case Study”): transparent background · text #181818 · radius 0px · padding 0px · 400 16px gerstnerProgramm
- **Input** (“Monitor new product releases or feature ”): transparent background · text #434343 · radius 0px · padding 0px · 400 16px gerstnerProgramm
- **Card** (“How Uber and Lyft won their first millio”): background #f5f4f1 · text #181818 · radius 4px · padding 0px · 400 16px gerstnerProgramm
- **Badge** (“Finance”): background #eeeeee · text #181818 · radius 4px · padding 6px 8px · 400 13px ftSystemMono
- **Navigation item** (“Parallel Products Solutions Developers R”): transparent background · text #181818 · radius 0px · padding 0px · 400 16px gerstnerProgramm

## Do

- Keep white as the default canvas.
- Use orange for primary actions, not broad decoration.
- Set technical labels in a compact monospace face.
- Alternate text-and-demo feature layouts down the page.
- Give product visuals room to read at a glance.
- Use neutral fills and fine rules to group content.

## Don't

- Do not turn every section into a colored band.
- Do not use large decorative gradients as the main brand treatment.
- Do not make secondary text compete with the headline.
- Do not apply heavy shadows to every card.
- Do not use orange for long passages of text.
- Do not crowd product screenshots with extra ornament.

## Agent prompt

Build a new page in Parallel’s visual language: start with a clean Gallery White (#ffffff) canvas, dark Ink Black (#181818) headings, and Soft Graphite (#858483) supporting copy. Use Signal Orange (#fb631b) sparingly for the main CTA, with Button Charcoal (#434343) for secondary actions. Set editorial content in a modern sans-serif close to Inter and reserve a compact monospace like IBM Plex Mono for navigation, uppercase controls, and technical labels. Create a wide, centered layout with generous section spacing, alternating text-and-product-demo splits, and restrained card grids. Frame interface visuals with Porcelain Gray (#f5f4f1) or Warm Stone (#ebe9e3), fine Rule Gray (#eeeeee) borders, and subtle shadows. Keep the overall page calm; let one vivid blue product-media moment carry the strongest color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and subheading above a broad product demo. | primary build CTA, copy prompt action | large headline, orange CTA, wide blue media |
| 2 | video | Full-width media panel with floating controls and task interface. | mode selection, run task | blue video scene, floating light card, dark toggle |
| 3 | logo-cloud | Centered heading above a multi-row customer logo grid. | customer proof, case-study links | centered title, logo grid, white canvas |
| 4 | feature-split | Two columns: demo visual on one side, explanatory content on the other. | industry examples, try search action | neutral demo panel, compact category chips |
| 5 | feature-split | Copy column beside a framed search-and-answer interface. | API playground link, answer preview | two-column split, warm neutral panel |
| 6 | feature-split | Workflow demo and supporting copy share a two-column row. | compose tasks, API playground link | stacked task cards, neutral media backing |
| 7 | feature-split | Copy and trust explanation paired with a structured output panel. | provenance explanation, auditability | code-like dark demo, light neutral frame |
| 8 | comparison | Cost comparison visual paired with concise explanatory text. | compare retrieval cost, onboard agent | bar comparison, dark task prompt |
| 9 | product-grid | Introductory copy followed by a three-column capability card grid. | browse product modules, open product details | image-led cards, short captions |
| 10 | feature-split | Large architecture visual beside explanatory product-family content. | explore product families, read capability details | diagram media, stacked text groups |
| 11 | stats | Wide benchmark area with intro and action controls above chart content. | view benchmarks, select benchmark | data chart, compact labels, orange emphasis |
| 12 | testimonials | Horizontal row of colored quote cards beneath an introductory heading. | carousel navigation, case-study links | colored quote cards, customer marks |
| 13 | other | Trust headline and copy paired with a row of security credentials. | review security claims, scan certifications | credential marks, compact trust labels |
| 14 | pricing | Pricing illustration and explanatory copy arranged side by side. | review pricing model, inspect tier controls | orange-toned visual, pricing readout card |
| 15 | cta | Introductory copy beside a spacious onboarding prompt panel. | open API playground, view docs | prompt panel, orange primary action |
| 16 | faq | Single-column FAQ list with questions and expandable answers. | expand answer, scan common questions | plain white rows, simple disclosure controls |
| 17 | cta | Closing headline and actions above a broad blue media panel. | start building, contact team | blue video backdrop, compact action links |

## Source CSS custom properties (selected)

```css
--color-stroke-primary: #d6d6d6;
--space-0: 0rem;
--space-2: .125rem;
--space-4: .25rem;
--space-8: .5rem;
--space-12: .75rem;
--space-16: 1rem;
--space-24: 1.5rem;
--space-32: 2rem;
--space-40: 2.5rem;
--space-48: 3rem;
--space-80: 5rem;
--space-120: 7.5rem;
--space-160: 10rem;
--space-h-bracket: 1.5rem;
```

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