OSD Analytics — Design System Guide

01 — Colors

Color Palette

A warm-to-cool gradient spectrum anchored by deep purple. Primary colors carry energy and urgency; secondary colors provide balance and informational context.

Primary Colors

Midnight

#18072B

Plum

#6F115C

Magenta

#B71786

Rose

#B22D5B

Hot Pink

#E73E94

Orange

#FB8107

Vermilion

#F46242

Coral

#DD523F

Secondary Colors

Indigo

#3D126D

Blue

#0077B5

Cyan

#00BBCF

Sky Blue

#6EC4E8

Teal

#009B76

Mint

#00A88E

Sage

#48A8A6

Seafoam

#68CC99

02 — Semantic Mapping

Functional Color Roles

How colors map to meaning across charts, UI elements, and data indicators. These assignments ensure consistency regardless of mode.

Primary Accent

Active buttons, selected tabs, primary chart series, key CTA elements

#B71786 · #E73E94

Warm Accent / Warning

Approaching thresholds, highlighted metrics, warm data series, attention callouts

#FB8107 · #F46242

Positive / On-Track

Proficient, growth indicators, positive change badges, success states

#009B76 · #68CC99

Negative / Below

Below standard, decline indicators, negative change, alert states

#DD523F · #B22D5B

Informational / Cool

Secondary data series, links, informational badges, comparison baselines

#0077B5 · #00BBCF

Neutral / Structure

Backgrounds, borders, disabled states, chart grid lines

#18072B · #3D126D

Performance Level Color Mapping

Suggested mapping for RISE / Acadience / benchmark-style levels:

Above

90%

Proficient

70%

Approaching

50%

Below

30%

03 — Light & Dark Modes

Mode-Specific Tokens

Surface, text, and border values that shift between modes. Accent colors remain the same in both themes — only structural tokens change.

Dark Mode

Background #18072B

Elevated #1F0E36

Card #281545

Input / Hover #331D55

Text Primary #F5F0FA

Text Secondary #B8A8CC

Text Muted #7E6A96

Border Subtle rgba(255,255,255, 0.07)

Border Medium rgba(255,255,255, 0.13)

Light Mode

Background #FFFFFF

Elevated #F7F4FA

Card #FFFFFF

Input / Hover #F2EEF7

Text Primary #18072B

Text Secondary #5C4A6E

Text Muted #9585A8

Border Subtle rgba(24,7,43, 0.08)

Border Medium rgba(24,7,43, 0.14)

04 — Typography

Type Scale

Plus Jakarta Sans provides a clean geometric foundation with warmth. Display numbers use extra-bold weight with tight tracking; body copy stays at regular weight for readability.

48px

ExtraBold · -1.5px

975,124

36px

ExtraBold · -0.5px

Dashboard Overview

28px

Bold · -0.5px

296,241

22px

SemiBold

Engagement Rate

18px

Regular

Body text for descriptions, chart annotations, and supplementary context.

16px

Medium

+42.8% from previous week · Axis labels · Table cells

14px

Bold · 2px tracking

Section Label · Overline

05 — Spacing & Shape

Spacing, Radii & Shadows

An 8px grid with compact interior spacing for data-dense layouts. Rounded shapes create a modern, approachable feel; pill shapes are reserved for interactive elements.

Spacing Scale

xs

4px

sm

8px

md

16px

lg

24px

xl

32px

2xl

48px

3xl

64px

Border Radius

sm

6px

md

10px

lg

14px

xl

20px

pill

999px

Shadows

Card

Elevated

Glow — Magenta

Glow — Cyan

06 — Components

UI Components

Core interactive elements. All components adapt to both light and dark modes using the token system. Toggle the mode switcher above to preview each state.

Buttons

Toggle Tabs

Navigation Tabs

Badges

Magenta Hot Pink Warning Below

On Track Info Blue

Metric Card

Total Students Assessed

4,287

+3.2% vs. prior year

Below Standard

18.4%

+2.1% vs. prior year

Data Tooltip

07 — Data Visualization

Chart.js Configuration

Recommended series colors, grid styling, and Chart.js defaults for both modes. Series colors remain constant across themes; only structural elements (grid, ticks, tooltips) adapt.

Chart Data Series Order

Use this sequence when plotting multiple data series. The order balances contrast and maintains readability.

Series 1 — Magenta

Series 2 — Cyan

Series 3 — Orange

Series 4 — Teal

Series 5 — Sky Blue

