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