Biofourmis design system

biofourmis.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF

  --neutral--white
• Ink

  #00384A
• Accent on the ground

  #00374A
• Primary

  #00374A
• On primary

  #FFFFFF

  --neutral--white
• Secondary accent

  #3D6989

  --blue-600
• Dark

  #00384A

  --blue-800
• Site background

  #FFFFFF

  --neutral--white

Color ramps

Other named colors

• --neutral--dark-grey #757575
• --neutral--white #FFFFFF
• --neutral--light-grey #D9D9D9
• --light-grey #F5F7FA

Type

• 3.75rem · 60pxBiofourmis
• 3.125rem · 50pxBiofourmis
• 2.5rem · 40pxBiofourmis
• 1.875rem · 30pxBiofourmis
• 1.5rem · 24pxBiofourmis
• 1.25rem · 20pxBiofourmis
• 1.125rem · 18pxBiofourmis
• 1rem · 16pxBiofourmis

Shape & depth

Cards and panels: 3px corners · buttons and chips: 0px.

Corner radii

• .1875rem

  used in 15 rules
• 50%

  used in 8 rules
• 100%

  used in 7 rules
• 11px

  used in 6 rules
• 3px

  used in 5 rules
• 2px

  used in 3 rules
• 20px

  used in 2 rules
• 100px

  used in 1 rule
• 10px

  used in 1 rule
• 6px

  used in 1 rule

Shadows

• 0 4px 24px #96a3b514

  used in 4 rules
• 0 0 0 1px #0000001a, 0 1px 3px #0000001a

  used in 1 rule
• 0 0 3px #3336

  used in 1 rule
• 0 0 0 2px #fff

  used in 1 rule
• 0 0 3px 1px #3898ec

  used in 1 rule
• 0 20px 24px -4px #00000014, 0 8px 8px -4px #10182808

  used in 1 rule

Gradients

• linear-gradient(135deg, #ff744826, #ff484826 50%, #6248ff26)

  used in 1 rule
• linear-gradient(#fff, #fff)

  used in 1 rule
• linear-gradient(135deg, #ff7448, #ff4848 50%, #6248ff)

  used in 1 rule
• linear-gradient(#00000080, #00000080)

  used in 1 rule
• linear-gradient(#0006, #0006)

  used in 1 rule
• linear-gradient(#0000002e, #0000002e)

  used in 1 rule

Breakpoints: 479px · 767px · 768px · 991px · 1280px · 1440px · 1920px

Voice

Tone: professional. Energy: low. Written for patients and healthcare professionals.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Biofourmis"
domain: "biofourmis.com"
colors:
  primary: "#00374A"
  onPrimary: "#FFFFFF"
  dark: "#00384A"
  accent: "#3D6989"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#00384A"
  accent: "#00374A"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "3px"
  button: "0px"
---

# Design System — Biofourmis

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

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

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

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Biofourmis's site uses Galaxiecopernicus / Labgrotesque; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Blue** (`--blue-N`): 200 `#D8EAF1` · 400 `#B6CDDE` · 600 `#3D6989` · 800 `#00384A`
- **Green** (`--green-N`): 200 `#E0F4EE` · 400 `#B2DFD8` · 600 `#75A59C` · 800 `#375E57`
- **Yellow** (`--yellow-N`): 200 `#F9EACB` · 400 `#FFD795` · 600 `#FFBC4D` · 800 `#E58E00`
- **Orange** (`--orange-N`): 200 `#FFE8E2` · 400 `#FFC1A6` · 600 `#FB986D` · 800 `#CB390B`

### Other named colors

- `--neutral--dark-grey`: `#757575`
- `--neutral--white`: `#FFFFFF`
- `--neutral--light-grey`: `#D9D9D9`
- `--light-grey`: `#F5F7FA`

### Typefaces

- Labgrotesque
- Galaxiecopernicus
- Galaxiecopernicus book

### Type scale (most-used sizes)

`3.75rem` · `3.125rem` · `2.5rem` · `1.875rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.9375rem` · `14px` · `.875rem` · `12px`

### Letter-spacing

`2px` (8) · `1.5px` (7) · `-.3rem` (5) · `.06rem` (5) · `-1.5px` (2) · `-.2rem` (2)

### Corner radii (most-used)

`.1875rem` · `50%` · `100%` · `11px` · `3px` · `2px` · `20px` · `100px` · `10px` · `6px`

### Shadows

- `0 4px 24px #96a3b514`
- `0 0 0 1px #0000001a, 0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 0 3px 1px #3898ec`
- `0 20px 24px -4px #00000014, 0 8px 8px -4px #10182808`

### Gradients

- `linear-gradient(135deg, #ff744826, #ff484826 50%, #6248ff26)`
- `linear-gradient(#fff, #fff)`
- `linear-gradient(135deg, #ff7448, #ff4848 50%, #6248ff)`
- `linear-gradient(#00000080, #00000080)`
- `linear-gradient(#0006, #0006)`
- `linear-gradient(#0000002e, #0000002e)`

### Breakpoints

479px · 767px · 768px · 991px · 1280px · 1440px · 1920px