---
generator: clinical-terminal-brand-kit
company: "SYNERGEN Health"
domain: "synergenhealth.com"
colors:
  primary: "#E14C34"
  onPrimary: "#000000"
  dark: "#0B1F4A"
  accent: "#E64B38"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#0B1F4A"
  accent: "#D33E27"
fonts:
  heading: "Raleway"
  body: "Raleway"
radius:
  card: "5px"
  button: "4px"
---

# Design System — SYNERGEN Health

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

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

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

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

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

## Voice
- Tone: professional. Energy: high. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Typefaces

- Open Sans — on Google Fonts
- icomoon
- icomoon!important
- Andale Mono
- inherit!important
- Raleway' !important

### Type scale (most-used sizes)

`34px` · `26px` · `24px` · `22px` · `20px` · `18px` · `17px` · `16px` · `14px` · `13px` · `12px` · `11px`

### Letter-spacing

`.5px` (2) · `-1px` (2) · `2px` (2) · `1.5px` (1)

### Corner radii (most-used)

`5px` · `100px` · `2px` · `10px` · `200px` · `50%` · `500px` · `4px` · `30px` · `3px`

### Shadows

- `0 -1px 0 inset`
- `0 -2px 0 inset`
- `0 -3px rgba(0,0,0,.1) inset`
- `inset 0 0 200px hsla(0,0%,100%,.15)`
- `rgba(0,0,0,.04) 0 1px 0,rgba(0,0,0,.05) 0 2px 7px,rgba(0,0,0,.06) 0 12px 22px`
- `0 40px 100px rgba(0,0,0,.15),0 25px 80px rgba(0,0,0,.1)`

### Gradients

- `linear-gradient(to right,#e64b38 0,#e64b38 100%)`
- `linear-gradient(to right,#000 0,#000 100%)`
- `linear-gradient(to right,#fff 0,#fff 100%)`
- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`
- `linear-gradient(135deg,#faaca8,#dad0ec)`

### Breakpoints

1px · 500px · 600px · 690px · 768px · 800px · 990px · 999px · 1000px · 1024px · 1175px · 1299px · 1300px · 1425px