[Design systems](/design-systems/) / Bridge Patient Portal

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

## Palette

- Ground

  \#FFFFFF

- Ink

  \#212529

- Accent on the ground

  \#A56800

- Primary

  \#E09F3A

- On primary

  \#000000

- Dark

  \#212529

- Site background

  \#FFFFFF

## Type

Headings

IBM Plex Serif

Bridge Patient Portal at a glance

Body

IBM Plex Sans

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

- 40pxBridge Patient Portal
- 28pxBridge Patient Portal
- 24pxBridge Patient Portal
- 1.5rem · 24pxBridge Patient Portal
- 1.25rem · 20pxBridge Patient Portal
- 20pxBridge Patient Portal
- 1.125rem · 18pxBridge Patient Portal
- 18pxBridge Patient Portal

## Shape & depth

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

### Corner radii

- 20px

  used in 12 rules

- .25rem

  used in 10 rules

- 30px

  used in 10 rules

- .2rem

  used in 6 rules

- .75rem

  used in 6 rules

- .3rem

  used in 6 rules

- 50%

  used in 6 rules

- 1rem

  used in 4 rules

- 9999px

  used in 4 rules

- 3.125rem

  used in 3 rules

### Shadows

- 0 0 0 .25rem rgba(224,159,58,.25)

  used in 6 rules

- 0 12px 8px rgba(0,0,0,.3)

  used in 6 rules

- 0 0 0 .25rem rgba(24,168,40,.25)

  used in 3 rules

- 0 0 0 .25rem rgba(220,53,69,.25)

  used in 3 rules

- 0 0 0 1px #fff,0 0 0 .25rem rgba(224,159,58,.25)

  used in 2 rules

- 0 0 0 .25rem hsla(0,0%,85%,.5)

  used in 2 rules

### Gradients

- linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent)

  used in 2 rules

- radial-gradient(#fff,#000)

  used in 2 rules

- linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0))

  used in 1 rule

- linear-gradient(0deg,#1b6aae,#ea6332)

  used in 1 rule

- linear-gradient(90deg,#edf8ff 50%,#fff 0)

  used in 1 rule

- linear-gradient(0deg,#1b6aae,#97c2e8)

  used in 1 rule

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

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