# Parallel Design System

> A surgical, data-dense interface built on a stark greyscale canvas, punctuated by monospace technical data and sharp orange accents.

**Source:** https://parallel.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Parallel operates as a highly technical, developer-centric environment. The system relies on a strict monochrome foundation using pure black (`#181818`) text against off-white (`#f5f4f1`) and pure white (`#ffffff`) surfaces. Visual hierarchy is established through structural borders (`#e5e5e5`) rather than deep shadows, keeping the interface flat and schematic. Typography pairs a clean grotesque (`gerstnerProgramm`) with a prominent monospace (`ftSystemMono`) to signal machine-generated or technical content. The only significant chromatic voltage comes from a sharp brand orange (`#fb631b`), used surgically for primary actions and data visualization nodes.

## Signature DNA
1. **Monospace Data Layer** (Heavy reliance on `ftSystemMono` at 12px and 13px for captions, UI controls, and data tables, reinforcing the tool-like, AI-agent aesthetic across all pages).
2. **Hairline Geometry** (The interface is defined by 0px to 4px border radii and 0.5px inset shadows `rgb(229, 229, 229) 0px 0px 0px 0.5px`, creating a flat, blueprint-like structure without physical depth).
3. **Surgical Orange Accent** (`#fb631b` cuts through the greyscale canvas exclusively for primary buttons, active states, and key graph points, never used as a background wash).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-black` / `--color-grey-900` | `#181818` | Primary text, dark surface backgrounds | 513 | 1.0 | computed_style, css_variable |
| `--color-grey-600` | `#858483` | Secondary text, muted button text | 192 | 1.0 | computed_style, css_variable |
| `--color-sand-500` / `--color-off-white` | `#f5f4f1` | Primary app background, soft surfaces | 140 | 1.0 | computed_style, css_variable |
| `--color-grey-200` | `#eeeeee` | Secondary surfaces, button backgrounds | 68 | 1.0 | computed_style, css_variable |
| `--color-white` | `#ffffff` | Pure white cards, primary button text | 49 | 1.0 | computed_style, css_variable |
| `--color-blue-500` | `#e9f0f5` | Tinted surface backgrounds | 33 | 1.0 | computed_style, css_variable |
| `--color-opaque-300` | `#919191` | Tertiary text, disabled states | 25 | 1.0 | computed_style, css_variable |
| `--color-grey-300` | `#e5e5e5` | Universal border color, dividers | 22 | 1.0 | computed_style, css_variable |
| `--color-opaque-400` | `#505050` | Dark interactive surfaces | 5 | 1.0 | computed_style, css_variable |
| `--color-grey-800` | `#434343` | Dark text, dark button backgrounds | 3 | 1.0 | computed_style, css_variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-brand` / `--color-orange-100` | `#fb631b` | Primary CTA, active states, data nodes | 14 | 1.0 | computed_style, css_variable |
| `--color-orange-500` | `#fcddcf` | Soft accent surfaces | 10 | 1.0 | computed_style, css_variable |
| `--color-blue-100` (inferred) | `#0d6ea5` | Secondary accent text, links | 32 | 0.8 | computed_style |
| `--color-orange-200` | `#f4793f` | Hover states (decorative_only) | 1 | 1.0 | computed_style, css_variable |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `gerstnerProgramm` | 400, 500 | Headings, primary body copy | Inter / Roboto | Commercial |
| `ftSystemMono` | 400, 700 | Code, data tables, captions, UI labels | JetBrains Mono / Roboto Mono | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `heading-lg` | 36px | 39.96px | normal | 500 | Primary page headers | `h1.text-title-lg.text-balance` |
| `heading-sm` | 26px | 31.98px | normal | 500 | Section headers | `h2.text-title-sm` |
| `body-md` | 16px | 24px | 0.16px | 400 | Default reading text | `p.text-body-md.prose` |
| `body-md-strong` | 16px | 24px | 0.16px | 500 | Emphasized body text | `p.text-body-md.font-medium` |
| `body-mono-bold` | 16px | 24px | 0.16px | 700 | Technical emphasis | `p.font-mono.font-bold` |
| `body-sm` | 14px | 21px | normal | 400 | Secondary text | `span` |
| `body-sm-mono` | 14px | 21px | normal | 400 | UI controls, buttons | `button#base-ui-_R_llai5br9iv5udb_` |
| `caption-mono` | 13px | 15.99px | 0.16px | 400 | Data links, small labels | `a.font-mono.rounded-sm` |
| `caption-sm` | 12px | 16px | -0.24px | 400 | Distressed text, fine print | `span.text-distress` |
| `micro` | 11px | 8px | normal | 400 | Smallest UI indicators | `span.flex.items-center` |

