Internal · Stratum Collective
Design System
Visual language for internal.stratumcollective.co — the ops, standup, pipeline, and marketing dashboards plus the navigation hub. One unified dark context with a three-color accent hierarchy.
3
Fonts
11
Components
3
Accents
1
Context
COLOR
Dark context — one palette throughout all dashboards
Backgrounds & Surfaces
--bg#08080dPage background
--surface#111118Cards, panels, sidebar
--surface2#181822Hover state fill
--surface3#222233Count badges, pills
Borders
--border#252538Primary borders
--border-sub#1c1c2cDividers within panels
Text
--text#e8e8f0Primary text
--text-dim#9898b0Secondary / de-emphasized
--text-muted#7e7e96Labels, metadata. WCAG AA floor — do not go darker.
Three-Color Accent System
VIOLET — Hero
One hero surface per page. Featured card, top CTA. Never use for more than one element per view.
#a855f7 · hover #c084fc
BLUE — Interactive
All interactive elements on the index hub: nav links, hover states, active indicators, card tags, badges.
#3b82f6
CYAN — Structural
Organizational chrome only: section headings, schedule group labels, header gradient. Never clickable.
#06b6d4
Dashboard pages (ops, standup, pipeline, marketing) use indigo #6366f1 (--accent) as the sole interactive color. The blue/cyan/violet triad is index hub only. Do not mix the two systems on the same page.
Indigo (--accent) — Dashboard Standard
--accent#6366f1Primary interactive — all dashboard pages
--accent-dimrgba(99,102,241,0.12)Active nav fill, filter active bg
Status Colors
--red#ef4444Critical, blocked, error
--amber#f59e0bAt risk, stale, warning
--green#22c55eOn track, done, fresh
--purple#a855f7Hero accent (index hub)
TYPOGRAPHY
Three families, each with a fixed semantic role
SECTION TITLE — 26PX LS3
Topbar / Panel / Brand — 20PX LS2
PANEL TITLE — 14PX LS2
Body text, data values, and nav items at 13px
11px — chips, meta labels, secondary data
10px — category labels, nav items
9PX UPPERCASE · SCHEDULE GROUPS
42
28px weight 500 — pulse display values
Task title or initiative name — 12px weight 600
Synopsis or description text — 13px weight 500
0.55rem (8.8px) — absolute minimum. No text below this size including labels, tags, and annotations.
SPACING & LAYOUT
Scale + layout tokens
Spacing Scale
2px
Tight list gaps
4px
Inline / glyph gap
6px
Chip vertical padding
8px
Chip horizontal padding, tight fills
10px
Nav padding, component internal gaps
12px
Panel header padding (v), card row gaps
16px
Panel body padding, pulse card padding
20px
Content section padding (v)
24px
Content padding (h), topbar padding
40px
Content area top padding
Layout Tokens
| Token | Value | Usage |
|---|---|---|
| --sidebar-w | 196px | Expanded sidebar width |
| --sidebar-w-collapsed | 52px | Icon-only collapsed state |
| --topbar-h | 44px | Global topbar height (z-index 300) |
| --header-h | 52px | Dashboard-local header height |
| --radius | 8px | Standard border-radius for panels and cards |
| body layout | display:flex; overflow:hidden | Sidebar + main, prevents double scrollbars |
| sidebar z-index | 200 | Always below topbar |
| edge-tab z-index | 250 | Sidebar toggle tab, above sidebar |
| topbar z-index | 300 | Above everything |
| scrollbar width | 4px | Thin custom scrollbar, transparent track |
META CHIPS
Inline status, priority, department, and assignee tags
All Chip Variants
Dept chips use pill radius (20px) and blue-tinted palette. Priority chips have a left border (2px) as a redundant signal — do not remove. Assignee chips are also pill-radius. All others use 3px radius.
TASK ROWS
Status group headers and task row states
Status Group Headers
BLOCKED3
IN PROGRESS11
AT RISK2
ON TRACK8
DONE24
Task Row States
HIPAA: Finalize audit trail for CloudTrail logging
PLATFORM: Add multi-tenant schema isolation to API layer
OUTREACH: Compose sequence for BH RCM Directors cohort
SPRINT: Deploy UIS intelligence section to ops dashboard
PULSE CARDS
KPI display cards with status-coded top borders
Critical
3
items blocked
At Risk
5
items flagged
Completion
74%
this sprint
Active
18
in progress
Pulse value is DM Mono 28px. Color comes from the semantic status, not the border — both should match.
.pulse-grid uses repeat(4, 1fr); collapse to 2 columns below 640px.
Sync / Freshness Dot
Fresh < 12h
Stale 12–48h
Error / > 48h
Loading
FILTERS & BUTTONS
Filter chips, tab bars, and group toggles
Filter Buttons
Filter buttons use
data-group attributes to segregate urgency vs. condition filters — misplaced buttons won't trigger the right JS handler. Active state: accent-dim bg + accent border + --text color.
PANELS
Surface containers with optional headers
Initiative Overview
4 items
Panel body — padding 16px. Header uses Bebas Neue 14px LS2. Header border-bottom: 1px solid --border-sub. Panel itself: --surface bg, --border border, --radius radius.
INDEX HUB
Components exclusive to the index.html navigation hub
The index hub uses a different base palette (navy #0a0e1a, not --bg #08080d) and the blue/cyan/violet accent triad. These components must not appear on dashboard pages — and indigo (--accent) must not appear on the hub.
Featured Card — Violet (Hero, one per page)
📋
DAILY HOME BASE
Standup Command Center
One violet featured card per page. Violet left border, violet badge, violet hover. Never apply violet to any other card.
Section Label (Cyan) + Standard Cards (Blue)
LIVE DASHBOARDS
Operations Dashboard
Section label = cyan. Card hover + tag = blue. Never swap the two.
LIVE DATA
Marketing Dashboard
Standard grid card — blue interactive state on hover.
15 BLOGS
ACCESSIBILITY
WCAG AA — required on all HTML/CSS without exception
| Rule | Requirement |
|---|---|
| Contrast ratio | 4.5:1 minimum for normal text, 3:1 for large text (>18px bold or >24px). No exceptions, including drafts and mockups. |
| Dim text floor | --text-muted (#7e7e96) is the darkest color allowed on #08–#12 range backgrounds. Do not go darker. |
| Font size floor | 0.55rem (8.8px) absolute minimum — applies to all text including labels, tags, chart annotations. |
| Focus styles | outline: 2px solid var(--accent); outline-offset: 2px — on every interactive element. Apply with :focus-visible. |
| Touch targets | 44px minimum. Dense dashboard toolbars may use 24px with documented rationale. |
| Semantic HTML | <aside> sidebar · <main> content · <header> header · <button> for all clickable controls (never <div>). |
| Aria labels | Add aria-label to icon-only buttons. Add role="navigation" + aria-label to nav drawers. All interactive counts via aria-live where dynamic. |
CSS TOKENS
Full :root variable reference
| Token | Value | Role |
|---|---|---|
| --bg | #08080d | Page background |
| --surface | #111118 | Cards, sidebar, panels |
| --surface2 | #181822 | Hover fill |
| --surface3 | #222233 | Count badges |
| --border | #252538 | Primary borders |
| --border-sub | #1c1c2c | Panel dividers |
| --text | #e8e8f0 | Primary text |
| --text-dim | #9898b0 | Secondary text |
| --text-muted | #7e7e96 | Labels — WCAG AA floor |
| --accent | #6366f1 | Dashboard interactive (indigo) |
| --accent-dim | rgba(99,102,241,0.12) | Active fill |
| --red | #ef4444 | Critical / blocked |
| --red-dim | rgba(239,68,68,0.10) | Blocked row bg |
| --amber | #f59e0b | At risk / warning |
| --amber-dim | rgba(245,158,11,0.10) | Warning bg |
| --green | #22c55e | On track / fresh |
| --green-dim | rgba(34,197,94,0.10) | Done chip bg |
| --blue | #3b82f6 | Hub interactive accent |
| --cyan | #06b6d4 | Hub structural labels |
| --purple | #a855f7 | Hub hero accent |
| --sidebar-w | 196px | Sidebar expanded width |
| --sidebar-w-collapsed | 52px | Sidebar collapsed width |
| --topbar-h | 44px | Global topbar height |
| --header-h | 52px | Dashboard local header height |
| --radius | 8px | Standard border-radius |
FONTS
Google Fonts CDN — one load string across all dashboards
CDN Load String
https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap
Always include both
rel="preconnect" tags for fonts.googleapis.com and fonts.gstatic.com (with crossorigin) before the stylesheet link.
Font Role Summary
| Family | Role | Weights used |
|---|---|---|
| Bebas Neue | Brand, display, section titles, panel titles, topbar, button labels. Letter-spacing 2–3px always. | 400 (only weight) |
| DM Mono | Body default on body. Data values, labels, timestamps, nav text, chip text, code-like content. | 300, 400, 500 · italic 400 |
| Plus Jakarta Sans | Task titles, initiative names, section headings with prose, synopsis body text, descriptions. | 400, 500, 600, 700, 800 |