---
generator: clinical-terminal-brand-kit
company: "iMedX"
domain: "imedxrcm.com"
colors:
  primary: "#FF671F"
  onPrimary: "#000000"
  dark: "#002B49"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#002B49"
  accent: "#D74100"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "4px"
  button: "9.6px"
---

# Design System — iMedX

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

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

## Color
- **Accent on the ground: #D74100** (4.52:1), adjusted from iMedX's primary #FF671F so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #FF671F** for filled shapes (buttons, chips, bars), with #000000 text on it (7.21:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Inter**. Body: **Inter**. Both on Google Fonts.
- iMedX's site uses -apple-system / -apple-system; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Primary** (`--primary-N`): 5 `#002B49` · 10 `#002B49` · 20 `#002B49` · 30 `#002B49` · 40 `#002B49` · 50 `#002B49` · 60 `#002B49` · 70 `#002B49` · 80 `#002B49` · 90 `#002B49`
- **Primary D** (`--primary-d-N`): 1 `#07243B` · 2 `#0B1D2D` · 3 `#192A42` · 4 `#121823`
- **Primary L** (`--primary-l-N`): 1 `#38506B` · 2 `#68788D` · 3 `#99A4B2` · 4 `#CAD0D8`
- **Secondary** (`--secondary-N`): 5 `#5CB8B2` · 10 `#5CB8B2` · 20 `#5CB8B2` · 30 `#5CB8B2` · 40 `#5CB8B2` · 50 `#5CB8B2` · 60 `#5CB8B2` · 70 `#5CB8B2` · 80 `#5CB8B2` · 90 `#5CB8B2`
- **Secondary D** (`--secondary-d-N`): 1 `#4B918C` · 2 `#3A6966` · 3 `#2A4744` · 4 `#182524`
- **Secondary L** (`--secondary-l-N`): 1 `#80C6C0` · 2 `#A0D4D0` · 3 `#C0E2DF` · 4 `#DEEDF8`
- **Tertiary** (`--tertiary-N`): 5 `#385E9D` · 10 `#385E9D` · 20 `#385E9D` · 30 `#385E9D` · 40 `#385E9D` · 50 `#385E9D` · 60 `#385E9D` · 70 `#385E9D` · 80 `#385E9D` · 90 `#385E9D`
- **Tertiary D** (`--tertiary-d-N`): 1 `#314D7D` · 2 `#273A5D` · 3 `#1E283E` · 4 `#131720`
- **Tertiary L** (`--tertiary-l-N`): 1 `#637CB0` · 2 `#8C9CC5` · 3 `#B1BBD8` · 4 `#D6DBEA`
- **Accent** (`--accent-N`): 5 `#FF671F` · 10 `#FF671F` · 20 `#FF671F` · 30 `#FF671F` · 40 `#FF671F` · 50 `#FF671F` · 60 `#FF671F` · 70 `#FF671F` · 80 `#FF671F` · 90 `#FF671F`
- **Accent D** (`--accent-d-N`): 1 `#E25C1D` · 2 `#C04F1B` · 3 `#A2451A` · 4 `#863B18` · 5 `#6A3016` · 6 `#532713` · 7 `#381D0F` · 8 `#211208`
- **Accent L** (`--accent-l-N`): 1 `#FF7738` · 2 `#FF8B52` · 3 `#FF9C6B` · 4 `#FFAF85` · 5 `#FFBD99` · 6 `#FFCDB3` · 7 `#FFDFCC` · 8 `#FFEFE6`
- **Base** (`--base-N`): 5 `#161616` · 10 `#161616` · 20 `#161616` · 30 `#161616` · 40 `#161616` · 50 `#161616` · 60 `#161616` · 70 `#161616` · 80 `#161616` · 90 `#161616`
- **Base D** (`--base-d-N`): 1 `#121212` · 2 `#0F0F0F` · 3 `#0A0A0A` · 4 `#050505`
- **Base L** (`--base-l-N`): 1 `#3D3D3D` · 2 `#696969` · 3 `#999999` · 4 `#C9C9C9`
- **Light** (`--light-N`): 5 `#FFFFFF` · 10 `#FFFFFF` · 20 `#FFFFFF` · 30 `#FFFFFF` · 40 `#FFFFFF` · 50 `#FFFFFF` · 60 `#FFFFFF` · 70 `#FFFFFF` · 80 `#FFFFFF` · 90 `#FFFFFF`
- **Dark** (`--dark-N`): 5 `#000000` · 10 `#000000` · 20 `#000000` · 30 `#000000` · 40 `#000000` · 50 `#000000` · 60 `#000000` · 70 `#000000` · 80 `#000000` · 90 `#000000`

### Other named colors

