---
generator: clinical-terminal-brand-kit
company: "Penelope Health"
domain: "penelope.health"
colors:
  primary: "#94877C"
  onPrimary: "#000000"
  dark: "#2B180A"
  background: "#FCF6EF"
ground:
  mode: light
  hex: "#FCF6EF"
  ink: "#2B180A"
  accent: "#7C6F65"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "12px"
---

# Design System — Penelope Health

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

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

## Color
- **Accent on the ground: #7C6F65** (4.53:1), adjusted from Penelope Health's primary #94877C so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #94877C** for filled shapes (buttons, chips, bars), with #000000 text on it (6.02:1).
- Quote every hex exactly as written above.

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

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

## Voice
- Tone: modern. Energy: high. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Other named colors

- `--token-f8dc39cc-9b31-4d20-8063-4556a3d8afa9`: `#FFFFFF`
- `--token-5a8c46ea-26d4-4fbb-9dba-c7522fca8089`: `#FFFFFF`
- `--token-10d627ba-a180-41f3-bda4-3ebdfe6da0b7`: `#FFFFFF`
- `--token-c2e2a410-6f04-4250-8cbc-525e953a716f`: `#FFFFFF`
- `--token-4931e0a3-d9c6-44e2-8ffa-6116eb7b79e4`: `#FFFFFF`
- `--token-2007957d-a074-4c0c-8a33-8d85ed1ba0fd`: `#000000`
- `--token-563917f7-788f-412e-bbb3-52a063ef4a82`: `#000000`
- `--token-4fb42c33-113c-4a31-b240-1fbb97f47fe5`: `#000000`
- `--token-5621f77f-a25c-4b6f-90f4-02bdb225a779`: `#000000`
- `--token-cd4b28e8-0a42-4b18-88ca-07b7a717f0f8`: `#000000`
- `--token-7325e44b-ac7a-4a00-af4e-3813bf106a76`: `#FFFFFF`
- `--token-63ce9049-e3bd-4cfc-8a25-11c333f1f49f`: `#FFFFFF`
- `--token-8ac726e4-b1e6-42dd-9d16-34548d7cc9e7`: `#000000`
- `--token-ee2dbcb5-2207-4058-b511-a98b4cfd1f67`: `#000000`
- `--token-e9e5222b-dbe2-4efc-b54e-482f2b30cdb4`: `#F6F0E9`
- `--token-5a264bf6-58cc-4a9e-9230-261ce81d2d64`: `#FAF6F2`
- `--token-bc869107-562b-476f-811a-e9c1fa36064b`: `#E8D3C0`
- `--token-70692756-9602-48b1-815e-aabcd56cf19e`: `#DAB697`
- `--token-9641d032-758b-4c1e-8532-ffe1e4aed94b`: `#2B180A`
- `--token-ae2c7b6e-6429-4ead-bb5d-d483942c8b3f`: `#3E2407`
- `--token-4967ffbc-0e50-4a41-9575-9f6d73465850`: `#94877C`
- `--token-012d5923-be70-43f5-860f-c428838c167d`: `#EFE7DD`
- `--token-426a0579-206e-42c2-8602-dd3b9a14feec`: `#FCF6EF`
- `--token-1d66ac54-9ce9-4bcb-833e-a74bafa90885`: `#FFFFFF`
- `--token-ecbdd01a-edff-4e12-9bf2-d3115b080836`: `#FFFFFF`

### Typefaces

- Inter — on Google Fonts
- Rosario
- Geist
- Halant
- Rosario Placeholder
- Geist Placeholder
- Inter Placeholder
- Halant Placeholder

### Type scale (most-used sizes)

`80px` · `70px` · `56px` · `50px` · `48px` · `32px` · `20px` · `18px` · `16px` · `14px` · `12px`

### Letter-spacing

`-.04em` (22) · `-.06em` (13) · `-.05em` (10) · `-.07em` (6)

### Corner radii (most-used)

`28px` · `32px`

### Gradients

- `linear-gradient(#000 50%,#000000b8 75.5085%,#0000 90%)`

### Breakpoints

809px · 810px · 1199px · 1200px