Clinical Terminal
AboutSign in

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

Palette

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

Type

Headings
Lato

Webpt at a glance

Body
Lato

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

Shape & depth

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

Corner radii

Shadows

Gradients

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.

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