---
generator: clinical-terminal-brand-kit
company: "Luma Health"
domain: "lumahealth.io"
colors:
  primary: "#2C665E"
  onPrimary: "#FFFFFF"
  dark: "#1C1C1C"
  accent: "#FFA800"
  background: "#FFFDF7"
ground:
  mode: light
  hex: "#FFFDF7"
  ink: "#1C1C1C"
  accent: "#2C665E"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "4px"
  button: "24px"
---

# Design System — Luma Health

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

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

## Color
- **Accent on the ground: #2C665E** (6.51:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #2C665E** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (6.63:1).
- Secondary accent #FFA800: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Luma Health's site uses Freight-Text-Pro / Halyard-Display; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--color-primary`: `#FF6600`
- `--color-secondary`: `#1C1C1C`
- `--color-tertiary`: `#2C665E`
- `--color-white`: `#FFFFFF`
- `--color-black`: `#000000`
- `--color-body-bg`: `#FFFDF7`
- `--color-dark-green`: `#14322E`
- `--color-light-teal`: `#CCEAEE`
- `--color-teal`: `#DEF2F4`
- `--color-yellow`: `#FFCE71`
- `--color-orange`: `#FFD2B6`
- `--color-dark-teal`: `#7BC5CF`
- `--color-dark-yellow`: `#FFA800`
- `--color-dark-orange`: `#FF6600`
- `--color-orange-red`: `#FF4800`
- `--color-gray`: `#DFDBDB`
- `--color-primary-dark`: `#D73E00`
- `--color-primary-light`: `#FF8E28`
- `--font-color-primary`: `#1C1C1C`
- `--font-color-secondary`: `#1C1C1C`
- `--font-color-body`: `#1C1C1C`
- `--font-color-body-hover`: `#000000`
- `--font-color-body-active`: `#444444`
- `--font-color-link`: `#FF4800`
- `--font-color-h1`: `#14322E`
- `--font-color-h2`: `#1C1C1C`
- `--font-color-h2-hover`: `#000000`
- `--font-color-h2-active`: `#444444`
- `--font-color-h3`: `#1C1C1C`
- `--font-color-h4`: `#1C1C1C`
- `--font-color-h5`: `#1C1C1C`
- `--font-color-h6`: `#1C1C1C`
- `--button-primary-bg`: `#FF6600`
- `--button-primary-color`: `#1C1C1C`
- `--button-primary-bg-hover`: `#FF6600`
- `--button-primary-color-hover`: `#FF6600`
- `--button-primary-bg-active`: `#FF8E28`
- `--button-primary-border-active`: `#FF8E28`
- `--button-secondary-bg`: `#2C665E`
- `--button-secondary-color`: `#FFFFFF`
- `--button-secondary-color-hover`: `#2C665E`
- `--button-secondary-bg-active`: `#548E86`
- `--button-secondary-border-active`: `#548E86`
- `--button-tertiary-bg`: `#14322E`
- `--button-tertiary-color`: `#FFFFFF`
- `--button-tertiary-color-hover`: `#14322E`
- `--button-tertiary-bg-active`: `#3C5A56`
- `--button-tertiary-border-active`: `#3C5A56`
- `--button-outline-primary-color`: `#FF6600`
- `--button-outline-primary-bg-hover`: `#FF6600`
- `--button-outline-primary-color-hover`: `#FFFFFF`
- `--button-outline-primary-bg-active`: `#FF8E28`
- `--button-outline-primary-border-active`: `#FF8E28`
- `--button-outline-secondary-color`: `#2C665E`
- `--button-outline-secondary-bg-hover`: `#2C665E`
- `--button-outline-secondary-color-hover`: `#FFFFFF`
- `--button-outline-secondary-bg-active`: `#548E86`
- `--button-outline-secondary-border-active`: `#548E86`
- `--button-white-bg`: `#FFFFFF`
- `--button-white-color`: `#1C1C1C`
- `--button-white-color-hover`: `#FFFFFF`
- `--button-white-bg-active`: `#FFFFFF`
- `--button-white-border-active`: `#FFFFFF`
- `--button-black-bg`: `#1C1C1C`
- `--button-black-color`: `#FFFFFF`
- `--button-black-bg-hover`: `#1C1C1C`
- `--button-black-color-hover`: `#1C1C1C`
- `--button-black-bg-active`: `#444444`
- `--button-black-border-active`: `#444444`
- `--button-white-outline-color`: `#FFFFFF`
- `--button-white-outline-bg-hover`: `#FFFFFF`
- `--button-white-outline-color-hover`: `#1C1C1C`
- `--button-white-outline-bg-active`: `#FFFFFF`
- `--button-white-outline-border-active`: `#FFFFFF`
- `--button-dark-yellow-bg`: `#FFA800`
- `--button-dark-yellow-color`: `#1C1C1C`
- `--button-dark-yellow-bg-hover`: `#FFA800`
- `--button-dark-yellow-color-hover`: `#FFA800`
- `--button-dark-yellow-bg-active`: `#FFD028`
- `--button-dark-yellow-border-active`: `#FFD028`
- `--button-dark-green-outline-color`: `#14322E`
- `--button-dark-green-outline-bg-hover`: `#14322E`
- `--button-dark-green-outline-color-hover`: `#FFFFFF`
- `--button-dark-green-outline-bg-active`: `#3C5A56`
- `--button-dark-green-outline-border-active`: `#3C5A56`
- `--button-black-outline-bg`: `#1C1C1C`
- `--button-black-outline-color`: `#1C1C1C`
- `--button-black-outline-bg-hover`: `#1C1C1C`
- `--button-black-outline-color-hover`: `#FFFFFF`
- `--button-black-outline-bg-active`: `#444444`
- `--button-black-outline-border-active`: `#444444`
- `--form-title-color`: `#1C1C1C`
- `--form-label-color`: `#1C1C1C`
- `--form-help-text-color`: `#1C1C1C`
- `--form-field-color`: `#1C1C1C`
- `--form-field-bg`: `#FFFFFF`
- `--header-bg`: `#FFFFFF`
- `--nav-color`: `#1C1C1C`
- `--nav-color-hover`: `#000000`
- `--nav-color-active`: `#444444`
- `--nav-dropdown-color`: `#1C1C1C`
- `--nav-dropdown-bg`: `#FFFFFF`
- `--nav-dropdown-border-color`: `#FF6600`
- `--footer-bg`: `#FFFFFF`
- `--footer-color`: `#1C1C1C`
- `--wf-line`: `#CCEAEE`
- `--wf-overlay`: `#14322E`

