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

# Webpt design system

webpt.com

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

Corrections or removal: <agent@clinicalterminal.com>

![Webpt homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923931.jpg?alt=media)

## Palette

- Ground

  \#FCFCFC

  \--off-white-new

- Ink

  \#222222

- Accent on the ground

  \#3D5AFE

- Primary

  \#3D5AFE

  \--p-600

- On primary

  \#FFFFFF

  \--white

- Dark

  \#222222

- Site background

  \#FCFCFC

  \--off-white-new

## Color ramps

G

50

\#FBFAFF

100

\#E4E7EB

200

\#C3C9CF

300

\#A3ABB3

400

\#828C98

500

\#616E7C

600

\#4A5765

700

\#3E4C59

800

\#343F4B

900

\#1F2933

P

50

\#D7E5FF

100

\#AFCAFF

300

\#5383FE

600

\#3D5AFE

700

\#2E45C1

900

\#3F51B5

A

50

\#FFEBEE

100

\#FF968D

300

\#FF4551

600

\#F51545

900

\#D50000

I

50

\#CABDFC

100

\#A28CF9

300

\#957CF9

600

\#876BF8

900

\#7A5BF7

E

50

\#BEFCD5

300

\#62F6B5

600

\#1CE197

900

\#00B889

B

50

\#FFF9C4

100

\#FFF59D

600

\#FFEA00

900

\#FFD600

T

50

\#E2FEFE

300

\#51F5F5

600

\#13EAEA

900

\#00DBDB

## Other named colors

- \--white #FFFFFF
- \--untitled-ui--gray900 #101828
- \--untitled-ui--footer-bg #F1F2F3
- \--t-1000 #06A7BD
- \--e-100-1001 #A4F6C3
- \--grey-new #EBEFF5
- \--off-white-new #FCFCFC
- \--p-1000 #2542E6
- \--i-1000 #6900D2
- \--cornflower-blue #85A7FF
- \--e-10-1001 #E5FEEE
- \--e-1000 #057558
- \--black #000000
- \--untitled-ui--primary600 #7F56D9
- \--untitled-ui--white #FFFFFF
- \--untitled-ui--primary700 #6941C6
- \--untitled-ui--primary100 #F4EBFF
- \--untitled-ui--gray600 #475467
- \--untitled-ui--primary800 #53389E
- \--t-100-1001 #9FFBFB
- \--b-600-601 #FFF176
- \--i-10-101 #EDE5FA
- \--p-10-101 #F1F6FF

## Type

Headings

Lato

Webpt at a glance

Body

Lato

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

- 3rem · 48pxWebpt
- 2.25rem · 36pxWebpt
- 2rem · 32pxWebpt
- 1.75rem · 28pxWebpt
- 1.5rem · 24pxWebpt
- 1.375rem · 22pxWebpt
- 1.25rem · 20pxWebpt
- 1.125rem · 18pxWebpt

## Shape & depth

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

### Corner radii

- 1.125rem

  used in 30 rules

- 18px

  used in 26 rules

- 6.25rem

  used in 18 rules

- 24px

  used in 17 rules

- .5rem

  used in 16 rules

- 100%

  used in 13 rules

- 20px

  used in 13 rules

- 1rem

  used in 13 rules

- 1px

  used in 9 rules

- 1.5rem

  used in 9 rules

### Shadows

- 0 10px 25px #0505130d

  used in 21 rules

- 0 2px 4px #aabbca1a,0 4px 8px #aabbca1a

  used in 15 rules

- 0 6px 25px #1f29331a

  used in 11 rules

- 0 4px 30px #00000014

  used in 6 rules

- 0 0 25px #00000014

  used in 6 rules

- 0 10px 25px #0000000d

  used in 4 rules

### Gradients

