Clinical Terminal
AboutSign in

Health Data Innovations design system

hd-innovations.com

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

Corrections or removal: agent@clinicalterminal.com

Health Data Innovations homepage

Palette

Other named colors

Type

Headings
Archivo · closest free match for Stack Sans Headline

Health Data Innovations at a glance

Body
Archivo · closest free match for Stack Sans Text

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 640px · 641px · 712px · 767px · 768px · 782px · 784px · 800px · 801px · 856px · 860px · 928px

Voice

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

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Health Data Innovations"
domain: "hd-innovations.com"
colors:
  primary: "#096B69"
  onPrimary: "#FFFFFF"
  dark: "#012A29"
  accent: "#C1D831"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#012A29"
  accent: "#096B69"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "4px"
  button: "16px"
---

# Design System — Health Data Innovations

> Read from Health Data Innovations's public website (hd-innovations.com) by Clinical Terminal. Not reviewed by Health Data Innovations.
> Use it as inspiration: borrow the ideas, not Health Data Innovations's name, logo or identity.

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

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

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Health Data Innovations's site uses Stack Sans Headline / Stack Sans Text; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--page_title_border_color`: `#E2E2E2`
- `--awb-color1`: `#FFFFFF`
- `--awb-color2`: `#E0DAD4`
- `--awb-color3`: `#E0DAD4`
- `--awb-color4`: `#E0DAD4`
- `--awb-color5`: `#E0DAD4`
- `--awb-color6`: `#00FFE6`
- `--awb-color7`: `#012A29`
- `--awb-color8`: `#003D3C`
- `--awb-custom_color_4`: `#231F20`
- `--awb-custom_color_5`: `#238A84`
- `--awb-custom_color_6`: `#096B69`
- `--awb-custom_color_7`: `#D3E8E6`
- `--awb-custom_color_8`: `#C1D831`
- `--awb-custom_color_9`: `#E4ECAF`
- `--awb-custom_color_10`: `#8EA500`
- `--awb-custom_color_1`: `#238A84`
- `--awb-custom_color_2`: `#5C544F`
- `--privacy_bar_lifespan_color`: `#FFFFFF`
- `--privacy_bar_desc_color`: `#FFFFFF`
- `--timeline_bg_color`: `#FFFFFF`
- `--timeline_bg_color-not-transparent`: `#FFFFFF`
- `--danger_bg_color`: `#DB4B68`
- `--danger_accent_color`: `#DB4B68`
- `--success_bg_color`: `#12B878`
- `--success_accent_color`: `#12B878`
- `--warning_bg_color`: `#F1AE2A`
- `--warning_accent_color`: `#F1AE2A`
- `--full_width_bg_color`: `#FFFFFF`
- `--full_width_border_color`: `#E0DAD4`
- `--content_box_bg_color`: `#FFFFFF`
- `--icon_border_size`: `#FFFFFF`
- `--header_border_color`: `#E2E2E2`
- `--breadcrumbs_prefix_color`: `#FFFFFF`
- `--breadcrumbs_current_page_color`: `#FFFFFF`
- `--breadcrumbs_separator_color`: `#FFFFFF`
- `--totop_background`: `#333333`
- `--totop_icon_color`: `#FFFFFF`
- `--totop_icon_hover`: `#FFFFFF`
- `--container_scroll_nav_bg_color`: `#FFFFFF`
- `--awb-bottom-shadow-color`: `#000000`
- `--awb-caption-border-color`: `#FFFFFF`
- `--awb-bg`: `#000000`
- `--awb-active-bg`: `#000000`
- `--awb-active-border-color`: `#000000`
- `--awb-active-color`: `#65BC7B`
- `--awb-submenu-sep-color`: `#E2E2E2`
- `--awb-submenu-bg`: `#FFFFFF`
- `--awb-submenu-color`: `#212934`
- `--awb-submenu-active-bg`: `#F9F9FB`
- `--awb-submenu-active-color`: `#212934`
- `--awb-icons-color`: `#212934`
- `--awb-mobile-trigger-background-color`: `#FFFFFF`
- `--awb-mobile-trigger-color`: `#4A4E57`
- `--awb-mobile-bg`: `#FFFFFF`
- `--awb-mobile-color`: `#4A4E57`
- `--awb-mobile-active-bg`: `#F9F9FB`
- `--awb-mobile-active-color`: `#4A4E57`
- `--awb-mobile-sep-color`: `#000000`
- `--awb-flyout-active-close-color`: `#212934`
- `--awb-flyout-close-color`: `#212934`
- `--awb-inactive-color`: `#444444`
- `--awb-arrow-color`: `#FFFFFF`
- `--tag-color`: `#FFFFFF`
- `--tag-text-color-hover`: `#FFFFFF`
- `--awb-cursor-color`: `#FFFFFF`

### Typefaces

- Stack Sans Headline (`--awb-typography1-font-family`)
- Stack Sans Text (`--awb-typography3-font-family`)
- / (`--breadcrumbs_separator`)
- ellipsis (`--awb-text-overflow`)
- Chivo
- PT Sans — on Google Fonts

### Type scale (most-used sizes)

`30px` · `25px` · `24px` · `21px` · `18px` · `16px` · `1rem` · `15px` · `14px` · `13px` · `12px` · `9px`

### Letter-spacing

`-0.3px` (3) · `0.015em` (1) · `2px` (1) · `1px` (1)

### Corner radii (most-used)

`50%` · `4px` · `75px` · `15px` · `20px` · `3px` · `2px` · `16px` · `100%` · `5px`

### Shadows

- `none!important`
- `0 0 0 2px rgba(255,255,255,.1)`
- `inset 0 0 3px rgba(0,0,0,.3)`
- `0 0 50px 1px rgba(0,0,0,.22)`
- `0 0 50px 5px rgba(0,0,0,.35)`
- `0 0 50px 10px rgba(0,0,0,.55)`

### Gradients

- `linear-gradient(to right,transparent,black 15%,black 85%,transparent)`
- `linear-gradient(to top,#aad75d,#d1e990)`
- `radial-gradient(ellipse at 70% -50%,rgba(0,0,0,.5) 0,rgba(255,255,255,0) 75%)`
- `radial-gradient(ellipse at 30% -50%,rgba(0,0,0,.5) 0,rgba(255,255,255,0) 75%)`
- `linear-gradient(
            rgba(255,255,255,.70),
            rgba(255,255,255,.70)
        )`
- `linear-gradient(
            180deg,
            rgba(255,255,255,.0) 0%,
            rgba(0,255,230,.40) 50%,
            rgba(35,138,132,1) 100%
        )`

### Breakpoints

0px · 640px · 641px · 712px · 767px · 768px · 782px · 784px · 800px · 801px · 856px · 860px · 928px · 992px · 1000px · 1024px · 1025px · 1200px