[Design systems](/design-systems/) / Patientpay # Patientpay design system patientpay.com Read from Patientpay's public website by Clinical Terminal. Not reviewed by Patientpay. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Patientpay homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923826.jpg?alt=media) ## Palette - Ground \#F4F3F7 \--background - Ink \#072140 - Accent on the ground \#916500 - Primary \#FBCC48 \--yellow-1 - On primary \#19314E \--primary-blue-2 - Secondary accent \#FCC93B \--yellow - Dark \#072140 \--primary-blue - Site background \#F4F3F7 \--background ## Color ramps Yellow 1 \#FBCC48 2 \#FACF56 3 \#FACF56 4 \#F9D263 5 \#F8D570 6 \#F7D87D Primary Blue 2 \#19314E 3 \#2B415C 4 \#3D516A 5 \#4E6178 6 \#607186 Secondary Blue 2 \#5CA2D0 3 \#7DB4DA 4 \#9EC7E3 5 \#BEDAEC 6 \#DEECF6 7 \#EDEBF3 Charts Chart 1 \#B58800 2 \#CAAA59 3 \#A97700 4 \#AF8A0E 5 \#926B00 ## Other named colors - \--background #F4F3F7 - \--primary-blue #072140 - \--yellow #FCC93B - \--white #FFFFFF - \--patientpay-blue #043A72 - \--secondary-blue #3C8FC7 - \--border #D5F3E6 - \--colors--muted #EDEDED - \--colors--card-foreground #060606 - \--colors--popover #E7E6E6 - \--colors--popover-foreground #060606 - \--colors--primary #D5A704 - \--colors--primary-foreground #110D04 - \--colors--secondary #FBE9BC - \--colors--secondary-foreground #0F0D07 - \--colors--muted-foreground #736F70 - \--colors--accent #D9D9D9 - \--colors--accent-foreground #0D0D0D - \--colors--destructive #D5455F - \--colors--input #D8F6E9 - \--colors--ring #F1CE76 - \--sidebar--sidebar #EDEDED - \--sidebar--sidebar-foreground #060606 - \--sidebar--sidebar-primary #D5A704 - \--sidebar--sidebar-primary-foreground #110D04 - \--sidebar--sidebar-accent #D9D9D9 - \--sidebar--sidebar-accent-foreground #0D0D0D - \--sidebar--sidebar-ring #F1CE76 - \--colors--background-dark #080707 - \--colors--foreground-dark #F8F8F8 - \--colors--card-dark #1B1B1B - \--colors--card-foreground-dark #F8F8F8 - \--colors--popover-dark #1B1B1B - \--colors--popover-foreground-dark #F8F8F8 - \--colors--primary-foreground-dark #080501 - \--colors--secondary-dark #2B1900 - \--colors--secondary-foreground-dark #FBF8F1 - \--colors--muted-dark #030202 - \--colors--muted-foreground-dark #8F8F8F - \--colors--accent-dark #303030 - \--colors--accent-foreground-dark #F8F8F8 - \--colors--destructive-dark #D74760 - \--colors--border-dark #D5F3E6 - \--colors--input-dark #FFFFFF - \--colors--ring-dark #F1CE76 - \--charts--chart-2-dark #FFF5A3 - \--charts--chart-3-dark #DEAA00 - \--charts--chart-4-dark #FFEF8F ## Type Headings Archivo Patientpay at a glance Body Manrope Clear, readable paragraphs for clinicians, buyers and patients alike. - 3rem · 48pxPatientpay - 40pxPatientpay - 38pxPatientpay - 32pxPatientpay - 24pxPatientpay - 18pxPatientpay - 1rem · 16pxPatientpay - 15pxPatientpay ## Shape & depth Cards and panels: 3px corners · buttons and chips: 3px. ### Corner radii - 3px used in 12 rules - .25rem used in 7 rules - 50% used in 6 rules - .5rem used in 4 rules - 5px used in 2 rules - 11px used in 2 rules - 999rem used in 2 rules - 100% used in 1 rule - 2px used in 1 rule - 7px used in 1 rule ### Shadows - 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 - 0 0 3px 1px #3898ec used in 1 rule - 2px 4px 9px 2px #0003 used in 1 rule - 0 60px 50px -20px #17152047 used in 1 rule ### Gradients - linear-gradient(90deg,#211e2ee6,#17152080 47%,#17152066) used in 1 rule - linear-gradient(#fcc93b69,#fcc93b69) used in 1 rule - radial-gradient(circle at 0%,#072140,#fff0) used in 1 rule - radial-gradient(circle at 100% 100%,#dde2e7,#fff0 50%) used in 1 rule - radial-gradient(circle farthest-side at 50% 0,#96a2af,#fff0 45%) used in 1 rule - radial-gradient(circle at 30% 100%,#728194,#fff0 29%) used in 1 rule Breakpoints: 479px · 767px · 768px · 991px · 1440px · 1920px ## 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%2F100923826.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Patientpay" domain: "patientpay.com" colors: primary: "#FBCC48" onPrimary: "#19314E" dark: "#072140" accent: "#FCC93B" background: "#F4F3F7" ground: mode: light hex: "#F4F3F7" ink: "#072140" accent: "#916500" fonts: heading: "Archivo" body: "Manrope" radius: card: "3px" button: "3px" --- # Design System — Patientpay > Read from Patientpay's public website (patientpay.com) by Clinical Terminal. Not reviewed by Patientpay. > Use it as inspiration: borrow the ideas, not Patientpay's name, logo or identity. ## Ground - **Light ground** (#F4F3F7), from Patientpay's site background #F4F3F7. Pages and panels sit on it. - Main text: #072140 (14.62:1 on the ground). - Secondary text is #072140 at 88% / 76% / 60%; hairlines and plate borders #072140 at 16%. ## Color - **Accent on the ground: #916500** (4.68:1), adjusted from Patientpay's primary #FBCC48 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #FBCC48** for filled shapes (buttons, chips, bars), with #19314E text on it (8.7:1). - Secondary accent #FCC93B: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Manrope**. Both on Google Fonts. ## Shape - Cards and panels: 3px corners. Buttons and chips: 3px. ## Voice - Tone: professional. Energy: low. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Yellow** (`--yellow-N`): 1 `#FBCC48` · 2 `#FACF56` · 3 `#FACF56` · 4 `#F9D263` · 5 `#F8D570` · 6 `#F7D87D` - **Primary Blue** (`--primary-blue-N`): 2 `#19314E` · 3 `#2B415C` · 4 `#3D516A` · 5 `#4E6178` · 6 `#607186` - **Secondary Blue** (`--secondary-blue-N`): 2 `#5CA2D0` · 3 `#7DB4DA` · 4 `#9EC7E3` · 5 `#BEDAEC` · 6 `#DEECF6` · 7 `#EDEBF3` - **Charts Chart** (`--charts--chart-N`): 1 `#B58800` · 2 `#CAAA59` · 3 `#A97700` · 4 `#AF8A0E` · 5 `#926B00` ### Other named colors - `--background`: `#F4F3F7` - `--primary-blue`: `#072140` - `--yellow`: `#FCC93B` - `--white`: `#FFFFFF` - `--patientpay-blue`: `#043A72` - `--secondary-blue`: `#3C8FC7` - `--border`: `#D5F3E6` - `--colors--muted`: `#EDEDED` - `--colors--card-foreground`: `#060606` - `--colors--popover`: `#E7E6E6` - `--colors--popover-foreground`: `#060606` - `--colors--primary`: `#D5A704` - `--colors--primary-foreground`: `#110D04` - `--colors--secondary`: `#FBE9BC` - `--colors--secondary-foreground`: `#0F0D07` - `--colors--muted-foreground`: `#736F70` - `--colors--accent`: `#D9D9D9` - `--colors--accent-foreground`: `#0D0D0D` - `--colors--destructive`: `#D5455F` - `--colors--input`: `#D8F6E9` - `--colors--ring`: `#F1CE76` - `--sidebar--sidebar`: `#EDEDED` - `--sidebar--sidebar-foreground`: `#060606` - `--sidebar--sidebar-primary`: `#D5A704` - `--sidebar--sidebar-primary-foreground`: `#110D04` - `--sidebar--sidebar-accent`: `#D9D9D9` - `--sidebar--sidebar-accent-foreground`: `#0D0D0D` - `--sidebar--sidebar-ring`: `#F1CE76` - `--colors--background-dark`: `#080707` - `--colors--foreground-dark`: `#F8F8F8` - `--colors--card-dark`: `#1B1B1B` - `--colors--card-foreground-dark`: `#F8F8F8` - `--colors--popover-dark`: `#1B1B1B` - `--colors--popover-foreground-dark`: `#F8F8F8` - `--colors--primary-foreground-dark`: `#080501` - `--colors--secondary-dark`: `#2B1900` - `--colors--secondary-foreground-dark`: `#FBF8F1` - `--colors--muted-dark`: `#030202` - `--colors--muted-foreground-dark`: `#8F8F8F` - `--colors--accent-dark`: `#303030` - `--colors--accent-foreground-dark`: `#F8F8F8` - `--colors--destructive-dark`: `#D74760` - `--colors--border-dark`: `#D5F3E6` - `--colors--input-dark`: `#FFFFFF` - `--colors--ring-dark`: `#F1CE76` - `--charts--chart-2-dark`: `#FFF5A3` - `--charts--chart-3-dark`: `#DEAA00` - `--charts--chart-4-dark`: `#FFEF8F` - `--charts--chart-5-dark`: `#C69D21` - `--sidebar--sidebar-dark`: `#0E0D0D` - `--sidebar--sidebar-foreground-dark`: `#F8F8F8` - `--sidebar--sidebar-primary-foreground-dark`: `#080501` - `--sidebar--sidebar-accent-dark`: `#303030` - `--sidebar--sidebar-accent-foreground-dark`: `#F8F8F8` - `--sidebar--sidebar-border-dark`: `#FFFFFF` - `--sidebar--sidebar-ring-dark`: `#F1CE76` ### Typefaces - Archivo (`--heading-font`) — on Google Fonts - Manrope (`--paragraph-font`) — on Google Fonts - Archivo Variablefont Wdth Wght - Inter Variablefont Opsz Wght - Enterprise Sans \- Optum - Manrope Variablefont Wght ### Type scale (most-used sizes) `3rem` · `40px` · `38px` · `32px` · `24px` · `18px` · `1rem` · `15px` · `.875rem` · `14px` · `12px` · `10px` ### Letter-spacing `.1em` (7) · `.2em` (5) · `.15em` (4) · `.02em` (3) · `.6em` (2) · `.3em` (2) ### Corner radii (most-used) `3px` · `.25rem` · `50%` · `.5rem` · `5px` · `11px` · `999rem` · `100%` · `2px` · `7px` ### Shadows - `0 0 0 1px #0000001a,0 1px 3px #0000001a` - `0 0 3px #3336` - `0 0 0 2px #fff` - `0 0 3px 1px #3898ec` - `2px 4px 9px 2px #0003` - `0 60px 50px -20px #17152047` ### Gradients - `linear-gradient(90deg,#211e2ee6,#17152080 47%,#17152066)` - `linear-gradient(#fcc93b69,#fcc93b69)` - `radial-gradient(circle at 0%,#072140,#fff0)` - `radial-gradient(circle at 100% 100%,#dde2e7,#fff0 50%)` - `radial-gradient(circle farthest-side at 50% 0,#96a2af,#fff0 45%)` - `radial-gradient(circle at 30% 100%,#728194,#fff0 29%)` ### Breakpoints 479px · 767px · 768px · 991px · 1440px · 1920px ```