[Design systems](/design-systems/) / Biofourmis # 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. Corrections or removal: ![Biofourmis homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101561742.jpg?alt=media) ## 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 Blue 200 \#D8EAF1 400 \#B6CDDE 600 \#3D6989 800 \#00384A Green 200 \#E0F4EE 400 \#B2DFD8 600 \#75A59C 800 \#375E57 Yellow 200 \#F9EACB 400 \#FFD795 600 \#FFBC4D 800 \#E58E00 Orange 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 ## Type Headings Archivo · closest free match for Galaxiecopernicus Biofourmis at a glance Body Archivo · closest free match for Labgrotesque Clear, readable paragraphs for clinicians, buyers and patients alike. - 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F101561742.md?alt=media). ``` --- 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 ```