[Design systems](/design-systems/) / Happy Billing # Happy Billing design system happybilling.co Read from Happy Billing's public website by Clinical Terminal. Not reviewed by Happy Billing. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Happy Billing homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100107.jpg?alt=media) ## Palette - Ground \#FFFFFF \--e-global-color-uicore\_white - Ink \#070707 - Accent on the ground \#00634C - Primary \#00634C - On primary \#FFFFFF \--e-global-color-uicore\_white - Secondary accent \#1E87F0 - Dark \#070707 \--e-global-color-uicore\_headline - Site background \#FFFFFF \--e-global-color-uicore\_white ## Other named colors - \--e-global-color-uicore\_primary #00C49A - \--e-global-color-uicore\_secondary #532DF5 - \--e-global-color-uicore\_accent #D1345B - \--e-global-color-uicore\_headline #070707 - \--e-global-color-uicore\_body #6E7A84 - \--e-global-color-uicore\_dark #070707 - \--e-global-color-uicore\_light #F8FCFC - \--e-global-color-uicore\_white #FFFFFF - \--uicore-primary-color #00C49A - \--uicore-secondary-color #532DF5 - \--uicore-accent-color #D1345B - \--uicore-headline-color #070707 - \--uicore-body-color #6E7A84 - \--uicore-dark-color #070707 - \--uicore-light-color #F8FCFC - \--uicore-white-color #FFFFFF - \--ui-border-color #EBEBEB ## Type Headings Inter Happy Billing at a glance Body Inter Clear, readable paragraphs for clinicians, buyers and patients alike. - 4rem · 64pxHappy Billing - 50pxHappy Billing - 1.5rem · 24pxHappy Billing - 1.25rem · 20pxHappy Billing - 19pxHappy Billing - 18pxHappy Billing - 16pxHappy Billing - 15pxHappy Billing ## Shape & depth Cards and panels: 6px corners · buttons and chips: 6px. ### Corner radii - 3px used in 13 rules - 8px used in 8 rules - 50% used in 7 rules - 4px used in 5 rules - 500px used in 5 rules - 5px used in 4 rules - 12px used in 3 rules - 2px used in 3 rules - 6px used in 3 rules - 10px used in 3 rules ### Shadows - 0 2px 8px rgb(0 0 0 / .08) used in 2 rules - 0 5px 15px rgb(0 0 0 / .08) used in 2 rules - 0 14px 25px rgb(0 0 0 / .16) used in 2 rules - 0 28px 50px rgb(0 0 0 / .16) used in 2 rules - none!important used in 2 rules - 0 0 2px rgb(0 0 0 / .12),0 2px 2px rgb(0 0 0 / .2) used in 2 rules ### Gradients - linear-gradient(#fff,#fff) used in 1 rule - linear-gradient(90deg,#3ab0ff,#673de6,#e536db) used in 1 rule - linear-gradient(to right,#fff 5%,#fff0 100%) used in 1 rule - linear-gradient(to right,#fff0 0%,#fff 95%) used in 1 rule - linear-gradient(currentColor,currentColor) used in 1 rule - linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0)) used in 1 rule Breakpoints: 479px · 639px · 640px · 767px · 768px · 959px · 960px · 1024px · 1025px · 1199px · 1200px · 1300px ## 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100107.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Happy Billing" domain: "happybilling.co" colors: primary: "#00634C" onPrimary: "#FFFFFF" dark: "#070707" accent: "#1E87F0" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#070707" accent: "#00634C" fonts: heading: "Inter" body: "Inter" radius: card: "6px" button: "6px" --- # Design System — Happy Billing > Read from Happy Billing's public website (happybilling.co) by Clinical Terminal. Not reviewed by Happy Billing. > Use it as inspiration: borrow the ideas, not Happy Billing's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Happy Billing's site background #FFFFFF. Pages and panels sit on it. - Main text: #070707 (20.14:1 on the ground). - Secondary text is #070707 at 88% / 76% / 60%; hairlines and plate borders #070707 at 16%. ## Color - **Accent on the ground: #00634C** (7.27:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #00634C** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.27:1). - Secondary accent #1E87F0: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Inter**. Body: **Inter**. Both on Google Fonts. ## Shape - Cards and panels: 6px corners. Buttons and chips: 6px. ## 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 - `--e-global-color-uicore_primary`: `#00C49A` - `--e-global-color-uicore_secondary`: `#532DF5` - `--e-global-color-uicore_accent`: `#D1345B` - `--e-global-color-uicore_headline`: `#070707` - `--e-global-color-uicore_body`: `#6E7A84` - `--e-global-color-uicore_dark`: `#070707` - `--e-global-color-uicore_light`: `#F8FCFC` - `--e-global-color-uicore_white`: `#FFFFFF` - `--uicore-primary-color`: `#00C49A` - `--uicore-secondary-color`: `#532DF5` - `--uicore-accent-color`: `#D1345B` - `--uicore-headline-color`: `#070707` - `--uicore-body-color`: `#6E7A84` - `--uicore-dark-color`: `#070707` - `--uicore-light-color`: `#F8FCFC` - `--uicore-white-color`: `#FFFFFF` - `--ui-border-color`: `#EBEBEB` ### Typefaces - Inter (`--e-global-typography-uicore_primary-font-family`) — on Google Fonts - themify - element-pack - before - element-pack"!important - element-pack'!important - Playfair Display — on Google Fonts ### Type scale (most-used sizes) `4rem` · `50px` · `1.5rem` · `1.25rem` · `19px` · `18px` · `16px` · `15px` · `.875rem` · `14px` · `13px` · `12px` ### Letter-spacing `1px` (2) · `.2em` (1) · `.05em` (1) · `.5px` (1) ### Corner radii (most-used) `3px` · `8px` · `50%` · `4px` · `500px` · `5px` · `12px` · `2px` · `6px` · `10px` ### Shadows - `0 2px 8px rgb(0 0 0 / .08)` - `0 5px 15px rgb(0 0 0 / .08)` - `0 14px 25px rgb(0 0 0 / .16)` - `0 28px 50px rgb(0 0 0 / .16)` - `none!important` - `0 0 2px rgb(0 0 0 / .12),0 2px 2px rgb(0 0 0 / .2)` ### Gradients - `linear-gradient(#fff,#fff)` - `linear-gradient(90deg,#3ab0ff,#673de6,#e536db)` - `linear-gradient(to right,#fff 5%,#fff0 100%)` - `linear-gradient(to right,#fff0 0%,#fff 95%)` - `linear-gradient(currentColor,currentColor)` - `linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))` ### Breakpoints 479px · 639px · 640px · 767px · 768px · 959px · 960px · 1024px · 1025px · 1199px · 1200px · 1300px · 1599px · 1600px ```