# UX010 — Platform Layout Rhythm & Spatial Refinement **User Experience Refinement | Layout Balance, Whitespace & Visual Comfort** --- # Objective The INVEETAIRE platform has completed: - Core Development - UX Refinement (UX001–UX009) - Brand Alignment (DS001) This sprint focuses exclusively on improving the platform's spatial experience. This is NOT a redesign. This is NOT a branding sprint. This is NOT a feature sprint. The objective is to improve layout rhythm, spacing, breathing room, visual balance, and overall usability so every page feels calm, premium, and comfortable to use. --- # Project Context Before making any changes, read the official branding package located at: /assets/branding/ Required documents: - README.md - brand-colors.md - design-system.md - ai_guide.md These documents remain the single source of truth. --- # Scope Review the entire platform. Including: ## Public - Landing Page - Pricing - Features - Contact - Footer ## Authentication - Login - Register - Forgot Password - Reset Password ## Couple Portal All implemented modules. ## Super Admin All implemented modules. ## Crew Portal All implemented modules. ## Shared Components - Layout - Cards - Forms - Tables - Buttons - Sidebar - Navigation - Breadcrumbs - Empty States - Statistics - Wizards Do NOT optimize only the pages currently being viewed. Search the project for similar layouts and improve them consistently. --- # UX Review Areas ## 1. Layout Rhythm Review every page for overall visual rhythm. Improve: - spacing between page header and content - spacing between sections - spacing between cards - spacing above and below tables - spacing between statistics - spacing inside hero sections - spacing between information blocks The interface should never feel crowded. --- ## 2. Whitespace Balance Evaluate whether each page has sufficient breathing room. Avoid: - cramped layouts - overly compressed content - inconsistent gaps - uneven margins - visual clutter Whitespace should intentionally guide the eye. --- ## 3. Content Width Optimization Review container widths. Avoid: - narrow forms floating on wide screens - oversized empty whitespace - content that stretches too wide - inconsistent container widths Balance readability with efficient screen usage. --- ## 4. Card Proportions Review every card. Improve: - internal padding - header spacing - footer spacing - spacing between title and content - spacing between grouped controls Cards should feel comfortable rather than compressed. --- ## 5. Form Experience Review every form. Improve: - label spacing - input spacing - helper text spacing - validation message spacing - section spacing - grouping of related fields Forms should feel effortless to scan. --- ## 6. Action Groups Review all button groups. Examples: - Save - Publish - Preview - Cancel - Back - Delete - Next - Finish Ensure: - consistent spacing - logical grouping - visual hierarchy - sufficient separation between primary and secondary actions Buttons should never appear crowded. --- ## 7. Statistics & Dashboard Blocks Review: - KPI cards - summary metrics - charts - progress bars - dashboard widgets Improve: - spacing - alignment - visual hierarchy - readability Dashboards should be quickly understandable. --- ## 8. Grid & List Rhythm Review: - card grids - vendor lists - budget categories - guest lists - workspace lists - tables Ensure: - consistent row spacing - consistent card gaps - comfortable density Avoid layouts that feel too compact. --- ## 9. Sidebar & Navigation Review: - menu spacing - submenu indentation - active states - navigation grouping - footer actions Navigation should feel balanced and easy to scan. --- ## 10. Page Header Consistency Review every page header. Ensure consistency in: - title placement - subtitle spacing - breadcrumb spacing - action button placement - page icon spacing Header actions should never feel cramped. --- ## 11. Visual Balance Review complete pages instead of isolated components. Ask: - Does this page feel balanced? - Is there too much empty space? - Is anything visually crowded? - Does the eye naturally flow through the page? - Does this page feel premium? If not, improve the layout. --- # Platform-Wide Consistency When an issue is discovered: Do NOT fix only one page. Search for every page using the same layout pattern and apply the improvement consistently. The platform should behave as one unified product. --- # Constraints Do NOT: - redesign pages - move major sections - add features - modify business logic - modify controllers - modify models - modify routes - modify database Do NOT change: - branding colors - typography hierarchy - logo - favicon - icons Those belong to other dedicated sprints. Only improve: - spacing - padding - margins - layout rhythm - alignment - grouping - content width - visual balance Every modification must produce a measurable improvement in usability and visual comfort. Avoid cosmetic changes without UX benefit. --- # Deliverables Provide: ## 1. UX Findings List every spacing or layout issue discovered. --- ## 2. Spatial Improvements Explain: - what was adjusted - why - expected UX improvement --- ## 3. Consistency Improvements List all layout patterns standardized across multiple pages. --- ## 4. Files Modified List every modified file. --- ## 5. PHP Syntax Verification Run: php -l Verify every modified PHP file is free from syntax errors. --- ## 6. UX Completion Status Choose ONE: ✅ Layout Rhythm Optimized OR ⚠ Additional UX Refinement Recommended Explain your reasoning. --- # Success Criteria The INVEETAIRE platform should: - Feel calm and spacious. - Present a premium editorial-quality layout. - Maintain consistent spacing across all modules. - Eliminate cramped interfaces. - Provide comfortable form and dashboard experiences. - Maintain consistent action button spacing. - Preserve all existing functionality. - Improve overall visual comfort without redesigning the platform. Treat this sprint as a platform-wide UX refinement focused entirely on spatial quality and layout rhythm.