---
generator: clinical-terminal-brand-kit
company: "Chirok Health"
domain: "chirokhealth.com"
colors:
  primary: "#A61A2E"
  onPrimary: "#FFFFFF"
  dark: "#3F0D12"
  accent: "#F1F0CC"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#3F0D12"
  accent: "#A61A2E"
fonts:
  heading: "Lato"
  body: "Merriweather"
radius:
  card: "5px"
  button: "12px"
---

# Design System — Chirok Health

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

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

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

## Type
- Headlines: **Lato**. Body: **Merriweather**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--border-color`: `#020101`

### Typefaces

- Poppins — on Google Fonts
- Montserrat — on Google Fonts
- Lato — on Google Fonts
- Open Sans — on Google Fonts
- merriweather — on Google Fonts

### Type scale (most-used sizes)

`2.5rem` · `25px` · `24px` · `1.5rem` · `22px` · `18px` · `16px` · `1rem` · `14px` · `13px` · `12px` · `11px`

### Letter-spacing

`-1px` (2) · `-0.3px` (2) · `0.08em` (1) · `2px` (1)

### Corner radii (most-used)

`3px` · `4px` · `50%` · `5px` · `12px` · `2px` · `50px` · `100%` · `16px` · `20px`

### Shadows

- `0 0 10px rgba(0,0,0,.4)`
- `0 0 5px 0 rgb(0 0 0 / 20%)`
- `0 2px 5px rgb(60 66 87 / 5%),0 1px 1px rgb(0 0 0 / 5%),inset 0 -1px 1px rgb(0 0 0 / 12%)`
- `0 2px 5px rgba(60,66,87,.05),0 1px 1px rgba(0,0,0,.05),inset 0 -1px 1px rgba(0,0,0,.12)`
- `0 0 5px 0 rgba(0,0,0,.2)`
- `0 0 5px 0 rgba(0,0,0,.5)`

### Gradients

- `linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)`
- `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)`
- `linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)`
- `linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)`
- `linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)`
- `linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)`

### Breakpoints

380px · 450px · 480px · 575px · 576px · 600px · 640px · 767px · 768px · 960px · 991px · 992px · 1024px · 1200px