### Principles
- **Monospace for function.** `ftSystemMono` is used extensively for interactive elements, data tables, and system outputs, not just code blocks.
- **Tight line heights on display.** Headings at 36px use a 39.96px line height (1.1x), keeping titles compact.
- **Positive tracking on body.** Body text at 16px and 13px uses 0.16px letter spacing to improve legibility in dense layouts.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `space-2` | 2px | 36 |
| `space-4` | 4px | 22 |
| `space-6` | 6px | 27 |
| `space-8` | 8px | 67 |
| `space-12` | 12px | 62 |
| `space-16` | 16px | 24 |
| `space-24` | 24px | 36 |
| `space-80` | 80px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Structural panels, full-bleed surfaces | 486 occurrences |
| `radius-sm` | 2px | Inner data cards, small inputs | 125 occurrences |
| `radius-md` | 4px | Standard cards, primary buttons | 98 occurrences |
| `radius-lg` | 8px | Elevated containers, large controls | 55 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-border` | `rgb(229, 229, 229) 0px 0px 0px 0.5px` | Default card outline, flat panels | 53 occurrences |
| `shadow-border-bottom` | `rgb(229, 229, 229) 0px 0.5px 0px 0px` | Header dividers, row separators | 3 occurrences |
| `shadow-float` | `rgba(0, 0, 0, 0.02) 0px 13px 8px 0px, rgba(0, 0, 0, 0.03) 0px 6px 6px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px` | Floating action menus, popovers | 2 occurrences |

## Components

### Tier 1: Foundational

#### Standard Card
**Role:** Primary container for features and pricing tiers.
**Pages observed:** https://parallel.ai, https://parallel.ai/pricing
**Spec:** Background `#ffffff` / Text `#181818` / Border `#e5e5e5` (1px) / Radius 4px / Padding 8px 16px / Typography 13px / Shadow none
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

#### Soft Card
**Role:** Secondary container for nested data or subtle grouping.
**Pages observed:** https://parallel.ai
**Spec:** Background `#f6f6f6` / Text `#181818` / Border 0px / Radius 2px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

#### Outlined Surface
**Role:** Structural background panels for layout sections.
**Pages observed:** https://parallel.ai
**Spec:** Background `#f5f4f1` / Text `#858483` / Border 0px / Radius 0px / Padding 0px 12px / Typography 14px / Shadow `rgb(229, 229, 229) 0px 0px 0px 0.5px`
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

### Tier 2: Patterns

#### Elevated Container
**Role:** Highlighting specific feature blocks or interactive playgrounds.
**Pages observed:** https://parallel.ai
**Spec:** Background `#eeeeee` / Text `#181818` / Border 0px / Radius 8px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

#### Tinted Data Card
**Role:** Grouping specific technical outputs or code snippets.
**Pages observed:** https://parallel.ai
**Spec:** Background `#e9f0f5` / Text `#181818` / Border 0px / Radius 2px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

### Tier 3: Surface-specific

#### Rounded Control Button
**Role:** Small interactive toggles within data tables or inputs.
**Pages observed:** https://parallel.ai
**Spec:** Background transparent / Text `#858483` / Border 0px / Radius 4px / Padding 0px 8px 2px / Typography 14px / Shadow none
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px (inferred from standard desktop layouts) |
| Section spacing | 80px (`space-80`) |
| Grid | 12-column standard |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Multi-column grids collapse to single column. Horizontal data tables gain overflow-x scrolling. |
| Desktop | 1440px | Full 12-column grid utilized. Complex data tables display fully inline. |

