# Implementation Plan: portal-senior-color-redesign

**Branch**: `[feat/portal-senior-color-redesign]` | **Date**: 2026-02-06 | **Spec**: `N/A`
**Input**: User request to redesign Portal color system for minimal, senior-friendly UX and provide a branch for visual validation.

## Summary

Implement a senior-friendly, minimal color system for `frontend/portal` by introducing semantic design tokens (default + high-contrast), applying them to shared shells/components (layouts, navbar, footer), and adding PrimeVue-friendly global styling so visual changes are broad, consistent, and easy to validate by product stakeholders.

## Technical Context

**Language/Version**: Vue 3 (ESM), JavaScript, CSS (Tailwind v4)  
**Primary Dependencies**: Vite, TailwindCSS v4, PrimeVue 4 (`@primevue/themes/aura`), PrimeIcons  
**Storage**: N/A  
**Testing**: `npm -C frontend/portal run lint`, `npm -C frontend/portal run build`  
**Target Platform**: Web browser (Portal tenant-facing frontend)  
**Project Type**: Web frontend module (`frontend/portal`)  
**Performance Goals**: No regressions in initial render and interactivity; preserve current bundle behavior  
**Constraints**: Keep changes focused on styling/theme surfaces; no route/business-logic changes; avoid generated files; maintain readability and accessibility contrast goals  
**Scale/Scope**: Global portal style tokens + shared layout/component surfaces for meaningful visual review

## Constitution Check

- Conforms to repository planning rule: complete plan defined before non-trivial implementation.
- Scope limited to `frontend/portal` styling/theme layers and shared UI shell.
- No generated files are modified.
- Verification includes frontend lint/build checks before handoff.

## Project Structure

### Documentation (this feature)

```text
docs/
└── plan.md
```

### Source Code (repository root)

```text
frontend/portal/
├── src/assets/main.css
├── src/main.js
├── src/layout/LayoutMain.vue
├── src/layout/LayoutUser.vue
├── src/layout/LayoutCreator.vue
├── src/layout/LayoutAuth.vue
├── src/components/TopNavbar.vue
└── src/components/AppFooter.vue
```

**Structure Decision**: Apply color redesign through centralized tokens and shared shell/components to maximize consistency and minimize page-level edits.

## Plan Phases

1. **Token Foundation**
   - Define semantic color tokens for senior-light and high-contrast modes.
   - Map tokens for Tailwind and global CSS usage.
2. **Shared Surface Application**
   - Update shared layouts/navbar/footer from hardcoded slate/dark palette to semantic tokens.
   - Remove distracting decorative backgrounds and improve contrast/focus cues.
3. **PrimeVue Alignment + Verification**
   - Add global PrimeVue color overrides for button/input/panel/readability consistency.
   - Run lint/build verification and prepare branch handoff for visual QA.

## Tasks

1. Create and verify a dedicated feature branch for this redesign.
2. Rebuild `src/assets/main.css` with:
   - semantic palette tokens,
   - default + high-contrast variable sets,
   - global base styles (body/link/focus),
   - PrimeVue global color overrides.
3. Ensure `src/main.js` imports and theme setup remain compatible after token changes.
4. Refactor shared shells to semantic colors and reduced visual noise:
   - `LayoutMain.vue`, `LayoutUser.vue`, `LayoutCreator.vue`, `LayoutAuth.vue`.
5. Refactor shared navigation/footer surfaces to semantic tokens:
   - `TopNavbar.vue`, `AppFooter.vue`.
6. Run portal checks (`lint`, `build`) and resolve any regressions caused by this change set.
7. Provide branch name and reviewer instructions for visual validation.

## Dependencies

- Phase 2 depends on semantic token completion from Phase 1.
- Phase 3 depends on Phase 2 to verify final visual consistency and avoid rework.
- Reviewer validation depends on successful lint/build completion.

## Acceptance Criteria

- A new branch exists containing only portal color-system redesign changes.
- Portal shared shells/components use semantic color tokens instead of ad-hoc hardcoded palette where modified.
- High-contrast mode token set is available for accessibility-forward validation.
- `npm -C frontend/portal run lint` passes.
- `npm -C frontend/portal run build` passes.
- User can run portal and visually compare revised palette/readability across login, home shell, user shell, and creator shell.

## Risks

- Broad visual changes may impact component contrast unexpectedly in edge views not directly edited.
- PrimeVue internal styles can override utility classes; requires targeted global overrides.
- Overly aggressive recolor could reduce brand recognition; keep primary brand hue stable while improving accessibility.

## Complexity Tracking

> **Fill ONLY if Constitution Check has violations that must be justified**

| Violation | Why Needed | Simpler Alternative Rejected Because |
|-----------|------------|-------------------------------------|
| N/A | N/A | N/A |