---
generator: clinical-terminal-brand-kit
company: "Dynamic Health IT"
domain: "dynamichealthit.com"
colors:
  primary: "#1D4ED8"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  background: "#FAFBFC"
ground:
  mode: light
  hex: "#FAFBFC"
  ink: "#000000"
  accent: "#1D4ED8"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "3px"
  button: "3px"
---

# Design System — Dynamic Health IT

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

## Ground
- **Light ground** (#FAFBFC), from Dynamic Health IT's site background #FAFBFC. Pages and panels sit on it.
- Main text: #000000 (20.27:1 on the ground).
- Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%.

## Color
- **Accent on the ground: #1D4ED8** (6.47:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #1D4ED8** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (6.7:1).
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Theme Palette Color** (`--theme-palette-color-N`): 1 `#1D4ED8` · 2 `#1E40AF` · 3 `#2D385B` · 4 `#15054A` · 5 `#E5E7EF` · 6 `#F2F5F7` · 7 `#FAFBFC` · 8 `#FFFFFF`

### Other named colors

- `--theme-button-text-hover-color`: `#FFFFFF`
- `--theme-form-text-initial-color`: `#FFFFFF`
- `--theme-form-text-focus-color`: `#FFFFFF`
- `--theme-form-field-border-initial-color`: `#FFFFFF`
- `--theme-selection-text-color`: `#FFFFFF`
- `--dot-color`: `#AAAAAA`
- `--dot-color-hover`: `#1B1B1B`
- `--stk-container-background-color`: `#40BA7B`
- `--stk-container-color`: `#FFFFFF`
- `--line-accent-bg-color`: `#000000`
- `--line-bg-color`: `#EEEEEE`
- `--stk-default-container-background-color`: `#FFFFFF`
- `--stk-block-background-color`: `#F1F1F1`
- `--stk-button-background-color`: `#008DE4`
- `--stk-button-text-color`: `#FFFFFF`
- `--stk-default-button-background-color`: `#008DE4`
- `--stk-default-button-text-color`: `#FFFFFF`
- `--stk-icon-color`: `#A6A6A6`
- `--stk-icon-shape-color`: `#DDDDDD`
- `--stk-subtitle-color`: `#39414D`
- `--stk-tab-accent-color`: `#008DE4`
- `--stk-text-color`: `#FFFFFE`
- `--stk-link-color`: `#F00069`
- `--stk-button-outline-color`: `#FFFFFE`
- `--ai-summary-border-color`: `#1D2327`
- `--ai-summary-background-color`: `#1D2327`
- `--wpforms-field-background-color`: `#FFFFFF`
- `--wpforms-field-border-color`: `#000000`
- `--wpforms-field-border-color-spare`: `#000000`
- `--wpforms-field-text-color`: `#000000`
- `--wpforms-field-menu-color`: `#FFFFFF`
- `--wpforms-label-color`: `#000000`
- `--wpforms-label-sublabel-color`: `#000000`
- `--wpforms-label-error-color`: `#D63637`
- `--wpforms-button-background-color`: `#066AAB`
- `--wpforms-button-border-color`: `#066AAB`
- `--wpforms-button-text-color`: `#FFFFFF`
- `--wpforms-page-break-color`: `#066AAB`
- `--wpforms-background-color`: `#000000`
- `--wpforms-container-border-color`: `#000000`

### Type scale (most-used sizes)

`36px` · `30px` · `25px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px`

### Letter-spacing

`.06em` (3) · `.1em` (2) · `2em` (1) · `-.02em` (1) · `.12em` (1) · `.04em` (1)

### Corner radii (most-used)

`10px` · `3px` · `4px` · `6px` · `100%` · `9999px` · `5px` · `50%` · `20px` · `3.5px`

### Shadows

- `0px 12px 18px -6px rgba(34, 56, 101, 0.04)`
- `0px 7px 27px 7px #00000027 !important`
- `0 4px 10px -2px #0003`
- `0px 7px 27px 7px #00000033 !important`
- `0px 10px 20px rgba(41, 51, 61, 0.1)`
- `0px 0px 70px rgba(0, 0, 0, 0.35)`

### Gradients

- `linear-gradient(135deg,#15054A 0%,#0c0330 100%)`
- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`
- `linear-gradient(135deg,#faaca8,#dad0ec)`
- `linear-gradient(135deg,#fafae1,#67a671)`
- `linear-gradient(135deg,#fdd79a,#004a59)`

### Breakpoints

600px · 680px · 689px · 690px · 767px · 768px · 781px · 782px · 860px · 999px · 1000px