Clinical Terminal
AboutSign in

InVita Healthcare Technologies design system

invitahealth.com

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

Corrections or removal: agent@clinicalterminal.com

InVita Healthcare Technologies homepage

Palette

Color ramps

Theme Palette Color
1
#8DC8E8
2
#1F2A44
3
#9D2235
4
#EDEDED
5
#000000
6
#FFFFFF
7
#FEFEFF
8
#FFFEFE

Other named colors

Type

Headings
Montserrat

InVita Healthcare Technologies at a glance

Body
Montserrat

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 600px · 601px · 690px · 767px · 768px · 783px · 1000px · 1225px

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: "InVita Healthcare Technologies"
domain: "invitahealth.com"
colors:
  primary: "#1D3358"
  onPrimary: "#FFFFFF"
  dark: "#3F444B"
  accent: "#8DC8E8"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#3F444B"
  accent: "#1D3358"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "3px"
  button: "3px"
---

# Design System — InVita Healthcare Technologies

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

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

## Color
- **Accent on the ground: #1D3358** (12.6:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #1D3358** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (12.6:1).
- Secondary accent #8DC8E8: 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: 3px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Theme Palette Color** (`--theme-palette-color-N`): 1 `#8DC8E8` · 2 `#1F2A44` · 3 `#9D2235` · 4 `#EDEDED` · 5 `#000000` · 6 `#FFFFFF` · 7 `#FEFEFF` · 8 `#FFFEFE`

### Other named colors

- `--theme-button-text-hover-color`: `#FFFFFF`
- `--theme-selection-text-color`: `#FFFFFF`
- `--toggle-button-border-color`: `#000000`
- `--toggle-button-background`: `#000000`

### Typefaces

- Montserrat — on Google Fonts
- star
- Comfortaa
- &#039

### Type scale (most-used sizes)

`40px` · `35px` · `30px` · `25px` · `20px` · `18px` · `16px` · `15px` · `14px` · `.875rem` · `13px` · `12px`

### Letter-spacing

`.4em` (1)

### Corner radii (most-used)

`100%` · `3px` · `2px` · `6px` · `4px` · `8px`

### Shadows

- `0px 12px 18px -6px rgba(34, 56, 101, 0.04)`
- `0 0 1px 3px #0C4DA2`
- `inset 0 0 0 1px currentColor`
- `0px 10px 20px 10px rgba(0, 0, 0, 0.35)`
- `0px 10px 25px 20px rgba(0, 0, 0, 0.2)`
- `0 0 10px 0 rgba(0,0,0,.5)`

### Gradients

- `linear-gradient(to bottom,transparent,#000)`
- `linear-gradient(0deg,rgb(222,222,222) 70%,rgb(167,167,167) 100%)`
- `linear-gradient(45deg,#fff 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%)`
- `linear-gradient(currentColor, currentColor)`
- `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)`
- `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)`

### Breakpoints

600px · 601px · 690px · 767px · 768px · 783px · 1000px · 1225px