---
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