Clinical Terminal
AboutSign in

HARTZ Search design system

hartzsearch.com

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

Corrections or removal: agent@clinicalterminal.com

HARTZ Search homepage

Palette

Type

Headings
Work Sans

HARTZ Search at a glance

Body
Nunito

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 339px · 480px · 569px · 570px · 600px · 768px · 781px · 782px · 783px · 800px · 900px · 959px

Voice

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

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "HARTZ Search"
domain: "hartzsearch.com"
colors:
  primary: "#0093D8"
  onPrimary: "#000000"
  dark: "#777777"
  accent: "#6CBE45"
  background: "#F6F6F6"
ground:
  mode: light
  hex: "#F6F6F6"
  ink: "#111111"
  accent: "#0074B7"
fonts:
  heading: "Work Sans"
  body: "Nunito"
radius:
  card: "3px"
  button: "140px"
---

# Design System — HARTZ Search

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

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

## Color
- **Accent on the ground: #0074B7** (4.65:1), adjusted from HARTZ Search's primary #0093D8 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #0093D8** for filled shapes (buttons, chips, bars), with #000000 text on it (6.17:1).
- Secondary accent #6CBE45: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Work Sans**. Body: **Nunito**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Typefaces

- Nunito — on Google Fonts
- inherit !important
- Work Sans — on Google Fonts
- Nunito !important
- Work Sans' !important

### Type scale (most-used sizes)

`28px` · `24px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` · `10px`

### Letter-spacing

`.05em` (3) · `0.1em` (2)

### Corner radii (most-used)

`2px` · `50%` · `50px` · `4px` · `100%` · `10px` · `1px` · `8px` · `100px` · `1000px`

### Shadows

- `none !important`
- `0px 0px 12px rgba(51, 51, 51, 0.25)`
- `0 4px 10px -10px rgba(0, 0, 0, 0.6)`
- `0px 0px 0px 2px rgba(0, 0, 0, 0.2)`
- `0 0 25px rgba(0, 0, 0, 0.8)`
- `inset 0 2px 1px rgba(0, 0, 0, 0.025)`

### Gradients

- `radial-gradient(white, black)`
- `linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0))`
- `linear-gradient(180deg, #ffffff 75%, rgba(255, 255, 255, 0))`
- `linear-gradient(to right, transparent, #000000 10%, #000000 90%, transparent)`
- `linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4))`
- `linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6))`

### Breakpoints

339px · 480px · 569px · 570px · 600px · 768px · 781px · 782px · 783px · 800px · 900px · 959px · 960px · 969px · 989px · 1024px · 1499px · 1500px · 1699px · 1700px