# S03: Topic Color Coding & Visual Polish — UAT

**Milestone:** M010
**Written:** 2026-03-31T06:28:12.150Z

# S03 UAT: Topic Color Coding & Visual Polish

## Preconditions
- Chrysopedia frontend is running (http://ub01:8096 or local dev server)
- Database contains technique pages across multiple topic categories

---

## Test 1: Category accent colors on SubTopicPage

1. Navigate to Topics page → click any top-level category (e.g., Mixing)
2. Click a sub-topic (e.g., Compression)
3. **Expected:** SubTopicPage has a 4px colored left border matching the category's accent color
4. **Expected:** A colored badge showing the category name (e.g., "Mixing") appears in the subtitle area
5. Repeat for a different category (e.g., Sound Design → Layering)
6. **Expected:** The border and badge color change to match the new category

## Test 2: Category badges in search results

1. Navigate to Search, enter a broad query (e.g., "reverb")
2. **Expected:** Each result card shows the topic_category as a colored badge (not plain text)
3. **Expected:** Cards from different categories show different badge colors
4. Verify all 7 category slugs render correctly: sound-design, mixing, synthesis, arrangement, workflow, mastering, music-theory

## Test 3: Page enter animation

1. Navigate to Home page
2. **Expected:** Page content fades in with a subtle upward slide (250ms)
3. Navigate to Topics page
4. **Expected:** Same fade-in animation plays
5. Navigate to Creators page, then click a creator
6. **Expected:** Both CreatorsBrowse and CreatorDetail animate on mount
7. Navigate to a technique page via search or browse
8. **Expected:** TechniquePage animates on mount
9. Navigate to a SubTopicPage
10. **Expected:** SubTopicPage animates on mount

## Test 4: catSlug shared utility correctness

1. On TopicsBrowse, verify category cards still show correct colored badges (regression check — catSlug was extracted from this file)
2. **Expected:** All category badges render identically to before the refactor

## Edge Cases

- **Missing category:** If a technique page has no topic_category, the SubTopicPage should render without a border or badge (no broken CSS var references)
- **Long category names:** Verify badges don't overflow or break layout with longer category names like "Sound Design"
- **Animation with prefers-reduced-motion:** Users with `prefers-reduced-motion: reduce` should ideally not see the animation (check if a media query is present — if not, note as minor gap)
