---
generator: clinical-terminal-brand-kit
company: "Crossroads Health"
domain: "crossroadshealth.com"
colors:
  primary: "#FDC016"
  onPrimary: "#000000"
  dark: "#626A6B"
  accent: "#FEC016"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#111111"
  accent: "#A16800"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "19px"
  button: "19px"
---

# Design System — Crossroads Health

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

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

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

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

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

## Voice
- Tone: professional. Energy: low. Written for patients and healthcare professionals.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Neutral** (`--neutral--N`): 100 `#FFFFFF` · 200 `#F9F9F9` · 300 `#EDEDED` · 400 `#D8D8D8` · 800 `#0B0B0B`
- **General Shadow** (`--general--shadow-N`): 1 `#030303` · 2 `#030303` · 3 `#030303` · 4 `#030303` · 5 `#030303` · 6 `#030303`
- **System Blue** (`--system--blue-N`): 100 `#EAF4FF` · 200 `#8FC3FF` · 300 `#1D88FE` · 400 `#086CD9`
- **System Green** (`--system--green-N`): 100 `#DEF2E6` · 200 `#7FDCA4` · 300 `#05C168`
- **System Red** (`--system--red-N`): 100 `#FFEFF0` · 200 `#FFBEC2` · 400 `#DC2B2B`
- **System Orange** (`--system--orange-N`): 100 `#FFF3E4` · 200 `#FFD19B` · 300 `#FF9E2C` · 400 `#D5691B`
- **Button Shadow Color** (`--button-shadow--color-N`): 1 `#0E6EFF` · 2 `#0E6EFF` · 3 `#0E6EFF`
- **Button Shadow White** (`--button-shadow--white-N`): 1 `#030303` · 2 `#030303` · 3 `#030303`

### Other named colors

- `--blue`: `#2C2E40`
- `--dark-blue`: `#23252E`
- `--grey`: `#626A6B`
- `--green`: `#3E9F5D`
- `--untitled-ui-gray600`: `#475467`
- `--untitled-ui-gray700`: `#344054`
- `--untitled-ui-primary600`: `#7F56D9`
- `--untitled-ui-white`: `#FFFFFF`
- `--untitled-ui-primary700`: `#6941C6`
- `--untitled-ui-primary100`: `#F4EBFF`
- `--untitled-ui-gray300`: `#D0D5DD`
- `--untitled-ui-gray900`: `#101828`
- `--untitled-ui-primary300`: `#D6BBFB`
- `--untitled-ui-gray500`: `#667085`
- `--untitled-ui-gray800`: `#1D2939`
- `--untitled-ui-gray100`: `#F2F4F7`
- `--untitled-ui-primary800`: `#53389E`
- `--untitled-ui-gray200`: `#EAECF0`
- `--untitled-ui-primary50`: `#F9F5FF`
- `--untitled-ui-indigo500`: `#6172F3`
- `--untitled-ui-pink500`: `#EE46BC`
- `--untitled-ui-blue500`: `#2E90FA`
- `--untitled-ui-indigo700`: `#3538CD`
- `--untitled-ui-pink700`: `#C11574`
- `--untitled-ui-blue700`: `#175CD3`
- `--untitled-ui-gray400`: `#98A2B3`
- `--untitled-ui-warning500`: `#F79009`
- `--untitled-ui-orange50`: `#FEF6EE`
- `--untitled-ui-orange700`: `#B93815`
- `--untitled-ui-primary500`: `#9E77ED`
- `--accent--primary-1`: `#FEC016`
- `--secondary--color-1`: `#0051CC`
- `--secondary--color-2`: `#E9F2FF`
- `--system--300`: `#FF5A65`
- `--untitled-ui-gray50-501`: `#F9FAFB`
- `--untitled-ui-indigo50-501`: `#EEF4FF`
- `--untitled-ui-pink50-501`: `#FDF2FA`
- `--untitled-ui-blue50-501`: `#EFF8FF`

### Typefaces

- Century Gothic

### Type scale (most-used sizes)

`38px` · `32px` · `30px` · `28px` · `24px` · `22px` · `20px` · `18px` · `16px` · `1rem` · `14px` · `.75rem`

### Letter-spacing

`.1em` (3) · `2px` (3) · `-.02em` (3) · `.08em` (1) · `-.04em` (1) · `.15em` (1)

### Corner radii (most-used)

`20px` · `3px` · `50%` · `24px` · `16px` · `.5rem` · `40px` · `8px` · `18px` · `48px`

### Shadows

- `0 1px 2px #1018280d`
- `4px 4px 14px #080f340a`
- `0 3px 12px #4a3aff1f`
- `0 4px 10px #4a3aff26`
- `0 0 3px 1px #3898ec`
- `0 2px 6px 2px #13124212`

### Gradients

- `linear-gradient(#fffc, #fffc)`
- `linear-gradient(to right, #4a3aff, #6d3aff)`
- `linear-gradient(#0009, #0009)`

### Breakpoints

479px · 767px · 768px · 991px · 1440px · 1920px