- linear-gradient(#5383fecc,#5383fecc)

  used in 6 rules

- linear-gradient(135deg,#3d5afe,#741fff 35%,#d50000 65%,#ffd600)

  used in 3 rules

- linear-gradient(315deg,#d7e5ff,#f1f6ff 60%,#d7e5ff)

  used in 2 rules

- linear-gradient(#fff0,#2d40ea1a)

  used in 1 rule

- linear-gradient(135deg,#eafffa,#fff 94.48%)

  used in 1 rule

- linear-gradient(135deg,#fffbd5,#fff)

  used in 1 rule

Breakpoints: 479px · 767px · 768px · 991px · 1158px · 1280px · 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100923931.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Webpt"
domain: "webpt.com"
colors:
  primary: "#3D5AFE"
  onPrimary: "#FFFFFF"
  dark: "#222222"
  background: "#FCFCFC"
ground:
  mode: light
  hex: "#FCFCFC"
  ink: "#222222"
  accent: "#3D5AFE"
fonts:
  heading: "Lato"
  body: "Lato"
radius:
  card: "20px"
  button: "112.5px"
---

# Design System — Webpt

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

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

## Color
- **Accent on the ground: #3D5AFE** (5:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #3D5AFE** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.13:1).
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **G** (`--g-N`): 50 `#FBFAFF` · 100 `#E4E7EB` · 200 `#C3C9CF` · 300 `#A3ABB3` · 400 `#828C98` · 500 `#616E7C` · 600 `#4A5765` · 700 `#3E4C59` · 800 `#343F4B` · 900 `#1F2933`
- **P** (`--p-N`): 50 `#D7E5FF` · 100 `#AFCAFF` · 300 `#5383FE` · 600 `#3D5AFE` · 700 `#2E45C1` · 900 `#3F51B5`
- **A** (`--a-N`): 50 `#FFEBEE` · 100 `#FF968D` · 300 `#FF4551` · 600 `#F51545` · 900 `#D50000`
- **I** (`--i-N`): 50 `#CABDFC` · 100 `#A28CF9` · 300 `#957CF9` · 600 `#876BF8` · 900 `#7A5BF7`
- **E** (`--e-N`): 50 `#BEFCD5` · 300 `#62F6B5` · 600 `#1CE197` · 900 `#00B889`
- **B** (`--b-N`): 50 `#FFF9C4` · 100 `#FFF59D` · 600 `#FFEA00` · 900 `#FFD600`
- **T** (`--t-N`): 50 `#E2FEFE` · 300 `#51F5F5` · 600 `#13EAEA` · 900 `#00DBDB`

### Other named colors

- `--white`: `#FFFFFF`
- `--untitled-ui--gray900`: `#101828`
- `--untitled-ui--footer-bg`: `#F1F2F3`
- `--t-1000`: `#06A7BD`
- `--e-100-1001`: `#A4F6C3`
- `--grey-new`: `#EBEFF5`
- `--off-white-new`: `#FCFCFC`
- `--p-1000`: `#2542E6`
- `--i-1000`: `#6900D2`
- `--cornflower-blue`: `#85A7FF`
- `--e-10-1001`: `#E5FEEE`
- `--e-1000`: `#057558`
- `--black`: `#000000`
- `--untitled-ui--primary600`: `#7F56D9`
- `--untitled-ui--white`: `#FFFFFF`
- `--untitled-ui--primary700`: `#6941C6`
- `--untitled-ui--primary100`: `#F4EBFF`
- `--untitled-ui--gray600`: `#475467`
- `--untitled-ui--primary800`: `#53389E`
- `--t-100-1001`: `#9FFBFB`
- `--b-600-601`: `#FFF176`
- `--i-10-101`: `#EDE5FA`
- `--p-10-101`: `#F1F6FF`

### Typefaces

- Lato — on Google Fonts

### Type scale (most-used sizes)

`3rem` · `2.25rem` · `2rem` · `1.75rem` · `1.5rem` · `1.375rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `14px` · `.75rem`

### Letter-spacing

`-.003rem` (15) · `-.01875rem` (9) · `.8px` (2) · `.05em` (2) · `-.06px` (2) · `-1px` (2)

### Corner radii (most-used)

`1.125rem` · `18px` · `6.25rem` · `24px` · `.5rem` · `100%` · `20px` · `1rem` · `1px` · `1.5rem`

### Shadows

- `0 10px 25px #0505130d`
- `0 2px 4px #aabbca1a,0 4px 8px #aabbca1a`
- `0 6px 25px #1f29331a`
- `0 4px 30px #00000014`
- `0 0 25px #00000014`
- `0 10px 25px #0000000d`

### Gradients

- `linear-gradient(#5383fecc,#5383fecc)`
- `linear-gradient(135deg,#3d5afe,#741fff 35%,#d50000 65%,#ffd600)`
- `linear-gradient(315deg,#d7e5ff,#f1f6ff 60%,#d7e5ff)`
- `linear-gradient(#fff0,#2d40ea1a)`
- `linear-gradient(135deg,#eafffa,#fff 94.48%)`
- `linear-gradient(135deg,#fffbd5,#fff)`

### Breakpoints

479px · 767px · 768px · 991px · 1158px · 1280px · 1440px · 1920px
```