[Design systems](/design-systems/) / The Cascade365 Family of Companies # The Cascade365 Family of Companies design system cascade365.com Read from The Cascade365 Family of Companies's public website by Clinical Terminal. Not reviewed by The Cascade365 Family of Companies. Copy it and paste it into Claude as inspiration. Corrections or removal: ![The Cascade365 Family of Companies homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923668.jpg?alt=media) ## Palette - Ground \#FFFFFF - Ink \#030B16 - Accent on the ground \#1A3FDB - Primary \#1A3FDB \--gcid-primary-color - On primary \#FFFFFF - Secondary accent \#2EA3F2 - Dark \#030B16 \--gcid-heading-color - Site background \#FFFFFF ## Other named colors - \--gcid-primary-color #1A3FDB - \--gcid-secondary-color #25E29A - \--gcid-heading-color #030B16 - \--gcid-body-color #030B16 - \--gcid-link-color #1A3FDB - \--gcid-sx8o27nhnh #F7F8FC ## Type Headings Archivo · closest free match for League Spartan The Cascade365 Family of Companies at a glance Body Archivo · closest free match for League Spartan Clear, readable paragraphs for clinicians, buyers and patients alike. - 96pxThe Cascade365 Family of Companies - 32pxThe Cascade365 Family of Companies - 30pxThe Cascade365 Family of Companies - 26pxThe Cascade365 Family of Companies - 23pxThe Cascade365 Family of Companies - 20pxThe Cascade365 Family of Companies - 18pxThe Cascade365 Family of Companies - 16pxThe Cascade365 Family of Companies ## Shape & depth Cards and panels: 3px corners · buttons and chips: 0px. ### Corner radii - 2px used in 2 rules - 3px used in 2 rules - 50% used in 1 rule - 1px used in 1 rule - 50px used in 1 rule - 32px used in 1 rule ### Shadows - 0 0 0 3px #f7f8fc used in 1 rule - 5px 0 0 hsla(0,0%,8%,.5),-5px 0 0 hsla(0,0%,8%,.5) used in 1 rule - 0 0 60px rgba(0,139,219,.247059) used in 1 rule - 0 8px 24px 0 rgba(34,44,57,.08) used in 1 rule - inset 0 0 7px rgba(0,0,0,.07) used in 1 rule ### Gradients - linear-gradient(transparent,rgba(0,0,0,.35)) used in 2 rules - linear-gradient(135deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent) used in 1 rule - linear-gradient(-45deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent) used in 1 rule - linear-gradient(135deg,#00d084,#0693e3) used in 1 rule - linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe) used in 1 rule - linear-gradient(135deg,#faaca8,#dad0ec) used in 1 rule Breakpoints: 479px · 600px · 767px · 768px · 860px · 861px · 980px · 981px · 1023px · 1024px · 1025px · 1200px ## Voice Tone: professional. Energy: low. Written for general consumers. ## 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%2F100923668.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "The Cascade365 Family of Companies" domain: "cascade365.com" colors: primary: "#1A3FDB" onPrimary: "#FFFFFF" dark: "#030B16" accent: "#2EA3F2" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#030B16" accent: "#1A3FDB" fonts: heading: "Archivo" body: "Archivo" radius: card: "3px" button: "0px" --- # Design System — The Cascade365 Family of Companies > Read from The Cascade365 Family of Companies's public website (cascade365.com) by Clinical Terminal. Not reviewed by The Cascade365 Family of Companies. > Use it as inspiration: borrow the ideas, not The Cascade365 Family of Companies's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from The Cascade365 Family of Companies's site background #FFFFFF. Pages and panels sit on it. - Main text: #030B16 (19.75:1 on the ground). - Secondary text is #030B16 at 88% / 76% / 60%; hairlines and plate borders #030B16 at 16%. ## Color - **Accent on the ground: #1A3FDB** (7.56:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #1A3FDB** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.56:1). - Secondary accent #2EA3F2: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - The Cascade365 Family of Companies's site uses League Spartan / League Spartan; these are the closest free look-alikes. ## Shape - Cards and panels: 3px corners. Buttons and chips: 0px. ## Voice - Tone: professional. Energy: low. Written for general consumers. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--gcid-primary-color`: `#1A3FDB` - `--gcid-secondary-color`: `#25E29A` - `--gcid-heading-color`: `#030B16` - `--gcid-body-color`: `#030B16` - `--gcid-link-color`: `#1A3FDB` - `--gcid-sx8o27nhnh`: `#F7F8FC` ### Typefaces - League Spartan (`--et_global_heading_font`) - ETmodules!important - ETmodules - ETmodules"!important - Open Sans — on Google Fonts - Inter — on Google Fonts ### Type scale (most-used sizes) `96px` · `32px` · `30px` · `26px` · `23px` · `20px` · `18px` · `16px` · `14px` · `12px` · `11px` · `10px` ### Corner radii (most-used) `2px` · `3px` · `50%` · `1px` · `50px` · `32px` ### Shadows - `0 0 0 3px #f7f8fc` - `5px 0 0 hsla(0,0%,8%,.5),-5px 0 0 hsla(0,0%,8%,.5)` - `0 0 60px rgba(0,139,219,.247059)` - `0 8px 24px 0 rgba(34,44,57,.08)` - `inset 0 0 7px rgba(0,0,0,.07)` ### Gradients - `linear-gradient(transparent,rgba(0,0,0,.35))` - `linear-gradient(135deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent)` - `linear-gradient(-45deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent)` - `linear-gradient(135deg,#00d084,#0693e3)` - `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)` - `linear-gradient(135deg,#faaca8,#dad0ec)` ### Breakpoints 479px · 600px · 767px · 768px · 860px · 861px · 980px · 981px · 1023px · 1024px · 1025px · 1200px · 1280px · 1300px · 1301px · 1440px · 1500px ```