[Design systems](/design-systems/) / Hapusa # Hapusa design system hapusa.com Read from Hapusa's public website by Clinical Terminal. Not reviewed by Hapusa. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Hapusa logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F100923740.png?alt=media) ## Palette - Ground \#FFFFFF \--hap-white - Ink \#000000 - Accent on the ground \#008936 - Primary \#129F4B \--hap-green - On primary \#000000 \--hap-black - Dark \#000000 \--hap-black - Site background \#FFFFFF \--hap-white ## Other named colors - \--hap-green #129F4B - \--hap-navy #125076 - \--hap-blue #4D6C91 - \--hap-black #000000 - \--hap-gray-dark #707070 - \--hap-gray #ADADAD - \--hap-gray-light #BABABA - \--hap-border #D0D0D0 - \--hap-border-light #D8D8D8 - \--hap-bg-alt #EDEDED - \--hap-bg-light #F5F5F5 - \--hap-white #FFFFFF ## Type Headings Montserrat Hapusa at a glance Body Inter · closest free match for Helvetica Neue Clear, readable paragraphs for clinicians, buyers and patients alike. - 16pxHapusa ## Shape & depth Cards and panels: 0px corners · buttons and chips: 22px. ### Corner radii - 50% used in 3 rules - 8px used in 1 rule - 20px used in 1 rule - 9999px used in 1 rule ### Shadows - 0 4px 12px rgba(0,0,0,.15) used in 1 rule - 0 2px 8px rgba(0,0,0,.1) used in 1 rule - -2px 0 8px rgba(0,0,0,.1) used in 1 rule - 0 4px 12px rgba(0,0,0,0.15) used in 1 rule - 0 2px 8px rgba(0,0,0,0.1) used in 1 rule - -2px 0 8px rgba(0,0,0,0.1) used in 1 rule ### Gradients - linear-gradient(to right,#222121,rgba(0,0,0,.2)) used in 1 rule - linear-gradient(to right,rgba(0,0,0,1) 5%,rgba(0,0,0,0) 45%) used in 1 rule - linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 28%,rgba(0,0,0,.75) 38%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.35) 58%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.04) 80%,rgba(0,0,0,0) 90%) used in 1 rule - linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,.83) 50%,rgba(0,0,0,.57) 60%,rgba(0,0,0,.31) 70%,rgba(0,0,0,.05) 80%,rgba(0,0,0,0) 90%) used in 1 rule - linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.2) 58%,rgba(0,0,0,.05) 65%,rgba(0,0,0,0) 72%) used in 1 rule - linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 45%,rgba(0,0,0,.84) 55%,rgba(0,0,0,.7) 65%,rgba(0,0,0,.45) 75%,rgba(0,0,0,.25) 85%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%) used in 1 rule Breakpoints: 480px · 600px · 768px · 900px · 901px · 1024px · 1920px · 2560px ## 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%2F100923740.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Hapusa" domain: "hapusa.com" colors: primary: "#129F4B" onPrimary: "#000000" dark: "#000000" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000000" accent: "#008936" fonts: heading: "Montserrat" body: "Inter" radius: card: "0px" button: "22px" --- # Design System — Hapusa > Read from Hapusa's public website (hapusa.com) by Clinical Terminal. Not reviewed by Hapusa. > Use it as inspiration: borrow the ideas, not Hapusa's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Hapusa'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: #008936** (4.53:1), adjusted from Hapusa's primary #129F4B so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #129F4B** for filled shapes (buttons, chips, bars), with #000000 text on it (6.09:1). - Quote every hex exactly as written above. ## Type - Headlines: **Montserrat**. Body: **Inter**. Both on Google Fonts. - Hapusa's site uses Montserrat / Helvetica Neue; these are the closest free look-alikes. ## Shape - Cards and panels: 0px corners. Buttons and chips: 22px. ## 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 - `--hap-green`: `#129F4B` - `--hap-navy`: `#125076` - `--hap-blue`: `#4D6C91` - `--hap-black`: `#000000` - `--hap-gray-dark`: `#707070` - `--hap-gray`: `#ADADAD` - `--hap-gray-light`: `#BABABA` - `--hap-border`: `#D0D0D0` - `--hap-border-light`: `#D8D8D8` - `--hap-bg-alt`: `#EDEDED` - `--hap-bg-light`: `#F5F5F5` - `--hap-white`: `#FFFFFF` ### Typefaces - Montserrat (`--hap-font-heading`) — on Google Fonts ### Type scale (most-used sizes) `16px` ### Letter-spacing `.5px` (2) · `.04px` (2) · `0.04px` (2) · `.002em` (1) · `0.002em` (1) ### Corner radii (most-used) `50%` · `8px` · `20px` · `9999px` ### Shadows - `0 4px 12px rgba(0,0,0,.15)` - `0 2px 8px rgba(0,0,0,.1)` - `-2px 0 8px rgba(0,0,0,.1)` - `0 4px 12px rgba(0,0,0,0.15)` - `0 2px 8px rgba(0,0,0,0.1)` - `-2px 0 8px rgba(0,0,0,0.1)` ### Gradients - `linear-gradient(to right,#222121,rgba(0,0,0,.2))` - `linear-gradient(to right,rgba(0,0,0,1) 5%,rgba(0,0,0,0) 45%)` - `linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 28%,rgba(0,0,0,.75) 38%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.35) 58%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.04) 80%,rgba(0,0,0,0) 90%)` - `linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,.83) 50%,rgba(0,0,0,.57) 60%,rgba(0,0,0,.31) 70%,rgba(0,0,0,.05) 80%,rgba(0,0,0,0) 90%)` - `linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.2) 58%,rgba(0,0,0,.05) 65%,rgba(0,0,0,0) 72%)` - `linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 45%,rgba(0,0,0,.84) 55%,rgba(0,0,0,.7) 65%,rgba(0,0,0,.45) 75%,rgba(0,0,0,.25) 85%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%)` ### Breakpoints 480px · 600px · 768px · 900px · 901px · 1024px · 1920px · 2560px ```