---
generator: clinical-terminal-brand-kit
company: "Long Tail"
domain: "longtailhealth.com"
colors:
  primary: "#4F4D7E"
  onPrimary: "#FFFFFF"
  dark: "#040046"
  accent: "#146EF5"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#040046"
  accent: "#4F4D7E"
fonts:
  heading: "Archivo"
  body: "DM Sans"
radius:
  card: "16px"
  button: "300px"
---

# Design System — Long Tail

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

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

## Color
- **Accent on the ground: #4F4D7E** (7.79:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #4F4D7E** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.79:1).
- Secondary accent #146EF5: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **DM Sans**. Both on Google Fonts.
- Long Tail's site uses Syne / DM Sans; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Colors System Green** (`--colors--system--green-N`): 100 `#EEF9F5` · 200 `#E2FBEA` · 300 `#ADECBB` · 400 `#74D184`
- **Colors System Yellow** (`--colors--system--yellow-N`): 100 `#FFFAE9` · 200 `#FAEDBF` · 300 `#FBE080` · 400 `#EFC42C`
- **Colors System Red** (`--colors--system--red-N`): 100 `#FFF5F6` · 200 `#FAC6D0` · 300 `#FB93A3` · 400 `#FE566B`
- **Colors System Blue** (`--colors--system--blue-N`): 100 `#E3EFFF` · 200 `#C3DDFF` · 300 `#8DC1FF` · 400 `#64A7FF`

### Other named colors

- `--box-shadow--bs-neutral-small`: `#040046`
- `--box-shadow--bs-neutral-medium`: `#040046`
- `--box-shadow--bs-neutral-large`: `#040046`
- `--box-shadow--bs-neutral-regular`: `#040046`
- `--brand--cool`: `#F3F7F8`
- `--brand--pacific`: `#080099`
- `--brand--deep-sea`: `#040046`
- `--brand--white`: `#FFFFFF`
- `--brand--card`: `#E8EFF1`
- `--brand--mist`: `#AFC6EB`
- `--brand--coral`: `#FF760F`
- `--brand--neutral`: `#FFFAF4`
- `--brand--coral-tint`: `#FFC193`
- `--brand--starfish`: `#FF91FF`
- `--brand--warm`: `#FFF6E9`
- `--brand--deep-sea-70`: `#040046`

### Typefaces

- DM Sans (`--core--fonts--family--primary-font`) — on Google Fonts
- Syne (`--core--fonts--family--headlines`)
- Uncut Sans

### Type scale (most-used sizes)

`40px` · `38px` · `32px` · `28px` · `24px` · `21px` · `18px` · `16px` · `14px` · `13px` · `12px` · `11px`

### Letter-spacing

`-.54px` (5) · `1.4px` (4) · `.08em` (3) · `-1px` (3) · `-.5px` (3) · `-.72px` (2)

### Corner radii (most-used)

`999px` · `24px` · `16px` · `50%` · `2px` · `32px` · `12px` · `3px` · `100%` · `300px`

### Shadows

- `0 1px 3px #0400460f`
- `0 8px 24px #0400461a`
- `0 2px 4px #19213d14`
- `0 0 #0000`
- `0 0 0 1px #0000001a, 0 1px 3px #0000001a`
- `0 0 3px #3336`

### Gradients

- `linear-gradient(135deg, #ff760f 0%, #ff91ff 100%)`
- `linear-gradient(#08080899, #08080899)`
- `linear-gradient(#080808b3, #080808b3)`
- `linear-gradient(90deg, #f8f8f800, #f8f8f8 95%)`
- `linear-gradient(135deg, #8423ffb5, #ff881900)`
- `radial-gradient(circle, #fa2d9b, #ff9467 81%, #ffd231)`

### Breakpoints

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