# 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.