Clinical Terminal
AboutSign in

MedKoder, LLC design system

medkoder.com

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

Corrections or removal: agent@clinicalterminal.com

MedKoder, LLC homepage

Palette

Color ramps

Tcb Color
0
#000000
1
#011377
2
#FF7F2B
3
#414042
4
#011377
5
#FFFFFF
6
#1C3E8C
7
#3245D2
Tcb Skin Color
2
#F8F8F8
4
#101010
5
#000000
14
#E6E6E6
22
#FFFFFF
23
#011377
24
#414042
32
#FFFFFF
Tcb Social Color Style
1
#3569B4
2
#284F9B
3
#3569B4
4
#3569B4
5
#3569B4
6
#3569B4
7
#3569B4
8
#3569B4
9
#3569B4
10
#3569B4
11
#3569B4
12
#3569B4
13
#3569B4
14
#111111
15
#3569B4
16
#3569B4

Other named colors

Type

Headings
Montserrat

MedKoder, LLC at a glance

Body
Montserrat

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

Shape & depth

Cards and panels: 3px corners · buttons and chips: 0px.

Corner radii

Shadows

Gradients

Breakpoints: 300px · 500px · 740px · 767px · 768px · 774px · 782px · 940px · 1023px · 1024px · 1280px · 1366px

Voice

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

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "MedKoder, LLC"
domain: "medkoder.com"
colors:
  primary: "#007900"
  onPrimary: "#FFFFFF"
  dark: "#011377"
  accent: "#39A3D1"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#011377"
  accent: "#007900"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "3px"
  button: "0px"
---

# Design System — MedKoder, LLC

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

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

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

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

## Shape
- Cards and panels: 3px corners. Buttons and chips: 0px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Tcb Color** (`--tcb-color-N`): 0 `#000000` · 1 `#011377` · 2 `#FF7F2B` · 3 `#414042` · 4 `#011377` · 5 `#FFFFFF` · 6 `#1C3E8C` · 7 `#3245D2`
- **Tcb Skin Color** (`--tcb-skin-color-N`): 2 `#F8F8F8` · 4 `#101010` · 5 `#000000` · 14 `#E6E6E6` · 22 `#FFFFFF` · 23 `#011377` · 24 `#414042` · 32 `#FFFFFF`
- **Tcb Social Color Style** (`--tcb-social-color-style-N`): 1 `#3569B4` · 2 `#284F9B` · 3 `#3569B4` · 4 `#3569B4` · 5 `#3569B4` · 6 `#3569B4` · 7 `#3569B4` · 8 `#3569B4` · 9 `#3569B4` · 10 `#3569B4` · 11 `#3569B4` · 12 `#3569B4` · 13 `#3569B4` · 14 `#111111` · 15 `#3569B4` · 16 `#3569B4` · 17 `#181818` · 18 `#3569B4`

### Other named colors

- `--pmpro--color--accent`: `#0C3D54`
- `--pmpro--color--base`: `#FFFFFF`
- `--pmpro--color--contrast`: `#222222`
- `--pmpro--color--border`: `#777777`
- `--pmpro--color--white`: `#FFFFFF`
- `--color`: `#2EA3F2`
- `--bg-color`: `#000000`
- `--regular-price-color`: `#666666`
- `--sale_price_color`: `#666666`
- `--tcb-applied-color`: `#555555`
- `--tcb-local-color-30800`: `#3B88FD`
- `--tcb-local-color-f2bba`: `#3B88FD`
- `--tcb-local-color-trewq`: `#3B88FD`
- `--tcb-local-color-poiuy`: `#3B88FD`
- `--tcb-local-color-f83d7`: `#3B88FD`
- `--tcb-local-color-3d798`: `#3B88FD`
- `--tcb-local-color-418a6`: `#3B88FD`
- `--tcb-local-color-a941t`: `#3B88FD`
- `--tcb-local-color-1ad9d`: `#2ECC71`
- `--tcb-local-color-2dbcc`: `#88E7FD`
- `--tcb-local-color-frty6`: `#3B88FD`
- `--tcb-local-color-flktr`: `#3B88FD`
- `--tcb-local-color-ef6da`: `#1372D3`
- `--tcb-local-color-b8c9c`: `#011377`
- `--tcb-local-default-78b35`: `#0C1115`
- `--tcb-local-default-033fc`: `#2F8AE7`
- `--tcb-local-default-4ceba`: `#2F8AE7`
- `--tcb-local-default-97bd8`: `#2F8BE7`
- `--tcb-local-default-63cce`: `#2F8AE7`
- `--color-primary`: `#011377`
- `--color-text`: `#000000`
- `--color-secondary`: `#444444`
- `--color-background`: `#FFFFFF`
- `--tcb-local-color-f3785`: `#FFFFFF`
- `--tcb-local-default-4932e`: `#135DA9`
- `--tcb-local-color-76ca1`: `#1372D3`
- `--tcb-local-color-617ae`: `#FFFFFF`
- `--tcb-local-color-a740a`: `#FFFFFF`
- `--tcb-local-color-d4f6a`: `#BAC2CA`
- `--tcb-local-color-f3080`: `#0A0A0A`
- `--tcb-text-decoration-color`: `#FF7F2B`
- `--tcb-local-color-4511c`: `#1372D3`
- `--tcb-local-color-5506e`: `#011377`
- `--pmpro--color--base-2`: `#EDEDED`

### Typefaces

- Montserrat (`--tcb-typography-font-family`) — on Google Fonts
- Montserrat !important
- Nunito — on Google Fonts
- Open Sans — on Google Fonts
- $inherit
- Roboto — on Google Fonts
- inherit !important
- Tahoma

### Type scale (most-used sizes)

`40px` · `24px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `0px`

### Letter-spacing

`1px` (30) · `2px` (25) · `0.25px` (24) · `-0.25px` (4) · `3px` (3) · `-0.5px` (2)

### Corner radii (most-used)

`20px` · `6px` · `100px` · `22px` · `30px` · `2px` · `50%` · `4px` · `5px` · `8px`

### Shadows

- `none !important`
- `rgb(0,0,0) 0px 0px 6px -2px`
- `rgba(0,18,120,0.18) 0px 0px 5px 0px`
- `rgba(0,0,0,0.15) 0px 8px 12px 0px`
- `0px 8px 12px 0px rgba(0,0,0,0.15)`
- `rgba(0,0,0,0.02) 0px -15px 59px 29px,rgba(0,0,0,0.02) 0px 15px 59px 29px`

### Gradients

- `linear-gradient(rgba(0,4,28,0.2),rgba(0,4,28,0.2))`
- `linear-gradient(rgb(255,127,43),rgb(255,127,43))`
- `linear-gradient(rgb(255,255,255),rgb(255,255,255))`
- `linear-gradient(var$(--tcb-color-5),var$(--tcb-color-5))`
- `linear-gradient(var$(--tcb-color-2),var$(--tcb-color-2))`
- `linear-gradient(rgba(0,4,28,0.6),rgba(0,4,28,0.6))`

### Breakpoints

300px · 500px · 740px · 767px · 768px · 774px · 782px · 940px · 1023px · 1024px · 1280px · 1366px · 2600px