---
generator: clinical-terminal-brand-kit
company: "Greenway Health"
domain: "greenwayhealth.com"
colors:
  primary: "#30C69B"
  onPrimary: "#000000"
  dark: "#1B2538"
  accent: "#104335"
  background: "#F2EFEB"
ground:
  mode: light
  hex: "#F2EFEB"
  ink: "#1B2538"
  accent: "#007B55"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "2px"
  button: "2px"
---

# Design System — Greenway Health

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Blue** (`--color-blue-N`): 50 `#E6E7E9` · 200 `#B3B6BD` · 400 `#808690` · 600 `#4E5564` · 700 `#343D4E` · 800 `#1B2538` · 900 `#121825`
- **Color Green** (`--color-green-N`): 50 `#DCF5EE` · 500 `#30C69B` · 800 `#18654F` · 900 `#104335`
- **Color Stone** (`--color-stone-N`): 50 `#F2EFEB` · 100 `#DCD9D6` · 200 `#C6C4C1` · 400 `#9B9996` · 600 `#6F6E6C`
- **Color Gray** (`--color-gray-N`): 50 `#E8E9EA` · 100 `#D2D4D6` · 200 `#BBBEC1` · 600 `#60686E` · 950 `#131516`

### Other named colors

- `--color-system-white`: `#FFFFFF`
- `--color-white`: `#FFFFFF`
- `--color-black`: `#000000`
- `--color-pink-500`: `#E08BE8`

### Typefaces

- Inter (`--font-sans`) — on Google Fonts

### Type scale (most-used sizes)

`.8rem`

### Corner radii (most-used)

`5px` · `50%` · `.25rem`

### Shadows

- `none !important`

### Gradients

- `linear-gradient(in lab, red, red)`
- `radial-gradient(circle,#30c69b 0 52%,rgba(0,0,0,0) 58%)`
- `radial-gradient(circle,red 0 52%,rgba(0,0,0,0) 58%)`
- `linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,0))`
- `linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0))`
- `linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5))`

### Breakpoints

600px · 640px