## Imagery & decoration
Parallel avoids lifestyle photography entirely. The brand relies on abstract data visualizations, schematic dot grids, and terminal-like UI mockups. The aesthetic is strictly utilitarian, using monospace typography and sharp geometric lines to convey precision.

## Do's
- Use `--color-grey-300` (`#e5e5e5`) for all structural borders and dividers.
- Apply `ftSystemMono` for any data points, code snippets, or small UI controls.
- Keep border radii tight (0px, 2px, or 4px) to maintain the technical blueprint aesthetic.
- Use `--color-brand` (`#fb631b`) sparingly, only for primary actions or critical data nodes.
- Rely on 0.5px inset shadows (`rgb(229, 229, 229) 0px 0px 0px 0.5px`) instead of drop shadows for panel definition.

## Don'ts
- **Wrong:** Using `#fb631b` as a large background fill for a banner.
  **Right:** Using `#f5f4f1` for the background and `#fb631b` only for the CTA button.
  **Reason:** Orange is an accent color meant to cut through the monochrome canvas, not overwhelm it.
- **Wrong:** Applying a 16px border radius to a pricing card.
  **Right:** Using a 4px border radius for standard cards.
  **Reason:** Large, soft radii break the sharp, technical aesthetic of the brand.
- **Wrong:** Using a sub-brand color or generic blue as the primary brand accent.
  **Right:** Using `--color-brand` (`#fb631b`) as the sole primary chromatic accent.
  **Reason:** Parallel is a monochrome system anchored by a specific orange; introducing other saturated primary colors dilutes the identity.
- **Wrong:** Using heavy drop shadows to create floating layers.
  **Right:** Using hairline borders (`#e5e5e5`) or 0.5px inset shadows to define boundaries.
  **Reason:** The interface is designed to feel like a flat, schematic dashboard.

## Similar brands
- Linear
- Vercel
- Stripe (specifically their API documentation)
- Raycast

## Quick start

**CSS Variables:**
```css
:root {
  --color-brand: #fb631b;
  --color-black: #181818;
  --color-grey-900: #181818;
  --color-grey-800: #434343;
  --color-grey-600: #858483;
  --color-grey-300: #e5e5e5;
  --color-grey-200: #eeeeee;
  --color-sand-500: #f5f4f1;
  --color-white: #ffffff;
  --color-blue-500: #e9f0f5;
  
  --font-sans: 'gerstnerProgramm', sans-serif;
  --font-mono: 'ftSystemMono', monospace;
  
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}
```

## Agent prompt examples
1. "Create a pricing table using `--color-white` for the card backgrounds, `--color-grey-300` for the 1px borders, and `--color-brand` for the primary 'Get Started' button. Use `ftSystemMono` at 13px for the feature list items."
2. "Build a data monitoring dashboard widget. The container should have a `--color-sand-500` background with a 0px radius and a 0.5px inset shadow using `rgb(229, 229, 229)`. The data values inside should use `ftSystemMono` weight 700."
3. "Design a technical feature section. The heading should be `gerstnerProgramm` at 36px, weight 500. The body text should be `--color-grey-600` at 16px. Include a small code snippet block with a `--color-grey-200` background and 2px border radius."

## Known gaps
Hover, focus, and active states for interactive components were not fully captured in the source data. The specific usage rules for the secondary blue accent (`#0d6ea5`) are inferred from text occurrences rather than explicit token naming in the primary palette.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://parallel.ai | Desktop 1440px, Mobile 390px | 2026-06-06T05:00:04.115Z |
| Pricing | https://parallel.ai/pricing | Desktop 1440px | 2026-06-06T05:00:04.115Z |
| About | https://parallel.ai/about | Desktop 1440px | 2026-06-06T05:00:04.115Z |