---
generator: clinical-terminal-brand-kit
company: "Ingenious Med"
domain: "ingeniousmed.com"
colors:
  primary: "#CE0D2C"
  onPrimary: "#FFFFFF"
  dark: "#0F0036"
  accent: "#2F53A6"
  highlight: "#A5343D"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#0F0036"
  accent: "#CE0D2C"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "4px"
  button: "25px"
---

# Design System — Ingenious Med

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

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

## Color
- **Accent on the ground: #CE0D2C** (5.65:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #CE0D2C** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.65:1).
- Secondary accent #2F53A6: charts and a second data series only.
- Highlight #A5343D (from Ingenious Med's logo gradient): sparing emphasis, never body text.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Typefaces

- Roboto — on Google Fonts
- Montserrat — on Google Fonts
- thegem-socials
- Source Sans Pro
- UserPack
- TheGem Header
- Montserrat UltraLight

### Type scale (most-used sizes)

`48px` · `40px` · `36px` · `32px` · `27px` · `24.5px` · `24px` · `20px` · `19px` · `16px` · `14px` · `12px`

### Letter-spacing

`0.05em` (8)

### Corner radii (most-used)

`50%` · `3px` · `18px` · `6px` · `17px` · `4px` · `25px` · `2px` · `13px` · `9px`

### Shadows

- `0 0 2px 0 rgba(56, 69, 84, 0.2)`
- `0 0 20px rgba(0, 0, 0, 0.05)`
- `0px 5px 5px -5px rgb(0 0 0 / 15%) inset`
- `0px 0px 60px 0px rgba(0, 0, 0, 0.12)`
- `0px 0px 40px 0px rgba(0, 0, 0, 0.12)`
- `0px 0px 30px 0px rgba(0, 0, 0, 0.07)`

### Gradients

- `linear-gradient(#f0f3f2 12px, transparent 0)`
- `linear-gradient(#f0f3f2 100%, transparent 0)`
- `linear-gradient(#f0f3f2 20px, transparent 0)`
- `linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 80%)`

### Breakpoints

430px · 500px · 549px · 639px · 756px · 767px · 768px · 799px · 900px · 979px · 980px · 982px · 991px · 992px · 1023px · 1024px · 1199px · 1200px · 1211px · 1212px · 1213px · 1260px · 1400px · 1439px · 1600px