[Design systems](/design-systems/) / Streamline Healthcare Solutions

# Streamline Healthcare Solutions design system

streamlinehealthcare.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

  \--ep-white

- Ink

  \#222222

- Accent on the ground

  \#5B4E96

- Primary

  \#5B4E96

- On primary

  \#FFFFFF

  \--ep-white

- Secondary accent

  \#1E73BE

- Dark

  \#222222

  \--contrast

- Site background

  \#FFFFFF

  \--ep-white

## Color ramps

Ep Gray

50

\#F9FAFB

100

\#F3F4F6

200

\#E5E7EB

300

\#D1D5DB

400

\#9CA3AF

500

\#6B7280

600

\#4B5563

700

\#374151

800

\#1F2937

900

\#111827

Neutral

100

\#F6F7F5

300

\#EFEFF0

500

\#C8C9C7

700

\#808194

900

\#000000

## Other named colors

- \--viewer-primary-color #343434
- \--viewer-icons-hover-bgcolor #453838
- \--viewer-icons-color #343434
- \--epyp-bg #0F0F0F
- \--epyp-surface #181818
- \--epyp-border #2A2A2A
- \--epyp-text #F1F1F1
- \--epyp-text-dim #AAAAAA
- \--epyp-accent #FF0000
- \--epyp-focus #3EA6FF
- \--ep-primary #007CBA
- \--ep-primary-hover #005A87
- \--ep-primary-light #E6F3FF
- \--ep-secondary #50575E
- \--ep-secondary-hover #3C434A
- \--ep-secondary-light #F6F7F7
- \--ep-success #00A32A
- \--ep-success-light #E6F7E6
- \--ep-warning #DBA617
- \--ep-warning-light #FFF8E5
- \--ep-error #D63638
- \--ep-error-light #FFEAEA
- \--ep-info #72AEE6
- \--ep-info-light #E5F5FF
- \--ep-white #FFFFFF
- \--ep-black #000000
- \--accent #4A0661
- \--accent-dark #F6F7F5
- \--contrast #222222
- \--base #F0F0F0
- \--gp-search-modal-overlay-bg-color #000000
- \--epyp-surface-2 #212121
- \--contrast-2 #575760
- \--contrast-3 #B2B2BE
- \--base-2 #F7F8F9
- \--base-3 #FFFFFF
- \--global-color-8 #4A0661

## Type

Headings

Montserrat

Streamline Healthcare Solutions at a glance

Body

Montserrat

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

- 24pxStreamline Healthcare Solutions
- 20pxStreamline Healthcare Solutions
- 18pxStreamline Healthcare Solutions
- 16pxStreamline Healthcare Solutions
- 1rem · 16pxStreamline Healthcare Solutions
- 15pxStreamline Healthcare Solutions
- 0.9rem · 14.4pxStreamline Healthcare Solutions
- 14pxStreamline Healthcare Solutions

## Shape & depth

Cards and panels: 8px corners · buttons and chips: 28.512px.

### Corner radii

- 4px

  used in 49 rules

- 50%

  used in 46 rules

- 10px

  used in 30 rules

- 5px

  used in 23 rules

- 8px

  used in 21 rules

- 6px

  used in 17 rules

- 50px

  used in 11 rules

- 15px

  used in 9 rules

- 0.5rem

  used in 9 rules

- 3px

  used in 8 rules

### Shadows

- none!important

  used in 5 rules

- 0 2px 4px rgba(0, 0, 0, .4)

  used in 3 rules

- 0 4px 15px rgba(0, 0, 0, .09)

  used in 2 rules

- 0px 0px 10px #f4eded

  used in 2 rules

- 0px 0px 10px #007bff

  used in 2 rules

- none !important

  used in 2 rules

### Gradients

- linear-gradient(to bottom, rgba(83, 86, 90, 1) 35%, rgba(83, 86, 90, 0.7) 100%)

  used in 2 rules

- linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee)

  used in 2 rules

- linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4)

  used in 1 rule

- linear-gradient(to top, rgba(15, 15, 15, .95) 55%, rgba(15, 15, 15, 0))

  used in 1 rule

