Clinical Terminal
AboutSign in

Patientpay design system

patientpay.com

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

Corrections or removal: agent@clinicalterminal.com

Patientpay homepage

Palette

Color ramps

Yellow
1
#FBCC48
2
#FACF56
3
#FACF56
4
#F9D263
5
#F8D570
6
#F7D87D
Primary Blue
2
#19314E
3
#2B415C
4
#3D516A
5
#4E6178
6
#607186
Secondary Blue
2
#5CA2D0
3
#7DB4DA
4
#9EC7E3
5
#BEDAEC
6
#DEECF6
7
#EDEBF3
Charts Chart
1
#B58800
2
#CAAA59
3
#A97700
4
#AF8A0E
5
#926B00

Other named colors

Type

Headings
Archivo

Patientpay at a glance

Body
Manrope

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

Shape & depth

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

Corner radii

Shadows

Gradients

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

Voice

Tone: professional. Energy: low. Written for patients and healthcare professionals.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Patientpay"
domain: "patientpay.com"
colors:
  primary: "#FBCC48"
  onPrimary: "#19314E"
  dark: "#072140"
  accent: "#FCC93B"
  background: "#F4F3F7"
ground:
  mode: light
  hex: "#F4F3F7"
  ink: "#072140"
  accent: "#916500"
fonts:
  heading: "Archivo"
  body: "Manrope"
radius:
  card: "3px"
  button: "3px"
---

# Design System — Patientpay

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

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

## Color
- **Accent on the ground: #916500** (4.68:1), adjusted from Patientpay's primary #FBCC48 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #FBCC48** for filled shapes (buttons, chips, bars), with #19314E text on it (8.7:1).
- Secondary accent #FCC93B: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Manrope**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Yellow** (`--yellow-N`): 1 `#FBCC48` · 2 `#FACF56` · 3 `#FACF56` · 4 `#F9D263` · 5 `#F8D570` · 6 `#F7D87D`
- **Primary Blue** (`--primary-blue-N`): 2 `#19314E` · 3 `#2B415C` · 4 `#3D516A` · 5 `#4E6178` · 6 `#607186`
- **Secondary Blue** (`--secondary-blue-N`): 2 `#5CA2D0` · 3 `#7DB4DA` · 4 `#9EC7E3` · 5 `#BEDAEC` · 6 `#DEECF6` · 7 `#EDEBF3`
- **Charts Chart** (`--charts--chart-N`): 1 `#B58800` · 2 `#CAAA59` · 3 `#A97700` · 4 `#AF8A0E` · 5 `#926B00`

### Other named colors

- `--background`: `#F4F3F7`
- `--primary-blue`: `#072140`
- `--yellow`: `#FCC93B`
- `--white`: `#FFFFFF`
- `--patientpay-blue`: `#043A72`
- `--secondary-blue`: `#3C8FC7`
- `--border`: `#D5F3E6`
- `--colors--muted`: `#EDEDED`
- `--colors--card-foreground`: `#060606`
- `--colors--popover`: `#E7E6E6`
- `--colors--popover-foreground`: `#060606`
- `--colors--primary`: `#D5A704`
- `--colors--primary-foreground`: `#110D04`
- `--colors--secondary`: `#FBE9BC`
- `--colors--secondary-foreground`: `#0F0D07`
- `--colors--muted-foreground`: `#736F70`
- `--colors--accent`: `#D9D9D9`
- `--colors--accent-foreground`: `#0D0D0D`
- `--colors--destructive`: `#D5455F`
- `--colors--input`: `#D8F6E9`
- `--colors--ring`: `#F1CE76`
- `--sidebar--sidebar`: `#EDEDED`
- `--sidebar--sidebar-foreground`: `#060606`
- `--sidebar--sidebar-primary`: `#D5A704`
- `--sidebar--sidebar-primary-foreground`: `#110D04`
- `--sidebar--sidebar-accent`: `#D9D9D9`
- `--sidebar--sidebar-accent-foreground`: `#0D0D0D`
- `--sidebar--sidebar-ring`: `#F1CE76`
- `--colors--background-dark`: `#080707`
- `--colors--foreground-dark`: `#F8F8F8`
- `--colors--card-dark`: `#1B1B1B`
- `--colors--card-foreground-dark`: `#F8F8F8`
- `--colors--popover-dark`: `#1B1B1B`
- `--colors--popover-foreground-dark`: `#F8F8F8`
- `--colors--primary-foreground-dark`: `#080501`
- `--colors--secondary-dark`: `#2B1900`
- `--colors--secondary-foreground-dark`: `#FBF8F1`
- `--colors--muted-dark`: `#030202`
- `--colors--muted-foreground-dark`: `#8F8F8F`
- `--colors--accent-dark`: `#303030`
- `--colors--accent-foreground-dark`: `#F8F8F8`
- `--colors--destructive-dark`: `#D74760`
- `--colors--border-dark`: `#D5F3E6`
- `--colors--input-dark`: `#FFFFFF`
- `--colors--ring-dark`: `#F1CE76`
- `--charts--chart-2-dark`: `#FFF5A3`
- `--charts--chart-3-dark`: `#DEAA00`
- `--charts--chart-4-dark`: `#FFEF8F`
- `--charts--chart-5-dark`: `#C69D21`
- `--sidebar--sidebar-dark`: `#0E0D0D`
- `--sidebar--sidebar-foreground-dark`: `#F8F8F8`
- `--sidebar--sidebar-primary-foreground-dark`: `#080501`
- `--sidebar--sidebar-accent-dark`: `#303030`
- `--sidebar--sidebar-accent-foreground-dark`: `#F8F8F8`
- `--sidebar--sidebar-border-dark`: `#FFFFFF`
- `--sidebar--sidebar-ring-dark`: `#F1CE76`

### Typefaces

- Archivo (`--heading-font`) — on Google Fonts
- Manrope (`--paragraph-font`) — on Google Fonts
- Archivo Variablefont Wdth Wght
- Inter Variablefont Opsz Wght
- Enterprise Sans \- Optum
- Manrope Variablefont Wght

### Type scale (most-used sizes)

`3rem` · `40px` · `38px` · `32px` · `24px` · `18px` · `1rem` · `15px` · `.875rem` · `14px` · `12px` · `10px`

### Letter-spacing

`.1em` (7) · `.2em` (5) · `.15em` (4) · `.02em` (3) · `.6em` (2) · `.3em` (2)

### Corner radii (most-used)

`3px` · `.25rem` · `50%` · `.5rem` · `5px` · `11px` · `999rem` · `100%` · `2px` · `7px`

### Shadows

- `0 0 0 1px #0000001a,0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 0 3px 1px #3898ec`
- `2px 4px 9px 2px #0003`
- `0 60px 50px -20px #17152047`

### Gradients

- `linear-gradient(90deg,#211e2ee6,#17152080 47%,#17152066)`
- `linear-gradient(#fcc93b69,#fcc93b69)`
- `radial-gradient(circle at 0%,#072140,#fff0)`
- `radial-gradient(circle at 100% 100%,#dde2e7,#fff0 50%)`
- `radial-gradient(circle farthest-side at 50% 0,#96a2af,#fff0 45%)`
- `radial-gradient(circle at 30% 100%,#728194,#fff0 29%)`

### Breakpoints

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