Athelas design system

athelas.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #0E2130

  --blue--900
• Ink

  #FFFFFF
• Accent on the ground

  #FC5378
• Primary

  #FC5378
• On primary

  #000000
• Secondary accent

  #446773

  --teal--700
• Dark

  #3E4D59
• Site background

  #0E2130

  --blue--900

Color ramps

Other named colors

• --button-tertiary--text #FFFFFF
• --teal--1000 #111A21
• --teal--1050 #091418
• --teal--1100 #041014

Type

• 40pxAthelas
• 38pxAthelas
• 32pxAthelas
• 24pxAthelas
• 18pxAthelas
• 17pxAthelas
• 15pxAthelas
• 14pxAthelas

Shape & depth

Cards and panels: 3px corners · buttons and chips: 128px.

Corner radii

• 50%

  used in 4 rules
• 3px

  used in 2 rules
• 9rem

  used in 2 rules
• 1rem

  used in 2 rules
• 100%

  used in 1 rule
• 2px

  used in 1 rule
• 1.1875rem

  used in 1 rule
• 8.1rem

  used in 1 rule

Shadows

• 0 0 0 1px #0000001a,0 1px 3px #0000001a

  used in 1 rule
• 0 0 3px #3336

  used in 1 rule
• 0 0 0 2px #fff

  used in 1 rule
• 0 0 3px 1px #3898ec

  used in 1 rule
• 0 0 #0000

  used in 1 rule

Gradients

• linear-gradient(#fff 0 0)

  used in 14 rules
• linear-gradient( 350deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.28) 30%, rgba(255,255,255,.02) 50%, rgba(255,255,255,.28) 60%, rgba(255,255,255,1) 100% )

  used in 5 rules
• linear-gradient(129deg,#ffffff03 27.5%,#ffffff14)

  used in 2 rules
• linear-gradient(134deg,#ffffff03 28%,#ffffff14)

  used in 2 rules
• linear-gradient(90deg,#0000 0%,#000 40% 60%,#0000 100%)

  used in 2 rules
• linear-gradient(#000 95%,#0000 100%)

  used in 2 rules

Breakpoints: 479px · 767px · 768px · 991px · 992px · 1760px

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: "Athelas"
domain: "athelas.com"
colors:
  primary: "#FC5378"
  onPrimary: "#000000"
  dark: "#3E4D59"
  accent: "#446773"
  background: "#0E2130"
ground:
  mode: dark
  hex: "#0E2130"
  ink: "#FFFFFF"
  accent: "#FC5378"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "3px"
  button: "128px"
---

# Design System — Athelas

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

## Ground
- **Dark ground** (#0E2130), from Athelas's site background #0E2130. Pages and panels sit on it.
- Main text: #FFFFFF (16.42:1 on the ground).
- Secondary text is white at 88% / 76% / 60%; hairlines and plate borders white at 16%.

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Neutral** (`--neutral--N`): 100 `#FFFFFF` · 200 `#F8FAFB` · 250 `#F0F3F4` · 300 `#EAEDEE` · 400 `#E2E3E4` · 450 `#DDE0E1` · 500 `#93959A` · 600 `#6D6F72` · 700 `#61636B` · 800 `#4B4D53` · 900 `#2C2D32`
- **Cyan** (`--cyan--N`): 100 `#FFFFFF` · 200 `#F6FDFF` · 300 `#E7F8FD` · 400 `#B4E9F9` · 500 `#7CD8F5` · 600 `#58BEDE`
- **Scy** (`--scy--N`): 300 `#FAFEFF` · 400 `#EFF9FC` · 500 `#E2F8FF` · 600 `#B7DFEB` · 700 `#90CDE1` · 800 `#5EB8D3` · 900 `#4CA1BB`
- **Blue** (`--blue--N`): 300 `#DDE9EA` · 400 `#DAEFF7` · 500 `#C2E6F2` · 700 `#588796` · 800 `#336D80` · 900 `#0E2130`
- **Teal** (`--teal--N`): 300 `#D7EAF0` · 350 `#B6C6CD` · 400 `#A5C0C9` · 500 `#7DA5B4` · 600 `#588796` · 700 `#446773` · 800 `#2C454D` · 900 `#1B2C31` · 950 `#121F24`

### Other named colors

- `--button-tertiary--text`: `#FFFFFF`
- `--teal--1000`: `#111A21`
- `--teal--1050`: `#091418`
- `--teal--1100`: `#041014`

### Typefaces

- Selecta (`--global--font`)
- SelectaWeb

### Type scale (most-used sizes)

`40px` · `38px` · `32px` · `24px` · `18px` · `17px` · `15px` · `14px` · `.8rem` · `12px` · `10px`

### Letter-spacing

`.00375rem` (1) · `-.005em` (1) · `.00438rem` (1)

### Corner radii (most-used)

`50%` · `3px` · `9rem` · `1rem` · `100%` · `2px` · `1.1875rem` · `8.1rem`

### Shadows

- `0 0 0 1px #0000001a,0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 0 3px 1px #3898ec`
- `0 0 #0000`

### Gradients

- `linear-gradient(#fff 0 0)`
- `linear-gradient(
      350deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,.28) 30%,
  rgba(255,255,255,.02) 50%,
  rgba(255,255,255,.28) 60%,
  rgba(255,255,255,1) 100%
  )`
- `linear-gradient(129deg,#ffffff03 27.5%,#ffffff14)`
- `linear-gradient(134deg,#ffffff03 28%,#ffffff14)`
- `linear-gradient(90deg,#0000 0%,#000 40% 60%,#0000 100%)`
- `linear-gradient(#000 95%,#0000 100%)`

### Breakpoints

479px · 767px · 768px · 991px · 992px · 1760px