[Design systems](/design-systems/) / Amperos Health

# 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100087.jpg?alt=media)

## Palette

- Ground

  \#23120B

  \--color-black

- Ink

  \#FFFFFF

- Accent on the ground

  \#937C73

- Primary

  \#23120B

  \--color-black

- On primary

  \#FFFFFF

  \--color-white

- Secondary accent

  \#29130A

- Dark

  \#FCF7F4

- Site background

  \#23120B

  \--color-black

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

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

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

- 36pxAmperos Health
- 24pxAmperos Health
- 1.5rem · 24pxAmperos Health
- 1.375rem · 22pxAmperos Health
- 18pxAmperos Health
- 1.125rem · 18pxAmperos Health
- 1.0625rem · 17pxAmperos Health
- 16pxAmperos Health

## Shape & depth

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

### Corner radii

- .25rem

  used in 2 rules

- .3125rem

  used in 1 rule

- .375rem

  used in 1 rule

- 12px

  used in 1 rule

### Gradients

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

  used in 4 rules

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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100087.md?alt=media).

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