Clinical Terminal
AboutSign in

Vestacare design system

vestacare.com

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

Corrections or removal: agent@clinicalterminal.com

Vestacare homepage

Palette

Other named colors

Type

Headings
Inter

Vestacare at a glance

Body
Inter

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 639px · 768px · 1024px

Voice

Tone: professional. Energy: medium. Written for patients and healthcare professionals.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Vestacare"
domain: "vestacare.com"
colors:
  primary: "#003087"
  onPrimary: "#FFFFFF"
  dark: "#475569"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#475569"
  accent: "#003087"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "12px"
  button: "16px"
---

# Design System — Vestacare

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--primary-color`: `#003087`
- `--secondary-color`: `#D1419C`

### Typefaces

- Inter — on Google Fonts

### Type scale (most-used sizes)

`3.5rem` · `2.5rem` · `1.5rem` · `1.375rem` · `1.25rem` · `1.125rem` · `0.95rem` · `0.875rem` · `0.8rem` · `0.75rem` · `0.7rem` · `0.65rem`

### Letter-spacing

`0.08em` (1) · `0.04em` (1) · `0.03em` (1)

### Corner radii (most-used)

`0.75rem` · `999px` · `1rem` · `0.5rem` · `1.5rem`

### Shadows

- `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important`
- `0 10px 25px rgba(0, 48, 135, 0.3)`
- `0 15px 35px rgba(0, 48, 135, 0.4)`
- `0 20px 40px -20px rgba(0, 48, 135, 0.45)`
- `0 16px 40px -24px rgba(0, 48, 135, 0.35)`

### Gradients

- `linear-gradient(to bottom, black 0%, black 55%, transparent 100%)`
- `linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #dbeafe 100%)`
- `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 50%, #fce7f3 100%)`
- `linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #f3e8ff 100%)`
- `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #e0e7ff 100%)`
- `linear-gradient(135deg, #fff1f2 0%, #ffe4e6 50%, #fff1f2 100%)`

### Breakpoints

639px · 768px · 1024px