# Documentation Logo Integration

**Completed**: 2026-01-14
**Branch**: `022-docs-logo-integration`
**PR**: Pending

> **Historical note (0.2.0)**: As of doit 0.2.0, Claude Code templates
> also ship as Agent Skills at `.claude/skills/doit.<name>/SKILL.md`
> alongside the legacy `.claude/commands/doit.<name>.md` files referenced
> throughout this spec. See [agent-skills.md](../templates/agent-skills.md).

## Overview

Integrated the Do-It framework logos and icons from the `media/` folder into the project README and documentation to establish consistent visual branding. Added the logo to key entry points (README.md and docs/index.md) and created comprehensive usage guidelines for contributors.

## Requirements Implemented

| ID | Description | Status |
|----|-------------|--------|
| FR-001 | README.md displays logo centered at top | Done |
| FR-002 | Logo includes appropriate alt text | Done |
| FR-003 | Logo sized appropriately (200px) | Done |
| FR-004 | docs/index.md displays logo at top | Done |
| FR-005 | media/README.md with usage guidelines | Done |
| FR-006 | Relative paths for portability | Done |
| FR-007 | Full-color variant as default | Done |
| FR-008 | Guidelines describe all 5 variants | Done |

## Technical Details

- **Logo Format**: SVG (Scalable Vector Graphics)
- **Primary Logo**: `doit-logo-full-color.svg`
- **Dark Mode Logo**: `doit-logo-white.svg`
- **Logo Width**: 200px (consistent across all placements)
- **Theme Support**: GitHub `prefers-color-scheme` media query

### Dark/Light Theme Implementation

README.md uses HTML `<picture>` element with media query for automatic theme switching:

```html
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="media/doit-logo-white.svg">
  <img src="media/doit-logo-full-color.svg" alt="Do-It Framework Logo" width="200">
</picture>
```

docs/index.md uses simple `<img>` tag (MkDocs doesn't support theme switching).

## Files Changed

### Created
- `media/README.md` - Logo usage guidelines with variant table and embedding examples

### Modified
- `README.md` - Added logo with dark/light theme support
- `docs/index.md` - Added centered logo
- Multiple documentation files - Standardized "DoIt" to "Do-It" branding

### Branding Updates

Updated all markdown files to use "Do-It" (hyphenated) instead of "DoIt" for better typography (capital "I" vs lowercase "l" distinction):

- README.md, CONTRIBUTING.md, SECURITY.md, SUPPORT.md, CHANGELOG.md
- docs/quickstart.md, docs/README.md, docs/tutorials/*
- docs/features/015-docs-branding-cleanup.md, 018-develop-branch-setup.md, 021-copilot-agent-fix.md
- .doit/memory/constitution.md, .doit/memory/roadmap.md
- .claude/commands/doit.constitution.md

## Testing

- **Automated tests**: None (visual verification only per plan)
- **Manual tests**: 5/5 passed
  - MT-001: README logo visible on GitHub (light mode)
  - MT-002: White logo visible on GitHub (dark mode)
  - MT-003: Logo renders in docs/index.md
  - MT-004: media/README.md displays all 5 logo previews
  - MT-005: Branding consistent as "Do-It" throughout

## Review Results

- **Status**: APPROVED
- **Critical Findings**: 0
- **Major Findings**: 0
- **Minor Findings**: 0
- **Info Findings**: 2
  - INFO-001: MkDocs doesn't support theme switching (documented limitation)
  - INFO-002: PNG fallbacks not included (SVG is universal)

## Related Issues

- Epic: #140
- Features: #141, #142, #143
- Tasks: #144, #145, #146
