Initial commit: FA 2.0 Design System foundation

Token pipeline (Style Dictionary v4, DTCG format):
- Primitive tokens: colour palettes (brand, sage, neutral, feedback),
  typography (3 font families, 21-variant type scale), spacing (4px grid),
  border radius, shadows, opacity
- Semantic tokens: text, surface, border, interactive, feedback colours;
  typography roles; layout spacing
- Component tokens: Button (4 sizes), Input (2 sizes)
- Generated outputs: CSS custom properties, JS ES6 module, flat JSON

Atoms (3 components):
- Button: contained/soft/outlined/text × primary/secondary, 4 sizes,
  loading state, underline for text variant
- Typography: 21 variants across display/heading/body/label/caption/overline,
  maxLines truncation
- Input: external label, helper text, error/success validation,
  start/end icons, required indicator, 2 sizes, multiline support

Infrastructure:
- MUI v5 theme with full token mapping
- Storybook 8 with autodocs
- Claude Code agents and skills for token/component workflows
- Design system documentation and cross-session memory

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/memory/component-registry.md

@@ -0,0 +1,62 @@
+# Component registry
+
+Tracks the status, specification, and key details of every component in the
+design system. Agents MUST check this before building a component (to avoid
+duplicates) and MUST update it after completing one.
+
+## Status definitions
+
+- **planned**: Component is identified but not yet started
+- **in-progress**: Component is being built
+- **review**: Component is built, awaiting human review
+- **done**: Component is reviewed and approved
+- **needs-revision**: Component needs changes based on review feedback
+
+## Atoms
+
+| Component | Status | Variants | Tokens used | Notes |
+|-----------|--------|----------|-------------|-------|
+| Button | review | contained, soft, outlined, text × xs, small, medium, large × primary, secondary + loading, underline, fullWidth | button.height/paddingX/paddingY/fontSize/iconSize/iconGap/borderRadius, color.interactive.*, color.brand.100-300, color.neutral.200-700 | Primary interactive element. Merges Text Button from Figma. Soft variant = Figma's Secondary/Brand & Secondary/Grey. |
+| IconButton | planned | contained, soft, outlined, text × small, medium, large | Reuses Button tokens | Icon-only button (close, menu, actions). Wrap MUI IconButton with FA theme. Build when Navigation/modals are needed. |
+| Typography | review | displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom | typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display | Text display system. Thin MUI wrapper with maxLines truncation. |
+| Input | review | medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline | input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary | External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma. |
+| Badge | planned | default, success, warning, error | | Status indicators |
+| Icon | planned | various sizes | | Icon wrapper component |
+| Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation |
+| Divider | planned | horizontal, vertical | | Visual separator |
+| Chip | planned | filled, outlined × deletable, clickable | | Tags and filters |
+| Card | planned | elevated, outlined | | Content container |
+| Link | planned | default, subtle | | Navigation text |
+
+## Molecules
+
+| Component | Status | Composed of | Notes |
+|-----------|--------|-------------|-------|
+| FormField | planned | Input + Typography (label) + Typography (helper) | Standard form field with label and validation |
+| PriceCard | planned | Card + Typography + Badge + Button | Service pricing display |
+| ServiceOption | planned | Card + Typography + Chip + Icon | Selectable service item |
+| SearchBar | planned | Input + Icon + Button | Search with submit |
+| StepIndicator | planned | Typography + Badge + Divider | Multi-step flow progress |
+
+## Organisms
+
+| Component | Status | Composed of | Notes |
+|-----------|--------|-------------|-------|
+| ServiceSelector | planned | ServiceOption × n + Typography + Button | Full service selection panel |
+| PricingTable | planned | PriceCard × n + Typography | Comparative pricing display |
+| ArrangementForm | planned | FormField × n + StepIndicator + Button | Multi-step arrangement flow |
+| Navigation | planned | Link × n + Button + Avatar | Site header navigation |
+| Footer | planned | Link × n + Typography + Divider | Site footer |
+
+## Future enhancements
+
+Deferred items that should be addressed when the relevant components or patterns
+are needed. Check this section before building new components — an item here may
+be relevant to your current work.
+
+| Item | Relates to | Trigger | Notes |
+|------|-----------|---------|-------|
+| Destructive button colours | Button | When building delete/cancel flows | `color="error"` already works via MUI palette. May need `soft` variant styling for error/warning/success colours. |
+| Link-as-button | Button | When building Navigation or link-heavy pages | Use MUI's `component="a"` or `href` prop. May warrant a separate Link atom or a `Button` story showing the pattern. |
+| IconButton atom | IconButton | When building Navigation, modals, toolbars | Wrap MUI IconButton with FA theme tokens. Registered as planned atom above. |
+| ~~Google Fonts loading~~ | ~~Typography~~ | ~~Resolved~~ | ~~Added to .storybook/preview-head.html and index.html~~ |