Series 6 — Hot Pink

Series 7 — Seafoam

Series 8 — Indigo

Chart.js Defaults by Mode

Property	Dark Mode	Light Mode
Canvas background	`transparent`	`transparent`
Grid line color	`rgba(255,255,255,0.07)`	`rgba(24,7,43,0.08)`
Grid line style	`borderDash: [4, 4]`
Grid drawBorder	`false`
Tick color	`#7e6a96`	`#9585a8`
Tick font	`{ family: 'Plus Jakarta Sans', size: 14, weight: 500 }`
Legend label color	`#b8a8cc`	`#5c4a6e`
Legend font	`{ family: 'Plus Jakarta Sans', size: 15, weight: 600 }`
Tooltip background	`#1f0e36`	`#ffffff`
Tooltip border	`rgba(255,255,255,0.13)`	`rgba(24,7,43,0.14)`
Tooltip title color	`#f5f0fa`	`#18072b`
Tooltip body color	`#b8a8cc`	`#5c4a6e`
Tooltip cornerRadius	`10`
Tooltip padding	`{ x: 14, y: 10 }`
Bar borderRadius	`4`
Line tension	`0.3`
Point radius	`0` (show on hover: `5`)

08 — Implementation

CSS Variables

Copy these custom properties into your stylesheet. Use data-theme attribute on <html> to switch modes.

/* ─── Shared Color Tokens ─── */
--p-midnight:   #18072b;
--p-plum:       #6F115C;
--p-magenta:    #B71786;
--p-rose:       #B22D5B;
--p-hotpink:    #e73e94;
--p-orange:     #FB8107;
--p-vermilion:  #F46242;
--p-coral:      #dd523f;

--s-indigo:     #3D126D;
--s-blue:       #0077B5;
--s-cyan:       #00BBCF;
--s-skyblue:    #6EC4E8;
--s-teal:       #009b76;
--s-mint:       #00a88e;
--s-sage:       #48a8a6;
--s-seafoam:    #68CC99;

/* ─── Dark Mode ─── */
[data-theme="dark"] {
  --bg-base:         #18072b;
  --bg-elevated:     #1f0e36;
  --bg-card:         #281545;
  --bg-input:        #331d55;
  --text-primary:    #f5f0fa;
  --text-secondary:  #b8a8cc;
  --text-muted:      #7e6a96;
  --border-subtle:   rgba(255,255,255, 0.07);
  --border-medium:   rgba(255,255,255, 0.13);
}

/* ─── Light Mode ─── */
[data-theme="light"] {
  --bg-base:         #ffffff;
  --bg-elevated:     #f7f4fa;
  --bg-card:         #ffffff;
  --bg-input:        #f2eef7;
  --text-primary:    #18072b;
  --text-secondary:  #5c4a6e;
  --text-muted:      #9585a8;
  --border-subtle:   rgba(24,7,43, 0.08);
  --border-medium:   rgba(24,7,43, 0.14);
}

09 — Principles

Design Guidelines

Key principles for maintaining visual consistency across dashboards in both modes.

Do

Use surface layering for depth (base → elevated → card) — shadows are supplementary, not primary
Keep accent colors constant across modes; only structural tokens (bg, text, border) shift
Apply pill shapes to interactive elements (buttons, tabs, badges) and rounded rectangles to containers (cards, panels)
Use magenta/hot pink sparingly — reserve for primary actions, active states, and the most important data series
Map performance levels consistently: blue for above, teal/green for proficient, orange for approaching, coral/red for below
Use dashed grid lines at very low opacity to keep chart areas clean
Display large metric numbers (28–48px) with tight letter-spacing and bold/extrabold weight
In light mode, use the purple-tinted grays (#F7F4FA, #F2EEF7) instead of neutral grays to maintain palette coherence

Don't

Don't use pure black (#000) in dark mode — use the deep purple base (#18072B) for warmth
Don't use pure gray (#f5f5f5) in light mode — use the purple-tinted elevated surface (#F7F4FA)
Don't apply hot pink or magenta to large background areas; they are accent colors only
Don't exceed 4 data series colors in a single chart — use fewer with clear differentiation
Don't mix sharp and rounded corners within the same component
Don't use colored grid lines or solid axis borders — these compete with data
Don't change the series color order between dashboards; consistency aids recognition
Don't use white text on light backgrounds or dark text on dark backgrounds without checking contrast ratios (aim for WCAG AA: 4.5:1)