[Design systems](/design-systems/) / iMedX

# iMedX design system

imedxrcm.com

Read from iMedX's public website by Clinical Terminal. Not reviewed by iMedX. Copy it and paste it into Claude as inspiration.

Corrections or removal: <agent@clinicalterminal.com>

![iMedX homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100093.jpg?alt=media)

## Palette

- Ground

  \#FFFFFF

  \--light-5

- Ink

  \#002B49

- Accent on the ground

  \#D74100

- Primary

  \#FF671F

  \--accent-5

- On primary

  \#000000

  \--dark-5

- Dark

  \#002B49

  \--primary-5

- Site background

  \#FFFFFF

  \--light-5

## Color ramps

Primary

5

\#002B49

10

\#002B49

20

\#002B49

30

\#002B49

40

\#002B49

50

\#002B49

60

\#002B49

70

\#002B49

80

\#002B49

90

\#002B49

Primary D

1

\#07243B

2

\#0B1D2D

3

\#192A42

4

\#121823

Primary L

1

\#38506B

2

\#68788D

3

\#99A4B2

4

\#CAD0D8

Secondary

5

\#5CB8B2

10

\#5CB8B2

20

\#5CB8B2

30

\#5CB8B2

40

\#5CB8B2

50

\#5CB8B2

60

\#5CB8B2

70

\#5CB8B2

80

\#5CB8B2

90

\#5CB8B2

Secondary D

1

\#4B918C

2

\#3A6966

3

\#2A4744

4

\#182524

Secondary L

1

\#80C6C0

2

\#A0D4D0

3

\#C0E2DF

4

\#DEEDF8

Tertiary

5

\#385E9D

10

\#385E9D

20

\#385E9D

30

\#385E9D

40

\#385E9D

50

\#385E9D

60

\#385E9D

70

\#385E9D

80

\#385E9D

90

\#385E9D

Tertiary D

1

\#314D7D

2

\#273A5D

3

\#1E283E

4

\#131720

Tertiary L

1

\#637CB0

2

\#8C9CC5

3

\#B1BBD8

4

\#D6DBEA

Accent

5

\#FF671F

10

\#FF671F

20

\#FF671F

30

\#FF671F

40

\#FF671F

50

\#FF671F

60

\#FF671F

70

\#FF671F

80

\#FF671F

90

\#FF671F

Accent D

1

\#E25C1D

2

\#C04F1B

3

\#A2451A

4

\#863B18

5

\#6A3016

6

\#532713

7

\#381D0F

8

\#211208

Accent L

1

\#FF7738

2

\#FF8B52

3

\#FF9C6B

4

\#FFAF85

5

\#FFBD99

6

\#FFCDB3

7

\#FFDFCC

8

\#FFEFE6

## 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

## Type

Headings

Inter · closest free match for -apple-system

iMedX at a glance

Body

Inter · closest free match for -apple-system

Clear, readable paragraphs for clinicians, buyers and patients alike.

- 60pxiMedX
- 45pxiMedX
- 30pxiMedX
- 28pxiMedX
- 23pxiMedX
- 20pxiMedX
- 18pxiMedX
- 16pxiMedX

## Shape & depth

Cards and panels: 4px corners · buttons and chips: 9.6px.

### Corner radii

- 4px

  used in 20 rules

- 5px

  used in 18 rules

- 3px

  used in 10 rules

- 6px

  used in 10 rules

- 100%

  used in 5 rules

- 50%

  used in 5 rules

- 2px

  used in 5 rules

- 20px

  used in 4 rules

- 10px

  used in 2 rules

- 14px

  used in 2 rules

### Shadows

- 0 0 20px 10px rgba(247, 92, 3, 1)

  used in 3 rules

- 0 0 0 1px #007cba

  used in 3 rules

- 0 0 0 0 rgba(247, 92, 3, 0.2)

  used in 2 rules

- 0 0 10px 5px rgba(247, 92, 3, 0.2)

  used in 2 rules

- 0 0 10px -2px #00000029

  used in 2 rules

- inset 0 1px 2px rgba(0,0,0,0.1)

  used in 2 rules

### Gradients

- linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent)

  used in 2 rules

- linear-gradient( 45deg, whitesmoke, whitesmoke 10px, white 10px, white 20px )

  used in 1 rule

- linear-gradient(-45deg, #dde8ff 25%, transparent 25%, transparent 50%, #dde8ff 50%, #dde8ff 75%, transparent 75%, transparent)

  used in 1 rule

- radial-gradient(circle at 50% 50%, rgba(0, 170, 255, 0.9), rgba(0, 140, 255, 0.25), transparent 80%)

  used in 1 rule

- linear-gradient(45deg,transparent 50%,gray 0)

  used in 1 rule

- linear-gradient(135deg,gray 50%,transparent 0)

  used in 1 rule

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

## Voice

Tone: professional. Energy: medium. Written for businesses.

## DESIGN.md

The file Copy design system puts on your clipboard. [Open the raw file](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100093.md?alt=media).

```
---
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
```