---
estimated_steps: 24
estimated_files: 2
skills_used: []
---

# T02: Add logo mark to header brand area

Add an inline SVG logo mark to the header, positioned to the left of the "Chrysopedia" text. The logo should use the same geometric mark as the favicon for brand consistency.

## Steps

1. Read `frontend/public/favicon.svg` (created in T01) to understand the mark design.
2. Edit `frontend/src/App.tsx` — inside the `.app-header__brand` Link (around line 64-65), add an inline SVG element before the `<span>Chrysopedia</span>`. The SVG should be the same mark as the favicon, sized at ~24px height. Wrap it in a `<span className="app-header__logo">` for styling.
3. Edit `frontend/src/App.css` — add styles for `.app-header__logo`:
   - Display inline-flex, vertical alignment middle
   - Width/height: 24px
   - Margin-right: 0.5rem (gap between logo and text)
   - The SVG inside should fill the container
4. Also update `.app-header__brand` to use `display: flex; align-items: center; gap: 0.5rem;` for proper alignment of logo + text.
5. Run `cd frontend && npm run build` to verify zero errors.

## Must-Haves

- [ ] Inline SVG logo mark in App.tsx header brand area
- [ ] Logo uses cyan `#22d3ee` accent color, matching favicon
- [ ] Logo sized ~24px, properly aligned with brand text
- [ ] CSS styles for `.app-header__logo` and updated `.app-header__brand`
- [ ] `npm run build` succeeds with zero errors

## Verification

```bash
cd frontend && npm run build
grep -q 'app-header__logo' src/App.tsx && echo 'logo class in TSX OK'
grep -q 'app-header__logo' src/App.css && echo 'logo class in CSS OK'
grep -q '<svg' src/App.tsx && echo 'inline SVG OK'
```

## Inputs

- ``frontend/public/favicon.svg` — favicon mark design to replicate inline`
- ``frontend/src/App.tsx` — existing header brand area (line 64-65)`
- ``frontend/src/App.css` — existing brand styles (line 975+, 209+)`

## Expected Output

- ``frontend/src/App.tsx` — updated with inline SVG logo in header brand`
- ``frontend/src/App.css` — updated with logo sizing and brand flex layout`

## Verification

cd frontend && npm run build && grep -q 'app-header__logo' src/App.tsx && grep -q 'app-header__logo' src/App.css
