---
generator: clinical-terminal-brand-kit
company: "Amperos Health"
domain: "amperoshealth.com"
colors:
  primary: "#23120B"
  onPrimary: "#FFFFFF"
  dark: "#FCF7F4"
  accent: "#29130A"
  background: "#23120B"
ground:
  mode: dark
  hex: "#23120B"
  ink: "#FFFFFF"
  accent: "#937C73"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "0px"
---

# Design System — Amperos Health

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

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

## Color
- **Accent on the ground: #937C73** (4.62:1), adjusted from Amperos Health's primary #23120B so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #23120B** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (18.06:1).
- Secondary accent #29130A: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Amperos Health's site uses Reckless / Stkmiso; these are the closest free look-alikes.

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

## 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 Gray** (`--color-gray-N`): 50 `#F9FAFB` · 100 `#F3F4F6` · 500 `#6A7282` · 600 `#4A5565` · 900 `#101828`
- **Color Stone** (`--color-stone-N`): 100 `#F5F5F4` · 200 `#E7E5E4` · 500 `#79716B`

### Other named colors

- `--color-black`: `#23120B`
- `--color-white`: `#FFFFFF`
- `--color-mahogany`: `#371506`
- `--color-ash`: `#372F2C`

### Typefaces

- reckless (`--font-reckless`)
- rollerscript (`--font-rollerscript`)
- stkmiso (`--font-stkmiso`)
- reckless Fallback
- rollerscript Fallback
- stkmiso Fallback

### Type scale (most-used sizes)

`36px` · `24px` · `1.5rem` · `1.375rem` · `18px` · `1.125rem` · `1.0625rem` · `16px` · `1rem` · `15px` · `13px` · `10px`

### Letter-spacing

`-.02em` (18) · `-.005em` (14) · `-.01em` (8) · `-.05em` (3) · `.15em` (1) · `.18em` (1)

### Corner radii (most-used)

`.25rem` · `.3125rem` · `.375rem` · `12px`

### Gradients

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

### Breakpoints

320px · 478px · 640px · 768px · 928px · 1023px · 1024px · 1226px · 1280px · 1440px · 1520px · 1536px · 1680px · 1920px · 2240px · 2560px