---
generator: clinical-terminal-brand-kit
company: "Infectious Disease Connect"
domain: "idctelemed.com"
colors:
  primary: "#771B61"
  onPrimary: "#FFFFFF"
  dark: "#50505A"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#50505A"
  accent: "#771B61"
fonts:
  heading: "Urbanist"
  body: "Urbanist"
radius:
  card: "8px"
  button: "20px"
---

# Design System — Infectious Disease Connect

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

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

## Color
- **Accent on the ground: #771B61** (9.93:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #771B61** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (9.93:1).
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--akismet-color-mid-green`: `#357B49`
- `--akismet-color-white`: `#FFFFFF`
- `--akismet-color-light-grey`: `#F6F7F7`

### Typefaces

- Urbanist — on Google Fonts

### Type scale (most-used sizes)

`2.5rem` · `2rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `16px` · `.9rem` · `.875rem` · `.8rem` · `.75rem` · `12px`

### Letter-spacing

`.05rem` (1) · `1px` (1) · `2em` (1)

### Corner radii (most-used)

`50%` · `1.25rem` · `.75rem` · `99%` · `12px` · `.5rem` · `8px` · `1.33rem` · `9999px` · `.25rem`

### Shadows

- `0 .4px .4px rgba(0,0,0,.052),0 1.3px 1.3px rgba(0,0,0,.096),0 6px 6px rgba(0,0,0,.2)`
- `0 18px 23px rgba(80,80,90,.25)`
- `0 18px 23px rgba(241,174,75,.25)`
- `0 18px 23px rgba(60,175,171,.3)`
- `0 18px 23px rgba(75,138,152,.25)`
- `0 18px 23px rgba(90,101,134,.25)`

### Gradients

- `linear-gradient(#fff 0 0)`
- `linear-gradient(90deg,#3cafab 0,rgba(60,175,171,0) 100%)`
- `conic-gradient(#f1ae4b 0 0,#f1ae4b 0 18%,rgba(255,255,255,0) 0 18%,rgba(255,255,255,0) 0 25%,#fff 0 25%,#fff 0 43%,rgba(255,255,255,0) 0 43%,rgba(255,255,255,0) 0 50%,#3cafab 0 50%,#3cafab 0 68%,rgba(255,255,255,0) 0 68%,rgba(255,255,255,0) 0 75%,#fff 0 75%,#fff 0 93%,rgba(255,255,255,0) 0 93%,rgba(255,255,255,0) 0 100%)`
- `linear-gradient(to right,#3cafab 0,#771b61 100%)`
- `linear-gradient(to bottom,#3cafab 0,#771b61 100%)`
- `linear-gradient(90deg,#771b61 0,rgba(119,27,97,0) 100%)`

### Breakpoints

450px · 600px · 781px · 782px · 850px · 1400px