---
generator: clinical-terminal-brand-kit
company: "Parallon"
domain: "parallon.com"
colors:
  primary: "#E05929"
  onPrimary: "#000000"
  dark: "#03173E"
  accent: "#0085CA"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#03173E"
  accent: "#CE4913"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "5px"
  button: "5px"
---

# Design System — Parallon

> Read from Parallon's public website (parallon.com) by Clinical Terminal. Not reviewed by Parallon.
> Use it as inspiration: borrow the ideas, not Parallon's name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from Parallon's site background #FFFFFF. Pages and panels sit on it.
- Main text: #03173E (17.56:1 on the ground).
- Secondary text is #03173E at 88% / 76% / 60%; hairlines and plate borders #03173E at 16%.

## Color
- **Accent on the ground: #CE4913** (4.58:1), adjusted from Parallon's primary #E05929 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #E05929** for filled shapes (buttons, chips, bars), with #000000 text on it (5.63:1).
- Secondary accent #0085CA: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Parallon's site uses Mark / Mark; these are the closest free look-alikes.

## Shape
- Cards and panels: 5px corners. Buttons and chips: 5px.

## Voice
- Tone: professional. Energy: medium. Written for enterprises.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Typefaces

- Mark
- monospace !important

### Type scale (most-used sizes)

`3rem` · `2.5rem` · `2rem` · `28px` · `1.5rem` · `21px` · `1.25rem` · `1rem` · `14px` · `0.875rem` · `0.75rem` · `0.65625rem`

### Letter-spacing

`1px` (1) · `0.1em` (1)

### Corner radii (most-used)

`5px` · `9999px` · `50%` · `2px` · `0.25rem` · `100%` · `4px`

### Shadows

- `0 0 0 0.125em rgba(224, 89, 41, 0.25)`
- `0 0 0 0.125em rgba(0, 133, 202, 0.25)`
- `0 0.5em 1em -0.125em rgba(25, 25, 25, 0.1), 0 0px 0 1px rgba(25, 25, 25, 0.02)`
- `0 0 0 0.125em rgba(255, 255, 255, 0.25)`
- `0 0 0 0.125em rgba(25, 25, 25, 0.25)`
- `0 0 0 0.125em rgba(245, 245, 245, 0.25)`

### Gradients

- `linear-gradient(141deg, rgb(197.6224489796, 33.7097133936, 16.3775510204) 0%, #E05929 71%, rgb(232.7140306122, 132.8234164157, 57.7859693878) 100%)`
- `linear-gradient(141deg, rgb(0, 124.5874587459, 151) 0%, #0085CA 71%, rgb(0, 111.8729372937, 227.5) 100%)`
- `linear-gradient(to right, #E05929 30%, hsl(0, 0%, 93%) 30%)`
- `linear-gradient(to right, #0085CA 30%, hsl(0, 0%, 93%) 30%)`
- `linear-gradient(to right, #58595A 30%, hsl(0, 0%, 93%) 30%)`
- `linear-gradient(141deg, rgb(229.5, 229.5, 229.5) 0%, #FFFFFF 71%, white 100%)`

### Breakpoints

600px · 768px · 769px · 1023px · 1024px · 1215px · 1216px · 1407px · 1408px