[Design systems](/design-systems/) / Qventus, Inc # Qventus, Inc design system qventus.com Read from Qventus, Inc's public website by Clinical Terminal. Not reviewed by Qventus, Inc. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Qventus, Inc homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923851.jpg?alt=media) ## Palette - Ground \#FFFFFF \--color-white - Ink \#340073 - Accent on the ground \#6700E5 - Primary \#6700E5 \--color-electric - On primary \#FFFFFF \--color-white - Secondary accent \#3DEAC9 \--color-turquoise - Dark \#340073 \--color-aubergine - Site background \#FFFFFF \--color-white ## Other named colors - \--color-aubergine #340073 - \--color-electric #6700E5 - \--color-turquoise #3DEAC9 - \--color-plum #AC77FF - \--color-teal #009FA3 - \--color-light-teal #BDF7F5 - \--color-charcoal #353535 - \--color-light-gray #D8D8D8 - \--color-bone #F6EFEA - \--color-terracotta #FF7B6A - \--color-burnt-orange #FFA847 - \--color-power-blue #7485E6 - \--color-green #96E388 - \--color-white #FFFFFF - \--color-lightest-plum-bkg #F5F2F7 - \--color-charcoal-2 #353535 - \--color-lightest-plum-1 #EEE4FF - \--color-lightest-plum-2 #F5EFFF ## Type Headings Sora Qventus, Inc at a glance Body Sora Clear, readable paragraphs for clinicians, buyers and patients alike. - 45pxQventus, Inc - 36.909pxQventus, Inc - 26pxQventus, Inc - 25pxQventus, Inc - 24pxQventus, Inc - 19pxQventus, Inc - 18pxQventus, Inc - 16pxQventus, Inc ## Shape & depth Cards and panels: 7px corners · buttons and chips: 0px. ### Corner radii - 20px used in 12 rules - 50% used in 8 rules - 7px used in 7 rules - 10px used in 5 rules - 12px used in 3 rules - 30px used in 3 rules - 100px used in 3 rules - 4px used in 3 rules - 60px used in 2 rules - 15px used in 2 rules ### Shadows - none !important used in 3 rules - 0px 4.363px 76.355px 4.363px rgba(110, 110, 110, 0.15) used in 1 rule - 0 0.5rem 1rem rgba(0, 0, 0, 0.15) used in 1 rule - none!important used in 1 rule - 0 8px 24px rgba(0, 0, 0, 0.25) used in 1 rule ### Gradients - linear-gradient(180deg, #7CCFFB 0%, #A4DFFF 100%) used in 3 rules - linear-gradient(130deg, rgba(124, 207, 251, 0.40) 4.54%, rgba(255, 255, 255, 0.40) 132.05%) used in 3 rules - linear-gradient(180deg, #7ccffb00 0%, #a4dfff00 100%) used in 2 rules - linear-gradient(0deg, rgba(18, 20, 32, 0.80) 0%, rgba(18, 20, 32, 0.80) 100%) used in 2 rules - radial-gradient(circle, transparent 61%, black 61%) used in 2 rules - radial-gradient(209.49% 178.61% at 87.15% 117.88%, #250E3B 0%, #121420 77.5%) used in 1 rule Breakpoints: 480px · 576px · 767px · 768px · 991px · 992px · 1024px · 1025px · 1200px · 1400px · 1600px ## Voice Tone: professional. Energy: high. 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%2F100923851.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Qventus, Inc" domain: "qventus.com" colors: primary: "#6700E5" onPrimary: "#FFFFFF" dark: "#340073" accent: "#3DEAC9" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#340073" accent: "#6700E5" fonts: heading: "Sora" body: "Sora" radius: card: "7px" button: "0px" --- # Design System — Qventus, Inc > Read from Qventus, Inc's public website (qventus.com) by Clinical Terminal. Not reviewed by Qventus, Inc. > Use it as inspiration: borrow the ideas, not Qventus, Inc's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Qventus, Inc's site background #FFFFFF. Pages and panels sit on it. - Main text: #340073 (15.07:1 on the ground). - Secondary text is #340073 at 88% / 76% / 60%; hairlines and plate borders #340073 at 16%. ## Color - **Accent on the ground: #6700E5** (7.75:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #6700E5** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.75:1). - Secondary accent #3DEAC9: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Sora**. Body: **Sora**. Both on Google Fonts. ## Shape - Cards and panels: 7px corners. Buttons and chips: 0px. ## Voice - Tone: professional. Energy: high. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--color-aubergine`: `#340073` - `--color-electric`: `#6700E5` - `--color-turquoise`: `#3DEAC9` - `--color-plum`: `#AC77FF` - `--color-teal`: `#009FA3` - `--color-light-teal`: `#BDF7F5` - `--color-charcoal`: `#353535` - `--color-light-gray`: `#D8D8D8` - `--color-bone`: `#F6EFEA` - `--color-terracotta`: `#FF7B6A` - `--color-burnt-orange`: `#FFA847` - `--color-power-blue`: `#7485E6` - `--color-green`: `#96E388` - `--color-white`: `#FFFFFF` - `--color-lightest-plum-bkg`: `#F5F2F7` - `--color-charcoal-2`: `#353535` - `--color-lightest-plum-1`: `#EEE4FF` - `--color-lightest-plum-2`: `#F5EFFF` ### Typefaces - Soleil - Soleil !important ### Type scale (most-used sizes) `45px` · `36.909px` · `26px` · `25px` · `24px` · `19px` · `18px` · `16px` · `1rem` · `14px` · `13px` · `12px` ### Letter-spacing `1.9px` (4) · `1.2px` (4) ### Corner radii (most-used) `20px` · `50%` · `7px` · `10px` · `12px` · `30px` · `100px` · `4px` · `60px` · `15px` ### Shadows - `none !important` - `0px 4.363px 76.355px 4.363px rgba(110, 110, 110, 0.15)` - `0 0.5rem 1rem rgba(0, 0, 0, 0.15)` - `none!important` - `0 8px 24px rgba(0, 0, 0, 0.25)` ### Gradients - `linear-gradient(180deg, #7CCFFB 0%, #A4DFFF 100%)` - `linear-gradient(130deg, rgba(124, 207, 251, 0.40) 4.54%, rgba(255, 255, 255, 0.40) 132.05%)` - `linear-gradient(180deg, #7ccffb00 0%, #a4dfff00 100%)` - `linear-gradient(0deg, rgba(18, 20, 32, 0.80) 0%, rgba(18, 20, 32, 0.80) 100%)` - `radial-gradient(circle, transparent 61%, black 61%)` - `radial-gradient(209.49% 178.61% at 87.15% 117.88%, #250E3B 0%, #121420 77.5%)` ### Breakpoints 480px · 576px · 767px · 768px · 991px · 992px · 1024px · 1025px · 1200px · 1400px · 1600px ```