Add design context to CLAUDE.md

Author: st0012

CLAUDE.md

@@ -10,3 +10,30 @@ Please refer to `AGENTS.md` for comprehensive project documentation, including:
 - CI/CD information
 
 All project-specific instructions and guidelines are maintained in `AGENTS.md`.
+
+## Design Context
+
+**Personality:** Minimal, focused, fast. A well-organized reference tool — never decorative, never in the way.
+
+**References:** Elixir HexDocs, Tailwind CSS v2 docs. **Anti-references:** busy enterprise docs, heavy drop shadows, ornamental borders.
+
+### Design Principles
+
+1. **Types are equal partners** — Type signatures are as important as method names. Immediately visible, not hidden metadata.
+2. **Hierarchy through typography, not decoration** — Font size, weight, color. No badges, pills, or ornamental borders for structural info. Let whitespace do the heavy lifting.
+3. **Code is the content** — Method names, params, and types all use `--font-code`. Don't mix prose typography into code contexts.
+4. **Scan-first design** — Method entries parseable at a glance: name → type → description. Each layer visually distinct.
+5. **Respect the design system** — Use CSS custom properties exclusively. No hardcoded values. Dark mode and themes must work automatically.
+
+### Design Tokens (Aliki Theme)
+
+| Token | Light | Dark | Usage |
+|-------|-------|------|-------|
+| `--color-text-primary` | `#1c1917` | `#fafaf9` | Method names, headings |
+| `--color-text-secondary` | `#57534e` | `#e7e5e4` | Type signatures, descriptions |
+| `--color-text-tertiary` | `#78716c` | `#a8a29e` | De-emphasized metadata |
+| `--font-code` | ui-monospace stack | same | All code: names, params, types |
+| `--font-size-lg` | 18px | same | Method headings |
+| `--font-size-sm` | 14px | same | Type signatures |
+| `--font-size-xs` | 12px | same | Metadata, labels |
+| `--space-1` to `--space-6` | 4px–24px | same | All spacing |