Clinical Terminal
AboutSign in

Cross Country Nurses design system

crosscountry.com

Read from Cross Country Nurses's public website by Clinical Terminal. Not reviewed by Cross Country Nurses. Copy it and paste it into Claude as inspiration.

Corrections or removal: agent@clinicalterminal.com

Cross Country Nurses logo

Palette

Type

Headings
Nunito Sans

Cross Country Nurses at a glance

Body
Nunito Sans

Clear, readable paragraphs for clinicians, buyers and patients alike.

Shape & depth

Cards and panels: 14px corners · buttons and chips: 14px.

Corner radii

Shadows

Gradients

Breakpoints: 320px · 374px · 440px · 450px · 480px · 571px · 575px · 576px · 640px · 767px · 768px · 769px

Voice

Tone: professional. Energy: high. Written for job seekers.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "Cross Country Nurses"
domain: "crosscountry.com"
colors:
  primary: "#003366"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#D7282F"
  background: "#F0F1F4"
ground:
  mode: light
  hex: "#F0F1F4"
  ink: "#000000"
  accent: "#003366"
fonts:
  heading: "Nunito Sans"
  body: "Nunito Sans"
radius:
  card: "14px"
  button: "14px"
---

# Design System — Cross Country Nurses

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

## Ground
- **Light ground** (#F0F1F4), from Cross Country Nurses's site background #F0F1F4. Pages and panels sit on it.
- Main text: #000000 (18.59:1 on the ground).
- Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%.

## Color
- **Accent on the ground: #003366** (11.16:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #003366** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (12.61:1).
- Secondary accent #D7282F: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Nunito Sans**. Body: **Nunito Sans**. Both on Google Fonts.

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

## Voice
- Tone: professional. Energy: high. Written for job seekers.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Typefaces

- Nunito Sans (`--font-nunito-sans`) — on Google Fonts
- inherit!important
- Nunito Sans Fallback
- Proxima Nova W05 Bold

### Type scale (most-used sizes)

`24px` · `1.5rem` · `20px` · `1.125rem` · `18px` · `16px` · `1rem` · `.95rem` · `.875rem` · `14px` · `.75rem` · `12px`

### Letter-spacing

`.6px` (6) · `.15px` (2) · `.4px` (2) · `.5px` (1)

### Corner radii (most-used)

`4px` · `16px` · `25px` · `5px` · `50%` · `30px` · `10px` · `14px` · `20px` · `35px`

### Shadows

- `0 3px 6px 1px #b5b5b5`
- `0 3px 7px 1px #c1c1c1`
- `0 10px 20px #00000012!important`
- `1px 2px 8px #9ea09e`
- `0 5px 7px 1px #c1c1c1`
- `1px 2px 12px silver`

### Gradients

- `linear-gradient(90deg,#f5f7fc 60%,#e2e5ea 0)`
- `linear-gradient(90deg,#f5f7fc 65%,#e2e5ea 0)`
- `radial-gradient(white,black)`
- `linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.65))`
- `linear-gradient(0deg,rgba(0,0,0,.8),rgba(255,255,255,0) 80%)`

### Breakpoints

0px · 320px · 374px · 440px · 450px · 480px · 571px · 575px · 576px · 640px · 767px · 768px · 769px · 786px · 821px · 900px · 991px · 992px · 1023px · 1024px · 1025px · 1070px · 1081px · 1199px · 1200px · 1217px · 1237px · 1281px · 1351px · 1400px · 1440px · 1500px · 1522px · 1800px