Update themes to match Supermodel brand guidelines

[jonathanpopham]

Context

The current theme in both arch-docs (per-repo pages) and supermodeltools.github.io (homepage) diverges significantly from the official Supermodel brand guidelines.

Current vs. Brand Guide

Colors

Token	Current	Brand Guide	Notes
--bg	#0f1117 (blue-gray)	#000000 or #161616 (Black / Light Black)	Brand is pure black, not blue-tinted
--bg-card	#1a1d27 (blue-gray)	#08191C (Deep Space teal)	Should use Deep Space for card surfaces
--accent	#6366f1 (indigo)	#71B9BC (Starlight Blue / Teal)	Major mismatch — brand accent is teal, not indigo
--accent-light	#818cf8 (light indigo)	#8CC6C9 (Teal 400)	Should follow teal scale
--green	#22c55e	#7CCE86 (Green 500)	Brand green is more muted
--orange	#f59e0b	#D0A27D (Brown 500)	Brand uses brown/earth tones, not orange
--blue	#3b82f6	#71B9BC (Teal) or #8E8CE9 (Purple 500)	No bright blue in brand palette
--red	#ef4444	#E589C6 (Pink 500)	Brand uses pink instead of red for warnings
--border	#2a2e3e (blue-gray)	#202020 (Gray 900) or #1C2E2F (Teal 900)	Should be neutral or teal-tinted

Typography

Element	Current	Brand Guide
Body font	Inter	Public Sans (general purpose, 90% of use)
Mono font	JetBrains Mono	Martian Mono (data & details)
Accent font	(none)	Lexend Peta (uppercase labels, sparingly)

Design Philosophy

Brand guide states: "Color should predominantly be black with hints of white, and very little color." The current theme uses too much color saturation and blue-tinted grays instead of pure blacks.

Scope

Both repos need updating:

1. arch-docs — templates/_styles.css CSS variables (:root block) + font imports
2. supermodeltools.github.io — generate-index.go template CSS variables + font imports

Proposed :root mapping

:root {
  --bg: #000000;
  --bg-card: #161616;
  --bg-hover: #08191C;
  --border: #202020;
  --text: #E9E9E9;
  --text-muted: #808080;
  --accent: #71B9BC;
  --accent-light: #8CC6C9;
  --green: #7CCE86;
  --orange: #D0A27D;
  --red: #E589C6;
  --blue: #8E8CE9;
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Martian Mono', 'Fira Code', monospace;
}

Secondary palette pills

The repo card pill classes should map to the brand's secondary palette:

Pill class	Current	Brand Guide
.pill-accent	Indigo	Teal #71B9BC / #5C9699
.pill-green	Bright green	Green #7CCE86 / #65A76D
.pill-blue	Bright blue	Purple #8E8CE9 / #7372BD
.pill-orange	Amber	Brown #D0A27D / #A98466

Checklist

• Update arch-docs/templates/_styles.css :root variables
• Update arch-docs/templates/_styles.css font import (Public Sans + Martian Mono)
• Update supermodeltools.github.io/generate-index.go CSS variables
• Update supermodeltools.github.io/generate-index.go font import
• Update pill color classes in both repos
• Verify contrast ratios meet WCAG AA (brand guide marks accessibility per shade)
• Test on a few generated repo pages
• Test homepage rendering

[coderabbitai]

🔗 Related PRs

#4 - Use brand logomark in site header [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[jonathanpopham]

here is the branding guide itself

[jonathanpopham]

Deployment update

The repos homepage repo has moved — it's now at GraphTechnologyDevelopers/graphtechnologydevelopers.github.io (CNAME: repos.supermodeltools.com), not supermodeltools/supermodeltools.github.io as originally referenced.

What PR #16 covers (arch-docs templates):

• templates/_styles.css — :root variables, typography, responsive fixes
• templates/_head.html — font imports (Public Sans, Martian Mono, Lexend Peta)
• templates/_main.js — chart/graph colors, responsive composition, force graph resize

Per-repo pages (e.g. /mcp/, /typescript-sdk/) will pick up the new brand theme next time each repo's arch-docs Action re-runs.

Still needed (separate PR):

• GraphTechnologyDevelopers/graphtechnologydevelopers.github.io → generate-index.go inline CSS variables + font imports for the repos homepage