---
generator: clinical-terminal-brand-kit
company: "Healthtek"
domain: "healthtekus.com"
colors:
  primary: "#38BE86"
  onPrimary: "#000000"
  dark: "#121217"
  accent: "#DC3232"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#121217"
  accent: "#008854"
fonts:
  heading: "Jost"
  body: "Jost"
radius:
  card: "24px"
  button: "24px"
---

# Design System — Healthtek

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

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

## Color
- **Accent on the ground: #008854** (4.52:1), adjusted from Healthtek's primary #38BE86 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #38BE86** for filled shapes (buttons, chips, bars), with #000000 text on it (8.88:1).
- Secondary accent #DC3232: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Wndb Gray** (`--wndb-gray-N`): 50 `#F7F7F8` · 100 `#EBEBEF` · 150 `#E5E5E9` · 200 `#D1D1DB` · 300 `#A9A9BC` · 400 `#8A8AA3` · 500 `#6C6C89` · 600 `#55556D` · 700 `#3F3F50` · 800 `#1D1D22` · 900 `#121217`

### Other named colors

- `--wndb-mask-color`: `#000000`
- `--wndb-gray`: `#6C6C89`
- `--wndb-white`: `#FFFFFF`
- `--wndb--color--primary`: `#0000FF`
- `--wndb--color--secondary`: `#0000FF`

### Typefaces

- solid"] .nfd-heading-highlight__text (`--nfd-heading-border-style`)
- Poppins — on Google Fonts
- Merriweather — on Google Fonts
- Solway
- Oswald — on Google Fonts
- Mulish — on Google Fonts
- Raleway — on Google Fonts
- Jost — on Google Fonts

### Type scale (most-used sizes)

`1.25rem` · `1.125rem` · `1rem` · `.875rem` · `13px` · `.8125rem`

### Corner radii (most-used)

`999px` · `9999px` · `4px` · `15px` · `1.5rem` · `.75rem` · `100%` · `8px` · `.5rem`

### Shadows

- `rgba(149,157,165,.2) 0 8px 24px`
- `none !important`
- `6px 6px 20px rgba(0,0,0,.2)!important`

### Gradients

- `conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg)`
- `linear-gradient(180deg,transparent 25%,#000 75%)`
- `linear-gradient(180deg,transparent 50%,#000 120%)`
- `radial-gradient(circle,transparent -40%,rgba(0,0,0,.9) 58%)`
- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`

### Breakpoints

480px · 600px · 767px · 768px · 781px · 782px · 1025px · 1200px