Update memory files for Badge atom

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

docs/memory/component-registry.md

@@ -20,7 +20,7 @@ duplicates) and MUST update it after completing one.
 | 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 |
+| Badge | review | soft, filled × default, brand, success, warning, error, info × small, medium + icon | badge.height/paddingX/fontSize/iconSize/iconGap/borderRadius, color.feedback.*, color.brand.200/700 | Status indicator pill. Soft (tonal) or filled (solid). 6 colours, 2 sizes, optional leading icon. |
 | Icon | planned | various sizes | | Icon wrapper component |
 | Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation |
 | Divider | planned | horizontal, vertical | | Visual separator |

docs/memory/session-log.md

@@ -348,6 +348,35 @@ Each entry follows this structure:
 - Toggle/switch pattern from Figma (ListItemAddItem) is a separate component concern, not Card
 
 **Next steps:**
-- User to review Card selected/hover states in Storybook
+- ~~User to review Card selected/hover states in Storybook~~ ✓ Approved
-- Build Badge or Chip atom next
+- ~~Build Badge or Chip atom next~~ ✓ Badge done
-- Begin PriceCard or ServiceOption molecule once Card is approved
+
+### Session 2026-03-25h — Badge atom
+
+**Agent(s):** Claude Opus (via conversation)
+
+**Work completed:**
+- Searched FA 2.0 and Parsons 1.0 Figma files for badge/chip/tag components — none found, designed from conventions
+- Created badge component tokens (`tokens/component/badge.json`): height, paddingX, fontSize, iconSize, iconGap, borderRadius for sm/md — 10 tokens total
+- Built Badge component (`src/components/atoms/Badge/Badge.tsx`):
+  - Pill-shaped, display-only status indicator (not interactive)
+  - 6 colour intents: default, brand, success, warning, error, info
+  - 2 variants: soft (tonal bg + coloured text, default) and filled (solid bg + white text)
+  - 2 sizes: small (22px) and medium (26px)
+  - Optional leading `icon` prop for contextual icons
+  - All soft colours use CSS variables from token system — no hardcoded hex
+  - Warning text uses amber.700 for WCAG AA compliance
+- Created 10 Storybook stories including realistic compositions (InPriceCard, ServiceStatus)
+- Preflight passed all 5 checks
+- Committed and pushed to Gitea
+
+**Decisions made:**
+- Badge defaults to soft variant — calmer, more appropriate for FA's sensitive context. Filled variant for high-priority emphasis only.
+- Badge uses Box (span) not MUI Chip — keeps it simple, display-only, no interactive baggage
+- Pill shape (borderRadius.full) distinguishes badges from rectangular UI elements
+- Brand soft colours match Button soft (brand.200 bg, brand.700 text) for visual consistency
+
+**Next steps:**
+- User to review Badge in Storybook
+- Build Chip atom next (interactive variant of badge — clickable, deletable)
+- Begin PriceCard molecule once Badge and Card are both approved

docs/memory/token-registry.md

@@ -208,3 +208,20 @@ the correct token for any design property.
 | card.background.default | → color.surface.raised (#FFFFFF) | Card | Card background (raised surface) |
 | card.background.hover | → color.surface.subtle (#FAFAFA) | Card | Subtle grey fill on hover for interactive cards |
 | card.background.selected | → color.surface.warm (#FEF9F5) | Card | Warm tint for selected cards |
+
+### Badge
+
+`tokens/component/badge.json`
+
+| Token path | Value / Reference | Used by | Description |
+|-----------|-----------|---------|-------------|
+| badge.height.sm | 22px | Badge | Small badge height |
+| badge.height.md | 26px | Badge | Medium badge height (default) |
+| badge.paddingX.sm | → spacing.2 (8px) | Badge | Small horizontal padding |
+| badge.paddingX.md | → spacing.3 (12px) | Badge | Medium horizontal padding |
+| badge.fontSize.sm | → fontSize.2xs (11px) | Badge | Small badge text |
+| badge.fontSize.md | → fontSize.xs (12px) | Badge | Medium badge text |
+| badge.iconSize.sm | 12px | Badge | Small badge icon |
+| badge.iconSize.md | 14px | Badge | Medium badge icon |
+| badge.iconGap.default | → spacing.1 (4px) | Badge | Icon-to-text gap |
+| badge.borderRadius.default | → borderRadius.full (9999px) | Badge | Pill shape |