---
phase: 11-visual-design-responsive-layout-cleanup
plan: 5
type: execute
wave: 4
depends_on: [11-04]
requirements: [VISUAL-01, VISUAL-03, VISUAL-04]
files_modified:
  - frontend/src/components/**/*.vue
  - frontend/src/views/**/*.vue
autonomous: true
---

# Plan 11-05 — Visual Consistency Pass

## Objective

Make spacing, typography, hover, focus-visible, and active states consistent across the frontend without introducing a component-library rewrite.

## Tasks

1. Preserve legitimate data-driven inline styles:
   - topic color swatches
   - quota/progress widths
   - Teleport dropdown coordinates
   - tree indentation
2. Remove arbitrary spacing and decorative inline styles unless they are data-driven layout values with no Tailwind equivalent.
3. Normalize typography to this app scale:
   - page title: `text-2xl font-semibold`
   - section title: `text-lg font-semibold`
   - panel/table heading: `text-sm font-semibold`
   - body: `text-sm`
   - caption/metadata: `text-xs`
4. Replace generic `focus:ring-*` only patterns on interactive elements with this keyboard focus convention: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1`.
5. Ensure buttons, links, card rows, table rows, menu items, and icon actions have coherent hover and active states.
6. Avoid broad palette changes; preserve the current DocuVault identity while removing one-off visual drift.
7. Add focused tests or static checks for the agreed invariants where practical.

## Acceptance Criteria

- No unnecessary `px-[...]`, margin `style=`, or one-off typography overrides remain.
- Interactive elements have hover plus keyboard-visible focus states.
- Typography reads as one app scale, not per-component choices.
- Data-driven inline styles remain where they carry runtime values.
- Visual changes are behavior-preserving.
- Frontend tests and build pass.