Clinical Terminal
AboutSign in

Amperos Health design system

amperoshealth.com

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

Corrections or removal: agent@clinicalterminal.com

Amperos Health homepage

Palette

Color ramps

Color Gray
50
#F9FAFB
100
#F3F4F6
500
#6A7282
600
#4A5565
900
#101828
Color Stone
100
#F5F5F4
200
#E7E5E4
500
#79716B

Other named colors

Type

Headings
Archivo · closest free match for Reckless

Amperos Health at a glance

Body
Archivo · closest free match for Stkmiso

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

Shape & depth

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

Corner radii

Gradients

Breakpoints: 320px · 478px · 640px · 768px · 928px · 1023px · 1024px · 1226px · 1280px · 1440px · 1520px · 1536px

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: "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