Clinical Terminal
AboutSign in

Clarium design system

clariumhealth.com

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

Corrections or removal: agent@clinicalterminal.com

Clarium 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
Inter · closest free match for Neue Haas Grotesk

Clarium at a glance

Body
Inter · closest free match for Neue Haas Grotesk

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

Shape & depth

Cards and panels: 8px corners · buttons and chips: 999px.

Corner radii

Shadows

Gradients

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

Voice

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

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Clarium"
domain: "clariumhealth.com"
colors:
  primary: "#0C63FF"
  onPrimary: "#FFFFFF"
  dark: "#000018"
  accent: "#1463FF"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000018"
  accent: "#0C63FF"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "8px"
  button: "999px"
---

# Design System — Clarium

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

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

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

## Type
- Headlines: **Inter**. Body: **Inter**. Both on Google Fonts.
- Clarium's site uses Neue Haas Grotesk / Neue Haas Grotesk; these are the closest free look-alikes.

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

## Voice
- Tone: professional. Energy: low. Written for enterprises.
- 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

- `--colors--brand-blue`: `#0C63FF`
- `--colors--neutral-dim`: `#71717A`
- `--colors--white`: `#FFFFFF`
- `--colors--neutral-darkest`: `#000018`
- `--colors--darkest-blue`: `#00112B`
- `--colors--neutral-lightest`: `#F4F4F5`
- `--colors--cyan`: `#04A1DD`
- `--colors--neutral-lighter`: `#E4E4E7`
- `--colors--neutral`: `#626365`
- `--colors--baby-blue`: `#DBEAFE`
- `--colors--neutral-light`: `#D7D7D7`
- `--colors--neutral-dark`: `#3D4043`
- `--colors--cta-blue`: `#2563EB`
- `--colors--purple-agent`: `#4F46E5`
- `--colors--amber`: `#F59E0B`
- `--error`: `#DC2626`
- `--colors--neutral-darker`: `#27272A`
- `--colors--deep-slate`: `#0C438B`
- `--colors--mint`: `#D1FAE5`
- `--colors--green`: `#10B981`
- `--colors--deep-green`: `#022C22`
- `--colors--pale-yellow`: `#FEF3C7`
- `--colors--deep-brown`: `#451A03`

### Typefaces

- Neue Haas Grotesk (`--font-styles--body`)
- Inter (`--font-styles--links`) — on Google Fonts
- Space Grotesk — on Google Fonts
- JetBrains Mono — on Google Fonts

### Type scale (most-used sizes)

`3.75rem` · `3.5rem` · `3.25rem` · `3rem` · `2.75rem` · `2.5rem` · `2.25rem` · `1.5rem` · `1.25rem` · `.875rem` · `14px` · `.8rem`

### Letter-spacing

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

### Corner radii (most-used)

`8px` · `999px` · `12px` · `.75rem` · `.5rem` · `100%` · `4px` · `7px` · `24px` · `3px`

### Shadows

- `0 20px 101px #4f46e5cf`
- `0 0 0 1px #0000001a, 0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 32px 64px -12px #00000024`
- `2px 2px 5px #00000024`

### Gradients

- `linear-gradient(135deg, #4f46e5, #7c3aed)`
- `linear-gradient(0deg, #fff0 44%, #ffffff1f)`
- `linear-gradient(#00000080, #00000080)`
- `linear-gradient(90deg, #005aff, #8000ff)`
- `linear-gradient(#f59e0b, #dc2626)`
- `linear-gradient(#0000, #0000)`

### Breakpoints

479px · 767px · 768px · 991px