[Design systems](/design-systems/) / Owens & Minor # Owens & Minor design system owens-minor.com Read from Owens & Minor's public website by Clinical Terminal. Not reviewed by Owens & Minor. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Owens & Minor homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101525185.jpg?alt=media) ## Palette - Ground \#FFFFFF \--rttm-pop-surface - Ink \#002856 - Accent on the ground \#872434 - Primary \#872434 - On primary \#FFFFFF \--rttm-pop-surface - Secondary accent \#007BFF \--blue - Dark \#002856 - Site background \#FFFFFF \--rttm-pop-surface ## Other named colors - \--rtp-line #E7EAF3 - \--rttm-pop-surface #FFFFFF - \--rttm-pop-text #3A3F5C - \--rttm-pop-heading #0F1535 - \--rttm-pop-muted #6B7088 - \--blue #007BFF - \--indigo #6610F2 - \--purple #6F42C1 - \--pink #E83E8C - \--red #DC3545 - \--orange #FD7E14 - \--yellow #FFC107 - \--green #28A745 - \--teal #20C997 - \--cyan #17A2B8 - \--white #FFFFFF - \--gray #6C757D - \--gray-dark #343A40 - \--primary #007BFF - \--secondary #6C757D - \--success #28A745 - \--info #17A2B8 - \--warning #FFC107 - \--danger #DC3545 - \--light #F8F9FA - \--dark #343A40 - \--rtp-ink-2 #3A3F5C ## Type Headings Barlow Owens & Minor at a glance Body Barlow Clear, readable paragraphs for clinicians, buyers and patients alike. - 1.5rem · 24pxOwens & Minor - 1.25rem · 20pxOwens & Minor - 20pxOwens & Minor - 1.125rem · 18pxOwens & Minor - 1rem · 16pxOwens & Minor - 16pxOwens & Minor - .938rem · 15.008pxOwens & Minor - .875rem · 14pxOwens & Minor ## Shape & depth Cards and panels: 5px corners · buttons and chips: 5px. ### Corner radii - 50% used in 14 rules - 100% used in 11 rules - 3px used in 7 rules - .3rem used in 7 rules - 1rem used in 7 rules - 5px used in 7 rules - 8px used in 5 rules - .2rem used in 5 rules - 6px used in 5 rules - 4px used in 3 rules ### Shadows - 0 0 0 .2rem rgba(0,123,255,.25) used in 6 rules - 0 0 0 .2rem rgba(40,167,69,.25) used in 4 rules - 0 0 0 .2rem rgba(220,53,69,.25) used in 4 rules - none!important used in 3 rules - 0 0 0 .2rem rgba(0,123,255,.5) used in 3 rules - 0 0 0 .2rem rgba(108,117,125,.5) used in 3 rules ### Gradients - linear-gradient(to bottom,rgba(13,56,103,.8) 0,#002856 100%) used in 2 rules - linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) used in 1 rule - linear-gradient(0deg,#002759 0,rgba(0,39,89,0) 100%) used in 1 rule - linear-gradient(to bottom,#002856 0,rgba(0,0,0,0) 100%) used in 1 rule - radial-gradient(circle,rgba(45,50,54,.68),rgba(103,103,113,.69)) used in 1 rule - linear-gradient(.25turn,#002859 20%,rgba(0,40,89,.564706)) used in 1 rule Breakpoints: 456px · 457px · 480px · 576px · 768px · 782px · 900px · 958px · 959px · 960px · 991px · 992px ## Voice Tone: professional. Energy: low. Written for businesses. ## 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%2F101525185.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Owens & Minor" domain: "owens-minor.com" colors: primary: "#872434" onPrimary: "#FFFFFF" dark: "#002856" accent: "#007BFF" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#002856" accent: "#872434" fonts: heading: "Barlow" body: "Barlow" radius: card: "5px" button: "5px" --- # Design System — Owens & Minor > Read from Owens & Minor's public website (owens-minor.com) by Clinical Terminal. Not reviewed by Owens & Minor. > Use it as inspiration: borrow the ideas, not Owens & Minor's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Owens & Minor's site background #FFFFFF. Pages and panels sit on it. - Main text: #002856 (14.6:1 on the ground). - Secondary text is #002856 at 88% / 76% / 60%; hairlines and plate borders #002856 at 16%. ## Color - **Accent on the ground: #872434** (9:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #872434** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (9:1). - Secondary accent #007BFF: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Barlow**. Body: **Barlow**. Both on Google Fonts. ## Shape - Cards and panels: 5px corners. Buttons and chips: 5px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--rtp-line`: `#E7EAF3` - `--rttm-pop-surface`: `#FFFFFF` - `--rttm-pop-text`: `#3A3F5C` - `--rttm-pop-heading`: `#0F1535` - `--rttm-pop-muted`: `#6B7088` - `--blue`: `#007BFF` - `--indigo`: `#6610F2` - `--purple`: `#6F42C1` - `--pink`: `#E83E8C` - `--red`: `#DC3545` - `--orange`: `#FD7E14` - `--yellow`: `#FFC107` - `--green`: `#28A745` - `--teal`: `#20C997` - `--cyan`: `#17A2B8` - `--white`: `#FFFFFF` - `--gray`: `#6C757D` - `--gray-dark`: `#343A40` - `--primary`: `#007BFF` - `--secondary`: `#6C757D` - `--success`: `#28A745` - `--info`: `#17A2B8` - `--warning`: `#FFC107` - `--danger`: `#DC3545` - `--light`: `#F8F9FA` - `--dark`: `#343A40` - `--rtp-ink-2`: `#3A3F5C` ### Typefaces - Barlow (`--font-family-sans-serif`) — on Google Fonts - SFMono-Regular (`--font-family-monospace`) - icomoon - icomoon!important ### Type scale (most-used sizes) `1.5rem` · `1.25rem` · `20px` · `1.125rem` · `1rem` · `16px` · `.938rem` · `.875rem` · `14px` · `13px` · `.75rem` · `12px` ### Letter-spacing `-.2px` (5) · `.2px` (3) · `.25px` (3) · `-.1px` (2) · `-.4px` (1) · `1.17px` (1) ### Corner radii (most-used) `50%` · `100%` · `3px` · `.3rem` · `1rem` · `5px` · `8px` · `.2rem` · `6px` · `4px` ### Shadows - `0 0 0 .2rem rgba(0,123,255,.25)` - `0 0 0 .2rem rgba(40,167,69,.25)` - `0 0 0 .2rem rgba(220,53,69,.25)` - `none!important` - `0 0 0 .2rem rgba(0,123,255,.5)` - `0 0 0 .2rem rgba(108,117,125,.5)` ### Gradients - `linear-gradient(to bottom,rgba(13,56,103,.8) 0,#002856 100%)` - `linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)` - `linear-gradient(0deg,#002759 0,rgba(0,39,89,0) 100%)` - `linear-gradient(to bottom,#002856 0,rgba(0,0,0,0) 100%)` - `radial-gradient(circle,rgba(45,50,54,.68),rgba(103,103,113,.69))` - `linear-gradient(.25turn,#002859 20%,rgba(0,40,89,.564706))` ### Breakpoints 456px · 457px · 480px · 576px · 768px · 782px · 900px · 958px · 959px · 960px · 991px · 992px · 1200px ```