---
generator: clinical-terminal-brand-kit
company: "Net Health"
domain: "nethealth.com"
colors:
  primary: "#F9423A"
  onPrimary: "#000000"
  dark: "#212121"
  background: "#F7F7FA"
ground:
  mode: light
  hex: "#F7F7FA"
  ink: "#212121"
  accent: "#DC1D1E"
fonts:
  heading: "Newsreader"
  body: "Archivo"
radius:
  card: "11px"
  button: "100px"
---

# Design System — Net Health

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

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

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

## Type
- Headlines: **Newsreader**. Body: **Archivo**. Both on Google Fonts.
- Net Health's site uses Tiempos / Whitney; these are the closest free look-alikes.

## Shape
- Cards and panels: 11px corners. Buttons and chips: 100px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Kb Token Primitive Color Neutral** (`--kb-token--primitive--color--neutral--N`): 0 `#FFFFFF` · 50 `#F7F7FA` · 100 `#C7C9C7` · 200 `#E2E8F0` · 300 `#CBD5E0` · 500 `#333F48` · 600 `#333F48` · 700 `#333F48` · 900 `#333F48`

### Other named colors

- `--ns-btn-color`: `#333333`
- `--ns-icon-color`: `#FFFFFF`
- `--main-color`: `#F9423A`
- `--light-color`: `#FFFFFF`
- `--global-palette1`: `#F9423A`
- `--global-palette2`: `#0057B8`
- `--global-palette3`: `#333F48`
- `--global-palette4`: `#333F48`
- `--global-palette5`: `#333F48`
- `--global-palette6`: `#333F48`
- `--global-palette7`: `#C7C9C7`
- `--global-palette8`: `#F7F7FA`
- `--global-palette9`: `#FFFFFF`
- `--global-palette11`: `#13612E`
- `--global-palette12`: `#1159AF`
- `--global-palette13`: `#B82105`
- `--global-palette14`: `#F7630C`
- `--global-palette15`: `#F5A524`
- `--kb-token--primitive--color--brand--primary`: `#F9423A`
- `--kb-token--primitive--color--brand--secondary`: `#0057B8`
- `--kb-token--primitive--color--brand--accent`: `#ED8936`
- `--kb-token--primitive--color--brand--button`: `#3633E1`
- `--kb-token--primitive--color--brand--button-hover`: `#2F2FFC`
- `--kb-token--primitive--color--notice--success`: `#38A169`
- `--kb-token--primitive--color--notice--warning`: `#DD6B20`
- `--kb-token--primitive--color--notice--error`: `#E53E3E`
- `--kb-token--primitive--color--notice--info`: `#3182CE`
- `--color-purple`: `#A6093D`
- `--outlined-color`: `#707070`
- `--outlined-bg`: `#F5F2F2`
- `--global-gray-400`: `#CBD5E0`
- `--global-gray-500`: `#A0AEC0`

### Typefaces

- Whitney (`--main-font`)
- Tiempos (`--global-heading-font-family`)
- Courier 10 Pitch
- Whitney Book

### Type scale (most-used sizes)

`30px` · `28px` · `26px` · `25px` · `24px` · `22px` · `20px` · `18px` · `16px` · `14px` · `12px` · `0px`

### Letter-spacing

`1px` (18) · `1.5px` (13) · `.05em` (5) · `2px` (5) · `0.05em` (3) · `0.1em` (1)

### Corner radii (most-used)

`100px` · `3px` · `.25rem` · `14px` · `50px` · `12px` · `5px` · `9999px` · `60px` · `20px`

### Shadows

- `0px 0px 0px -7px rgba(0,0,0,0)`
- `0px 15px 25px -7px rgba(0,0,0,0.1)`
- `0px 5px 15px -7px rgba(0,0,0,.1)`
- `0px 15px 25px -7px rgba(0,0,0,.1)`
- `none !important`
- `0px 15px 15px -10px rgba(0,0,0,0.05)`

### Gradients

- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`
- `linear-gradient(135deg,#faaca8,#dad0ec)`
- `linear-gradient(135deg,#fafae1,#67a671)`
- `linear-gradient(135deg,#fdd79a,#004a59)`
- `linear-gradient(135deg,#330968,#31cdcf)`

### Breakpoints

428px · 540px · 576px · 600px · 719px · 720px · 767px · 768px · 783px · 834px · 1024px · 1025px · 1073px · 1102px · 1200px · 1520px