Clinical Terminal
AboutSign in

Protenus design system

protenus.com

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

Corrections or removal: agent@clinicalterminal.com

Protenus homepage

Palette

Other named colors

Type

Headings
Nunito Sans · closest free match for Avenir

Protenus at a glance

Body
Montserrat · closest free match for Proxima Nova

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 420px · 576px · 768px · 781px · 782px · 960px · 992px · 1200px · 1400px

Voice

Tone: professional. Energy: medium. Written for enterprises.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "Protenus"
domain: "protenus.com"
colors:
  primary: "#59CBE8"
  onPrimary: "#000000"
  dark: "#000000"
  background: "#F7F7F7"
ground:
  mode: light
  hex: "#F7F7F7"
  ink: "#000000"
  accent: "#007C98"
fonts:
  heading: "Nunito Sans"
  body: "Montserrat"
radius:
  card: "5px"
  button: "6px"
---

# Design System — Protenus

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

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

## Color
- **Accent on the ground: #007C98** (4.52:1), adjusted from Protenus's primary #59CBE8 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #59CBE8** for filled shapes (buttons, chips, bars), with #000000 text on it (11.13:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Nunito Sans**. Body: **Montserrat**. Both on Google Fonts.
- Protenus's site uses Avenir / Proxima Nova; these are the closest free look-alikes.

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

## Voice
- Tone: professional. Energy: medium. Written for enterprises.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Other named colors

- `--light-blue`: `#4CC9ED`
- `--white`: `#FFFFFF`

### Typefaces

- Avenir
- proxima nova

### Type scale (most-used sizes)

`1.5rem` · `1.4rem` · `1.25rem` · `18px` · `1.1rem` · `1rem` · `15px` · `.9rem` · `.875rem` · `14px` · `.815rem` · `.75rem`

### Letter-spacing

`4px` (2) · `2px` (2) · `3.24px` (1) · `2.21px` (1) · `2.52px` (1) · `2em` (1)

### Corner radii (most-used)

`4px` · `50%` · `6px` · `3px` · `5px` · `10px` · `9999px` · `50px` · `30px` · `45px`

### Shadows

- `0 1px 1px rgba(0,0,0,.04)`
- `7px 0 10px -10px rgba(0,0,0,.25)`
- `0 4px 28px 9px rgba(130,140,225,.07)`
- `23px 39px 47.6px 4px rgba(23,66,122,.18)`
- `8px 10px 20px 4px rgba(23,66,122,.18)!important`
- `23px 39px 47.6px 4px rgba(23,66,122,.18)!important`

### Gradients

- `radial-gradient(#212121 1px, transparent 1px)`
- `radial-gradient(50% 50% at 50% 50%,#96e2ff 0,transparent 100%)`
- `radial-gradient(ellipse 100% 50% at 100% 50%,#96e2ff 0,transparent 100%)`
- `linear-gradient(123deg, #B5121B 0%, #B5121B 5%, #FFFFFF 5%, #FFFFFF 100%)`
- `linear-gradient(123deg, #B5121B 0%, #B5121B 5%, #F7F7F7 5%, #F7F7F7 100%)`
- `linear-gradient(123deg, #F7F7F7 0%, #F7F7F7 95%, #B5121B 95%, #B5121B 100%)`

### Breakpoints

420px · 576px · 768px · 781px · 782px · 960px · 992px · 1200px · 1400px