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.

Logo Pack

One geometry, four jobs — the grove spruce (stepped canopy, trunk notch, rounded joins, low-opacity fill wash) composed per use. Masters in logos/, site copies in assets/. Full rules live in BRAND.md → The logo pack.

The Core Disc — the statement piece: stickers, laptops, app icons, favicons
Spruce Grove Core Disc Core Disc, 256px render favicon, 64px Disc render
The Grove Mark — application logo · dark surfaces · and the Ghost (watermark line art)
Spruce Grove mark for dark surfaces Ghost line-art watermark
Light-surface variant — spruce-green strokes, deep-gold center, for paper and light UI
Spruce Grove mark for light surfaces
The Lockups — website headers, READMEs, decks (Fraunces wordmark, Georgia fallback)
Horizontal lockup with wordmark Stacked lockup with wordmark
Masters

Editable sources in logos/ (SVG first, PNG renders exported); site copies in assets/. Favicon + apple-touch are Disc renders. Below 20px, only the Disc survives. Legacy marks (official, badge_*, noback) are frozen for old embeds only.

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.