Clinical Terminal
AboutSign in

PayZen design system

payzen.com

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

Corrections or removal: agent@clinicalterminal.com

PayZen homepage

Palette

Color ramps

Porto Primary Dark
5
#2054FE
10
#0741FE
15
#0238EA
20
#0232D0
Porto Primary Light
5
#537BFF
7
#5D83FF
10
#6C8EFF
Porto Secondary Dark
5
#E04D44
10
#DC382E
15
#CD2D23
20
#B8281F
Porto Secondary Light
5
#E7766F
7
#E97F78
10
#EB8B85
Porto Tertiary Dark
5
#27979D
10
#228388
15
#1D6F74
20
#185C5F
Porto Tertiary Light
5
#30BEC6
7
#33C6CE
10
#3FC9D1
Porto Quaternary Dark
5
#2D333A
10
#22262C
15
#171A1D
20
#0C0D0F
Porto Quaternary Light
5
#444C57
7
#48515D
10
#4F5965
Porto Dark Dark
5
#16191B
10
#0B0C0D
15
#000000
20
#000000
Porto Dark Light
5
#2D3238
7
#31373D
10
#383F46
Porto Light Dark
5
#F3F3F3
10
#E6E6E6
15
#D9D9D9
20
#CCCCCC
Porto Light Light
5
#FFFFFF
7
#FFFFFF
10
#FFFFFF

Other named colors

Type

Headings
Archivo · closest free match for Geologica

PayZen at a glance

Body
Archivo · closest free match for Sailec

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

Shape & depth

Cards and panels: 20px corners · buttons and chips: 36px.

Corner radii

Shadows

Gradients

Breakpoints: 320px · 374px · 375px · 480px · 575px · 576px · 690px · 767px · 768px · 900px · 991px · 992px

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: "PayZen"
domain: "payzen.com"
colors:
  primary: "#3967FE"
  onPrimary: "#FFFFFF"
  dark: "#2D2E36"
  accent: "#4570FE"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#2D2E36"
  accent: "#3967FE"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "20px"
  button: "36px"
---

# Design System — PayZen

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Porto Primary Dark** (`--porto-primary-dark-N`): 5 `#2054FE` · 10 `#0741FE` · 15 `#0238EA` · 20 `#0232D0`
- **Porto Primary Light** (`--porto-primary-light-N`): 5 `#537BFF` · 7 `#5D83FF` · 10 `#6C8EFF`
- **Porto Secondary Dark** (`--porto-secondary-dark-N`): 5 `#E04D44` · 10 `#DC382E` · 15 `#CD2D23` · 20 `#B8281F`
- **Porto Secondary Light** (`--porto-secondary-light-N`): 5 `#E7766F` · 7 `#E97F78` · 10 `#EB8B85`
- **Porto Tertiary Dark** (`--porto-tertiary-dark-N`): 5 `#27979D` · 10 `#228388` · 15 `#1D6F74` · 20 `#185C5F`
- **Porto Tertiary Light** (`--porto-tertiary-light-N`): 5 `#30BEC6` · 7 `#33C6CE` · 10 `#3FC9D1`
- **Porto Quaternary Dark** (`--porto-quaternary-dark-N`): 5 `#2D333A` · 10 `#22262C` · 15 `#171A1D` · 20 `#0C0D0F`
- **Porto Quaternary Light** (`--porto-quaternary-light-N`): 5 `#444C57` · 7 `#48515D` · 10 `#4F5965`
- **Porto Dark Dark** (`--porto-dark-dark-N`): 5 `#16191B` · 10 `#0B0C0D` · 15 `#000000` · 20 `#000000`
- **Porto Dark Light** (`--porto-dark-light-N`): 5 `#2D3238` · 7 `#31373D` · 10 `#383F46`
- **Porto Light Dark** (`--porto-light-dark-N`): 5 `#F3F3F3` · 10 `#E6E6E6` · 15 `#D9D9D9` · 20 `#CCCCCC`
- **Porto Light Light** (`--porto-light-light-N`): 5 `#FFFFFF` · 7 `#FFFFFF` · 10 `#FFFFFF`
- **Porto Gray** (`--porto-gray-N`): 1 `#F4F4F4` · 2 `#E7E7E7` · 3 `#F4F4F4` · 4 `#CCCCCC` · 5 `#E7E7E7` · 6 `#999999` · 7 `#F4F4F4` · 8 `#F1F1F1`
- **Payzen Blue** (`--payzen-blue-N`): 100 `#2C48A2` · 400 `#3967FE` · 500 `#3A5DCF` · 600 `#2C48A2`

### Other named colors

