[Design systems](/design-systems/) / Waystar # Waystar design system waystar.com Read from Waystar's public website by Clinical Terminal. Not reviewed by Waystar. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Waystar homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100058.jpg?alt=media) ## Palette - Ground \#FFFFFF \--light - Ink \#000000 - Accent on the ground \#D44000 - Primary \#FF6900 \--quiz-2 - On primary \#000000 - Dark \#000000 - Site background \#FFFFFF \--light ## Color ramps Quiz 1 \#BE141B 2 \#FF6900 3 \#009CDC 4 \#84C661 ## Other named colors - \--blue #009CDC - \--indigo #A82E82 - \--purple #A82E82 - \--pink #A82E82 - \--red #BE141B - \--orange #FF6900 - \--yellow #FCB415 - \--green #84C661 - \--teal #00B5AF - \--cyan #00B5AF - \--gray #ADB5BD - \--gray-dark #343A40 - \--slate #4C5966 - \--gray-bg #647484 - \--gray-light #DEE2E6 - \--primary #FF6900 - \--secondary #4C5966 - \--success #84C661 - \--info #00B5AF - \--warning #FCB415 - \--danger #BE141B - \--light #FFFFFF - \--dark #4C5966 - \--white #FFFFFF - \--orange-light #FFF5ED - \--green-light #F1F9EE - \--blue-light #EBF7FD - \--purple-light #FDEFF9 - \--slate-light #F1F2F3 - \--nav-color #FFFFFF - \--fob-color #D8DDE1 - \--page-theme-color-alt2 #614B8E ## Type Headings Montserrat Waystar at a glance Body Montserrat Clear, readable paragraphs for clinicians, buyers and patients alike. - 2.5rem · 40pxWaystar - 36pxWaystar - 2rem · 32pxWaystar - 1.75rem · 28pxWaystar - 1.5rem · 24pxWaystar - 1.25rem · 20pxWaystar - 18pxWaystar - 1rem · 16pxWaystar ## Shape & depth Cards and panels: 0px corners · buttons and chips: 0px. ### Corner radii - 50% used in 45 rules - 40px used in 22 rules - 1rem used in 11 rules - 20px used in 11 rules - 10px used in 8 rules - 30px used in 5 rules - 9999rem used in 4 rules - 3px used in 3 rules - .25rem used in 3 rules - 1.5rem used in 3 rules ### Shadows - inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 1px rgba(0,0,0,.075) used in 19 rules - none!important used in 17 rules - 0 0 1rem 0 #a82e82 used in 6 rules - 0 0 0 .2rem rgba(255,105,0,.25) used in 4 rules - 0 0 0 .2rem rgba(132,198,97,.25) used in 4 rules - 0 0 0 .2rem rgba(190,20,27,.25) used in 4 rules ### Gradients - linear-gradient(135deg,rgb(255,150,76.5) 16.67%,#ff6900 0,#ff6900 50%,rgb(255,150,76.5) 0,rgb(255,150,76.5) 66.67%,#ff6900 0,#ff6900) used in 2 rules - radial-gradient(farthest-corner at 40px 40px,#ff6900 0,rgb(127.5,52.5,0) 100%) used in 2 rules - linear-gradient(135deg,rgb(108.6629213483,127.25,145.8370786517) 16.67%,#4c5966 0,#4c5966 50%,rgb(108.6629213483,127.25,145.8370786517) 0,rgb(108.6629213483,127.25,145.8370786517) 66.67%,#4c5966 0,#4c5966) used in 2 rules - radial-gradient(farthest-corner at 40px 40px,#4c5966 0,rgb(21.5617977528,25.25,28.9382022472) 100%) used in 2 rules - linear-gradient(135deg,rgb(175.7651162791,218.2813953488,153.2186046512) 16.67%,#84c661 0,#84c661 50%,rgb(175.7651162791,218.2813953488,153.2186046512) 0,rgb(175.7651162791,218.2813953488,153.2186046512) 66.67%,#84c661 0,#84c661) used in 2 rules - radial-gradient(farthest-corner at 40px 40px,#84c661 0,rgb(71.6744186047,123.0930232558,44.4069767442) 100%) used in 2 rules Breakpoints: 350px · 374px · 390px · 400px · 480px · 576px · 639px · 640px · 767px · 768px · 959px · 960px ## Voice Tone: professional. Energy: high. 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%2F100058.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Waystar" domain: "waystar.com" colors: primary: "#FF6900" onPrimary: "#000000" dark: "#000000" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000000" accent: "#D44000" fonts: heading: "Montserrat" body: "Montserrat" radius: card: "0px" button: "0px" --- # Design System — Waystar > Read from Waystar's public website (waystar.com) by Clinical Terminal. Not reviewed by Waystar. > Use it as inspiration: borrow the ideas, not Waystar's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Waystar's site background #FFFFFF. Pages and panels sit on it. - Main text: #000000 (21:1 on the ground). - Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%. ## Color - **Accent on the ground: #D44000** (4.63:1), adjusted from Waystar's primary #FF6900 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #FF6900** for filled shapes (buttons, chips, bars), with #000000 text on it (7.27:1). - Quote every hex exactly as written above. ## Type - Headlines: **Montserrat**. Body: **Montserrat**. Both on Google Fonts. ## Shape - Cards and panels: 0px corners. Buttons and chips: 0px. ## Voice - Tone: professional. Energy: high. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Quiz** (`--quiz-N`): 1 `#BE141B` · 2 `#FF6900` · 3 `#009CDC` · 4 `#84C661` ### Other named colors - `--blue`: `#009CDC` - `--indigo`: `#A82E82` - `--purple`: `#A82E82` - `--pink`: `#A82E82` - `--red`: `#BE141B` - `--orange`: `#FF6900` - `--yellow`: `#FCB415` - `--green`: `#84C661` - `--teal`: `#00B5AF` - `--cyan`: `#00B5AF` - `--gray`: `#ADB5BD` - `--gray-dark`: `#343A40` - `--slate`: `#4C5966` - `--gray-bg`: `#647484` - `--gray-light`: `#DEE2E6` - `--primary`: `#FF6900` - `--secondary`: `#4C5966` - `--success`: `#84C661` - `--info`: `#00B5AF` - `--warning`: `#FCB415` - `--danger`: `#BE141B` - `--light`: `#FFFFFF` - `--dark`: `#4C5966` - `--white`: `#FFFFFF` - `--orange-light`: `#FFF5ED` - `--green-light`: `#F1F9EE` - `--blue-light`: `#EBF7FD` - `--purple-light`: `#FDEFF9` - `--slate-light`: `#F1F2F3` - `--nav-color`: `#FFFFFF` - `--fob-color`: `#D8DDE1` - `--page-theme-color-alt2`: `#614B8E` ### Typefaces - SFMono-Regular (`--font-family-monospace`) - Montserrat — on Google Fonts - Perpetua Titling ### Type scale (most-used sizes) `2.5rem` · `36px` · `2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `18px` · `1rem` · `.9rem` · `14px` · `.75rem` · `12px` ### Letter-spacing `3px` (5) · `2px` (5) · `-4px` (3) · `6px` (2) · `.3rem` (1) · `.25rem` (1) ### Corner radii (most-used) `50%` · `40px` · `1rem` · `20px` · `10px` · `30px` · `9999rem` · `3px` · `.25rem` · `1.5rem` ### Shadows - `inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 1px rgba(0,0,0,.075)` - `none!important` - `0 0 1rem 0 #a82e82` - `0 0 0 .2rem rgba(255,105,0,.25)` - `0 0 0 .2rem rgba(132,198,97,.25)` - `0 0 0 .2rem rgba(190,20,27,.25)` ### Gradients - `linear-gradient(135deg,rgb(255,150,76.5) 16.67%,#ff6900 0,#ff6900 50%,rgb(255,150,76.5) 0,rgb(255,150,76.5) 66.67%,#ff6900 0,#ff6900)` - `radial-gradient(farthest-corner at 40px 40px,#ff6900 0,rgb(127.5,52.5,0) 100%)` - `linear-gradient(135deg,rgb(108.6629213483,127.25,145.8370786517) 16.67%,#4c5966 0,#4c5966 50%,rgb(108.6629213483,127.25,145.8370786517) 0,rgb(108.6629213483,127.25,145.8370786517) 66.67%,#4c5966 0,#4c5966)` - `radial-gradient(farthest-corner at 40px 40px,#4c5966 0,rgb(21.5617977528,25.25,28.9382022472) 100%)` - `linear-gradient(135deg,rgb(175.7651162791,218.2813953488,153.2186046512) 16.67%,#84c661 0,#84c661 50%,rgb(175.7651162791,218.2813953488,153.2186046512) 0,rgb(175.7651162791,218.2813953488,153.2186046512) 66.67%,#84c661 0,#84c661)` - `radial-gradient(farthest-corner at 40px 40px,#84c661 0,rgb(71.6744186047,123.0930232558,44.4069767442) 100%)` ### Breakpoints 350px · 374px · 390px · 400px · 480px · 576px · 639px · 640px · 767px · 768px · 959px · 960px · 962px · 972px · 991px · 992px · 1024px · 1199px · 1200px · 1220px · 1340px · 1366px · 1440px · 1450px · 1490px · 1528px · 2300px ```