[Design systems](/design-systems/) / Cross Country Nurses

# 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F101557031.svg?alt=media)

## Palette

- Ground

  \#F0F1F4

- Ink

  \#000000

- Accent on the ground

  \#003366

- Primary

  \#003366

- On primary

  \#FFFFFF

- Secondary accent

  \#D7282F

- Dark

  \#000000

- Site background

  \#F0F1F4

## Type

Headings

Nunito Sans

Cross Country Nurses at a glance

Body

Nunito Sans

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

- 24pxCross Country Nurses
- 1.5rem · 24pxCross Country Nurses
- 20pxCross Country Nurses
- 1.125rem · 18pxCross Country Nurses
- 18pxCross Country Nurses
- 16pxCross Country Nurses
- 1rem · 16pxCross Country Nurses
- .95rem · 15.2pxCross Country Nurses

## Shape & depth

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

### Corner radii

- 4px

  used in 76 rules

- 16px

  used in 18 rules

- 25px

  used in 12 rules

- 5px

  used in 10 rules

- 50%

  used in 7 rules

- 30px

  used in 7 rules

- 10px

  used in 6 rules

- 14px

  used in 4 rules

- 20px

  used in 4 rules

- 35px

  used in 2 rules

### Shadows

- 0 3px 6px 1px #b5b5b5

  used in 19 rules

- 0 3px 7px 1px #c1c1c1

  used in 4 rules

- 0 10px 20px #00000012!important

  used in 3 rules

- 1px 2px 8px #9ea09e

  used in 3 rules

- 0 5px 7px 1px #c1c1c1

  used in 3 rules

- 1px 2px 12px silver

  used in 2 rules

### Gradients

- linear-gradient(90deg,#f5f7fc 60%,#e2e5ea 0)

  used in 4 rules

- linear-gradient(90deg,#f5f7fc 65%,#e2e5ea 0)

  used in 2 rules

- radial-gradient(white,black)

  used in 1 rule

- linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.65))

  used in 1 rule

- linear-gradient(0deg,rgba(0,0,0,.8),rgba(255,255,255,0) 80%)

  used in 1 rule

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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F101557031.md?alt=media).

```
---
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
```