# Sub-task 1: Design System Implementation

## Scope

Implement a unified design system for the Mana Loop game UI, establishing all visual foundations that all other sub-tasks will reference.

### Key Deliverables:
1. **Design System Documentation** - Create `docs/task4/design_system.md` with all design decisions
2. **CSS Custom Properties** - Define all required tokens in `src/app/globals.css`
3. **UI Primitives** - Implement 9 game-specific components in `src/components/ui/`
4. **Remove Dev Artifacts** - Remove all component name labels from production UI
5. **Orientation Documentation** - Document findings in `docs/task4/orient.md`

## Acceptance Criteria

1. ✅ All `--bg-*`, `--border-*`, `--text-*`, `--mana-*`, `--color-*`, `--interactive-*` tokens defined in `globals.css` and working
2. ✅ All 9 primitives implemented in `src/components/ui/` and exported from index
3. ✅ Zero component name labels visible in UI (searched and verified)
4. ✅ `docs/task4/orient.md` created with findings
5. ✅ `docs/task4/design_system.md` created with all decisions
6. ✅ All sub-task docs created (subtask_1.md through subtask_10.md)
7. ✅ Run `npm run lint` at the end and confirm no NEW errors

## Dependencies

- **None** - This is the first sub-task that all others depend on

## Status

✅ **COMPLETED**

## Completion Date

2024-04-27

## Notes

- Used CSS custom properties (variables) not raw hex values in components
- All new code is TypeScript strict (no `any` types)
- Used Lucide icons, not emoji
- No framer-motion for layout shifts (CSS transitions only)
- Did not change game logic in `src/lib/game/`
- Used `npm` not `bun` for running scripts