- linear-gradient(181.32deg,#fffbf8 1.12%,#fff 98.95%)

  used in 1 rule

- linear-gradient(135deg,#f8f7fc,#fff)

  used in 1 rule

Breakpoints: 420px · 460px · 480px · 482px · 500px · 520px · 530px · 537px · 576px · 580px · 600px · 640px

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

```
---
generator: clinical-terminal-brand-kit
company: "Streamline Healthcare Solutions"
domain: "streamlinehealthcare.com"
colors:
  primary: "#5B4E96"
  onPrimary: "#FFFFFF"
  dark: "#222222"
  accent: "#1E73BE"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#222222"
  accent: "#5B4E96"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "8px"
  button: "28.512px"
---

# Design System — Streamline Healthcare Solutions

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

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

## Color
- **Accent on the ground: #5B4E96** (7.06:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #5B4E96** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.06:1).
- Secondary accent #1E73BE: 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: 8px corners. Buttons and chips: 28.512px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Ep Gray** (`--ep-gray-N`): 50 `#F9FAFB` · 100 `#F3F4F6` · 200 `#E5E7EB` · 300 `#D1D5DB` · 400 `#9CA3AF` · 500 `#6B7280` · 600 `#4B5563` · 700 `#374151` · 800 `#1F2937` · 900 `#111827`
- **Neutral** (`--neutral-N`): 100 `#F6F7F5` · 300 `#EFEFF0` · 500 `#C8C9C7` · 700 `#808194` · 900 `#000000`

### Other named colors

- `--viewer-primary-color`: `#343434`
- `--viewer-icons-hover-bgcolor`: `#453838`
- `--viewer-icons-color`: `#343434`
- `--epyp-bg`: `#0F0F0F`
- `--epyp-surface`: `#181818`
- `--epyp-border`: `#2A2A2A`
- `--epyp-text`: `#F1F1F1`
- `--epyp-text-dim`: `#AAAAAA`
- `--epyp-accent`: `#FF0000`
- `--epyp-focus`: `#3EA6FF`
- `--ep-primary`: `#007CBA`
- `--ep-primary-hover`: `#005A87`
- `--ep-primary-light`: `#E6F3FF`
- `--ep-secondary`: `#50575E`
- `--ep-secondary-hover`: `#3C434A`
- `--ep-secondary-light`: `#F6F7F7`
- `--ep-success`: `#00A32A`
- `--ep-success-light`: `#E6F7E6`
- `--ep-warning`: `#DBA617`
- `--ep-warning-light`: `#FFF8E5`
- `--ep-error`: `#D63638`
- `--ep-error-light`: `#FFEAEA`
- `--ep-info`: `#72AEE6`
- `--ep-info-light`: `#E5F5FF`
- `--ep-white`: `#FFFFFF`
- `--ep-black`: `#000000`
- `--accent`: `#4A0661`
- `--accent-dark`: `#F6F7F5`
- `--contrast`: `#222222`
- `--base`: `#F0F0F0`
- `--gp-search-modal-overlay-bg-color`: `#000000`
- `--epyp-surface-2`: `#212121`
- `--contrast-2`: `#575760`
- `--contrast-3`: `#B2B2BE`
- `--base-2`: `#F7F8F9`
- `--base-3`: `#FFFFFF`
- `--global-color-8`: `#4A0661`

### Typefaces

- Montserrat — on Google Fonts
- Roboto — on Google Fonts
- Open Sans — on Google Fonts
- Courier 10 Pitch
- monsterrat

### Type scale (most-used sizes)

`24px` · `20px` · `18px` · `16px` · `1rem` · `15px` · `0.9rem` · `14px` · `13px` · `12px` · `11px` · `10px`

### Letter-spacing

`0.04em` (2) · `.25px` (2) · `0.01em` (1) · `.1em` (1) · `.08em` (1) · `.3px` (1)

### Corner radii (most-used)

`4px` · `50%` · `10px` · `5px` · `8px` · `6px` · `50px` · `15px` · `0.5rem` · `3px`

### Shadows

- `none!important`
- `0 2px 4px rgba(0, 0, 0, .4)`
- `0 4px 15px rgba(0, 0, 0, .09)`
- `0px 0px 10px #f4eded`
- `0px 0px 10px #007bff`
- `none !important`

### Gradients

- `linear-gradient(to bottom, rgba(83, 86, 90, 1) 35%, rgba(83, 86, 90, 0.7) 100%)`
- `linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee)`
- `linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4)`
- `linear-gradient(to top, rgba(15, 15, 15, .95) 55%, rgba(15, 15, 15, 0))`
- `linear-gradient(181.32deg,#fffbf8 1.12%,#fff 98.95%)`
- `linear-gradient(135deg,#f8f7fc,#fff)`

### Breakpoints

420px · 460px · 480px · 482px · 500px · 520px · 530px · 537px · 576px · 580px · 600px · 640px · 641px · 767px · 768px · 769px · 781px · 782px · 800px · 840px · 850px · 900px · 960px · 991px · 992px · 1024px · 1160px · 1200px · 1400px
```