Clinical Terminal
AboutSign in

Bridge Patient Portal design system

bridgepatientportal.com

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

Corrections or removal: agent@clinicalterminal.com

Bridge Patient Portal logo

Palette

Type

Headings
IBM Plex Serif

Bridge Patient Portal at a glance

Body
IBM Plex Sans

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

Shape & depth

Cards and panels: 14px corners · buttons and chips: 50px.

Corner radii

Shadows

Gradients

Breakpoints: 350px · 499px · 500px · 510px · 550px · 576px · 580px · 600px · 610px · 720px · 730px · 740px

Voice

Tone: professional. Energy: medium. 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: "Bridge Patient Portal"
domain: "bridgepatientportal.com"
colors:
  primary: "#E09F3A"
  onPrimary: "#000000"
  dark: "#212529"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#212529"
  accent: "#A56800"
fonts:
  heading: "IBM Plex Serif"
  body: "IBM Plex Sans"
radius:
  card: "14px"
  button: "50px"
---

# Design System — Bridge Patient Portal

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

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

## Color
- **Accent on the ground: #A56800** (4.59:1), adjusted from Bridge Patient Portal's primary #E09F3A so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #E09F3A** for filled shapes (buttons, chips, bars), with #000000 text on it (9.19:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **IBM Plex Serif**. Body: **IBM Plex Sans**. Both on Google Fonts.

## Shape
- Cards and panels: 14px corners. Buttons and chips: 50px.

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

## Tokens from the site's stylesheets

### Typefaces

- IBM Plex Sans — on Google Fonts
- IBM Plex Serif — on Google Fonts

### Type scale (most-used sizes)

`40px` · `28px` · `24px` · `1.5rem` · `1.25rem` · `20px` · `1.125rem` · `18px` · `1rem` · `16px` · `14px` · `13px`

### Letter-spacing

`.04em` (1) · `2em` (1)

### Corner radii (most-used)

`20px` · `.25rem` · `30px` · `.2rem` · `.75rem` · `.3rem` · `50%` · `1rem` · `9999px` · `3.125rem`

### Shadows

- `0 0 0 .25rem rgba(224,159,58,.25)`
- `0 12px 8px rgba(0,0,0,.3)`
- `0 0 0 .25rem rgba(24,168,40,.25)`
- `0 0 0 .25rem rgba(220,53,69,.25)`
- `0 0 0 1px #fff,0 0 0 .25rem rgba(224,159,58,.25)`
- `0 0 0 .25rem hsla(0,0%,85%,.5)`

### Gradients

- `linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent)`
- `radial-gradient(#fff,#000)`
- `linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0))`
- `linear-gradient(0deg,#1b6aae,#ea6332)`
- `linear-gradient(90deg,#edf8ff 50%,#fff 0)`
- `linear-gradient(0deg,#1b6aae,#97c2e8)`

### Breakpoints

350px · 499px · 500px · 510px · 550px · 576px · 580px · 600px · 610px · 720px · 730px · 740px · 767px · 768px · 781px · 782px · 800px · 820px · 850px · 880px · 976px · 991px · 992px · 1024px · 1050px · 1061px · 1080px · 1105px · 1110px · 1125px · 1128px · 1170px · 1178px · 1185px · 1190px · 1200px · 1330px · 1400px