Clinical Terminal
AboutSign in

FinThrive design system

finthrive.com

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

Corrections or removal: agent@clinicalterminal.com

FinThrive homepage

Palette

Color ramps

Neutral Dark
10
#005654
20
#005654
40
#005654
60
#005654
80
#005654
Neutral White
10
#FFFFFF
20
#FFFFFF
40
#FFFFFF
60
#FFFFFF
80
#FFFFFF

Other named colors

Type

Headings
Plus Jakarta Sans

FinThrive at a glance

Body
Plus Jakarta Sans

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

Shape & depth

Cards and panels: 14px corners · buttons and chips: 100px.

Corner radii

Shadows

Gradients

Breakpoints: 568px · 768px · 769px · 992px · 993px · 1115px · 1330px · 1441px · 1921px · 2200px · 3100px · 4500px

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: "FinThrive"
domain: "finthrive.com"
colors:
  primary: "#00E091"
  onPrimary: "#005654"
  dark: "#005654"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#005654"
  accent: "#008941"
fonts:
  heading: "Plus Jakarta Sans"
  body: "Plus Jakarta Sans"
radius:
  card: "14px"
  button: "100px"
---

# Design System — FinThrive

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

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

## Color
- **Accent on the ground: #008941** (4.51:1), adjusted from FinThrive's primary #00E091 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #00E091** for filled shapes (buttons, chips, bars), with #005654 text on it (4.91:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Plus Jakarta Sans**. Body: **Plus Jakarta Sans**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Neutral Dark** (`--neutral--dark-N`): 10 `#005654` · 20 `#005654` · 40 `#005654` · 60 `#005654` · 80 `#005654`
- **Neutral White** (`--neutral--white-N`): 10 `#FFFFFF` · 20 `#FFFFFF` · 40 `#FFFFFF` · 60 `#FFFFFF` · 80 `#FFFFFF`

### Other named colors

- `--primary`: `#00E091`
- `--primary--medium`: `#80F2C3`
- `--primary--light`: `#C0F9E1`
- `--primary--extra-light`: `#EBFBF7`
- `--primary--dark`: `#005654`
- `--secondary--medium`: `#F87A3A`
- `--secondary--light`: `#FFCA98`
- `--secondary--extra-light`: `#FFF2E5`
- `--secondary--dark`: `#663E25`
- `--tertiary--medium`: `#3356CC`
- `--tertiary--light`: `#CAD6FF`
- `--tertiary--dark`: `#13204D`
- `--accent`: `#9EFB21`
- `--neutral--black`: `#005654`
- `--neutral--dark`: `#005654`
- `--neutral--medium-dark`: `#545757`
- `--neutral--medium`: `#A8ABAB`
- `--neutral--medium-light`: `#D4D6D6`
- `--neutral--light`: `#F5F5F5`
- `--neutral--white`: `#FFFFFF`
- `--headlines`: `#005654`
- `--text`: `#005654`
- `--text-input`: `#005654`
- `--inline-links`: `#3254C8`
- `--inline-links--hover`: `#7393FF`
- `--inline-links--visited`: `#8C3EFA`
- `--menu-links`: `#005654`
- `--menu-links--hover`: `#00E091`
- `--menu-links--active`: `#005654`
- `--text--80`: `#005654`
- `--text--60`: `#005654`

### Typefaces

- Plus Jakarta Sans (`--font--headlines`) — on Google Fonts

### Type scale (most-used sizes)

`1.625rem` · `1.5rem` · `1.25rem` · `1.125rem` · `18px` · `1rem` · `16px` · `14px` · `.875rem` · `13px` · `12px` · `11px`

### Letter-spacing

`1px` (1)

### Corner radii (most-used)

`1000px` · `100px` · `8px` · `50%` · `4px` · `14px` · `25px` · `3px` · `6px` · `11px`

### Shadows

- `0 0 .3125rem rgba(0,0,0,.08),0 .3125rem .3125rem rgba(0,0,0,.09)`
- `0 0 .375rem rgba(0,0,0,.06),0 .375rem .5625rem rgba(0,0,0,.13)`
- `0 .875rem 1.875rem rgba(0,0,0,.1),0 .1875rem 1rem rgba(0,0,0,.07)`
- `0 .5625rem 1.4375rem rgba(0,0,0,.09),0 .3125rem .5rem rgba(0,0,0,.1)`
- `0 .3125rem .75rem rgba(0,0,0,.12)`
- `none!important`

### Gradients

- `linear-gradient(90deg,hsla(0,0%,100%,.01),#fff 15%,#fff 85%,hsla(0,0%,100%,.001))`
- `linear-gradient(180deg,#f2fcfa,#fff)`
- `linear-gradient(0deg,#f2fcfa,#fff)`
- `linear-gradient(90deg,#f2fcfa,#fff)`
- `linear-gradient(-90deg,#f2fcfa,#fff)`
- `linear-gradient(180deg,#fff8f2,#fff)`

### Breakpoints

568px · 768px · 769px · 992px · 993px · 1115px · 1330px · 1441px · 1921px · 2200px · 3100px · 4500px