Clinical Terminal
AboutSign in

Triumphealth design system

triumphealth.com

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

Corrections or removal: agent@clinicalterminal.com

Triumphealth logo

Palette

Color ramps

Color Gray
100
#F7F7F7
200
#F1F1F1
300
#BBBBBB
400
#A5A5A5
500
#767676
600
#666666
700
#555555
800
#333333
900
#242424
Bgcolor Gray
100
#F7F7F7
200
#F7F7F7
300
#F1F1F1
400
#BBBBBB
Brdcolor Gray
200
#000000
300
#000000
400
#000000
500
#000000

Other named colors

Type

Headings
Archivo

Triumphealth at a glance

Body
Poppins

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

Shape & depth

Cards and panels: 10px corners · buttons and chips: 35px.

Corner radii

Shadows

Gradients

Breakpoints: 300px · 399px · 450px · 480px · 576px · 767px · 768px · 769px · 786px · 820px · 990px · 991px

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: "Triumphealth"
domain: "triumphealth.com"
colors:
  primary: "#00672D"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#35BEF2"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#00672D"
fonts:
  heading: "Archivo"
  body: "Poppins"
radius:
  card: "10px"
  button: "35px"
---

# Design System — Triumphealth

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

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

## Color
- **Accent on the ground: #00672D** (7.05:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #00672D** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.05:1).
- Secondary accent #35BEF2: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Gray** (`--color-gray-N`): 100 `#F7F7F7` · 200 `#F1F1F1` · 300 `#BBBBBB` · 400 `#A5A5A5` · 500 `#767676` · 600 `#666666` · 700 `#555555` · 800 `#333333` · 900 `#242424`
- **Bgcolor Gray** (`--bgcolor-gray-N`): 100 `#F7F7F7` · 200 `#F7F7F7` · 300 `#F1F1F1` · 400 `#BBBBBB`
- **Brdcolor Gray** (`--brdcolor-gray-N`): 200 `#000000` · 300 `#000000` · 400 `#000000` · 500 `#000000`

### Other named colors

- `--wd-form-brd-color`: `#000000`
- `--wd-form-brd-color-focus`: `#000000`
- `--wd-main-bgcolor`: `#FFFFFF`
- `--color-white`: `#FFFFFF`
- `--bgcolor-white`: `#FFFFFF`
- `--wd-text-color`: `#FFFFFF`
- `--wd-title-color`: `#FFFFFF`
- `--wd-entities-title-color`: `#FFFFFF`
- `--wd-entities-title-color-hover`: `#FFFFFF`
- `--wd-link-color`: `#FFFFFF`
- `--wd-link-color-hover`: `#FFFFFF`
- `--sub-menu-color`: `#838383`
- `--nav-chevron-color`: `#525252`
- `--wd-tooltip-bg`: `#000000`
- `--wd-tooltip-color`: `#FFFFFF`
- `--scrollbar-track-bg`: `#000000`
- `--scrollbar-thumb-bg`: `#000000`

### Typefaces

- Archivo — on Google Fonts
- Poppins — on Google Fonts
- Work Sans — on Google Fonts
- woodmart-font
- raty
- Archivo' !important
- Montserrat — on Google Fonts
- Tahoma

### Type scale (most-used sizes)

`40px` · `32px` · `26px` · `24px` · `22px` · `20px` · `18px` · `16px` · `1rem` · `15px` · `14px` · `12px`

### Letter-spacing

`1.2px` (1)

### Corner radii (most-used)

`10px` · `50%` · `100px` · `8px` · `1rem` · `.25rem` · `30px` · `5px` · `100%` · `40px`

### Shadows

- `0 0 0 .2rem rgba(0,123,255,.25)`
- `0px 0px 30px 0px rgba(159, 178, 192, 0.30)`
- `0px 0px 0px 0px rgba( 2, 2, 2, 0.00 )`
- `0px 0px 8px 0px #dadada`
- `0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)`
- `0 .1rem .25rem rgba(0,0,0,.1)`

### Gradients

- `linear-gradient(90deg, #1572C1 0%, #00CE5D 100%)`
- `linear-gradient(93deg, #F6DE5A -0.05%, #F62F46 99.95%)`
- `linear-gradient(92.79deg, #F6DE5A -0.05%, #F62F46 99.95%)`
- `linear-gradient(321.97deg, #9D33DB 14.61%, #1F67CD 110.77%)`
- `linear-gradient(102.52deg, #1572C1 0%, #00CE5D 100%)`
- `linear-gradient(244deg, #AEDDFC 20.08%, #53B4F5 102%)`

### Breakpoints

300px · 399px · 450px · 480px · 576px · 767px · 768px · 769px · 786px · 820px · 990px · 991px · 992px · 1024px · 1025px · 1099px · 1199px · 1200px · 1280px · 1289px · 1360px · 1366px · 1399px · 1599px · 1601px · 1899px