[Design systems](/design-systems/) / Finvi

# Finvi design system

finvi.com

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

Corrections or removal: <agent@clinicalterminal.com>

![Finvi homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923712.jpg?alt=media)

## Palette

- Ground

  \#F1F1F1

- Ink

  \#071D39

- Accent on the ground

  \#3C7A00

- Primary

  \#8CD024

- On primary

  \#071D39

- Dark

  \#071D39

- Site background

  \#F1F1F1

## Type

Headings

Poppins

Finvi at a glance

Body

Poppins

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

- 40pxFinvi
- 30pxFinvi
- 24.7pxFinvi
- 24pxFinvi
- 22pxFinvi
- 20pxFinvi
- 18pxFinvi
- 16pxFinvi

## Shape & depth

Cards and panels: 5px corners · buttons and chips: 23px.

### Corner radii

- 100%

  used in 3 rules

- 8px

  used in 2 rules

- 4px

  used in 1 rule

- 100px

  used in 1 rule

- 9999px

  used in 1 rule

- 6px

  used in 1 rule

### Shadows

- none !important

  used in 3 rules

- 0 0 1px 3px #99ca3c

  used in 3 rules

- 0px 4px 16px 0px rgba(0,0,0,0.3)

  used in 3 rules

- inset 0 0 0 1px currentColor

  used in 2 rules

- 0 0 4px 4px rgba(0,0,0,.05)

  used in 1 rule

- 0px 12px 16px -4px rgba(36,36,36,0.08), 0px 4px 6px -2px rgba(36,36,36,0.03)

  used in 1 rule

### Gradients

- linear-gradient(135deg,#00d084,#0693e3)

  used in 1 rule

- linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)

  used in 1 rule

- linear-gradient(135deg,#faaca8,#dad0ec)

  used in 1 rule

- linear-gradient(135deg,#fafae1,#67a671)

  used in 1 rule

- linear-gradient(135deg,#fdd79a,#004a59)

  used in 1 rule

- linear-gradient(135deg,#330968,#31cdcf)

  used in 1 rule

Breakpoints: 600px · 768px · 769px · 992px · 993px · 1024px · 1200px · 1201px

## Voice

Tone: professional. Energy: low. 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%2F100923712.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Finvi"
domain: "finvi.com"
colors:
  primary: "#8CD024"
  onPrimary: "#071D39"
  dark: "#071D39"
  background: "#F1F1F1"
ground:
  mode: light
  hex: "#F1F1F1"
  ink: "#071D39"
  accent: "#3C7A00"
fonts:
  heading: "Poppins"
  body: "Poppins"
radius:
  card: "5px"
  button: "23px"
---

# Design System — Finvi

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

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

## Color
- **Accent on the ground: #3C7A00** (4.68:1), adjusted from Finvi's primary #8CD024 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #8CD024** for filled shapes (buttons, chips, bars), with #071D39 text on it (8.97:1).
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Typefaces

- &#039
- Poppins — on Google Fonts

### Type scale (most-used sizes)

`40px` · `30px` · `24.7px` · `24px` · `22px` · `20px` · `18px` · `16px` · `15px` · `14px` · `13px` · `12px`

### Letter-spacing

`2.56px` (1)

### Corner radii (most-used)

`100%` · `8px` · `4px` · `100px` · `9999px` · `6px`

### Shadows

- `none !important`
- `0 0 1px 3px #99ca3c`
- `0px 4px 16px 0px rgba(0,0,0,0.3)`
- `inset 0 0 0 1px currentColor`
- `0 0 4px 4px rgba(0,0,0,.05)`
- `0px 12px 16px -4px rgba(36,36,36,0.08), 0px 4px 6px -2px rgba(36,36,36,0.03)`

### Gradients

- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`
- `linear-gradient(135deg,#faaca8,#dad0ec)`
- `linear-gradient(135deg,#fafae1,#67a671)`
- `linear-gradient(135deg,#fdd79a,#004a59)`
- `linear-gradient(135deg,#330968,#31cdcf)`

### Breakpoints

600px · 768px · 769px · 992px · 993px · 1024px · 1200px · 1201px
```