---
generator: clinical-terminal-brand-kit
company: "Enzo Health"
domain: "enzo.health"
colors:
  primary: "#00272A"
  onPrimary: "#DCFF9F"
  dark: "#FFFFFF"
  accent: "#DCFF9F"
  background: "#003438"
ground:
  mode: dark
  hex: "#003438"
  ink: "#FFFFFF"
  accent: "#769DA0"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "111.18px"
---

# Design System — Enzo Health

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

## Ground
- **Dark ground** (#003438), from Enzo Health's site background #003438. Pages and panels sit on it.
- Main text: #FFFFFF (13.56:1 on the ground).
- Secondary text is white at 88% / 76% / 60%; hairlines and plate borders white at 16%.

## Color
- **Accent on the ground: #769DA0** (4.59:1), adjusted from Enzo Health's primary #00272A so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #00272A** for filled shapes (buttons, chips, bars), with #DCFF9F text on it (14.24:1).
- Secondary accent #DCFF9F: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Enzo Health's site uses sans-serif / pangramSans; these are the closest free look-alikes.

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

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

- `--y3kxgx0`: `#FFFFFF`
- `--y3kxgx1`: `#1C1C1C`
- `--y3kxgx2`: `#000000`
- `--y3kxgx3`: `#EFFAF5`
- `--y3kxgx4`: `#DDF3EE`
- `--y3kxgx5`: `#007074`
- `--y3kxgx6`: `#015A5D`
- `--y3kxgx7`: `#004A50`
- `--y3kxgx8`: `#004146`
- `--y3kxgx9`: `#003438`
- `--y3kxgxa`: `#012F33`
- `--y3kxgxb`: `#00272A`
- `--y3kxgxc`: `#5CAFB5`
- `--y3kxgxd`: `#DCFF9F`
- `--y3kxgxe`: `#E7FFBF`
- `--y3kxgxf`: `#418D93`
- `--y3kxgxg`: `#024E54`
- `--y3kxgxh`: `#FFFDF9`
- `--y3kxgxi`: `#FFFAF2`
- `--y3kxgxj`: `#FAF4E9`
- `--y3kxgxk`: `#F3EADC`
- `--y3kxgxl`: `#B6A895`
- `--y3kxgxm`: `#DBC7D6`
- `--y3kxgxn`: `#ECCEED`
- `--y3kxgxo`: `#FEE7FF`
- `--y3kxgxp`: `#FFA7EF`
- `--y3kxgxq`: `#864880`
- `--y3kxgxr`: `#6D3368`
- `--y3kxgxs`: `#592654`
- `--y3kxgxt`: `#451F41`
- `--y3kxgxv`: `#FFFFFF`
- `--y3kxgxw`: `#FE3712`
- `--y3kxgxx`: `#22C55E`
- `--y3kxgxy`: `#3B82F6`
- `--y3kxgxz`: `#000000`
- `--y3kxgx10`: `#DCFF9F`
- `--y3kxgx11`: `#024E54`
- `--y3kxgx12`: `#FFFFFF`
- `--y3kxgx13`: `#418D93`
- `--y3kxgx15`: `#007074`
- `--y3kxgx16`: `#FFA7EF`
- `--y3kxgx17`: `#FFFFFF`
- `--y3kxgx18`: `#004146`

### Typefaces

- pangramSans
- reckless
- reckless Fallback
- pangramSans Fallback

### Type scale (most-used sizes)

`130.85px` · `93.47px` · `77.83px` · `74.77px` · `33.65px` · `26.17px` · `22.43px` · `20.56px` · `20.01px` · `15.57px` · `13.34px` · `12.23px`

### Letter-spacing

`-.01em` (276) · `-.05em` (226) · `-.02em` (20) · `.12em` (8) · `-.15px` (1) · `-.09px` (1)

### Corner radii (most-used)

`50%` · `29.91px` · `17.79px` · `14.95px` · `186.93px` · `8.89px` · `26.17px` · `59.82px` · `35.58px` · `111.18px`

### Shadows

- `inset 0 .069vw #fff,0 0 .139vw .035vw #ccbdd766,0 .972vw 3.056vw -.694vw #0000001a`
- `inset 0 .267vw #fff,0 0 .533vw .133vw #ccbdd766,0 3.733vw 11.733vw -2.667vw #0000001a`
- `inset 0 1.87px #fff,0 0 3.74px .93px #ccbdd766,0 26.17px 82.25px -18.69px #0000001a`
- `0 .267vw 1.333vw #0000000a`
- `0 1.87px 9.35px #0000000a`
- `0 .069vw .347vw #0000000a`

### Gradients

- `linear-gradient(#fff 0 0)`
- `linear-gradient(#effaf5 0%,#dcff9f 100%)`
- `linear-gradient(138deg,#fdecfa -11.41%,#effaf5 18.02%,#fee7ff 34.96%,#fff 78.44%)`
- `linear-gradient(90deg,#0000,#000 50px calc(100% - 50px),#0000)`
- `linear-gradient(#ffffff1a 0%,#fff0 90.37%)`
- `linear-gradient(#fff 0%,#ffffff1a 100%)`

### Breakpoints

700px · 701px · 1025px · 1601px