Clinical Terminal
AboutSign in

Outro Health design system

outro.com

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

Corrections or removal: agent@clinicalterminal.com

Outro Health homepage

Palette

Color ramps

Opacity White
5
#FFFFFF
10
#FFFFFF
15
#FFFFFF
30
#FFFFFF
50
#FFFFFF
Opacity Neutral Darkest
5
#000000
10
#000000
15
#000000
30
#000000
50
#000000
Brand Colors Stone
10
#FBFBFB
20
#F8F7F6
30
#F4F3F2
60
#E9E7E4
Brand Colors Sky Blue
5
#0081AA
10
#0081AA
20
#0081AA
30
#0081AA
40
#0081AA

Other named colors

Type

Headings
Archivo · closest free match for Simula Book

Outro Health at a glance

Body
Archivo · closest free match for Mattersq

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

Shape & depth

Cards and panels: 0px corners · buttons and chips: 4px.

Corner radii

Shadows

Gradients

Breakpoints: 479px · 600px · 767px · 768px · 991px

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.

---
generator: clinical-terminal-brand-kit
company: "Outro Health"
domain: "outro.com"
colors:
  primary: "#BCFF9A"
  onPrimary: "#262E26"
  dark: "#262E26"
  accent: "#0081AA"
  background: "#F4F3F2"
ground:
  mode: light
  hex: "#F4F3F2"
  ink: "#262E26"
  accent: "#3F7B10"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "4px"
---

# Design System — Outro Health

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

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

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

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Outro Health's site uses Simula Book / Mattersq; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Opacity White** (`--opacity--white-N`): 5 `#FFFFFF` · 10 `#FFFFFF` · 15 `#FFFFFF` · 30 `#FFFFFF` · 50 `#FFFFFF`
- **Opacity Neutral Darkest** (`--opacity--neutral-darkest-N`): 5 `#000000` · 10 `#000000` · 15 `#000000` · 30 `#000000` · 50 `#000000`
- **Brand Colors Stone** (`--brand-colors--stone-N`): 10 `#FBFBFB` · 20 `#F8F7F6` · 30 `#F4F3F2` · 60 `#E9E7E4`
- **Brand Colors Sky Blue** (`--brand-colors--sky-blue-N`): 5 `#0081AA` · 10 `#0081AA` · 20 `#0081AA` · 30 `#0081AA` · 40 `#0081AA`

### Other named colors

- `--colors--white`: `#FFFFFF`
- `--colors--black`: `#000000`
- `--brand-colors--green`: `#BCFF9A`
- `--brand-colors--off-black`: `#262E26`
- `--brand-colors--sky-blue`: `#0081AA`
- `--brand-colors--light-green`: `#DAFFC7`
- `--brand-colors--light-sky-blue`: `#35A9CE`
- `--brand-colors--stone`: `#DBD6D4`
- `--brand-colors--dark-green`: `#00A16B`
- `--brand-colors--red`: `#FF786E`
- `--dark-blue`: `#016585`
- `--colors--neutral-lightest`: `#EEEEEE`
- `--colors--neutral-lighter`: `#CCCCCC`
- `--colors--neutral-light`: `#AAAAAA`
- `--colors--neutral`: `#7F8282`
- `--colors--neutral-dark`: `#444444`
- `--colors--neutral-darker`: `#222222`
- `--paper`: `#FAF6EF`
- `--paper-hover`: `#F1EADF`
- `--green`: `#CDEEA6`
- `--green-hover`: `#AEDF7C`
- `--line`: `#2E9AD0`
- `--ink`: `#262626`
- `--dot-on`: `#3FA34D`
- `--dot-off`: `#B9B2A6`
- `--ink-60`: `#262626`

### Typefaces

- Mattersq (`--font-styles--body`)
- Simula Book (`--font-styles--heading`)
- Simula

### Type scale (most-used sizes)

`2.75rem` · `2.5rem` · `2.25rem` · `2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `14px` · `.75rem`

### Letter-spacing

`-.02rem` (2) · `.01em` (2) · `.03em` (2) · `.05em` (1) · `.1em` (1)

### Corner radii (most-used)

`50%` · `3px` · `100%` · `12px`

### Shadows

- `0 0 0 1px #0000001a,0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 -2px 12px #0000001f`
- `0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.12)`

### Gradients

- `linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)`

### Breakpoints

479px · 600px · 767px · 768px · 991px