Omnicell design system
omnicell.com
Read from Omnicell's public website by Clinical Terminal. Not reviewed by Omnicell. Copy it and paste it into Claude as inspiration.
Corrections or removal: agent@clinicalterminal.com
Palette
- Ground#FFFFFF--color-background
- Ink#000000
- Accent on the ground#008927
- Primary#45B554
- On primary#000000--color-text
- Secondary accent#46B555--color-primary
- Dark#000000--color-text
- Site background#FFFFFF--color-background
Other named colors
- --color-primary #46B555
- --color-secondary #13801C
- --color-text #000000
- --color-background #FFFFFF
- --button-text-color #FFFFFF
- --accordion-icon-color #746AE8
- --accordion-header-color #014003
- --accordion-open-divider-color #96E697
- --star-color #FFFFFF
- --star-background #000000
Type
Headings
Archivo · closest free match for Unitext
Omnicell at a glance
Body
Archivo · closest free match for Unitext
Clear, readable paragraphs for clinicians, buyers and patients alike.
- 3.75rem · 60pxOmnicell
- 3rem · 48pxOmnicell
- 2.5rem · 40pxOmnicell
- 30pxOmnicell
- 1.875rem · 30pxOmnicell
- 1.5rem · 24pxOmnicell
- 1.25rem · 20pxOmnicell
- 1.125rem · 18pxOmnicell
Shape & depth
Cards and panels: 10px corners · buttons and chips: 46px.
Corner radii
- 10pxused in 24 rules
- 50%used in 8 rules
- 46pxused in 6 rules
- 3pxused in 5 rules
- 100%used in 3 rules
- 5pxused in 2 rules
- .75remused in 1 rule
- 100pxused in 1 rule
- 999pxused in 1 rule
Shadows
- #fff 0 0 0 2px,#46b555 0 0 0 4pxused in 9 rules
- #46b555 0 0 0 1px,#46b555 0 0 0 2pxused in 4 rules
- #000 0 0 0 2px,#fff 0 0 0 4pxused in 4 rules
- none !importantused in 2 rules
- #000 0 0 0 1px,#46b555 0 0 0 2pxused in 2 rules
- #fff 0 0 0 1pxused in 2 rules
Gradients
- linear-gradient(#F0F0F0, #ECEAEA)used in 1 rule
Breakpoints: 440px · 600px · 640px · 767px · 768px · 800px · 1024px · 1025px · 1200px · 1280px · 1600px
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.
--- generator: clinical-terminal-brand-kit company: "Omnicell" domain: "omnicell.com" colors: primary: "#45B554" onPrimary: "#000000" dark: "#000000" accent: "#46B555" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000000" accent: "#008927" fonts: heading: "Archivo" body: "Archivo" radius: card: "10px" button: "46px" --- # Design System — Omnicell > Read from Omnicell's public website (omnicell.com) by Clinical Terminal. Not reviewed by Omnicell. > Use it as inspiration: borrow the ideas, not Omnicell's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Omnicell's site background #FFFFFF. Pages and panels sit on it. - Main text: #000000 (21:1 on the ground). - Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%. ## Color - **Accent on the ground: #008927** (4.56:1), adjusted from Omnicell's primary #45B554 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #45B554** for filled shapes (buttons, chips, bars), with #000000 text on it (7.99:1). - Secondary accent #46B555: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Omnicell's site uses Unitext / Unitext; these are the closest free look-alikes. ## Shape - Cards and panels: 10px corners. Buttons and chips: 46px. ## 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 - `--color-primary`: `#46B555` - `--color-secondary`: `#13801C` - `--color-text`: `#000000` - `--color-background`: `#FFFFFF` - `--button-text-color`: `#FFFFFF` - `--accordion-icon-color`: `#746AE8` - `--accordion-header-color`: `#014003` - `--accordion-open-divider-color`: `#96E697` - `--star-color`: `#FFFFFF` - `--star-background`: `#000000` ### Typefaces - Unitext ### Type scale (most-used sizes) `3.75rem` · `3rem` · `2.5rem` · `30px` · `1.875rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `.8125rem` · `12px` ### Letter-spacing `.1em` (4) · `1.2px` (3) · `.04em` (1) · `3px` (1) · `.65px` (1) · `.025em` (1) ### Corner radii (most-used) `10px` · `50%` · `46px` · `3px` · `100%` · `5px` · `.75rem` · `100px` · `999px` ### Shadows - `#fff 0 0 0 2px,#46b555 0 0 0 4px` - `#46b555 0 0 0 1px,#46b555 0 0 0 2px` - `#000 0 0 0 2px,#fff 0 0 0 4px` - `none !important` - `#000 0 0 0 1px,#46b555 0 0 0 2px` - `#fff 0 0 0 1px` ### Gradients - `linear-gradient(#F0F0F0, #ECEAEA)` ### Breakpoints 440px · 600px · 640px · 767px · 768px · 800px · 1024px · 1025px · 1200px · 1280px · 1600px