[Design systems](/design-systems/) / Claimocity # Claimocity design system claimocity.com Read from Claimocity's public website by Clinical Terminal. Not reviewed by Claimocity. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Claimocity homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100005.jpg?alt=media) ## Palette - Ground \#FFFFFF \--e-global-color-32a6f8f - Ink \#333333 - Accent on the ground \#2669FF - Primary \#2669FF - On primary \#FFFFFF \--e-global-color-32a6f8f - Secondary accent \#276AFF \--e-global-color-primary - Dark \#333333 \--e-global-color-text - Site background \#FFFFFF \--e-global-color-32a6f8f ## Other named colors - \--e-global-color-text #333333 - \--e-global-color-primary #276AFF - \--e-global-color-secondary #01019A - \--e-global-color-accent #01CA96 - \--e-global-color-32a6f8f #FFFFFF - \--e-global-color-8bc3436 #F6F6F6 - \--e-global-color-cf3e10e #243E59 - \--e-global-color-e24e534 #8B94A3 - \--e-global-color-150fc27 #FFD100 - \--e-global-color-705f410 #EBEAEA - \--e-global-color-93304c5 #70D6F8 - \--e-global-color-bd40276 #F841E0 ## Type Headings Figtree Claimocity at a glance Body Figtree Clear, readable paragraphs for clinicians, buyers and patients alike. - 50pxClaimocity - 2.5rem · 40pxClaimocity - 36pxClaimocity - 32pxClaimocity - 2rem · 32pxClaimocity - 1.5rem · 24pxClaimocity - 20pxClaimocity - 18pxClaimocity ## Shape & depth Cards and panels: 3px corners · buttons and chips: 100px. ### Corner radii - 3px used in 6 rules - 50% used in 2 rules - 2px used in 2 rules - 4px used in 2 rules - 5px used in 2 rules - 6px used in 2 rules - 10% used in 1 rule ### Shadows - none!important used in 1 rule - 0 .35rem 0 currentColor used in 1 rule - inset 0 -1px 0 rgba(0,0,0,.102) used in 1 rule - inset 0 0 0 1px rgba(0,0,0,.1) used in 1 rule - none !important used in 1 rule ### Gradients - linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%) used in 1 rule - linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%) used in 1 rule - linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%) used in 1 rule - linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%) used in 1 rule - linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%) used in 1 rule - linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%) used in 1 rule Breakpoints: 479px · 575px · 576px · 767px · 768px · 991px · 992px · 1024px · 1025px · 1200px ## 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%2F100005.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Claimocity" domain: "claimocity.com" colors: primary: "#2669FF" onPrimary: "#FFFFFF" dark: "#333333" accent: "#276AFF" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#333333" accent: "#2669FF" fonts: heading: "Figtree" body: "Figtree" radius: card: "3px" button: "100px" --- # Design System — Claimocity > Read from Claimocity's public website (claimocity.com) by Clinical Terminal. Not reviewed by Claimocity. > Use it as inspiration: borrow the ideas, not Claimocity's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Claimocity's site background #FFFFFF. Pages and panels sit on it. - Main text: #333333 (12.63:1 on the ground). - Secondary text is #333333 at 88% / 76% / 60%; hairlines and plate borders #333333 at 16%. ## Color - **Accent on the ground: #2669FF** (4.62:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #2669FF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.62:1). - Secondary accent #276AFF: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Figtree**. Body: **Figtree**. Both on Google Fonts. ## Shape - Cards and panels: 3px 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 - `--e-global-color-text`: `#333333` - `--e-global-color-primary`: `#276AFF` - `--e-global-color-secondary`: `#01019A` - `--e-global-color-accent`: `#01CA96` - `--e-global-color-32a6f8f`: `#FFFFFF` - `--e-global-color-8bc3436`: `#F6F6F6` - `--e-global-color-cf3e10e`: `#243E59` - `--e-global-color-e24e534`: `#8B94A3` - `--e-global-color-150fc27`: `#FFD100` - `--e-global-color-705f410`: `#EBEAEA` - `--e-global-color-93304c5`: `#70D6F8` - `--e-global-color-bd40276`: `#F841E0` ### Typefaces - Figtree (`--e-global-typography-text-font-family`) — on Google Fonts ### Type scale (most-used sizes) `50px` · `2.5rem` · `36px` · `32px` · `2rem` · `1.5rem` · `20px` · `18px` · `16px` · `1rem` · `15px` · `13px` ### Corner radii (most-used) `3px` · `50%` · `2px` · `4px` · `5px` · `6px` · `10%` ### Shadows - `none!important` - `0 .35rem 0 currentColor` - `inset 0 -1px 0 rgba(0,0,0,.102)` - `inset 0 0 0 1px rgba(0,0,0,.1)` - `none !important` ### Gradients - `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)` - `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)` - `linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)` - `linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)` - `linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)` - `linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)` ### Breakpoints 479px · 575px · 576px · 767px · 768px · 991px · 992px · 1024px · 1025px · 1200px ```