---
generator: clinical-terminal-brand-kit
company: "Coronis Health"
domain: "coronishealth.com"
colors:
  primary: "#00FFDA"
  onPrimary: "#021B39"
  dark: "#475467"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#475467"
  accent: "#008668"
fonts:
  heading: "Instrument Sans"
  body: "Instrument Sans"
radius:
  card: "8px"
  button: "4px"
---

# Design System — Coronis Health

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

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

## Color
- **Accent on the ground: #008668** (4.56:1), adjusted from Coronis Health's primary #00FFDA so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #00FFDA** for filled shapes (buttons, chips, bars), with #021B39 text on it (13.39:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Instrument Sans**. Body: **Instrument Sans**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--ch-color-ink`: `#021B39`
- `--ch-color-blue`: `#1049BC`
- `--ch-color-indigo`: `#27187E`
- `--ch-color-purple`: `#672AB8`
- `--ch-color-button-purple`: `#9929D4`
- `--ch-color-aqua`: `#ADFFF7`
- `--ch-color-body`: `#475467`
- `--ch-color-light-blue`: `#F0F8FF`
- `--ch-color-border`: `#B6CDF9`
- `--ch-color-white`: `#FFFFFF`

### Typefaces

- Instrument Sans (`--ch-font-body`) — on Google Fonts

### Type scale (most-used sizes)

`40px` · `30px` · `24px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px`

### Letter-spacing

`0.08em` (13) · `-0.22px` (9) · `-0.3px` (8) · `-0.24px` (8) · `-0.09px` (8) · `-0.64px` (6)

### Corner radii (most-used)

`16px` · `8px` · `4px` · `50%` · `5px` · `999px` · `100px` · `500px` · `24px` · `12px`

### Shadows

- `0 -1px 0 inset`
- `0 -2px 0 inset`
- `inset 0 0 200px hsla(0,0%,100%,.15)`
- `0 12px 30px rgb(4 42 75 / 12%)`
- `none !important`
- `0 0 0 2px rgba(153, 41, 212, 0.36)`

### Gradients

- `linear-gradient(180deg, #1049bc 0%, #672ab8 100%)`
- `linear-gradient(180deg, #9929d4, #27187e)`
- `linear-gradient(180deg, rgba(2, 27, 57, 0) 20%, rgba(2, 27, 57, 0.98) 100%)`
- `linear-gradient(90deg, #1049bc 0%, #27187e 100%)`
- `linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%)`
- `linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%)`

### Breakpoints

600px · 601px · 700px · 701px · 768px · 800px · 900px · 901px · 980px · 981px · 1024px · 1175px · 1266px · 1441px