Benchmark Solutions, a division of Harris design system
benchmarksystems.com
Read from Benchmark Solutions, a division of Harris's public website by Clinical Terminal. Not reviewed by Benchmark Solutions, a division of Harris. Copy it and paste it into Claude as inspiration.
Corrections or removal: agent@clinicalterminal.com
Palette
- Ground#EEEEEE
- Ink#111111
- Accent on the ground#007879
- Primary#2BC6C6
- On primary#111111
- Secondary accent#074970
- Dark#666666
- Site background#EEEEEE
Type
Headings
Source Sans 3
Benchmark Solutions, a division of Harris at a glance
Body
Source Sans 3
Clear, readable paragraphs for clinicians, buyers and patients alike.
- 3rem · 48pxBenchmark Solutions, a division of Harris
- 36pxBenchmark Solutions, a division of Harris
- 1.5rem · 24pxBenchmark Solutions, a division of Harris
- 24pxBenchmark Solutions, a division of Harris
- 18pxBenchmark Solutions, a division of Harris
- 17pxBenchmark Solutions, a division of Harris
- 1rem · 16pxBenchmark Solutions, a division of Harris
- .88rem · 14.08pxBenchmark Solutions, a division of Harris
Shape & depth
Cards and panels: 15px corners · buttons and chips: 0px.
Corner radii
- 20pxused in 17 rules
- 50%used in 5 rules
- 50pxused in 4 rules
- 2pxused in 3 rules
- 100%used in 3 rules
- 4pxused in 3 rules
- 15pxused in 2 rules
- 3pxused in 2 rules
- 10pxused in 2 rules
- 5pxused in 1 rule
Shadows
- inset 0 1px 3px rgba(0, 0, 0, 0.06)used in 2 rules
- inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(38, 177, 177, 0.7)used in 2 rules
- 0 5px 10px 0 rgba(0, 0, 0, 0.1)used in 2 rules
- none!importantused in 2 rules
- 0 4px 15px rgba(0,0,0,.2)used in 1 rule
- 0 0 10px rgba(0,0,0,.3)used in 1 rule
Gradients
- linear-gradient(-90deg, #2bc6c6, #074970)used in 2 rules
- linear-gradient(90deg, #074970 40%, #2bc6c6 100%)used in 1 rule
- linear-gradient(316deg, #105680, #001622)used in 1 rule
- linear-gradient(0deg,rgba(0,0,0,.75),transparent)used in 1 rule
- linear-gradient(180deg,rgba(0,0,0,.75),transparent)used in 1 rule
- linear-gradient(315deg, #fbb034 0%, #ffdd00 74%)used in 1 rule
Breakpoints: 500px · 600px · 750px · 782px · 900px · 1140px · 1200px · 1400px
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: "Benchmark Solutions, a division of Harris" domain: "benchmarksystems.com" colors: primary: "#2BC6C6" onPrimary: "#111111" dark: "#666666" accent: "#074970" background: "#EEEEEE" ground: mode: light hex: "#EEEEEE" ink: "#111111" accent: "#007879" fonts: heading: "Source Sans 3" body: "Source Sans 3" radius: card: "15px" button: "0px" --- # Design System — Benchmark Solutions, a division of Harris > Read from Benchmark Solutions, a division of Harris's public website (benchmarksystems.com) by Clinical Terminal. Not reviewed by Benchmark Solutions, a division of Harris. > Use it as inspiration: borrow the ideas, not Benchmark Solutions, a division of Harris's name, logo or identity. ## Ground - **Light ground** (#EEEEEE), from Benchmark Solutions, a division of Harris's site background #EEEEEE. Pages and panels sit on it. - Main text: #111111 (16.28:1 on the ground). - Secondary text is #111111 at 88% / 76% / 60%; hairlines and plate borders #111111 at 16%. ## Color - **Accent on the ground: #007879** (4.57:1), adjusted from Benchmark Solutions, a division of Harris's primary #2BC6C6 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #2BC6C6** for filled shapes (buttons, chips, bars), with #111111 text on it (8.99:1). - Secondary accent #074970: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Source Sans 3**. Body: **Source Sans 3**. Both on Google Fonts. ## Shape - Cards and panels: 15px 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 ### Typefaces - Lato — on Google Fonts - Source Sans 3 — on Google Fonts ### Type scale (most-used sizes) `3rem` · `36px` · `1.5rem` · `24px` · `18px` · `17px` · `1rem` · `.88rem` · `14px` · `10px` · `9px` ### Letter-spacing `1px` (1) ### Corner radii (most-used) `20px` · `50%` · `50px` · `2px` · `100%` · `4px` · `15px` · `3px` · `10px` · `5px` ### Shadows - `inset 0 1px 3px rgba(0, 0, 0, 0.06)` - `inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(38, 177, 177, 0.7)` - `0 5px 10px 0 rgba(0, 0, 0, 0.1)` - `none!important` - `0 4px 15px rgba(0,0,0,.2)` - `0 0 10px rgba(0,0,0,.3)` ### Gradients - `linear-gradient(-90deg, #2bc6c6, #074970)` - `linear-gradient(90deg, #074970 40%, #2bc6c6 100%)` - `linear-gradient(316deg, #105680, #001622)` - `linear-gradient(0deg,rgba(0,0,0,.75),transparent)` - `linear-gradient(180deg,rgba(0,0,0,.75),transparent)` - `linear-gradient(315deg, #fbb034 0%, #ffdd00 74%)` ### Breakpoints 500px · 600px · 750px · 782px · 900px · 1140px · 1200px · 1400px