quyun-v2/docs/plan.md

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)

docs/
└── plan.md

Source Code (repository root)

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