docs: update CLAUDE.md, redesign AGENTS.md, add design-system.md

- CLAUDE.md: updated API endpoints, dev workflow, current stack
- web/AGENTS.md: replaced auto-generated text with Tessera design rules
- docs/design-system.md: new — component patterns, typography scale,
  color tokens, anti-patterns to avoid

Ensures design consistency across all future work.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/AGENTS.md

@@ -1,5 +1,49 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
+# Tessera Design Rules
 
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->
+Follow these rules when writing any frontend code. The design is clean, modern, and minimal — avoid the "2015 admin panel" look.
+
+## Borders
+- **Never** use `border-border` (full opacity). Always `border-border/50` or `border-border/30`.
+- Section dividers: `border-b border-border/50`
+- Subtle item separators: `border-b border-border/30`
+- Card borders: `border border-border/50`
+
+## Shadows
+- **Never** use `shadow-sm` or `shadow-md` on cards, sections, or tabs.
+- The sidebar is the only element with a shadow (subtle).
+- No `bg-card/82`, no `bg-background/55` — use `bg-card` or `bg-transparent`.
+
+## Section wrappers
+- `rounded-lg border border-border/50` — NOT `rounded-md border border-border bg-card shadow-sm`
+
+## List items
+- `rounded-lg border border-border/50 p-3`, hover: `hover:border-primary/30 hover:bg-accent/30`
+- Active: `border-primary/50 bg-primary/5`
+
+## Nav items (sidebar)
+- Default: `text-sidebar-foreground/55`, icons at 50% opacity
+- Hover: `text-sidebar-foreground hover:bg-sidebar-accent/50`, icons at 70%
+- Active: `bg-sidebar-accent text-sidebar-foreground font-medium`, icons at 90%
+- No inset shadow on active items
+
+## Typography
+- Section headers: `text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60`
+- No `text-[11px] font-semibold uppercase` anywhere — use the above pattern
+- Body text: `text-sm` for main, `text-xs` for secondary
+- Keep font sizes consistent: 10px (labels), 12-13px (content), 14px (headings)
+
+## Icons
+- Section headers: `h-3 w-3` (not `h-4 w-4`)
+- In nav items: `w-4 h-4`
+- Always dimmed when inactive (opacity-50), bright when active
+
+## Forms
+- Inputs/selects: `h-8 rounded-md border border-input bg-transparent px-2.5 text-sm`
+- No `bg-card` on inputs unless inside a card
+- Labels: `text-[10px] font-medium text-muted-foreground`
+
+## General
+- No `backdrop-blur` on headers or sections
+- No `bg-card/82` or `bg-background/55` — use solid colors or `bg-transparent`
+- Content areas: `bg-background/80` for the main page background
+- Avoid `<dl>`/`<dt>`/`<dd>` grids for properties — use simple `flex justify-between` rows