Hub Design System Guide
Hub Design System Guide
Rules
1. Every page extends _web_base.html
{% extends "_web_base.html" %}
{% block title %}Page Title{% endblock %}
{% block content %}
<!-- your page content here -->
{% endblock %}
Never create a standalone <html>, <head>, or <body> tag. The base owns them.
2. Never write hardcoded colors. Use CSS variables.
The base defines these. Use them. Always.
| Variable | Value | Use for |
|---|---|---|
--bg |
#0d1117 |
Page background |
--surface |
#161b22 |
Cards, boxes, containers |
--border |
#30363d |
Dividers, borders |
--text |
#c9d1d9 |
Body text |
--text-strong |
#f0f6fc |
Headings, emphasis |
--text-muted |
#8b949e |
Subtitles, metadata |
--link |
#58a6ff |
Links, active states |
If you find yourself writing color: #161b22, you're doing it wrong. Use var(--surface).
3. Thread accent colors
Threads have fixed accent colors for quick visual identification.
| Thread | Accent Variable | Hex |
|---|---|---|
| Inbox Review | --accent-inbox |
#3fb950 |
| TLI | --accent-tli |
#d29922 |
| Robinhood | --accent-robinhood |
#3fb950 |
| Schwab | --accent-schwab |
#58a6ff |
| Options Lab | --accent-options |
#f0883e |
| Move to NV | --accent-move |
#f85149 |
| KB | --accent-kb |
#d29922 |
Use these for board headers, task priority dots, and status badges.
4. The nav is automatic
_web_base.html includes _nav.html for you. Don't re-include it in your page. Don't add your own <nav> tags.
If you need to add a thread to the nav, edit _nav.html only. The change appears everywhere.
5. Mobile responsiveness
Bulma handles the basics. For custom layouts:
- Use
columns is-mobilefor grids that don't stack on small screens - Use
is-6-tablet is-3-desktopfor responsive column widths - The nav burger works automatically (handled by
_nav.html) - Test on a phone width (375px) before shipping
6. Shared component patterns
The hub home (hub.html) defines several reusable component patterns:
| Component | Class | Use |
|---|---|---|
| Stat card | .stat-card |
Metric panels with .num + .lbl |
| Nav card | .nav-card |
Navigation links with icon + title + arrow |
| Task item | .task-item |
Pending task rows with priority dot |
| Recent item | .recent-item |
Recently updated article links |
| Section header | .section-header |
Category dividers with horizontal line |
Extract them from hub.html when you need them. Don't reproduce them inline.
7. KB templates
KB pages extend the KB base (kb/_base.html), which extends _web_base.html. The KB base adds:
- A left sidebar (kb-layout + kb-sidebar)
- The {% block body %} for sub-templates
KB sub-templates extend the KB base and fill the body block. Follow the existing article.html / folder.html pattern.
8. Before you commit
- Did you hardcode a color? → Use
var(--something)instead - Did you add a
<style>block? → Is it KB-layout-specific? If not, move it to the base - Did you add a
<link>or<meta>? → Those go in the base - Does it work at 375px width? → Check mobile
One exception: {% block head_extra %} in the base lets you inject page-specific <style>, <link>, or <meta> without breaking the system. Use it sparingly — the KB base uses it for the sidebar CSS.
Last updated: 2026-10-05 — post-migration from 15 standalone templates to 1 shared base.