Clinical Terminal
AboutSign in

Alaffia Health design system

alaffiahealth.com

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

Corrections or removal: agent@clinicalterminal.com

Alaffia Health homepage

Palette

Color ramps

Opacity Neutral Darkest
5
#000000
10
#000000
15
#000000
30
#000000
50
#000000
Opacity White
5
#FFFFFF
10
#FFFFFF
15
#FFFFFF
30
#FFFFFF
50
#FFFFFF

Other named colors

Type

Headings
Archivo · closest free match for Geist

Alaffia Health at a glance

Body
Archivo · closest free match for Geist

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

Shape & depth

Cards and panels: 16px corners · buttons and chips: 160px.

Corner radii

Shadows

Gradients

Breakpoints: 479px · 767px · 768px · 991px · 992px · 1280px · 1440px · 1920px

Voice

Tone: professional. Energy: low. Written for businesses.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "Alaffia Health"
domain: "alaffiahealth.com"
colors:
  primary: "#2B64F6"
  onPrimary: "#FFFFFF"
  dark: "#00061E"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#00061E"
  accent: "#2B64F6"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "16px"
  button: "160px"
---

# Design System — Alaffia Health

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

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

## Color
- **Accent on the ground: #2B64F6** (4.93:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #2B64F6** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.93:1).
- Quote every hex exactly as written above.

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

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

## Voice
- Tone: professional. Energy: low. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Opacity Neutral Darkest** (`--opacity--neutral-darkest-N`): 5 `#000000` · 10 `#000000` · 15 `#000000` · 30 `#000000` · 50 `#000000`
- **Opacity White** (`--opacity--white-N`): 5 `#FFFFFF` · 10 `#FFFFFF` · 15 `#FFFFFF` · 30 `#FFFFFF` · 50 `#FFFFFF`

### Other named colors

- `--color-scheme-1--text`: `#00061E`
- `--colors--neutral-midnight`: `#00061E`
- `--color-scheme-1--foreground`: `#F4F2EE`
- `--colors--white`: `#FFFFFF`
- `--color-scheme-1--sapphire`: `#003DA7`
- `--color-scheme-1--aqua`: `#8FD0EC`
- `--colors--neutral-lightest`: `#EEEEEE`
- `--colors--neutral-dark`: `#444444`
- `--color-scheme-1--cobalt`: `#2A64F6`
- `--colors--neutral-darker`: `#222222`
- `--colors--neutral`: `#666666`
- `--colors--neutral-lighter`: `#CCCCCC`
- `--colors--neutral-cloud`: `#F4F4F4`
- `--button-046-color`: `#FFFFFF`
- `--button-046-color-background`: `#2B64F6`
- `--button-046-hover-color`: `#FFFFFF`
- `--button-046-hover-color-background`: `#003DA7`
- `--button-046-color-focus`: `#FFFFFF`
- `--color-scheme-1--midnight-600`: `#00061E`
- `--color-scheme-1--midnight-400`: `#233271`
- `--color-scheme-1--steel-200`: `#CAD9FF`
- `--color-scheme-1--steel-400`: `#9AAFE6`

### Typefaces

- Geist (`--font-styles--body`)
- Geist Mono (`--font-styles--eyebrow`)

### Type scale (most-used sizes)

`3rem` · `2.5rem` · `2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `1.2rem` · `1.125rem` · `1rem` · `.875rem` · `14px` · `.75rem`

### Letter-spacing

`-.02em` (8) · `.05em` (5) · `-.8px` (4) · `-.4px` (4) · `.1em` (4) · `-.5px` (2)

### Corner radii (most-used)

`100px` · `10px` · `100%` · `50%` · `1.5rem` · `1rem` · `3px` · `20px` · `1000px` · `999rem`

### Shadows

- `0 0 10px #0000001a`
- `0 0 20px #0000000d`
- `0 4px 40px #0000000a`
- `0 0 0 3px #00000040,0 0 10px #0000001a`
- `0 0 0 1px #0000001a,0 1px 3px #0000001a`
- `0 0 3px #3336`

### Gradients

- `linear-gradient(#00000080,#00000080)`
- `radial-gradient(circle,#0006,#0000)`
- `linear-gradient(#0000004d,#0000004d)`
- `linear-gradient(90deg,#0000 0%,#000 20% 80%,#0000 100%)`
- `linear-gradient(#00000078,#00000078)`
- `linear-gradient(90deg,#00061e66,#00061e 24% 76%,#00061e66)`

### Breakpoints

479px · 767px · 768px · 991px · 992px · 1280px · 1440px · 1920px