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