---
generator: clinical-terminal-brand-kit
company: "Waveonline LLC"
domain: "waveonline.net"
colors:
  primary: "#4B186E"
  onPrimary: "#FFFFFF"
  dark: "#353744"
  accent: "#D11B27"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#353744"
  accent: "#4B186E"
fonts:
  heading: "Poppins"
  body: "Poppins"
radius:
  card: "6px"
  button: "20px"
---

# Design System — Waveonline LLC

> Read from Waveonline LLC's public website (waveonline.net) by Clinical Terminal. Not reviewed by Waveonline LLC.
> Use it as inspiration: borrow the ideas, not Waveonline LLC's name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from Waveonline LLC's site background #FFFFFF. Pages and panels sit on it.
- Main text: #353744 (11.79:1 on the ground).
- Secondary text is #353744 at 88% / 76% / 60%; hairlines and plate borders #353744 at 16%.

## Color
- **Accent on the ground: #4B186E** (12.69:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #4B186E** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (12.69:1).
- Secondary accent #D11B27: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Poppins**. Body: **Poppins**. Both on Google Fonts.

## Shape
- Cards and panels: 6px corners. Buttons and chips: 20px.

## Voice
- Tone: professional. Energy: low. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Other named colors

- `--theme-heding-color`: `#000000`
- `--theme-paragraph-color`: `#2E2F3A`
- `--theme-primary-color`: `#4B186E`
- `--cart-toast-green`: `#2E7D32`
- `--cart-toast-green-light`: `#E8F5E9`

### Typefaces

- wrap("$dummy2063 (`--sc-color-theme`)
- wrap("$dummy2064 (`--sc-color-theme-light-max`)
- wrap("$dummy2065 (`--sc-color-theme-light`)
- wrap("$dummy2066 (`--sc-color-theme-dark`)
- wrap("$dummy2067 (`--sc-color-theme-dark-max`)
- wrap("$dummy2068 (`--sc-color-link`)
- wrap("$dummy2069 (`--sc-color-link-hover`)
- wrap("$dummy2070 (`--sc-color-body-background`)
- wrap("$dummy2071 (`--sc-body-font-family`)
- wrap("$dummy2072 (`--sc-button-primary-background-color`)
- wrap("$dummy2073 (`--sc-button-primary-text-color`)
- wrap("$dummy2074 (`--sc-button-primary-border-color`)
- wrap("$dummy2075 (`--sc-button-primary-border-radius`)
- wrap("$dummy2076 (`--sc-button-primary-hover-background-color`)
- wrap("$dummy2077 (`--sc-button-primary-hover-text-color`)
- wrap("$dummy2078 (`--sc-button-primary-hover-border-color`)
- wrap("$dummy2079 (`--sc-button-primary-active-background-color`)
- wrap("$dummy2080 (`--sc-button-primary-active-text-color`)
- wrap("$dummy2081 (`--sc-button-primary-active-border-color`)
- wrap("$dummy2082 (`--sc-button-tertiary-background-color`)
- wrap("$dummy2083 (`--sc-button-tertiary-text-color`)
- wrap("$dummy2084 (`--sc-button-tertiary-border-color`)
- wrap("$dummy2085 (`--sc-button-tertiary-border-radius`)
- wrap("$dummy2086 (`--sc-button-tertiary-hover-background-color`)
- wrap("$dummy2087 (`--sc-button-tertiary-hover-text-color`)
- wrap("$dummy2088 (`--sc-button-tertiary-hover-border-color`)
- wrap("$dummy2089 (`--sc-button-tertiary-active-background-color`)
- wrap("$dummy2090 (`--sc-button-tertiary-active-text-color`)
- wrap("$dummy2091 (`--sc-button-tertiary-active-border-color`)
- wrap("$dummy2092 (`--sc-main-navigation-background-color`)
- wrap("$dummy2093 (`--sc-main-navigation-link-color`)
- wrap("$dummy2094 (`--sc-header-background-color`)
- wrap("$dummy2095 (`--sc-header-link-text-color`)

### Type scale (most-used sizes)

`24px` · `1.47rem` · `20px` · `1.2rem` · `1.067rem` · `1rem` · `15px` · `.93rem` · `.9rem` · `14px` · `13px` · `12px`

### Letter-spacing

`1px` (2) · `.5px` (2) · `2px` (2)

### Corner radii (most-used)

`6px` · `8px` · `.5625rem` · `50%` · `4px` · `10px` · `100%` · `99%` · `3px` · `20px`

### Shadows

- `0 6px 12px rgba(77,82,86,.175)`
- `inset 0 3px 5px rgba(0,0,0,.125)`
- `inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)`
- `0 6px 6px rgba(77,82,86,.175)`
- `0 3px 0 #fff`
- `0px 3px 0px #fff`

### Gradients

- `linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)`

### Breakpoints

320px · 480px · 590px · 600px · 767px · 768px · 769px · 780px · 786px · 787px · 991px · 992px · 1000px · 1140px · 1199px · 1200px · 1340px