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

# Parallel · Design System

> A human-centered marketplace with an editorial edge.

**Theme:** light · **Industry:** other · **Source:** https://www.useparallel.com/ · **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 cinematic, people-focused hero with oversized editorial typography and a restrained warm-neutral palette. The page moves from a focused job-search entry point into explanatory content, a mission statement, a closing prompt, and a spacious footer.

## North star

Let one cinematic human image and one expressive serif headline lead, while keeping the surrounding interface warm, quiet, and spacious.

## Overview

The visual strategy balances an immersive photographic opening with quiet, warm-neutral content sections. The hero image fills a large rounded frame and is darkened enough for white navigation and a large centered serif headline to remain legible; a white search field and translucent job-type pills sit directly over the image. Below, broad pale bands and generous separation let each message feel deliberate rather than crowded. Display headlines use Advercase Demo, with expressive contrast and tight tracking, while body copy, navigation, and controls use a restrained sans serif. Off-white surfaces and muted gray text keep the system calm; orange appears as a small, high-energy search cue rather than a pervasive brand fill. The lower page uses large imagery and a notably oversized wordmark as visual punctuation. Keep cards and controls softly rounded, with borders and shadows subordinate to typography and photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Porcelain Veil | `#fbfaf9` | `--color-porcelain-veil` | surface | Primary pale surface for cards, search field, selected navigation treatment, and light content areas. |
| Warm Canvas | `#f4f3f1` | `--color-warm-canvas` | surface | Main warm-gray page canvas, visible across the brand and lower content sections. |
| Soft Graphite | `#707070` | `--color-soft-graphite` | neutral | Muted body and footer text, supporting hierarchy without competing with display headlines. |
| Quiet Ink | `#484847` | `--color-quiet-ink` | neutral | Primary subdued text and navigation tone on light surfaces. |
| Dusty Stone | `#999694` | `--color-dusty-stone` | neutral | Low-emphasis text and tonal transitions; not a dominant interface accent. |
| Mist Gray | `#afafad` | `--color-mist-gray` | neutral | Subtle section and gradient tonality; keep it secondary to the photographic hero. |
| Deep Charcoal | `#222222` | `--color-deep-charcoal` | semantic | Occasional dark text and button treatment in measured component styles. |
| Near Black | `#050505` | `--color-near-black` | semantic | Sparse strong text detected in page elements; not the primary light-page text color. |
| Ember Orange | `#ef6e07` | `--color-ember-orange` | accent | Small search-action accent detected in button styling; use sparingly as an interactive cue. |
| Apricot Glow | `#ffb77d` | `--color-apricot-glow` | accent | Supporting warm button accent detected in component data, not a broad section color. |
| Slate Haze | `#8d8d8c` | `--color-slate-haze` | neutral | Muted section gradient tone; avoid treating it as a defining brand color. |
| Pale Divider | `#e3e2e0` | `--color-pale-divider` | semantic | Very light footer border or hairline tone for quiet separation. |

### Semantic aliases

`--color-canvas` → `#f4f3f1` (Warm Canvas) · `--color-surface` → `#fbfaf9` (Porcelain Veil) · `--color-text` → `#484847` (Quiet Ink) · `--color-text-muted` → `#707070` (Soft Graphite) · `--color-text-subtle` → `#fbfaf9` (Porcelain Veil) · `--color-border` → `#fbfaf9` (Porcelain Veil)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#484847` | `#f4f3f1` | 8.26:1 | AAA |
| `#484847` | `#fbfaf9` | 8.78:1 | AAA |
| `#707070` | `#f4f3f1` | 4.47:1 | AA-large |
| `#707070` | `#fbfaf9` | 4.75:1 | AA |
| `#fbfaf9` | `#f4f3f1` | 1.06:1 | fail |

### Gradients

