[Design systems](/design-systems/) / FinThrive # FinThrive design system finthrive.com Read from FinThrive's public website by Clinical Terminal. Not reviewed by FinThrive. Copy it and paste it into Claude as inspiration. Corrections or removal: ![FinThrive homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100071.jpg?alt=media) ## Palette - Ground \#FFFFFF \--neutral--white-10 - Ink \#005654 - Accent on the ground \#008941 - Primary \#00E091 \--primary - On primary \#005654 \--neutral--dark-10 - Dark \#005654 \--neutral--dark-10 - Site background \#FFFFFF \--neutral--white-10 ## Color ramps Neutral Dark 10 \#005654 20 \#005654 40 \#005654 60 \#005654 80 \#005654 Neutral White 10 \#FFFFFF 20 \#FFFFFF 40 \#FFFFFF 60 \#FFFFFF 80 \#FFFFFF ## Other named colors - \--primary #00E091 - \--primary--medium #80F2C3 - \--primary--light #C0F9E1 - \--primary--extra-light #EBFBF7 - \--primary--dark #005654 - \--secondary--medium #F87A3A - \--secondary--light #FFCA98 - \--secondary--extra-light #FFF2E5 - \--secondary--dark #663E25 - \--tertiary--medium #3356CC - \--tertiary--light #CAD6FF - \--tertiary--dark #13204D - \--accent #9EFB21 - \--neutral--black #005654 - \--neutral--dark #005654 - \--neutral--medium-dark #545757 - \--neutral--medium #A8ABAB - \--neutral--medium-light #D4D6D6 - \--neutral--light #F5F5F5 - \--neutral--white #FFFFFF - \--headlines #005654 - \--text #005654 - \--text-input #005654 - \--inline-links #3254C8 - \--inline-links--hover #7393FF - \--inline-links--visited #8C3EFA - \--menu-links #005654 - \--menu-links--hover #00E091 - \--menu-links--active #005654 - \--text--80 #005654 - \--text--60 #005654 ## Type Headings Plus Jakarta Sans FinThrive at a glance Body Plus Jakarta Sans Clear, readable paragraphs for clinicians, buyers and patients alike. - 1.625rem · 26pxFinThrive - 1.5rem · 24pxFinThrive - 1.25rem · 20pxFinThrive - 1.125rem · 18pxFinThrive - 18pxFinThrive - 1rem · 16pxFinThrive - 16pxFinThrive - 14pxFinThrive ## Shape & depth Cards and panels: 14px corners · buttons and chips: 100px. ### Corner radii - 1000px used in 21 rules - 100px used in 12 rules - 8px used in 12 rules - 50% used in 11 rules - 4px used in 10 rules - 14px used in 8 rules - 25px used in 4 rules - 3px used in 4 rules - 6px used in 4 rules - 11px used in 2 rules ### Shadows - 0 0 .3125rem rgba(0,0,0,.08),0 .3125rem .3125rem rgba(0,0,0,.09) used in 3 rules - 0 0 .375rem rgba(0,0,0,.06),0 .375rem .5625rem rgba(0,0,0,.13) used in 3 rules - 0 .875rem 1.875rem rgba(0,0,0,.1),0 .1875rem 1rem rgba(0,0,0,.07) used in 3 rules - 0 .5625rem 1.4375rem rgba(0,0,0,.09),0 .3125rem .5rem rgba(0,0,0,.1) used in 2 rules - 0 .3125rem .75rem rgba(0,0,0,.12) used in 1 rule - none!important used in 1 rule ### Gradients - linear-gradient(90deg,hsla(0,0%,100%,.01),#fff 15%,#fff 85%,hsla(0,0%,100%,.001)) used in 2 rules - linear-gradient(180deg,#f2fcfa,#fff) used in 1 rule - linear-gradient(0deg,#f2fcfa,#fff) used in 1 rule - linear-gradient(90deg,#f2fcfa,#fff) used in 1 rule - linear-gradient(-90deg,#f2fcfa,#fff) used in 1 rule - linear-gradient(180deg,#fff8f2,#fff) used in 1 rule Breakpoints: 568px · 768px · 769px · 992px · 993px · 1115px · 1330px · 1441px · 1921px · 2200px · 3100px · 4500px ## Voice Tone: professional. Energy: low. 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%2F100071.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "FinThrive" domain: "finthrive.com" colors: primary: "#00E091" onPrimary: "#005654" dark: "#005654" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#005654" accent: "#008941" fonts: heading: "Plus Jakarta Sans" body: "Plus Jakarta Sans" radius: card: "14px" button: "100px" --- # Design System — FinThrive > Read from FinThrive's public website (finthrive.com) by Clinical Terminal. Not reviewed by FinThrive. > Use it as inspiration: borrow the ideas, not FinThrive's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from FinThrive's site background #FFFFFF. Pages and panels sit on it. - Main text: #005654 (8.54:1 on the ground). - Secondary text is #005654 at 88% / 76% / 60%; hairlines and plate borders #005654 at 16%. ## Color - **Accent on the ground: #008941** (4.51:1), adjusted from FinThrive's primary #00E091 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #00E091** for filled shapes (buttons, chips, bars), with #005654 text on it (4.91:1). - Quote every hex exactly as written above. ## Type - Headlines: **Plus Jakarta Sans**. Body: **Plus Jakarta Sans**. Both on Google Fonts. ## Shape - Cards and panels: 14px corners. Buttons and chips: 100px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Neutral Dark** (`--neutral--dark-N`): 10 `#005654` · 20 `#005654` · 40 `#005654` · 60 `#005654` · 80 `#005654` - **Neutral White** (`--neutral--white-N`): 10 `#FFFFFF` · 20 `#FFFFFF` · 40 `#FFFFFF` · 60 `#FFFFFF` · 80 `#FFFFFF` ### Other named colors - `--primary`: `#00E091` - `--primary--medium`: `#80F2C3` - `--primary--light`: `#C0F9E1` - `--primary--extra-light`: `#EBFBF7` - `--primary--dark`: `#005654` - `--secondary--medium`: `#F87A3A` - `--secondary--light`: `#FFCA98` - `--secondary--extra-light`: `#FFF2E5` - `--secondary--dark`: `#663E25` - `--tertiary--medium`: `#3356CC` - `--tertiary--light`: `#CAD6FF` - `--tertiary--dark`: `#13204D` - `--accent`: `#9EFB21` - `--neutral--black`: `#005654` - `--neutral--dark`: `#005654` - `--neutral--medium-dark`: `#545757` - `--neutral--medium`: `#A8ABAB` - `--neutral--medium-light`: `#D4D6D6` - `--neutral--light`: `#F5F5F5` - `--neutral--white`: `#FFFFFF` - `--headlines`: `#005654` - `--text`: `#005654` - `--text-input`: `#005654` - `--inline-links`: `#3254C8` - `--inline-links--hover`: `#7393FF` - `--inline-links--visited`: `#8C3EFA` - `--menu-links`: `#005654` - `--menu-links--hover`: `#00E091` - `--menu-links--active`: `#005654` - `--text--80`: `#005654` - `--text--60`: `#005654` ### Typefaces - Plus Jakarta Sans (`--font--headlines`) — on Google Fonts ### Type scale (most-used sizes) `1.625rem` · `1.5rem` · `1.25rem` · `1.125rem` · `18px` · `1rem` · `16px` · `14px` · `.875rem` · `13px` · `12px` · `11px` ### Letter-spacing `1px` (1) ### Corner radii (most-used) `1000px` · `100px` · `8px` · `50%` · `4px` · `14px` · `25px` · `3px` · `6px` · `11px` ### Shadows - `0 0 .3125rem rgba(0,0,0,.08),0 .3125rem .3125rem rgba(0,0,0,.09)` - `0 0 .375rem rgba(0,0,0,.06),0 .375rem .5625rem rgba(0,0,0,.13)` - `0 .875rem 1.875rem rgba(0,0,0,.1),0 .1875rem 1rem rgba(0,0,0,.07)` - `0 .5625rem 1.4375rem rgba(0,0,0,.09),0 .3125rem .5rem rgba(0,0,0,.1)` - `0 .3125rem .75rem rgba(0,0,0,.12)` - `none!important` ### Gradients - `linear-gradient(90deg,hsla(0,0%,100%,.01),#fff 15%,#fff 85%,hsla(0,0%,100%,.001))` - `linear-gradient(180deg,#f2fcfa,#fff)` - `linear-gradient(0deg,#f2fcfa,#fff)` - `linear-gradient(90deg,#f2fcfa,#fff)` - `linear-gradient(-90deg,#f2fcfa,#fff)` - `linear-gradient(180deg,#fff8f2,#fff)` ### Breakpoints 568px · 768px · 769px · 992px · 993px · 1115px · 1330px · 1441px · 1921px · 2200px · 3100px · 4500px ```