Visual language for the navigation hub at internal.stratumcollective.co/. Distinct from the dashboard system — navy backgrounds, a three-color accent triad, and a flat (no-sidebar) layout. Never mix with dashboard indigo.
| Property | Hub (this system) | Dashboards (other system) |
|---|---|---|
| Background | #0a0e1a navy | #08080d near-black |
| Surface | #0f172a, #1e293b | #111118, #181822, #222233 |
| Borders | #1e3a5f | #252538, #1c1c2c |
| Primary accent | Blue #3b82f6 (interactive) | Indigo #6366f1 (all interactive) |
| Secondary accent | Cyan #06b6d4 (structural) | None — indigo only |
| Hero accent | Violet #a855f7 (1 element) | None |
| Layout | Full-width, sticky section-nav, no sidebar | Fixed sidebar + topbar, scrollable main |
| Fonts | Inter, Plus Jakarta Sans, DM Mono, Bebas Neue | DM Mono (body), Plus Jakarta Sans, Bebas Neue |
| Card border-radius | 4px | 8px (--radius) |
| Text primary | #e2e8f0 | #e8e8f0 |
| Text muted floor | #64748b | #7e7e96 (--text-muted) |
--accent or #6366f1 in index.html, stop — you're in the wrong system.font-family: 'Inter', 'Plus Jakarta Sans', sans-serif. Dashboard pages set 'DM Mono', monospace as body default. Do not use Inter on dashboard pages.
| Element | Spec |
|---|---|
| page bg | #0a0e1a — not a CSS variable, hardcoded in index.html |
| .header | linear-gradient(135deg, #0f172a, #1e293b) · border-bottom #1e3a5f · padding 20px 32px |
| .header-bar | 8×32px · gradient(180deg, #06b6d4, #3b82f6) — cyan top, blue bottom |
| .section-nav | Sticky top:0 · z-index 90 · #0a0e1a bg · padding 0 32px · -1px margin-bottom on links for border-overlap |
| .container | max-width 1600px · margin auto · padding 40px 40px |
| card grid | repeat(auto-fill, minmax(300px, 1fr)) · gap 12px |
| card border-radius | 4px — tighter than dashboard 8px |
| section-label margin | margin-top: 36px (0 for :first-child) · margin-bottom: 12px |
top: 0, z-index: 90. Active link: blue text + blue 2px bottom border. Hover: dim text + blue border. Links use margin-bottom: -1px to overlap the nav's border-bottom so the active indicator renders flush.3px solid #a855f7 · bg rgba(168,85,247,0.06) · border rgba(168,85,247,0.35) · badge color #c084fc · badge bg rgba(168,85,247,0.15). On hover: bg darkens to rgba(168,85,247,0.11), border to rgba(168,85,247,0.6), left border to #c084fc. The tag on the right mirrors badge colors (not the blue card-tag).
background: rgba(30,58,95,0.15) · border #1e3a5f · hover: translateY(-2px), border #3b82f6, bg rgba(59,130,246,0.08).opacity: 0.5 default · 0.75 on hover. Never apply featured violet to an archived card.
color: var(--cyan); opacity: 0.7; font-size: 9px; letter-spacing: 0.18em.#60a5fa (blue-hi).rgba(30,58,95,0.10) · hover border: #1e3a5f, bg: rgba(30,58,95,0.2).90px 1fr 1fr · collapse description column below 640px.
| Name / Usage | Value | Role |
|---|---|---|
| page bg | #0a0e1a | Body background |
| header gradient | 135deg, #0f172a → #1e293b | .header bg |
| border | #1e3a5f | All borders, card default, section-nav |
| card hover bg | rgba(30,58,95,0.15) | Card default bg |
| text primary | #e2e8f0 | Card titles, header title |
| text dim | #94a3b8 | Nav hover, secondary labels |
| text muted | #64748b | Card desc, nav default, kb-link default. WCAG AA floor. |
| text sub | #4a5568 | Section-nav default. Marginal — verify contrast in context. |
| violet (hero) | #a855f7 | Featured card border-left, badge, hover |
| violet-hi | #c084fc | Featured badge text, featured tag text, hover left-border |
| blue (interactive) | #3b82f6 | Card tag, hover border, section-nav active, kb-link hover |
| blue-hi | #60a5fa | Schedule time, featured badge hover (prev system) |
| cyan (structural) | #06b6d4 | Section labels, schedule group labels, header-bar gradient top |
| card border-radius | 4px | All cards (tighter than dashboard 8px) |
| container max-width | 1600px | Hub is wider — not capped at dashboard 960px |