[Design systems](/design-systems/) / Claimable, Inc. # Claimable, Inc. design system getclaimable.com Read from Claimable, Inc.'s public website by Clinical Terminal. Not reviewed by Claimable, Inc.. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Claimable, Inc. homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100049.jpg?alt=media) ## Palette - Ground \#FFFFFF \--neutral--white - Ink \#252423 - Accent on the ground \#707B00 - Primary \#EFFF92 \--primary--bolt - On primary \#252423 \--neutral--almost-black - Secondary accent \#B9B3E0 \--primary--purple - Dark \#252423 \--neutral--almost-black - Site background \#FFFFFF \--neutral--white ## Other named colors - \--neutral--almost-black #252423 - \--neutral--light-gray #CCCCCC - \--neutral--gray #636363 - \--neutral--white #FFFFFF - \--primary--bolt #EFFF92 - \--secondary--dusty-pool-light #F6F8FA - \--secondary--dusty-pool #CFD7DF - \--primary--purple #B9B3E0 - \--secondary--cream #FFFBE9 - \--secondary--light-purple #F6F5FF - \--secondary--dark-purple #8981B8 - \--secondary--beige #CCC5C2 - \--secondary--yellow #FFED49 ## Type Headings Archivo · closest free match for Termina Claimable, Inc. at a glance Body Archivo · closest free match for Inter Variablefont Slnt Wght Clear, readable paragraphs for clinicians, buyers and patients alike. - 40pxClaimable, Inc. - 38pxClaimable, Inc. - 32pxClaimable, Inc. - 24pxClaimable, Inc. - 1.25rem · 20pxClaimable, Inc. - 18pxClaimable, Inc. - 1rem · 16pxClaimable, Inc. - 15pxClaimable, Inc. ## Shape & depth Cards and panels: 8px corners · buttons and chips: 100px. ### Corner radii - .5rem used in 6 rules - 4px used in 5 rules - 3px used in 4 rules - 1rem used in 4 rules - .75rem used in 4 rules - 50% used in 2 rules - 3rem used in 2 rules - 2rem used in 2 rules - 10px used in 2 rules - 100% used in 1 rule ### Shadows - 0 0 #0000 used in 2 rules - 0 0 0 1px #0000001a, 0 1px 3px #0000001a used in 1 rule - 0 0 3px #3336 used in 1 rule - 0 0 0 2px #fff used in 1 rule - inset 0 0 0 100px #0000 used in 1 rule - inset 0 0 0 100px #00000026 used in 1 rule ### Gradients - linear-gradient(to right, transparent 0%, black 80px, black calc(100% - 80px), transparent 100% ) used in 2 rules - linear-gradient(#fcfcfc, #fff) used in 1 rule - linear-gradient(150deg, #fffbe9, #f7f5e7 6%, #cfd7df 49%, #b9b3e0) used in 1 rule - linear-gradient(#d1d9e1, #b9b3e0) used in 1 rule - linear-gradient(#ffd3c7, #ffc799) used in 1 rule - linear-gradient(135deg, #dddbed 49%, #b9b3e0) used in 1 rule Breakpoints: 479px · 480px · 767px · 768px · 991px · 992px ## 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%2F100049.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Claimable, Inc." domain: "getclaimable.com" colors: primary: "#EFFF92" onPrimary: "#252423" dark: "#252423" accent: "#B9B3E0" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#252423" accent: "#707B00" fonts: heading: "Archivo" body: "Archivo" radius: card: "8px" button: "100px" --- # Design System — Claimable, Inc. > Read from Claimable, Inc.'s public website (getclaimable.com) by Clinical Terminal. Not reviewed by Claimable, Inc.. > Use it as inspiration: borrow the ideas, not Claimable, Inc.'s name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Claimable, Inc.'s site background #FFFFFF. Pages and panels sit on it. - Main text: #252423 (15.49:1 on the ground). - Secondary text is #252423 at 88% / 76% / 60%; hairlines and plate borders #252423 at 16%. ## Color - **Accent on the ground: #707B00** (4.64:1), adjusted from Claimable, Inc.'s primary #EFFF92 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #EFFF92** for filled shapes (buttons, chips, bars), with #252423 text on it (14.31:1). - Secondary accent #B9B3E0: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Claimable, Inc.'s site uses Termina / Inter Variablefont Slnt Wght; these are the closest free look-alikes. ## Shape - Cards and panels: 8px corners. Buttons and chips: 100px. ## 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 - `--neutral--almost-black`: `#252423` - `--neutral--light-gray`: `#CCCCCC` - `--neutral--gray`: `#636363` - `--neutral--white`: `#FFFFFF` - `--primary--bolt`: `#EFFF92` - `--secondary--dusty-pool-light`: `#F6F8FA` - `--secondary--dusty-pool`: `#CFD7DF` - `--primary--purple`: `#B9B3E0` - `--secondary--cream`: `#FFFBE9` - `--secondary--light-purple`: `#F6F5FF` - `--secondary--dark-purple`: `#8981B8` - `--secondary--beige`: `#CCC5C2` - `--secondary--yellow`: `#FFED49` ### Typefaces - Inter Variablefont Slnt Wght (`--fonts--primary-font`) - termina (`--fonts--heading-font`) ### Type scale (most-used sizes) `40px` · `38px` · `32px` · `24px` · `1.25rem` · `18px` · `1rem` · `15px` · `14px` · `.8rem` · `12px` · `10px` ### Letter-spacing `-.02em` (3) · `.7em` (1) · `.01em` (1) · `.03em` (1) · `.1em` (1) · `.05em` (1) ### Corner radii (most-used) `.5rem` · `4px` · `3px` · `1rem` · `.75rem` · `50%` · `3rem` · `2rem` · `10px` · `100%` ### Shadows - `0 0 #0000` - `0 0 0 1px #0000001a, 0 1px 3px #0000001a` - `0 0 3px #3336` - `0 0 0 2px #fff` - `inset 0 0 0 100px #0000` - `inset 0 0 0 100px #00000026` ### Gradients - `linear-gradient(to right, transparent 0%, black 80px, black calc(100% - 80px), transparent 100% )` - `linear-gradient(#fcfcfc, #fff)` - `linear-gradient(150deg, #fffbe9, #f7f5e7 6%, #cfd7df 49%, #b9b3e0)` - `linear-gradient(#d1d9e1, #b9b3e0)` - `linear-gradient(#ffd3c7, #ffc799)` - `linear-gradient(135deg, #dddbed 49%, #b9b3e0)` ### Breakpoints 479px · 480px · 767px · 768px · 991px · 992px ```