docs: migrate docs and blog to Primer with Squad branding, hub blog, and accessibility sweep

docs/.astro/collections/blog.schema.json

@@ -11,6 +11,15 @@
     "date": {
       "type": "string"
     },
+    "hero": {
+      "type": "string"
+    },
+    "wave": {
+      "type": [
+        "number",
+        "null"
+      ]
+    },
     "tags": {
       "type": "array",
       "items": {

docs/.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 dist/
 .astro/
+visual-review/
+test-results/

docs/README.md

@@ -1,6 +1,6 @@
 # Squad Docs
 
-The documentation site for Squad, built with [Astro](https://astro.build/), [Tailwind CSS](https://tailwindcss.com/), and [Pagefind](https://pagefind.app/) for search.
+The documentation site for Squad, built with [Astro](https://astro.build/), [Primer](https://primer.style/) (`@primer/css` + `@primer/primitives`), and [Pagefind](https://pagefind.app/) for search.
 
 ## Prerequisites
 
@@ -78,7 +78,7 @@ docs/
 │   ├── navigation.ts        # Sidebar navigation structure
 │   ├── pages/               # Astro page routes
 │   ├── plugins/             # Remark plugins (link rewriting)
-│   └── styles/              # Global CSS (Tailwind)
+│   └── styles/              # Primer imports + token-based site CSS
 ├── public/                  # Static assets (images)
 └── dist/                    # Build output (gitignored)
 ```
@@ -103,3 +103,13 @@ Post content here.
 ```
 
 Blog posts are automatically discovered and listed on the blog index page.
+
+## Styling and accessibility
+
+- UI is built from [Primer](https://primer.style/) classes and design tokens; site-specific rules live in `src/styles/site.css` and use tokens only (no raw colors).
+- Color mode uses Primer's `data-color-mode` (`auto` by default; the toggle stores `light`/`dark` in `localStorage`).
+- `npm run test:e2e` includes axe-core WCAG A/AA checks in light and dark mode (`tests/a11y.spec.mjs`). Start `npm run preview -- --port 4321` first. The API reference specs need generated TypeDoc pages.
+
+## Visual review screenshots
+
+`npm run build && npm run screenshots` captures every layout page (landing, blog index and states, blog post, docs pages, 404, search dialog, mobile drawer) on mobile (390px), tablet (820px) and desktop (1440px) in light and dark mode into `docs/visual-review/` (gitignored) and writes `visual-review/index.html` as a gallery. Options: `--base`, `--out`, `--full-height`, `--only home,blog-post`. It starts `astro preview` itself if nothing is listening, and exits non-zero if any capture logged a console error.

docs/astro.config.mjs

@@ -1,8 +1,8 @@
 import { defineConfig } from 'astro/config';
-import tailwindcss from '@tailwindcss/vite';
 import sitemap from '@astrojs/sitemap';
 import { remarkRewriteLinks } from './src/plugins/remark-rewrite-links.mjs';
 import { rehypePagefindAttrs } from './src/plugins/rehype-pagefind-attrs.mjs';
+import { rehypeA11y } from './src/plugins/rehype-a11y.mjs';
 import { createRequire } from 'module';
 
 const require = createRequire(import.meta.url);
@@ -12,7 +12,6 @@ export default defineConfig({
   base: '/squad/',
   integrations: [sitemap()],
   vite: {
-    plugins: [tailwindcss()],
     define: {
       __VERSION__: JSON.stringify(process.env.SQUAD_VERSION || require('../package.json').version),
       __COMMIT_SHA__: JSON.stringify(process.env.GITHUB_SHA || 'local'),
@@ -21,11 +20,11 @@ export default defineConfig({
   },
   markdown: {
     remarkPlugins: [remarkRewriteLinks],
-    rehypePlugins: [rehypePagefindAttrs],
+    rehypePlugins: [rehypePagefindAttrs, rehypeA11y],
     shikiConfig: {
       themes: {
-        light: 'github-light',
-        dark: 'github-dark',
+        light: 'github-light-high-contrast',
+        dark: 'github-dark-high-contrast',
       },
     },
   },