[Design systems](/design-systems/) / Greenway Health

# Greenway Health design system

greenwayhealth.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#F2EFEB

  \--color-stone-50

- Ink

  \#1B2538

- Accent on the ground

  \#007B55

- Primary

  \#30C69B

  \--color-green-500

- On primary

  \#000000

  \--color-black

- Secondary accent

  \#104335

  \--color-green-900

- Dark

  \#1B2538

  \--color-blue-800

- Site background

  \#F2EFEB

  \--color-stone-50

## Color ramps

Color Blue

50

\#E6E7E9

200

\#B3B6BD

400

\#808690

600

\#4E5564

700

\#343D4E

800

\#1B2538

900

\#121825

Color Green

50

\#DCF5EE

500

\#30C69B

800

\#18654F

900

\#104335

Color Stone

50

\#F2EFEB

100

\#DCD9D6

200

\#C6C4C1

400

\#9B9996

600

\#6F6E6C

Color Gray

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

## Type

Headings

Inter

Greenway Health at a glance

Body

Inter

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

- .8rem · 12.8pxGreenway Health

## Shape & depth

Cards and panels: 2px corners · buttons and chips: 2px.

### Corner radii

- 5px

  used in 1 rule

- 50%

  used in 1 rule

- .25rem

  used in 1 rule

### Shadows

- none !important

  used in 1 rule

### Gradients

- linear-gradient(in lab, red, red)

  used in 3 rules

- radial-gradient(circle,#30c69b 0 52%,rgba(0,0,0,0) 58%)

  used in 1 rule

- radial-gradient(circle,red 0 52%,rgba(0,0,0,0) 58%)

  used in 1 rule

- linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,0))

  used in 1 rule

- linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0))

  used in 1 rule

- linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5))

  used in 1 rule

Breakpoints: 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%2F100013.md?alt=media).

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