Design System · v1 · WCAG 2.2 AAA

One system, every page.

Tokens, iconography, and components that power the hub, field guide, releases, architecture, and flat docs. Built for AAA contrast on a dark surface, fully responsive, keyboard-first.

Color tokens

Body/secondary text is AAA (≥7:1). Accent tokens are ≥4.5:1 and reserved for large text, icons, borders, and data — never small body copy. Values shown are contrast vs --BB-bg.

T

Typography

Inter for UI, JetBrains Mono for code/mono labels. Display uses clamp() so it never overflows on any viewport.

Display / clamp(38–60px)
The machine, explained.
Body / 15px

Body copy sits at --BB-t2 (#D1CEC5), comfortably above the AAA 7:1 threshold at 15.9:1 on the base background.

Mono / inline code

~/.spruce_grove/scripts/update-code-grove.sh and json.dumps(data, indent=2) wrap cleanly at any width.

Iconography

Lucide stroke set, weight 2, rounded joins, tinted per context. Shared through assets/icons.js — call BB.icon(name). Decorative glyphs are aria-hidden; only meaningful ones carry labels.

Components

Sidebar shell

Left column on desktop (≥981px), off-canvas drawer on mobile with a hamburger topbar. Collapses on desktop via the header toggle or Esc; traps focus when open on mobile; restores focus on close; persists the desktop collapse state.

<link rel="stylesheet" href="assets/tokens.css"> <link rel="stylesheet" href="assets/sidebar.css"> <script src="assets/icons.js"></script> <script>window.BB_SHELL = { base:"../", active:"hub", assetsBase:"../assets/" };</script> <script src="assets/shell.js" defer></script> <script src="assets/sidebar.js" defer></script>
Detail popover

Modal dialog with focus trap, Esc/backdrop close, "Open page" (full detail in a new tab), "Copy link", and deep-linkable #detail=<key> state. Trigger with data-pop.

Buttons
Note / callout
AAA note. Every interactive target is ≥24×24px, focus rings use --BB-focus (#E4AA71) at 3px-equivalent high contrast, and all motion respects prefers-reduced-motion.