parallel.ai — Design System

1. Visual Theme & Atmosphere

Parallel.ai projects the measured confidence of enterprise AI infrastructure: clean, precise, and never loud. The palette is predominantly white and light grey with controlled dark zones that frame benchmark data and technical content. Warmth is deliberately absent — this is a product that wants to be trusted over time, not immediately delighted. Custom tokenized spacing and a purpose-built typeface signal that every decision was made, not defaulted to.

2. Color Palette & Roles

Backgrounds

• rgb(255, 255, 255) — Primary surface; most cards and sections
• rgb(246, 246, 246) — Secondary surface; section alternation
• rgb(245, 244, 241) — Warm off-white; asset/callout zones

Structure & Chrome

• rgb(229, 229, 229) — Border and divider color throughout
• rgb(238, 238, 238) — Bar chart backgrounds / chart rails
• rgb(233, 240, 245) — Subtle blue-grey; data highlight bands

Content / Text

• rgb(24, 24, 24) — Near-black body text and primary foreground
• rgb(133, 132, 131) — Subdued body / meta text
• rgb(67, 67, 67) — Secondary dark surface (dark sections)
• rgba(34, 34, 34, 0.8) — Translucent dark overlay
• rgb(24, 24, 24) — Darkest band surface (footer, hero dark)

Accent / Interactive

• rgb(13, 110, 165) — Primary blue; CTAs, links, interactive text
• rgb(20, 55, 75) — Hover darkening of primary blue
• rgb(213, 110, 61) — Orange hover on nav items
• rgb(111, 162, 232) — Data visualization fill (light blue)
• rgb(143, 182, 204) — Data visualization fill (muted blue-grey)
• rgb(105, 190, 120) — Success / positive indicator (green badge)

3. Typography Rules

A single custom family — gerstnerProgramm — handles every text role on the page. Named after the Swiss graphic designer Karl Gerstner, it carries a precise, Swiss-rationalist character. Code and technical output switches to ftSystemMono.

No serif, no display fonts, no italic emphasis. Weight variation (400 vs 500) does all the hierarchy work. Letter-spacing is always normal — never tracked out.

4. Component Styling

Buttons: Transparent background; text colored #0D6EA5; hover shifts to #14374B. No fill, no border. Purely typographic CTAs.

Cards / Asset panels: border-radius: 4px or 8px; extremely subtle layered shadow (rgba(0,0,0,0.02–0.04)) on lightweight cards; stronger rgba(0,0,0,0.4) drop shadow reserved for elevated content.

Benchmark bars: Two-layer system — a light rail rgb(238,238,238) with a fill in rgb(111,162,232) or rgb(143,182,204). Purely data-driven, no decorative radius on bars.

Nav: Transparent background, #181818 text, orange hover rgb(213,110,61) on items.

5. Layout Principles

A rigid custom token system defines all spacing: --space-{N} tokens from 0.125rem to 5rem. The max container width is 1504px, with a dedicated machine panel constrained to 640px. The main element applies 48px horizontal padding on desktop.

Layout is columnar and grid-driven. No decorative whitespace — every gap is purposeful and derived from the token scale. Content stacks cleanly: hero, benchmark section, product section, footer.

6. Depth & Elevation

Three elevation levels:

1. Flat — most surfaces; no shadow
2. Raised card — rgba(0,0,0,0.02–0.04) 0px 1–13px triple-layered soft shadow
3. Lifted — rgba(0,0,0,0.4) 0px 16px 16px for modal-weight panels

Translucency is used sparingly: rgba(34,34,34,0.8) for a frosted dark overlay. No blur effects detected.

7. Do’s and Don’ts

Do:

• Use gerstnerProgramm at weight 500 for any heading; never bold (700+)
• Pair #0D6EA5 blue with white backgrounds for interactive elements
• Use the token spacing scale; don’t introduce ad-hoc pixel values
• Reserve the dark band (rgb(24,24,24)) for footer or high-contrast hero sections
• Use orange hover only on nav — it’s contextual, not a general accent

Don’t:

• Don’t use decorative border radius above 8px — this system is sharp-cornered by intent
• Don’t add shadows to text or nav items
• Don’t mix serif fonts — there are none here
• Don’t use saturated colors for backgrounds; accent blues are for interaction only
• Don’t reduce type size below 13px

8. Responsive Behavior

An unusually fine-grained breakpoint ladder: 320, 360, 380, 400, 440, 480, 520, 580, 768, 1023, 1024, 1080. The density of mobile breakpoints suggests precise layout reflows at nearly every 40–60px step below 600px — possibly driven by benchmark chart container resizing. The --machine-container-width: 640px token implies a dedicated panel that collapses at tablet widths.

9. Agent Prompt Guide

Build a product section in the style of parallel.ai. Use gerstnerProgramm (fallback: system sans-serif) at weight 500 for headings (36px hero, 26px section). Body text is rgb(24,24,24) at 16px/400. Background is pure white; section dividers use rgb(246,246,246). Interactive text links are rgb(13,110,165), darkening to rgb(20,55,75) on hover. Border radius is 4–8px max. Spacing follows an 8-point scale capped at 80px. No shadows on text; subtle layered box-shadow only on cards. No decorative color — accent blue is reserved for CTAs and data fills.

Generated by Sparkbites — extracted from live CSS analysis