# Visual QA Checklist

## Brand Consistency
- [ ] **Logo Placement**: 
  - Primary Logo (100x40px) is visible in the top left of the Header.
  - Secondary Logo (80x30px) is visible in the bottom right of the Footer.
  - Watermark "Placeholder" is visible and rotated inside the logo box.
- [ ] **Colors**:
  - Primary actions (Buttons, Links) use Mars Green (`#008C8C`).
  - Hover states use darker Mars Green (`#006666`).
  - Backgrounds use correct subtle gradients or neutral grays.

## Layout & Spacing
- [ ] **Grid Alignment**: Margins and paddings follow 8px increments (8, 16, 24...).
- [ ] **Whitespace**: Content has sufficient breathing room (min 24px padding in containers).
- [ ] **Alignment**: Form labels and inputs are vertically aligned.

## Typography
- [ ] **Legibility**: Text contrast passes WCAG AA standards (Gray-600+ on White).
- [ ] **Hierarchy**: Headings are distinct from body text.

## Responsive Behavior
- [ ] **Mobile (<768px)**:
  - Sidebar collapses correctly (Admin).
  - Header adjusts layout (Logo/User info alignment).
  - Touch targets (Buttons, Inputs) are at least 48px height.
  - Padding reduces to 16px to maximize content width.
- [ ] **Desktop**:
  - Sidebar expands correctly.
  - Content is centered with max-width restriction where appropriate.

## Interaction
- [ ] **Hover Effects**: Buttons and Cards show subtle state changes on hover.
- [ ] **Focus States**: Inputs show Mars Green outline on focus.
- [ ] **Transitions**: Smooth transitions (0.2s - 0.3s) for all interactive elements.