- `linear-gradient(rgba(15, 15, 15, 0.4), rgba(15, 15, 15, 0.3), rgba(15, 15, 15, 0.45))`
- `linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 55%)`
- `linear-gradient(rgba(255, 255, 255, 0.77), rgba(255, 255, 255, 0.88))`
- `radial-gradient(circle at 20px 20px, rgb(85, 85, 85) 0%, rgb(22, 22, 22) 70%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 400, 500, 600 | Body copy, navigation, captions, and controls | Inter |
| __Inter_8a0ba0 | `--font-inter-8a0ba0` | webfont | 500, 600 | Selected interface and button text | Inter |
| Advercase Demo | `--font-display` | webfont | 400, 500 | Display headlines and prominent section titles | DM Serif Display |

- **ui-sans-serif:** Measured weights 400–600; use clean sentence case and restrained, neutral tracking.
- **__Inter_8a0ba0:** Webfont subset; measured at medium and semibold weights, with compact interface styling.
- **Advercase Demo:** Expressive serif at regular to medium weights; oversized headings use tight negative tracking and natural casing.

### Type scale — Augmented Fourth (ratio ≈ 1.428, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 101px | 400 | 1.14 | -0.03em | — | Advercase Demo | Oversized brand or campaign headline treatment. |
| h1 | 64px | 500 | 1.05 | -0.02em | — | Advercase Demo | Hero headline, centered over the photographic opening. |
| h2 | 60px | 400 | 1.2 | -0.016em | — | Advercase Demo | Major section and mission statement headings. |
| h3 | 40px | 500 | 1.2 | -0.02em | — | Advercase Demo | Secondary feature or content headings. |
| h4 | 23px | 500 | 1.2 | -0.02em | — | ui-sans-serif | Compact feature titles and card headings. |
| body | 17px | 400 | 1.4 | 0 | — | ui-sans-serif | Explanatory copy and supporting paragraphs. |
| caption | 14px | 500 | 1.5 | 0 | — | ui-sans-serif | Small supporting labels and job-search filters. |
| button | 14px | 500 | 1 | 0 | — | ui-sans-serif | Search and conversion control labels. |
| nav | 16px | 500 | 1.5 | 0 | — | ui-sans-serif | Top-level navigation links and account actions. |

## Spacing & layout

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

The hero is a near full-bleed photographic panel inset from the viewport edge, with navigation across the top and the search interaction centered beneath the headline. Subsequent sections alternate broad light bands with a three-column explanatory area and single-column statement or CTA blocks. The measured data gives no fixed maximum content width, so preserve generous side margins and let key text breathe. Section spacing is expansive; content density stays low, and the footer spreads navigation across columns before an oversized wordmark.

## Shape & elevation

- Radius: button `9999px` · card `20px` · nav `12px` · xs `10px` · sm `12px` · md `16px` · lg `20px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.18) 0px 12px 36px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 130, 16) 0px 0px 8px 0px`
- Shadow `lg-2` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.07) 0px 6px 27px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is largely flat: pale surfaces, tonal section bands, and subtle separators do most of the work. The hero image provides the strongest depth through its dark overlay and photographic contrast. Search and navigation surfaces are softly rounded and pale; use shadows only as restrained separation, not as a repeated card treatment.

## Imagery

Use candid, editorial workplace photography as the primary visual anchor. The opening image shows a person working at a laptop, cropped wide and darkened with an overlay so white type and controls read clearly. Supporting sections use image-led content rather than decorative illustration. Keep photography warm, human, and natural; avoid synthetic 3D or busy stock-image collages.

## Components

### Hero navigation

Overlay the wordmark and Explore link at left, a Talent/Employers switch near center, and Sign in/Sign up at right; use light text over the dark image.

### Job search field

Place a wide, pale rounded search field below the hero headline, with a short role query and compact orange arrow action.

### Job-type filters

Show Full time, Contract, AI training, and Remote as small translucent outlined pills beneath the search field.

### Feature cards

Present the How Parallel Works content in three columns with image-led cards, softly rounded corners, and restrained borders.

### Editorial CTA

Use a single-column statement and short supporting copy with a compact Read More or Get Started action.

### Footer

Set grouped talent, employer, company, and legal links against the warm canvas, with the brand mark enlarged as a closing visual.

### Measured component styles

- **Primary button** (“Full time”): background #f5f4f2 · text #ffffff · border 1px solid #f7f7f5 · radius 9999px · padding 10px 16px · 500 14px ui-sans-serif
- **Secondary button** (“Sign up”): background #fbfbfa · text #ffffff · radius 10px · padding 0px 18px · 600 16px ui-sans-serif
- **Input**: transparent background · text #232323 · radius 0px · padding 0px · 500 17px __Inter_8a0ba0
- **Card** (“Discover your fit Discover your strength”): transparent background · text #000000 · border 2px solid #fcfcfc · radius 20px · padding 0px 0px 16px 0px · 400 14px ui-sans-serif
- **Navigation item** (“Explore Talent Employers Sign in Sign up”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px ui-sans-serif

## Do

- Lead with a warm, human workplace photograph.
- Use a large, expressive serif for the main headline.
- Keep the search action visually clear and compact.
- Use warm off-white surfaces for the content sections.
- Give major sections generous breathing room.
- Reserve orange for small interactive emphasis.

## Don't

- Do not make the page feel like a dense job-board dashboard.
- Do not replace the editorial serif headlines with generic heavy sans serif.
- Do not scatter bright accent colors across the interface.
- Do not put the hero headline on an untreated busy photograph.
- Do not fill every section with bordered cards or prominent shadows.
- Do not invent a fixed content width absent from the measurements.

## Agent prompt

Build a new Parallel-style page with a calm, human-centered editorial feel. Use Warm Canvas (#f4f3f1) and Porcelain Veil (#fbfaf9) for quiet surfaces, Quiet Ink (#484847) and Soft Graphite (#707070) for text, and reserve Ember Orange (#ef6e07) for small action emphasis. Lead with a wide, darkened workplace photograph, overlay a simple navigation row, and center an expressive serif headline above a pale rounded search control and translucent filter pills. Use Advercase-like serif display typography and clean sans-serif interface text. Keep subsequent sections spacious, with image-led features, single-column statements, and a restrained footer ending in a large wordmark. Favor soft rounding and subtle separation over heavy shadows. Avoid dense dashboards, saturated decoration, and unnecessary card chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed inset photo with overlay navigation and centered headline, search, and filter controls. | Job search entry, Talent/employer switch, Account links | Dark photo overlay, Serif display heading, Pale rounded search field, Translucent filter pills |
| 2 | how-it-works | Centered section heading followed by three image-led feature columns on a pale band. | Explain the matching process, Optional assessment, Browse jobs | Three-column feature layout, Image-led cards, Soft neutral background |
| 3 | feature-split | Single-column editorial statement on a warm neutral section with full-bleed supporting media. | Mission-led storytelling, Read More link | Large serif heading, Spacious text block, Photographic support |
| 4 | cta | Single-column closing prompt on the warm neutral canvas. | Conversion prompt, Get Started action | Large editorial heading, Minimal CTA treatment |
| 5 | footer | Three-column footer link groups, legal details, and social links, finished with a very large wordmark. | Grouped site navigation, Legal links, Social destinations | Warm neutral background, Low-contrast link groups, Oversized wordmark |

## Source CSS custom properties (selected)

```css
--app-background: #fbfaf9;
--color-black: #0f0f0f;
--color-yellow: #eafa35;
--color-green: #1fba4a;
--color-purple: #daccff;
--color-pink: #f54cb2;
--color-white: #fff;
--color-off-white: #fffefb;
--color-orange: #fe8a11;
--color-red: #f22;
--color-red-200: #ff3e3e;
--color-red-400: #e95656;
--color-gray: hsla(0,0%,80%,.09);
--color-light-gray: #fafafa;
--color-gradient-5: radial-gradient(48.68% 64.03% at 50% 45.59%,#eafa35 0%,#fffefb 100%);
--color-gradient-4: radial-gradient(116.91% 70.35% at 46.56% -7.36%,#eafa35 0%,hsla(0,0%,100%,0) 70.72%,hsla(0,0%,100%,0) 100%),#fffefb;
--color-gradient-6: radial-gradient(48.68% 64.03% at 50% 45.59%,#daccff 0%,#fffefb 100%);
--color-gradient-10: radial-gradient(48.68% 64.03% at 50% 45.59%,#eafa35 0%,#fffefb 100%);
--color-gradient-7: radial-gradient(45.45% 389.52% at 50% 110.67%,#e3c0fe 0%,#fffefb 100%);
--color-employee-gradient: radial-gradient(116.91% 70.35% at 46.56% -7.36%,#eafa35 0%,hsla(0,0%,100%,0) 55.72%,hsla(0,0%,100%,0) 100%),#fffefb;
--color-hiringManager-gradient: radial-gradient(116.91% 70.35% at 46.56% -7.36%,#daccff 0%,hsla(0,0%,100%,0) 55.72%,hsla(0,0%,100%,0) 100%),#fffefb;
--border-primary: 2px solid #0f0f0f;
--shadow-primary: 8px 8px 0px #0f0f0f;
--shadow-secondary: 6px 6px 0px #0f0f0f;
--shadow-tertiary: 2px 6px 10px rgba(0,0,0,.11);
--font-family-primary: "Work Sans",sans-serif;
--font-family-secondary: "Termina",sans-serif;
--font-family-tertiary: "Cousine",sans-serif;
--prll-scrollbar-thumb-border-size: 2px;
--prll-scrollbar-thumb-color: #d3d3d3;
--card-translate-primary: translate(-0.8rem,-0.8rem);
--card-translate-secondary: translate(-0.6rem,-0.6rem);
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-ring-color: rgba(59,130,246,.5);
--font-advercase: "Advercase Demo";
--input-focus-border-color: Highlight;
```

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