[Design systems](/design-systems/) / Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts # Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts design system peregrinehealthcare.com Read from Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts's public website by Clinical Terminal. Not reviewed by Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923834.jpg?alt=media) ## Palette - Ground \#FFFFFF \--wpconsent-text - Ink \#4C1211 - Accent on the ground \#571728 - Primary \#571728 - On primary \#FFFFFF \--wpconsent-text - Secondary accent \#2098D1 - Dark \#4C1211 - Site background \#FFFFFF \--wpconsent-text ## Other named colors - \--grwp-readmore-color #1A73E8 - \--color #FB8E28 - \--rev-color #F4F4F4 - \--rpi-star-empty-color #CCCCCC - \--rpi-yelp-empty-color #CCCCCC - \--rpi-yelp-five-color #FB433C - \--rpi-yelp-four-color #FF643D - \--rpi-yelp-three-color #FF8742 - \--rpi-yelp-two-color #FFAD48 - \--rpi-yelp-one-color #FFCC4B - \--rpi-fb-color #FA3E3E - \--border-color #5BA672 - \--fill-color #5BA672 - \--slider-btn-color #777777 - \--slider-btn-bc #CCCCCC - \--x-color #ECECEC - \--wpconsent-background #04194E - \--wpconsent-text #FFFFFF - \--wpconsent-outline-color #FFFFFF - \--wpconsent-accept-bg #FFCD2A - \--wpconsent-cancel-bg #FFFFFF - \--wpconsent-preferences-bg #FFFFFF - \--wpconsent-accept-color #000000 - \--wpconsent-cancel-color #000000 - \--wpconsent-preferences-color #000000 ## Type Headings Archivo · closest free match for AvantGarde1 Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts at a glance Body Archivo · closest free match for AvantGarde4 Clear, readable paragraphs for clinicians, buyers and patients alike. - 40pxPeregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts - 36pxPeregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts - 30pxPeregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts - 22pxPeregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts - 20pxPeregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts - 18pxPeregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts - 17pxPeregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts - 16pxPeregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts ## Shape & depth Cards and panels: 10px corners · buttons and chips: 3px. ### Corner radii - 50% used in 23 rules - 10px used in 21 rules - 16px used in 21 rules - 3px used in 19 rules - 4px used in 15 rules - 5px used in 9 rules - 50px used in 8 rules - 100% used in 6 rules - 8px used in 5 rules - 20px used in 3 rules ### Shadows - 0 0 1px transparent used in 440 rules - 0 5px 10px rgba(0,0,0,0)!important used in 10 rules - inset 0 0 0 4px #e1e1e1,0 0 1px transparent used in 8 rules - 0 10px 10px -10px rgba(0,0,0,.5) used in 8 rules - 0 0 15px rgba(0,0,0,.1) used in 6 rules - 0 2px 10px rgba(0,0,0,.07) used in 6 rules ### Gradients - linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%) used in 6 rules - linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%) used in 6 rules - linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%) used in 6 rules - linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%) used in 6 rules - radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,transparent 80%) used in 4 rules - radial-gradient(50% 150%,ellipse,rgba(0,0,0,.6) 0,transparent 80%) used in 4 rules Breakpoints: 450px · 460px · 479px · 480px · 600px · 640px · 767px · 768px · 980px · 981px ## 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%2F100923834.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts" domain: "peregrinehealthcare.com" colors: primary: "#571728" onPrimary: "#FFFFFF" dark: "#4C1211" accent: "#2098D1" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#4C1211" accent: "#571728" fonts: heading: "Archivo" body: "Archivo" radius: card: "10px" button: "3px" --- # Design System — Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts > Read from Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts's public website (peregrinehealthcare.com) by Clinical Terminal. Not reviewed by Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts. > Use it as inspiration: borrow the ideas, not Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts's site background #FFFFFF. Pages and panels sit on it. - Main text: #4C1211 (14.98:1 on the ground). - Secondary text is #4C1211 at 88% / 76% / 60%; hairlines and plate borders #4C1211 at 16%. ## Color - **Accent on the ground: #571728** (13.47:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #571728** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (13.47:1). - Secondary accent #2098D1: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Peregrine Healthcare LLC | Revenue Cycle Management & Credentialing Experts's site uses AvantGarde1 / AvantGarde4; these are the closest free look-alikes. ## Shape - Cards and panels: 10px corners. Buttons and chips: 3px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--grwp-readmore-color`: `#1A73E8` - `--color`: `#FB8E28` - `--rev-color`: `#F4F4F4` - `--rpi-star-empty-color`: `#CCCCCC` - `--rpi-yelp-empty-color`: `#CCCCCC` - `--rpi-yelp-five-color`: `#FB433C` - `--rpi-yelp-four-color`: `#FF643D` - `--rpi-yelp-three-color`: `#FF8742` - `--rpi-yelp-two-color`: `#FFAD48` - `--rpi-yelp-one-color`: `#FFCC4B` - `--rpi-fb-color`: `#FA3E3E` - `--border-color`: `#5BA672` - `--fill-color`: `#5BA672` - `--slider-btn-color`: `#777777` - `--slider-btn-bc`: `#CCCCCC` - `--x-color`: `#ECECEC` - `--wpconsent-background`: `#04194E` - `--wpconsent-text`: `#FFFFFF` - `--wpconsent-outline-color`: `#FFFFFF` - `--wpconsent-accept-bg`: `#FFCD2A` - `--wpconsent-cancel-bg`: `#FFFFFF` - `--wpconsent-preferences-bg`: `#FFFFFF` - `--wpconsent-accept-color`: `#000000` - `--wpconsent-cancel-color`: `#000000` - `--wpconsent-preferences-color`: `#000000` ### Typefaces - Open Sans — on Google Fonts - AvantGardeBookBT - AvantGarde1 - AvantGardeITCTT - AvantGarde4 - ETmodules!important - ETmodules ### Type scale (most-used sizes) `40px` · `36px` · `30px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` ### Letter-spacing `.02em` (4) · `1px` (3) · `.1em` (1) · `2px` (1) ### Corner radii (most-used) `50%` · `10px` · `16px` · `3px` · `4px` · `5px` · `50px` · `100%` · `8px` · `20px` ### Shadows - `0 0 1px transparent` - `0 5px 10px rgba(0,0,0,0)!important` - `inset 0 0 0 4px #e1e1e1,0 0 1px transparent` - `0 10px 10px -10px rgba(0,0,0,.5)` - `0 0 15px rgba(0,0,0,.1)` - `0 2px 10px rgba(0,0,0,.07)` ### Gradients - `linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%)` - `linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%)` - `linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%)` - `linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%)` - `radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,transparent 80%)` - `radial-gradient(50% 150%,ellipse,rgba(0,0,0,.6) 0,transparent 80%)` ### Breakpoints 450px · 460px · 479px · 480px · 600px · 640px · 767px · 768px · 980px · 981px ```