[Design systems](/design-systems/) / HARTZ Search

# 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101567997.jpg?alt=media)

## Palette

- Ground

  \#F6F6F6

- Ink

  \#111111

- Accent on the ground

  \#0074B7

- Primary

  \#0093D8

- On primary

  \#000000

- Secondary accent

  \#6CBE45

- Dark

  \#777777

- Site background

  \#F6F6F6

## Type

Headings

Work Sans

HARTZ Search at a glance

Body

Nunito

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

- 28pxHARTZ Search
- 24pxHARTZ Search
- 20pxHARTZ Search
- 18pxHARTZ Search
- 17pxHARTZ Search
- 16pxHARTZ Search
- 15pxHARTZ Search
- 14pxHARTZ Search

## Shape & depth

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

### Corner radii

- 2px

  used in 28 rules

- 50%

  used in 25 rules

- 50px

  used in 7 rules

- 4px

  used in 5 rules

- 100%

  used in 5 rules

- 10px

  used in 5 rules

- 1px

  used in 4 rules

- 8px

  used in 3 rules

- 100px

  used in 3 rules

- 1000px

  used in 3 rules

### Shadows

- none !important

  used in 13 rules

- 0px 0px 12px rgba(51, 51, 51, 0.25)

  used in 6 rules

- 0 4px 10px -10px rgba(0, 0, 0, 0.6)

  used in 4 rules

- 0px 0px 0px 2px rgba(0, 0, 0, 0.2)

  used in 3 rules

- 0 0 25px rgba(0, 0, 0, 0.8)

  used in 2 rules

- inset 0 2px 1px rgba(0, 0, 0, 0.025)

  used in 2 rules

### Gradients

- radial-gradient(white, black)

  used in 6 rules

- linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0))

  used in 2 rules

- linear-gradient(180deg, #ffffff 75%, rgba(255, 255, 255, 0))

  used in 2 rules

- linear-gradient(to right, transparent, #000000 10%, #000000 90%, transparent)

  used in 1 rule

- linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4))

  used in 1 rule

- linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6))

  used in 1 rule

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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F101567997.md?alt=media).

```
---
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
```