---
generator: clinical-terminal-brand-kit
company: "Fabric Health"
domain: "fabrichealth.com"
colors:
  primary: "#B8D4FF"
  onPrimary: "#000000"
  dark: "#002237"
  accent: "#1863DC"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#002237"
  accent: "#5E779D"
fonts:
  heading: "Archivo"
  body: "Inter"
radius:
  card: "8px"
  button: "8px"
---

# Design System — Fabric Health

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

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

## Color
- **Accent on the ground: #5E779D** (4.56:1), adjusted from Fabric Health's primary #B8D4FF so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #B8D4FF** for filled shapes (buttons, chips, bars), with #000000 text on it (13.9:1).
- Secondary accent #1863DC: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Swatch Neutral** (`--swatch--neutral-N`): 1 `#D3D7DD` · 3 `#4A4A4A` · 4 `#F3F1EF`

### Other named colors

- `--form-borders`: `#B8D4FF`
- `--swatch--lines-opacity`: `#6C798E`
- `--swatch--yellow`: `#FFC978`
- `--right-side-secondary-gradient`: `#FFF9E8`
- `--left-side-green-gradient`: `#C5FADA`
- `--beige`: `#F3F1EF`
- `--swatch--lines`: `#6C798E`
- `--swatch--white`: `#FFFFFF`
- `--swatch--black`: `#000000`
- `--swatch--primary`: `#B8D4FF`
- `--tertiary-accessible`: `#8FBA9C`
- `--left-side-secondary-gradient`: `#FFB2A1`
- `--left-side-primary-gradient`: `#B8D4FF`
- `--right-side-primary-gradient`: `#F2F2F2`
- `--right-side-green-gradient`: `#EFF0F0`
- `--swatch--quaternary`: `#002237`
- `--swatch--secondary`: `#FFB39D`
- `--swatch--tertiary`: `#59836A`
- `--swatch--black-text`: `#4A4A4A`
- `--swatch--light-blue`: `#DFE8F7`

### Typefaces

- Inter (`--font-family--body`) — on Google Fonts
- Reckless (`--font-family--titles`)

### Type scale (most-used sizes)

`2rem` · `1.5rem` · `24px` · `1.25rem` · `18px` · `1.125rem` · `1rem` · `.9375rem` · `14px` · `.875rem` · `.75rem` · `12px`

### Letter-spacing

`-6px` (3) · `-1px` (1) · `-.04em` (1)

### Corner radii (most-used)

`8px` · `.5rem` · `50%` · `1000px` · `100px` · `4px` · `240px` · `32px` · `2.25rem` · `.75px`

### Shadows

- `0 32px 24px #00000014`
- `0 0 43.914px 3.253px #00000026`
- `0 5px 12px #0000001f`
- `0 2px 15px 2px #b8d4ff`
- `0 0 0 1px #0000001a, 0 1px 3px #0000001a`
- `0 0 3px #3336`

### Gradients

- `linear-gradient(144deg, #b8d4ff, #dde7f7 38.4%, #f2f2f2 68.26%)`
- `linear-gradient(299deg, #b8d4ff, #dde7f7 38.4%, #f2f2f2 68.26%)`
- `linear-gradient(#fff9e8, #ffb2a1)`
- `linear-gradient(#f3f1ef00 7.67%, #f3f1efab 43.26%, #f3f1ef 74.51%)`
- `linear-gradient(#fff, #fff 75%, #fff0)`
- `linear-gradient(to top, #fff9e8, #ffb2a1)`

### Breakpoints

479px · 767px · 768px · 991px · 992px · 1024px · 1095px · 1100px · 1130px · 1140px · 1180px · 1250px · 1295px · 1440px · 1920px