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.

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

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

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

• 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.

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