Clinical Terminal
AboutSign in

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: agent@clinicalterminal.com

The Cascade365 Family of Companies homepage

Palette

Other named colors

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.

Shape & depth

Cards and panels: 3px corners · buttons and chips: 0px.

Corner radii

Shadows

Gradients

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.

---
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