[Design systems](/design-systems/) / PayZen

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

## Palette

- Ground

  \#FFFFFF

  \--porto-light-light-5

- Ink

  \#2D2E36

- Accent on the ground

  \#3967FE

- Primary

  \#3967FE

  \--payzen-blue-400

- On primary

  \#FFFFFF

  \--porto-light-light-5

- Secondary accent

  \#4570FE

  \--porto-mainmenu-popup-text-color-hover

- Dark

  \#2D2E36

  \--porto-h1-color

- Site background

  \#FFFFFF

  \--porto-light-light-5

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

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

## 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.

- 64pxPayZen
- 48pxPayZen
- 38pxPayZen
- 28pxPayZen
- 24pxPayZen
- 22pxPayZen
- 20pxPayZen
- 18pxPayZen

## Shape & depth

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

### Corner radii

- 30px

  used in 34 rules

- 20px

  used in 21 rules

- 50%

  used in 15 rules

- 15px

  used in 13 rules

- 9999px

  used in 7 rules

- 5px

  used in 5 rules

- 25px

  used in 4 rules

- 4px

  used in 3 rules

- 3px

  used in 3 rules

- 10px

  used in 3 rules

### Shadows

- none!important

  used in 7 rules

- 0 4px 15px 0 rgba(0,0,0,.15)

  used in 4 rules

- 0 5px 8px rgba(0,0,0,.15)

  used in 3 rules

- 0 20px 38px rgba(0,0,0,.12)

  used in 3 rules

- 0 0 25px 0 rgba(0,0,0,.1)

  used in 3 rules

- 0 0 8px rgba(0,0,0,.6)

  used in 2 rules

### Gradients

- linear-gradient(#f4f4f4 20px,transparent 0)

  used in 5 rules

- linear-gradient(#f4f4f4 18px,transparent 0)

  used in 5 rules

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

  used in 2 rules

- linear-gradient(90deg,#4570fe 0,#2cd6c1 100%)

  used in 2 rules

- linear-gradient(80deg,#466bfd,#2bd7c0,#febf0f)

  used in 2 rules

- linear-gradient(90deg,#4570fe,#2cd6c1 62.75%)

  used in 2 rules

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

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