[Design systems](/design-systems/) / BilNow Medical Billing and Revenue Cycle Management System # BilNow Medical Billing and Revenue Cycle Management System design system bilnow\.com Read from BilNow Medical Billing and Revenue Cycle Management System's public website by Clinical Terminal. Not reviewed by BilNow Medical Billing and Revenue Cycle Management System. Copy it and paste it into Claude as inspiration. Corrections or removal: ![BilNow Medical Billing and Revenue Cycle Management System homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923654.jpg?alt=media) ## Palette - Ground \#FFFFFF \--wpforms-field-background-color - Ink \#0C2545 - Accent on the ground \#008390 - Primary \#1DBFCC - On primary \#000000 \--wpforms-button-text-color - Dark \#0C2545 \--wpforms-button-background-color - Site background \#FFFFFF \--wpforms-field-background-color ## Other named colors - \--wpforms-button-background-color #0C2545 - \--wpforms-button-text-color #000000 - \--wpforms-field-background-color #FFFFFF - \--wpforms-field-border-color #000000 - \--wpforms-field-border-color-spare #000000 - \--wpforms-field-text-color #000000 - \--wpforms-field-menu-color #FFFFFF - \--wpforms-label-color #000000 - \--wpforms-label-sublabel-color #000000 - \--wpforms-label-error-color #D63637 - \--wpforms-button-border-color #066AAB - \--wpforms-page-break-color #066AAB - \--wpforms-background-color #000000 - \--wpforms-container-border-color #000000 ## Type Headings Poppins BilNow Medical Billing and Revenue Cycle Management System at a glance Body Poppins Clear, readable paragraphs for clinicians, buyers and patients alike. - 24pxBilNow Medical Billing and Revenue Cycle Management System - 22pxBilNow Medical Billing and Revenue Cycle Management System - 20pxBilNow Medical Billing and Revenue Cycle Management System - 18pxBilNow Medical Billing and Revenue Cycle Management System - 17pxBilNow Medical Billing and Revenue Cycle Management System - 16pxBilNow Medical Billing and Revenue Cycle Management System - 15pxBilNow Medical Billing and Revenue Cycle Management System - 14pxBilNow Medical Billing and Revenue Cycle Management System ## Shape & depth Cards and panels: 4px corners · buttons and chips: 10px. ### Corner radii - 50% used in 32 rules - 2px used in 19 rules - 3px used in 19 rules - 4px used in 12 rules - 10px used in 9 rules - 5px used in 8 rules - 12px used in 6 rules - 14px used in 6 rules - 25px used in 4 rules - 6px used in 3 rules ### Shadows - 0 2px 6px rgba(0,0,0,.1) used in 6 rules - 0 0 10px 4px rgba(0,0,0,.1) used in 6 rules - none !important used in 5 rules - 0 1px 4px rgba(0,0,0,.15) used in 3 rules - inset 0 1px 2px rgba(0,0,0,.1) used in 3 rules - inset 0 1px 3px #ddd used in 3 rules ### Gradients - linear-gradient(transparent,rgba(0,0,0,.35)) used in 2 rules - linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%) used in 2 rules - linear-gradient(135deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent) used in 1 rule - linear-gradient(-45deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent) used in 1 rule - linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%) used in 1 rule - linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%) used in 1 rule Breakpoints: 420px · 480px · 481px · 600px · 700px · 767px · 768px · 782px · 800px · 820px · 900px · 959px ## Voice Tone: professional. Energy: medium. 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%2F100923654.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "BilNow Medical Billing and Revenue Cycle Management System" domain: "bilnow.com" colors: primary: "#1DBFCC" onPrimary: "#000000" dark: "#0C2545" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#0C2545" accent: "#008390" fonts: heading: "Poppins" body: "Poppins" radius: card: "4px" button: "10px" --- # Design System — BilNow Medical Billing and Revenue Cycle Management System > Read from BilNow Medical Billing and Revenue Cycle Management System's public website (bilnow.com) by Clinical Terminal. Not reviewed by BilNow Medical Billing and Revenue Cycle Management System. > Use it as inspiration: borrow the ideas, not BilNow Medical Billing and Revenue Cycle Management System's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from BilNow Medical Billing and Revenue Cycle Management System's site background #FFFFFF. Pages and panels sit on it. - Main text: #0C2545 (15.37:1 on the ground). - Secondary text is #0C2545 at 88% / 76% / 60%; hairlines and plate borders #0C2545 at 16%. ## Color - **Accent on the ground: #008390** (4.52:1), adjusted from BilNow Medical Billing and Revenue Cycle Management System's primary #1DBFCC so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #1DBFCC** for filled shapes (buttons, chips, bars), with #000000 text on it (9.38:1). - Quote every hex exactly as written above. ## Type - Headlines: **Poppins**. Body: **Poppins**. Both on Google Fonts. ## Shape - Cards and panels: 4px corners. Buttons and chips: 10px. ## Voice - Tone: professional. Energy: medium. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--wpforms-button-background-color`: `#0C2545` - `--wpforms-button-text-color`: `#000000` - `--wpforms-field-background-color`: `#FFFFFF` - `--wpforms-field-border-color`: `#000000` - `--wpforms-field-border-color-spare`: `#000000` - `--wpforms-field-text-color`: `#000000` - `--wpforms-field-menu-color`: `#FFFFFF` - `--wpforms-label-color`: `#000000` - `--wpforms-label-sublabel-color`: `#000000` - `--wpforms-label-error-color`: `#D63637` - `--wpforms-button-border-color`: `#066AAB` - `--wpforms-page-break-color`: `#066AAB` - `--wpforms-background-color`: `#000000` - `--wpforms-container-border-color`: `#000000` ### Typefaces - Poppins — on Google Fonts - Open Sans — on Google Fonts ### Type scale (most-used sizes) `24px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` · `10px` ### Letter-spacing `.6px` (24) · `1px` (11) · `2px` (6) · `.1em` (3) · `1.5px` (3) · `.03em` (1) ### Corner radii (most-used) `50%` · `2px` · `3px` · `4px` · `10px` · `5px` · `12px` · `14px` · `25px` · `6px` ### Shadows - `0 2px 6px rgba(0,0,0,.1)` - `0 0 10px 4px rgba(0,0,0,.1)` - `none !important` - `0 1px 4px rgba(0,0,0,.15)` - `inset 0 1px 2px rgba(0,0,0,.1)` - `inset 0 1px 3px #ddd` ### Gradients - `linear-gradient(transparent,rgba(0,0,0,.35))` - `linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%)` - `linear-gradient(135deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent)` - `linear-gradient(-45deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent)` - `linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%)` - `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)` ### Breakpoints 420px · 480px · 481px · 600px · 700px · 767px · 768px · 782px · 800px · 820px · 900px · 959px · 1024px · 1025px · 1080px · 1100px · 1280px · 1321px · 1360px · 1699px ```