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

# Abridge design system

abridge.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

  \--transitions--font-color-white

- Ink

  \#242220

- Accent on the ground

  \#E62700

- Primary

  \#EA2C00

  \--cadmium-red--55

- On primary

  \#000000

  \--a-colors--black

- Dark

  \#242220

  \--warm-gray--90

- Site background

  \#FFFFFF

  \--transitions--font-color-white

## Color ramps

Warm Gray

5

\#FBF9F6

10

\#F7F2ED

20

\#EEE5DD

30

\#D5CBC0

50

\#A7988A

60

\#6D645A

80

\#393633

90

\#242220

100

\#141312

Cadmium Red

30

\#FFA996

50

\#FF5832

55

\#EA2C00

60

\#C02907

90

\#440C00

## Other named colors

- \--a-colors--black #000000
- \--transitions--font-color-white #FFFFFF
- \--a-colors--white #FFFFFF
- \--c-base--black #000000
- \--a-colors--abridge-red #EA2C00
- \--c-base--white #FFFFFF
- \--transitions--nav-cta-color #EA2C00
- \--transitions--nav-cta-text-color #EA2C00
- \--transitions--nav-cta-text-color-hover #FFFFFF
- \--a-colors--text-slate-blue #76A8F4
- \--note--light-background-a #F7F7F7
- \--note--note-white #FFFFFF
- \--note--dark-background-a #242424
- \--note--note-black #000000
- \--transitions--background-color-black #000000
- \--a-colors--warm-gray-primary #EEE5DD
- \--transitions--font-color-black #000000
- \--neutral--white #FFFFFF
- \--neutral--black #000000
- \--pink--primary #FFD5CC
- \--transitions--background-color-white #FFFFFF
- \--note--dark-text-a #242424
- \--color-black #000000
- \--color-white #FFFFFF
- \--a-colors--warm-gray-100 #F7F2ED
- \--a-colors--warm-gray-75 #FAF7F5
- \--transparent--black-10 #000000
- \--transparent--white-10 #FFFFFF
- \--transparent--warm-15 #A7988A
- \--slate-blue--40 #76A8F4
- \--a-colors--black-50 #000000

## Type

Headings

Archivo · closest free match for Avantt

Abridge at a glance

Body

Archivo · closest free match for Avantt

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

- 32pxAbridge
- 28pxAbridge
- 24pxAbridge
- 1.5rem · 24pxAbridge
- 22pxAbridge
- 1.375rem · 22pxAbridge
- 20pxAbridge
- 1.25rem · 20pxAbridge

## Shape & depth

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

### Corner radii

- 100px

  used in 35 rules

- 10rem

  used in 9 rules

- .25rem

  used in 8 rules

- 6px

  used in 7 rules

- 50%

  used in 5 rules

- 4px

  used in 5 rules

- 100%

  used in 4 rules

- .75rem

  used in 4 rules

- 1.25rem

  used in 4 rules

- 2px

  used in 3 rules

### Shadows

- 0 0 0 1px #0000001a,0 1px 3px #0000001a

  used in 1 rule

- 0 0 3px #3336

  used in 1 rule

- 0 0 0 2px #fff

  used in 1 rule

- 0 0 3px 1px #3898ec

  used in 1 rule

- 0 0 #0000

  used in 1 rule

- 0 2px 5px #0003

  used in 1 rule

### Gradients

- linear-gradient(#0000,#000)

  used in 2 rules

- linear-gradient(135deg,#8400ff,#ff0303)

  used in 1 rule

- linear-gradient(#010101,#0d0e1d)

  used in 1 rule

- linear-gradient(90deg,#fff,#0000)

  used in 1 rule

- linear-gradient(90deg,#0000,#fff)

  used in 1 rule

- linear-gradient(#fff0,#fff)

  used in 1 rule

Breakpoints: 479px · 480px · 767px · 768px · 991px · 992px

## 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%2F100013903.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Abridge"
domain: "abridge.com"
colors:
  primary: "#EA2C00"
  onPrimary: "#000000"
  dark: "#242220"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#242220"
  accent: "#E62700"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "20px"
  button: "4px"
---

# Design System — Abridge

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

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

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

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Abridge's site uses Avantt / Avantt; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Warm Gray** (`--warm-gray--N`): 5 `#FBF9F6` · 10 `#F7F2ED` · 20 `#EEE5DD` · 30 `#D5CBC0` · 50 `#A7988A` · 60 `#6D645A` · 80 `#393633` · 90 `#242220` · 100 `#141312`
- **Cadmium Red** (`--cadmium-red--N`): 30 `#FFA996` · 50 `#FF5832` · 55 `#EA2C00` · 60 `#C02907` · 90 `#440C00`

### Other named colors

- `--a-colors--black`: `#000000`
- `--transitions--font-color-white`: `#FFFFFF`
- `--a-colors--white`: `#FFFFFF`
- `--c-base--black`: `#000000`
- `--a-colors--abridge-red`: `#EA2C00`
- `--c-base--white`: `#FFFFFF`
- `--transitions--nav-cta-color`: `#EA2C00`
- `--transitions--nav-cta-text-color`: `#EA2C00`
- `--transitions--nav-cta-text-color-hover`: `#FFFFFF`
- `--a-colors--text-slate-blue`: `#76A8F4`
- `--note--light-background-a`: `#F7F7F7`
- `--note--note-white`: `#FFFFFF`
- `--note--dark-background-a`: `#242424`
- `--note--note-black`: `#000000`
- `--transitions--background-color-black`: `#000000`
- `--a-colors--warm-gray-primary`: `#EEE5DD`
- `--transitions--font-color-black`: `#000000`
- `--neutral--white`: `#FFFFFF`
- `--neutral--black`: `#000000`
- `--pink--primary`: `#FFD5CC`
- `--transitions--background-color-white`: `#FFFFFF`
- `--note--dark-text-a`: `#242424`
- `--color-black`: `#000000`
- `--color-white`: `#FFFFFF`
- `--a-colors--warm-gray-100`: `#F7F2ED`
- `--a-colors--warm-gray-75`: `#FAF7F5`
- `--transparent--black-10`: `#000000`
- `--transparent--white-10`: `#FFFFFF`
- `--transparent--warm-15`: `#A7988A`
- `--slate-blue--40`: `#76A8F4`
- `--a-colors--black-50`: `#000000`

### Typefaces

- Abridge Font (`--font-family--abridge-display`)
- Avantt (`--font-family--primary-font`)

### Type scale (most-used sizes)

`32px` · `28px` · `24px` · `1.5rem` · `22px` · `1.375rem` · `20px` · `1.25rem` · `18px` · `1rem` · `15px` · `14px`

### Letter-spacing

`-.01em` (19) · `.002em` (7) · `-.014em` (4) · `-.00625em` (4) · `-.008em` (4) · `-.04em` (4)

### Corner radii (most-used)

`100px` · `10rem` · `.25rem` · `6px` · `50%` · `4px` · `100%` · `.75rem` · `1.25rem` · `2px`

### Shadows

- `0 0 0 1px #0000001a,0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 0 3px 1px #3898ec`
- `0 0 #0000`
- `0 2px 5px #0003`

### Gradients

- `linear-gradient(#0000,#000)`
- `linear-gradient(135deg,#8400ff,#ff0303)`
- `linear-gradient(#010101,#0d0e1d)`
- `linear-gradient(90deg,#fff,#0000)`
- `linear-gradient(90deg,#0000,#fff)`
- `linear-gradient(#fff0,#fff)`

### Breakpoints

479px · 480px · 767px · 768px · 991px · 992px
```