rpd-ui Design System
Unified styling for all Rapid Networks dashboards. One CSS + JS file. Drop in, look consistent.
<link href="/rpd-ui/rpd-ui.css" rel="stylesheet">
<script src="/rpd-ui/rpd-ui.js"></script>
Color Palette
Brand colors, semantic colors, and their variants. Blue = authority, Green = action.
Brand Blue--rpd-blue: #1B6192
Blue Dark--rpd-blue-dark: #155073
Brand Green--rpd-green: #33CC33
Green Dark--rpd-green-dark: #29a329
Danger--rpd-danger: #e74c3c
Warning--rpd-warning: #f39c12
Gradients
Blue Gradient--rpd-gradient-blue
Green Gradient--rpd-gradient-green
Stat Cards
Metric cards with icon, label, value, and change indicator. Hover for green glow + lift.
Total Calls
1,234
+15% from yesterday
Missed
247
-5% from yesterday
Avg Wait
0:42
— no change
Buttons
Solid, outline, ghost, glass, and pill variants. All lift on hover.
Solid
Outline & Ghost
Pill / Glass (for headers & dark backgrounds)
Sizes
Loading State
Badges
Status indicators, labels, and category markers.
Active
Outbound
Missed
Warning
Company
Disabled
Active
Inactive
Blocked
Pending
New
Cards
Content cards with optional header, body, and footer. Hover for green glow.
1
John Smith
142 calls
98%
3
Bob Wilson
115 calls
91%
All systems operational. Last check: 2 minutes ago.
Scheduled maintenance tonight 02:00–04:00 SAST.
New feature: Dark mode is now available across all dashboards.
Tables
Sticky blue headers, green row hover with left accent. Wrap in .rpd-table-wrap for scroll.
| Extension |
Name |
Total Calls |
Answered |
Missed |
Status |
| 201 |
John Smith |
142 |
139 |
3 |
|
| 202 |
Jane Doe |
128 |
121 |
7 |
|
| 203 |
Bob Wilson |
95 |
82 |
13 |
|
| 204 |
Alice Brown |
0 |
0 |
0 |
|
Form Controls
Inputs, selects, and labels with green focus ring.
Health Indicators
Pulsing status dots.
Healthy
Warning
Error
Quick Start
Add two lines to any dashboard to get the full Rapid Networks design system.
<!-- In your <head> -->
<link href="
/rpd-ui/rpd-ui.css" rel="stylesheet">
<!-- Before </body> -->
<script src="
/rpd-ui/rpd-ui.js"></script>
<!-- Optional: Auto-render header -->
<div id="header"></div>
<script>
RPD.renderHeader('#header', {
title: 'My Dashboard',
icon: 'fas fa-chart-line',
subtitle: 'Real-time analytics',
nav: [
{ label: 'Dashboard', icon: 'fas fa-home', href: '/', active: true },
{ label: 'Reports', icon: 'fas fa-file-alt', href: '/reports' }
]
});
</script>
rpd-ui v1.0 — Rapid Networks Design System
Bootstrap 5 · Font Awesome 6 · Zero dependencies beyond that