# Parallel — Design System
> A career matching platform focused on alignment between personal identity and professional roles.
- **Canonical:** https://uiuxskills.com/library/parallel
- **Source:** https://www.useparallel.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 75%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:02.706Z

---

---
version: alpha
name: Parallel
description: A career matching platform focused on alignment between personal identity and professional roles.
tone: Professional, direct, and aspirational.
color-scheme: light
colors:
  primary: "#FF5733"
  secondary: "#C70039"
  surface: "#050505"
  on-surface: "#FFFFFF"
  surface-dim: "#1A1A1A"
  accent: "#EAFA35"
  error: "#E60000"
  focus-ring: "#FF5733"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 69px
    fontWeight: 600
    lineHeight: "1.1"
    letterSpacing: "-1.38px"
  headline-md:
    fontFamily: sans-serif
    fontSize: 48px
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: "-0.8px"
  body-md:
    fontFamily: sans-serif
    fontSize: 23px
    fontWeight: 400
    lineHeight: "1.4"
  body-sm:
    fontFamily: sans-serif
    fontSize: 16px
    fontWeight: 400
  label-md:
    fontFamily: sans-serif
    fontSize: 14px
    fontWeight: 600
  label-sm:
    fontFamily: sans-serif
    fontSize: 13.7px
    fontWeight: 500
  display-md:
    fontFamily: sans-serif
    fontSize: 32px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-surface}"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    width: 100%
  input-field-focus:
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface-dim}"
    rounded: "{rounded.md}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  link:
    textColor: "{colors.accent}"
  link-hover:
    textColor: "{colors.on-surface}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    typography: "{typography.label-sm}"
    width: fit-content
  divider:
    height: 1px
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-surface}"
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: ease-out
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.1)
  md: 0 2px 4px rgba(0,0,0,0.1)
  lg: 0 4px 8px rgba(0,0,0,0.1)
---

## Overview

Parallel utilizes a sophisticated, high-contrast aesthetic that blends professional clarity with a modern, editorial feel. The brand relies on deep, dark backgrounds paired with vibrant, high-energy accents to create a sense of focus and momentum for job seekers.

## Colors

The color strategy is built on a high-contrast foundation, using deep darks to ground the interface while reserving vibrant, saturated hues for interactive elements and highlights.

*   Primary (#FF5733): The core brand color, used for primary CTAs and focus states.
*   Secondary (#C70039): Used for secondary actions and specific status indicators.
*   Surface (#050505): The primary dark background for hero sections and main content areas.
*   On-Surface (#FFFFFF): The primary text color, ensuring maximum readability against dark backgrounds.
*   Surface-dim (inferred) (#1A1A1A): A secondary background variant for cards and content containers.
*   Accent (#EAFA35): A high-visibility color used for links and important callouts.
*   Error (#E60000): Semantic color for errors and destructive actions.
*   Focus-ring (inferred) (#FF5733): The indicator color for keyboard navigation and active input states.

## Typography

The typography uses a clean, sans-serif family to maintain a direct and professional tone across all interface levels.

*   Display-lg: Used exclusively for hero headlines to maximize impact.
*   Headline-md: Used for section headers to maintain clear information hierarchy.
*   Body-md: Primary text for long-form content.
*   Body-sm: Secondary text, form labels, and smaller UI elements.
*   Label-md: Standard button text and primary UI controls.
*   Label-sm: Small UI labels and badge text.
*   Display-md (inferred): Secondary display level for sub-headlines.

## Layout

The layout follows a centered container pattern with a strict max-width constraint, utilizing a 4px grid system to maintain consistent vertical and horizontal rhythm. The section order typically follows: nav, hero, job-feed, features, and footer. The hero pattern features a centered headline and subhead with a prominent search input and secondary action. On mobile, the design is responsive, collapsing navigation into a drawer and shifting multi-column grids into single-column stacks.

## Elevation & Depth

Depth is used sparingly to create subtle separation between content layers. The elevation tokens represent a light, single-layer shadow approach.

*   elevation.sm: Subtle lift for small UI elements or cards.
*   elevation.md: Standard lift for interactive cards and popovers.
*   elevation.lg: Pronounced lift for modals or drawer overlays.

## Shapes

The brand employs a dual-radius philosophy to distinguish between functional and content-based elements. Interactive components like buttons and inputs utilize `{rounded.full}` to create a pill-shaped, high-action aesthetic. 

Content containers and cards utilize `{rounded.md}` or `{rounded.lg}` to provide a softer, more modern feel that separates information from the background without feeling overly aggressive.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and transparent backgrounds for secondary actions. Always apply `{rounded.full}` to ensure a pill-shaped appearance, and use `{typography.label-md}` for the text.

### Input Field
Input fields should be transparent with `{colors.on-surface}` text. When focused, apply the `{input-field-focus}` border color to provide clear feedback.

### Card
Cards use `{colors.surface-dim}` for standard containers or `{colors.surface}` for elevated content. Use `{rounded.md}` for standard cards and `{rounded.lg}` for elevated versions to maintain visual hierarchy.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary CTAs to drive conversion. | Do not use `{colors.secondary}` for primary buttons. |
| Apply `{typography.display-lg}` for hero headlines only. | Do not use `{typography.display-lg}` for body copy. |
| Use `{colors.accent}` for high-priority links. | Never use `{colors.on-surface}` for secondary text if contrast is too high. |
| Maintain `{spacing.md}` between form elements. | Avoid using `{typography.body-md}` for navigation labels. |
| Use `{rounded.full}` for all primary action buttons. | Do not mix `{rounded.sm}` and `{rounded.full}` on the same component. |
| Apply `{colors.surface-dim}` for secondary content containers. | Avoid excessive use of `{elevation.lg}` to prevent visual clutter. |
| Use `{typography.label-md}` for button labels. | Do not use `{colors.error}` for non-destructive actions. |
| Apply `{input-field-focus}` when the user interacts with an input. | Do not use thin borders on cards; rely on `{colors.surface-dim}`. |

## Content Style

CTA labels should use imperative, action-oriented verbs. Keep them short and direct, such as "Start Matching" or "Join Now," to maintain the aspirational tone of the platform.

Headlines are benefit-led and declarative. They should avoid jargon and focus on the value proposition of alignment between identity and professional role.

Copy density should be kept low. Use concise, scannable paragraphs and bullet points to ensure the user can digest the platform's value proposition quickly without feeling overwhelmed.

## Imagery & Icons

The imagery style is mixed, combining high-quality photography with clean, minimalist iconography. Icons are stroke-based, simple, and often paired with subtle color accents to draw the eye. Avoid complex illustrations; prioritize clarity and directness in all visual assets to match the professional brand tone.