### Typefaces

- halyard-display (`--font-primary`)
- freight-text-pro (`--font-secondary`)

### Type scale (most-used sizes)

`21px` · `1.167rem` · `18px` · `16px` · `1rem` · `0.875rem` · `14px` · `13px` · `12px` · `0.75rem` · `10px` · `0.583rem`

### Letter-spacing

`1.6px` (6) · `1.4px` (1)

### Corner radii (most-used)

`4px` · `3px` · `100%` · `8px` · `50%` · `48px` · `90px` · `16px` · `7px` · `60px`

### Shadows

- `0 2px 9px 0 rgba(0, 0, 0, 0.2)`
- `0 0 6px 1px rgba(92,172,183,.15)`
- `0 5.42px 16.26px 0 rgba(0,0,0,.08),0 0 16.26px 0 rgba(49,49,153,.16)`

### Gradients

- `linear-gradient(270deg,#00000080,#0000)`
- `linear-gradient(90deg,#00000080,#0000)`
- `linear-gradient(0deg,#00000080,#0000)`
- `linear-gradient(180deg,#00000080,#0000)`
- `linear-gradient(90deg,#14322E 15.43%,rgba(20,50,46,0%) 106.67%)`
- `linear-gradient(90deg,#5CACB7 15.43%,rgba(92,172,183,0%) 106.67%)`

### Breakpoints

568px · 767px · 768px · 991px · 1024px · 1025px · 1150px · 1199px · 1200px · 1280px · 1281px · 1340px · 1366px · 1380px