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

# MEDITECH design system

ehr.meditech.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

  \--white

- Ink

  \#3D4249

- Accent on the ground

  \#00893F

- Primary

  \#00BC6E

- On primary

  \#000000

- Secondary accent

  \#006552

  \--primary-1

- Dark

  \#3D4249

  \--black

- Site background

  \#FFFFFF

  \--white

## Color ramps

Accent

1

\#FFCA54

2

\#DE5440

3

\#9F2B61

4

\#4734C8

5

\#1A1A60

Neutral

1

\#FFFDDD

2

\#E5F2ED

3

\#F1EDE5

4

\#E6E9EE

5

\#D0F0FE

## Other named colors

- \--brand #00BC6F
- \--white #FFFFFF
- \--black #3D4249
- \--primary-1 #006552
- \--primary-2 #003B49

## Type

Headings

Montserrat

MEDITECH at a glance

Body

Montserrat

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

- 60pxMEDITECH
- 50pxMEDITECH
- 25pxMEDITECH
- 22pxMEDITECH
- 20pxMEDITECH
- 18pxMEDITECH
- 16pxMEDITECH
- 14pxMEDITECH

## Shape & depth

Cards and panels: 6px corners · buttons and chips: 7px.

### Corner radii

- 7px

  used in 17 rules

- 50%

  used in 17 rules

- 4px

  used in 9 rules

- 28px

  used in 4 rules

- 100px

  used in 3 rules

- 5px

  used in 2 rules

- 1px

  used in 1 rule

- 3px

  used in 1 rule

- 6px

  used in 1 rule

- 18px

  used in 1 rule

### Shadows

- 0px 0px 20px 1px rgba(120, 120, 120, .2)

  used in 4 rules

- 7px 7px 5px 0px rgba(0, 0, 0, 0.25)

  used in 3 rules

- inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 20px 0px rgba(0, 0, 0, 0.2)

  used in 3 rules

- 0px 0px 7px 0px rgba(120, 120, 120, 0.2)

  used in 1 rule

- 0 4px 6px 0 rgba(0, 0, 0, 0.17)

  used in 1 rule

- inset #d9dcdc 0 -0.2em 0 0

  used in 1 rule

### Gradients

- linear-gradient(#09193d, #305b9f)

  used in 3 rules

- linear-gradient(#32325d, #25253b)

  used in 3 rules

- linear-gradient(#f5f6f8, #d1d8e5)

  used in 2 rules

- linear-gradient(#e7e9ed, #c7d0df)

  used in 2 rules

- linear-gradient(to bottom, transparent 26%, #fff 26%)

  used in 2 rules

- linear-gradient(30deg, #09193d, #305b9f)

  used in 1 rule

Breakpoints: 380px · 430px · 480px · 500px · 550px · 800px · 950px · 1070px · 1071px · 1100px

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

```
---
generator: clinical-terminal-brand-kit
company: "MEDITECH"
domain: "ehr.meditech.com"
colors:
  primary: "#00BC6E"
  onPrimary: "#000000"
  dark: "#3D4249"
  accent: "#006552"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#3D4249"
  accent: "#00893F"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "6px"
  button: "7px"
---

# Design System — MEDITECH

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

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

## Color
- **Accent on the ground: #00893F** (4.52:1), adjusted from MEDITECH's primary #00BC6E so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #00BC6E** for filled shapes (buttons, chips, bars), with #000000 text on it (8.42:1).
- Secondary accent #006552: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Montserrat**. Body: **Montserrat**. Both on Google Fonts.

## Shape
- Cards and panels: 6px corners. Buttons and chips: 7px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Accent** (`--accent-N`): 1 `#FFCA54` · 2 `#DE5440` · 3 `#9F2B61` · 4 `#4734C8` · 5 `#1A1A60`
- **Neutral** (`--neutral-N`): 1 `#FFFDDD` · 2 `#E5F2ED` · 3 `#F1EDE5` · 4 `#E6E9EE` · 5 `#D0F0FE`

### Other named colors

- `--brand`: `#00BC6F`
- `--white`: `#FFFFFF`
- `--black`: `#3D4249`
- `--primary-1`: `#006552`
- `--primary-2`: `#003B49`

### Typefaces

- hover (`--orange`)
- Montserrat — on Google Fonts
- marydale
- icomoon
- source-sans-pro
- lumios-marker
- icomoon' !important

### Type scale (most-used sizes)

`60px` · `50px` · `25px` · `22px` · `20px` · `18px` · `16px` · `14px`

### Corner radii (most-used)

`7px` · `50%` · `4px` · `28px` · `100px` · `5px` · `1px` · `3px` · `6px` · `18px`

### Shadows

- `0px 0px 20px 1px rgba(120, 120, 120, .2)`
- `7px 7px 5px 0px rgba(0, 0, 0, 0.25)`
- `inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 20px 0px rgba(0, 0, 0, 0.2)`
- `0px 0px 7px 0px rgba(120, 120, 120, 0.2)`
- `0 4px 6px 0 rgba(0, 0, 0, 0.17)`
- `inset #d9dcdc 0 -0.2em 0 0`

### Gradients

- `linear-gradient(#09193d, #305b9f)`
- `linear-gradient(#32325d, #25253b)`
- `linear-gradient(#f5f6f8, #d1d8e5)`
- `linear-gradient(#e7e9ed, #c7d0df)`
- `linear-gradient(to bottom, transparent 26%, #fff 26%)`
- `linear-gradient(30deg, #09193d, #305b9f)`

### Breakpoints

380px · 430px · 480px · 500px · 550px · 800px · 950px · 1070px · 1071px · 1100px
```