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: agent@clinicalterminal.com
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
- 3pxused in 7 rules
- .3remused in 7 rules
- 1remused in 7 rules
- 5pxused in 7 rules
- 8pxused in 5 rules
- .2remused in 5 rules
- 6pxused in 5 rules
- 4pxused 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!importantused 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.
--- 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