---
generator: clinical-terminal-brand-kit
company: "Clinintell"
domain: "clinintell.com"
colors:
  primary: "#385EAB"
  onPrimary: "#FFFFFF"
  dark: "#203663"
  accent: "#203663"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#203663"
  accent: "#385EAB"
fonts:
  heading: "Poppins"
  body: "Inter"
radius:
  card: "16px"
  button: "16px"
---

# Design System — Clinintell

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

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

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

## Type
- Headlines: **Poppins**. Body: **Inter**. Both on Google Fonts.
- Clinintell's site uses Poppins / Graphik; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Neutral** (`--neutral-N`): 100 `#FFFFFF` · 200 `#F8FEFF` · 300 `#F3F5F8` · 400 `#D5D9E0` · 500 `#828B99` · 600 `#6F7F96` · 700 `#334D74` · 800 `#203663`
- **Secondary** (`--secondary-N`): 1 `#E7F2FF` · 2 `#FCF5DE` · 3 `#FFF6F7` · 4 `#F2FBF7` · 5 `#73B1FF` · 6 `#FFDC79` · 7 `#FF8DA0` · 8 `#73CFA8` · 9 `#8F73FF` · 10 `#E584F5`

### Other named colors

- `--shadow-short-card`: `#193765`
- `--main`: `#385EAB`
- `--text-gray`: `#556575`
- `--shadow-bg-interface`: `#28282B`
- `--main-green`: `#369EA8`
- `--shadow-category-button`: `#193765`
- `--get-started-bkdg`: `#EFF9FA`
- `--teal`: `#46B9C3`
- `--light-green-bkdg`: `#F8FEFF`
- `--green-dark-1`: `#2F8991`
- `--main-dark-4`: `#18294A`
- `--dark-3`: `#203663`
- `--dark-4`: `#193765`
- `--gray-700`: `#334155`
- `--gray-50`: `#F8FAFC`
- `--main-green-dark-3`: `#1F5B61`
- `--primary-light-2`: `#688ACE`

### Typefaces

- Poppins — on Google Fonts
- Graphik
- Thicccboi
- Lato — on Google Fonts
- Palatino
- Inter — on Google Fonts
- Changa One

### Type scale (most-used sizes)

`48px` · `38px` · `32px` · `30px` · `24px` · `21px` · `20px` · `18px` · `16px` · `15px` · `14px` · `12px`

### Letter-spacing

`2px` (27) · `-.03em` (2) · `.5px` (2) · `.44px` (2) · `.02em` (1) · `.8px` (1)

### Corner radii (most-used)

`1000000px` · `10px` · `3px` · `16px` · `18px` · `20px` · `100px` · `9px` · `1000px` · `999999px`

### Shadows

- `0 5px 16px #080f340f`
- `0 4px 20px #1937650a`
- `0 2px 7px #19376512`
- `0 0 #19376512`
- `1px 1px 3px #0000000d`
- `-3px 15px 15px -5px #28282b17`

### Gradients

- `linear-gradient(#dfe9f3,#fff)`
- `linear-gradient(90deg,#f3f5f8,#0e0c1500)`
- `linear-gradient(#5c5cff 40%,#74cad2 50%,#40b6c1)`
- `linear-gradient(292deg,#46b9c3,#4972c4)`
- `linear-gradient(#0000 50%,#e0f3f5 50%)`
- `linear-gradient(#e2e8f0,#fff)`

### Breakpoints

479px · 600px · 767px · 768px · 991px · 1000px · 1920px