- `--cc-bg`: `#FFFFFF`
- `--cc-primary-color`: `#2C2F31`
- `--cc-secondary-color`: `#5E6266`
- `--cc-btn-primary-bg`: `#000000`
- `--cc-btn-primary-color`: `#FFFFFF`
- `--cc-btn-primary-hover-bg`: `#000000`
- `--cc-btn-primary-hover-color`: `#FFFFFF`
- `--cc-btn-secondary-bg`: `#EAEAEA`
- `--cc-btn-secondary-hover-bg`: `#D4DAE0`
- `--cc-btn-secondary-hover-color`: `#000000`
- `--cc-btn-secondary-hover-border-color`: `#D4DAE0`
- `--cc-separator-border-color`: `#F0F4F7`
- `--cc-toggle-on-bg`: `#35C36B`
- `--cc-toggle-off-bg`: `#000000`
- `--cc-toggle-on-knob-bg`: `#FFFFFF`
- `--cc-toggle-readonly-bg`: `#D5DEE2`
- `--cc-toggle-readonly-knob-bg`: `#FFFFFF`
- `--cc-cookie-category-block-bg`: `#F0F4F7`
- `--cc-cookie-category-block-border`: `#F0F4F7`
- `--cc-cookie-category-block-hover-bg`: `#E9EFF4`
- `--cc-cookie-category-block-hover-border`: `#E9EFF4`
- `--cc-cookie-category-expanded-block-hover-bg`: `#DEE4E9`
- `--cc-overlay-bg`: `#000000`
- `--cc-footer-border-color`: `#E4EAED`
- `--bricks-color-primary`: `#FFD64F`
- `--bricks-color-secondary`: `#FC5778`
- `--bricks-text-dark`: `#212121`
- `--bricks-text-medium`: `#616161`
- `--bricks-text-light`: `#9E9E9E`
- `--bricks-text-info`: `#00B0F4`
- `--bricks-text-success`: `#11B76B`
- `--bricks-text-warning`: `#FFA100`
- `--bricks-text-danger`: `#FA4362`
- `--bricks-bg-info`: `#E5F3FF`
- `--bricks-bg-success`: `#E6F6ED`
- `--bricks-bg-warning`: `#FFF2D7`
- `--bricks-bg-danger`: `#FFE6EC`
- `--bricks-bg-dark`: `#263238`
- `--bricks-bg-light`: `#F5F6F7`
- `--bricks-border-color`: `#DDDEDF`
- `--bricks-tooltip-bg`: `#23282D`
- `--bricks-tooltip-text`: `#EAECEF`
- `--x-header-search-autocomplete`: `#FFFFFF`
- `--primary`: `#002B49`
- `--tertiary`: `#385E9D`
- `--accent`: `#FF671F`
- `--base`: `#161616`
- `--bg-body`: `#E6E6E6`
- `--bg-surface`: `#FFFFFF`
- `--light`: `#FFFFFF`
- `--dark`: `#000000`
- `--bricks-color-ofoagu`: `#F3F3F3`
- `--bricks-color-qoxaro`: `#464646`
- `--bricks-color-fckpaa`: `#00304A`
- `--bricks-color-tuswpd`: `#707070`
- `--bricks-color-gdkeig`: `#F3F3F3`
- `--bricks-color-mckrvt`: `#00304A`
- `--bricks-color-zhqkre`: `#E0E0E0`
- `--bricks-color-tndndo`: `#000000`
- `--bricks-color-nzfoli`: `#FFFFFF`
- `--bricks-color-elgisc`: `#000000`

### Typefaces

- Source Sans Pro

### Type scale (most-used sizes)

`60px` · `45px` · `30px` · `28px` · `23px` · `20px` · `18px` · `16px` · `15px` · `14px` · `13px` · `12px`

### Letter-spacing

`.5px` (4) · `.4px` (1) · `1px` (1) · `.25px` (1) · `0.9px` (1) · `0.6px` (1)

### Corner radii (most-used)

`4px` · `5px` · `3px` · `6px` · `100%` · `50%` · `2px` · `20px` · `10px` · `14px`

### Shadows

- `0 0 20px 10px rgba(247, 92, 3, 1)`
- `0 0 0 1px #007cba`
- `0 0 0 0 rgba(247, 92, 3, 0.2)`
- `0 0 10px 5px rgba(247, 92, 3, 0.2)`
- `0 0 10px -2px #00000029`
- `inset 0 1px 2px rgba(0,0,0,0.1)`

### Gradients

- `linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent)`
- `linear-gradient(
      45deg,
      whitesmoke,
      whitesmoke 10px,
      white 10px,
      white 20px
    )`
- `linear-gradient(-45deg, #dde8ff 25%, transparent 25%, transparent 50%, #dde8ff 50%, #dde8ff 75%, transparent 75%, transparent)`
- `radial-gradient(circle at 50% 50%, rgba(0, 170, 255, 0.9), rgba(0, 140, 255, 0.25), transparent 80%)`
- `linear-gradient(45deg,transparent 50%,gray 0)`
- `linear-gradient(135deg,gray 50%,transparent 0)`

### Breakpoints

423px · 478px · 767px · 768px · 830px · 991px · 992px · 1067px · 1320px