- `--porto-color-dark`: `#1D2127`
- `--porto-primary-color`: `#3967FE`
- `--porto-primary-color-inverse`: `#FFFFFF`
- `--porto-secondary-color`: `#E36159`
- `--porto-secondary-color-inverse`: `#FFFFFF`
- `--porto-tertiary-color`: `#2BAAB1`
- `--porto-tertiary-color-inverse`: `#FFFFFF`
- `--porto-quaternary-color`: `#383F48`
- `--porto-quaternary-color-inverse`: `#FFFFFF`
- `--porto-dark-color`: `#212529`
- `--porto-dark-color-inverse`: `#FFFFFF`
- `--porto-light-color`: `#FFFFFF`
- `--porto-light-color-inverse`: `#212529`
- `--porto-body-color`: `#777777`
- `--porto-bgc`: `#FFFFFF`
- `--porto-body-bg`: `#FFFFFF`
- `--porto-color-price`: `#444444`
- `--porto-widget-bgc`: `#FBFBFB`
- `--porto-title-bgc`: `#F5F5F5`
- `--porto-widget-bc`: `#DDDDDD`
- `--porto-input-bc`: `#000000`
- `--porto-slide-bgc`: `#E7E7E7`
- `--porto-heading-color`: `#222529`
- `--porto-normal-bg`: `#FFFFFF`
- `--porto-gray-bg`: `#DFDFDF`
- `--porto-normal-bc`: `#000000`
- `--porto-label-bg1`: `#FFFFFF`
- `--porto-h1-color`: `#2D2E36`
- `--porto-h2-color`: `#2D2E36`
- `--porto-searchform-border-color`: `#EEEEEE`
- `--porto-searchform-text-color`: `#555555`
- `--porto-header-link-color-regular`: `#2D2E37`
- `--porto-header-link-color-hover`: `#2D2E37`
- `--porto-mainmenu-popup-text-color-regular`: `#2D2E37`
- `--porto-mainmenu-popup-text-color-hover`: `#4570FE`
- `--service--color`: `#000000`
- `--porto-body-color-light-5`: `#848484`
- `--porto-primary-inverse-dark-10`: `#E6E6E6`
- `--porto-secondary-inverse-dark-10`: `#E6E6E6`
- `--porto-tertiary-inverse-dark-10`: `#E6E6E6`
- `--porto-quaternary-inverse-dark-10`: `#E6E6E6`
- `--porto-dark-inverse-dark-10`: `#E6E6E6`
- `--porto-light-inverse-dark-10`: `#0B0C0D`
- `--porto-heading-light-8`: `#353A40`
- `--porto-light-1`: `#FFFFFF`
- `--porto-light-2`: `#FFFFFF`

### Typefaces

- Poppins (`--porto-body-ff`) — on Google Fonts
- Shadows Into Light (`--porto-alt-ff`)
- sailec-bold (`--payzen-ff-bold`)
- sailec-light (`--payzen-ff-light`)
- sailec-medium (`--payzen-ff-medium`)
- sailec-regular-italic (`--payzen-ff-regular-italic`)
- sailec-thin (`--payzen-ff-thin`)
- sailec-normal (`--payzen-ff-normal`)
- Geologica (`--porto-h1-ff`)

### Type scale (most-used sizes)

`64px` · `48px` · `38px` · `28px` · `24px` · `22px` · `20px` · `18px` · `16px` · `14px` · `13px` · `12px`

### Letter-spacing

`.1px` (5) · `-.5px` (3) · `.005em` (1) · `.025em` (1) · `-.05em` (1) · `.28px` (1)

### Corner radii (most-used)

`30px` · `20px` · `50%` · `15px` · `9999px` · `5px` · `25px` · `4px` · `3px` · `10px`

### Shadows

- `none!important`
- `0 4px 15px 0 rgba(0,0,0,.15)`
- `0 5px 8px rgba(0,0,0,.15)`
- `0 20px 38px rgba(0,0,0,.12)`
- `0 0 25px 0 rgba(0,0,0,.1)`
- `0 0 8px rgba(0,0,0,.6)`

### Gradients

- `linear-gradient(#f4f4f4 20px,transparent 0)`
- `linear-gradient(#f4f4f4 18px,transparent 0)`
- `linear-gradient(90deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 80%)`
- `linear-gradient(90deg,#4570fe 0,#2cd6c1 100%)`
- `linear-gradient(80deg,#466bfd,#2bd7c0,#febf0f)`
- `linear-gradient(90deg,#4570fe,#2cd6c1 62.75%)`

### Breakpoints

320px · 374px · 375px · 480px · 575px · 576px · 690px · 767px · 768px · 900px · 991px · 992px · 1023px · 1024px · 1099px · 1100px · 1140px · 1163px · 1164px · 1180px · 1181px · 1200px · 1260px · 1280px · 1307px · 1439px · 1440px · 1463px · 1464px · 1488px · 1500px