[Design systems](/design-systems/) / ProPeer Resources # ProPeer Resources design system propeer.com Read from ProPeer Resources's public website by Clinical Terminal. Not reviewed by ProPeer Resources. Copy it and paste it into Claude as inspiration. Corrections or removal: ![ProPeer Resources homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100073.jpg?alt=media) ## Palette - Ground \#FFFFFF \--e-global-color-c877d2f - Ink \#313D3C - Accent on the ground \#008672 - Primary \#1DA590 - On primary \#000000 - Dark \#313D3C - Site background \#FFFFFF \--e-global-color-c877d2f ## Other named colors - \--e-global-color-c877d2f #FFFFFF ## Type Headings Montserrat · closest free match for Proxima Nova ProPeer Resources at a glance Body Archivo · closest free match for Product Sans Clear, readable paragraphs for clinicians, buyers and patients alike. - 40pxProPeer Resources - 35pxProPeer Resources - 33pxProPeer Resources - 30pxProPeer Resources - 24pxProPeer Resources - 20.25pxProPeer Resources - 20pxProPeer Resources - 18pxProPeer Resources ## Shape & depth Cards and panels: 5px corners · buttons and chips: 0px. ### Corner radii - 4px used in 9 rules - 5px used in 8 rules - 50px used in 6 rules - 16px used in 5 rules - 100% used in 4 rules - 1px used in 3 rules - 35px used in 3 rules - 25px used in 3 rules - 90px used in 2 rules - 6px used in 2 rules ### Shadows - 0px 0px 30px 0px rgb(32 32 32 / 25%) used in 3 rules - 0 5px 15px rgb(0 0 0 / 50%) used in 2 rules - 0 26px 30px 0 rgb(32 32 32 / 25%) used in 2 rules - 10px 6px 15px -4px rgba(0,0,0,.19) used in 2 rules - 0px 1px 2px rgb(22 22 22 / 10%) used in 1 rule - 0 0 65px 0 rgb(0 0 0 / 8%) used in 1 rule ### Gradients - linear-gradient(109deg,#155fa0 21%,#c6d0d0) used in 4 rules - linear-gradient(171deg,#1da590,#155fa0) used in 3 rules - linear-gradient(160deg,#1da590,#155fa0) used in 3 rules - linear-gradient(130deg,#155fa0,#c6d0d0) used in 3 rules - linear-gradient(158deg,#fff 38%,#d9efff) used in 3 rules - linear-gradient(109deg,#1da590 63%,#155fa0) used in 2 rules Breakpoints: 350px · 400px · 410px · 480px · 568px · 575px · 767px · 768px · 991px · 992px · 1024px · 1090px ## 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%2F100073.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "ProPeer Resources" domain: "propeer.com" colors: primary: "#1DA590" onPrimary: "#000000" dark: "#313D3C" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#313D3C" accent: "#008672" fonts: heading: "Montserrat" body: "Archivo" radius: card: "5px" button: "0px" --- # Design System — ProPeer Resources > Read from ProPeer Resources's public website (propeer.com) by Clinical Terminal. Not reviewed by ProPeer Resources. > Use it as inspiration: borrow the ideas, not ProPeer Resources's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from ProPeer Resources's site background #FFFFFF. Pages and panels sit on it. - Main text: #313D3C (11.27:1 on the ground). - Secondary text is #313D3C at 88% / 76% / 60%; hairlines and plate borders #313D3C at 16%. ## Color - **Accent on the ground: #008672** (4.51:1), adjusted from ProPeer Resources's primary #1DA590 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #1DA590** for filled shapes (buttons, chips, bars), with #000000 text on it (6.84:1). - Quote every hex exactly as written above. ## Type - Headlines: **Montserrat**. Body: **Archivo**. Both on Google Fonts. - ProPeer Resources's site uses Proxima Nova / Product Sans; these are the closest free look-alikes. ## Shape - Cards and panels: 5px 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 ### Other named colors - `--e-global-color-c877d2f`: `#FFFFFF` ### Typefaces - Proxima Nova - Product Sans - Oswald — on Google Fonts - Roboto — on Google Fonts - Maven Pro - ProximaNova ### Type scale (most-used sizes) `40px` · `35px` · `33px` · `30px` · `24px` · `20.25px` · `20px` · `18px` · `16px` · `15.75px` · `0.875rem` · `13px` ### Letter-spacing `1.34px` (4) · `.44px` (2) · `1.62px` (2) · `2.32px` (1) ### Corner radii (most-used) `4px` · `5px` · `50px` · `16px` · `100%` · `1px` · `35px` · `25px` · `90px` · `6px` ### Shadows - `0px 0px 30px 0px rgb(32 32 32 / 25%)` - `0 5px 15px rgb(0 0 0 / 50%)` - `0 26px 30px 0 rgb(32 32 32 / 25%)` - `10px 6px 15px -4px rgba(0,0,0,.19)` - `0px 1px 2px rgb(22 22 22 / 10%)` - `0 0 65px 0 rgb(0 0 0 / 8%)` ### Gradients - `linear-gradient(109deg,#155fa0 21%,#c6d0d0)` - `linear-gradient(171deg,#1da590,#155fa0)` - `linear-gradient(160deg,#1da590,#155fa0)` - `linear-gradient(130deg,#155fa0,#c6d0d0)` - `linear-gradient(158deg,#fff 38%,#d9efff)` - `linear-gradient(109deg,#1da590 63%,#155fa0)` ### Breakpoints 350px · 400px · 410px · 480px · 568px · 575px · 767px · 768px · 991px · 992px · 1024px · 1090px · 1100px · 1160px · 1200px · 1280px · 1300px · 1366px · 1400px · 1500px · 1875px ```