---
generator: clinical-terminal-brand-kit
company: "General Medicine"
domain: "generalmedicine.co"
colors:
  primary: "#2D1AFF"
  onPrimary: "#FFFFFF"
  dark: "#1F1E1D"
  accent: "#BDA18C"
  background: "#F5F1ED"
ground:
  mode: light
  hex: "#F5F1ED"
  ink: "#1F1E1D"
  accent: "#2D1AFF"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "24px"
  button: "100px"
---

# Design System — General Medicine

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

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

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

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- General Medicine's site uses Roobert / Roobert; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Gm Gray** (`--gm-gray-N`): 0 `#F5F1ED` · 1 `#E8E5E3` · 2 `#D1D0CF` · 3 `#BFBEBD` · 4 `#878685` · 5 `#6E6D6C` · 6 `#4F4E4D` · 7 `#40403F` · 8 `#302F2F` · 9 `#1F1E1D`
- **Gm Blue** (`--gm-blue-N`): 0 `#E8EEFF` · 1 `#DBE4FF` · 2 `#B8CCFF` · 3 `#91ABFF` · 4 `#6682FF` · 5 `#4046FF` · 6 `#2D1AFF` · 7 `#2510E0` · 8 `#1A07B8` · 9 `#14068C`
- **Gm Green** (`--gm-green-N`): 0 `#EDFCF2` · 1 `#D2F9DE` · 2 `#AAF0C4` · 3 `#72E3A3` · 4 `#3ACD7E` · 5 `#16B364` · 6 `#0A9150` · 7 `#087442` · 8 `#095C37` · 9 `#084225`
- **Gm Yellow** (`--gm-yellow-N`): 0 `#FFFBED` · 1 `#FFF7D4` · 2 `#FFEBA8` · 3 `#FFDA71` · 4 `#FFBF38` · 5 `#FDA712` · 6 `#F79009` · 7 `#C56A09` · 8 `#9D530F` · 9 `#733F0F`
- **Gm Red** (`--gm-red-N`): 0 `#FEF3F2` · 1 `#FEE4E2` · 2 `#FFCDC9` · 3 `#FDAAA4` · 4 `#F97970` · 5 `#F04438` · 6 `#DE3024` · 7 `#BB241A` · 8 `#9A221A` · 9 `#75201A`

### Other named colors

- `--gm-fg-primary-white`: `#E8E5E3`
- `--gm-fg-highlight`: `#B8CCFF`
- `--gm-fg-hightlight-cont`: `#839CEF`
- `--gm-fg-primary-black`: `#1F1E1D`
- `--gm-blue`: `#2D1AFF`
- `--gm-bg-hightlight`: `#B8CCFF`
- `--gm-bg-highlight-cont`: `#2D1AFF`
- `--gm-fg-gray`: `#878685`
- `--gm-fg-tertiery`: `#6E6D6C`
- `--gm-bg-solid`: `#F5F1ED`
- `--path-blue`: `#532AF0`
- `--path-text-black`: `#110739`
- `--path-text-gray`: `#645D7B`
- `--path-border`: `#E7E5ED`
- `--path-green`: `#3AA145`
- `--path-orange`: `#F0AD2A`
- `--rx-card-gradient-end`: `#180E88`
- `--input-asterisk-color`: `#D21711`
- `--universal-search-collapsed-border-color`: `#2D1AFF`
- `--gm-gray-lighter`: `#FAF7F5`
- `--gm-shimmer-dark`: `#1B1D48`
- `--gm-shimmer-light`: `#595DC0`
- `--gm-shimmer-spinner`: `#35388C`
- `--gm-gradient-highlight-from`: `#006CF1`
- `--gm-background-bg-highlight-container`: `#2D1AFF`
- `--gm-background-bg-medication-placeholder`: `#EFD9CD`
- `--gm-background-bg-tonal`: `#2B2A2A`
- `--gm-background-bg-positive-container`: `#16B364`
- `--gm-background-bg-neutral-container`: `#FDA712`
- `--gm-background-bg-negative-container`: `#F04438`
- `--gm-i-os-ios-foreground`: `#000000`
- `--gm-i-os-ios-background`: `#FFFFFF`

### Typefaces

- __Roobert_c76322 (`--gm-font-family`)
- __Open_Sans_e680a7
- __Roobert_Fallback_c76322
- __Open_Sans_Fallback_e680a7
- Plus Jakarta Sans — on Google Fonts

### Type scale (most-used sizes)

`48px` · `36px` · `24px` · `20px` · `18px` · `16px` · `14px` · `.875rem` · `12px` · `10px` · `9.5px` · `.5rem`

### Letter-spacing

`-1.44px` (3) · `-1.92px` (3) · `-.24px` (2) · `-2.88px` (2) · `-0.36px` (2) · `-0.3px` (2)

### Corner radii (most-used)

`999px` · `24px` · `16px` · `100px` · `12px` · `3px` · `9999px` · `8px` · `861px` · `10px`

### Shadows

- `0 1px 1px 0 rgba(64,63,62,.05),0 2px 7px 0 rgba(64,63,62,.05)`
- `inset 0 2px 3px 0 rgba(0,0,0,.08)`
- `0 1px 1px rgba(64,63,62,.05),0 2px 7px rgba(64,63,62,.05)`
- `0 4px 8px rgba(0,0,0,.08)`
- `0 3px 6px rgba(0,0,0,.1)`
- `0 4px 12px rgba(0,0,0,.1)`

### Gradients

- `linear-gradient(180deg,transparent 0,rgba(0,0,0,.12) 20%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.78) 72%,#000)`
- `linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.06) 24%,hsla(0,0%,100%,.18) 52%,hsla(0,0%,100%,.32))`
- `linear-gradient(270deg,#201d2f,#000)`
- `linear-gradient(180deg,rgba(45,26,255,.05),rgba(45,26,255,0))`
- `linear-gradient(90deg,#006cf1,#2d1aff 43.75%,#321099 99%)`

### Breakpoints

767px · 768px · 900px