# UX008 — Couple Portal Visual Design System

You are acting as the Lead Product Designer, Lead UI Designer, Design System Architect, and Frontend Architect for INVEETAIRE.

This is UX Sprint 008.

This sprint focuses on the COMPLETE visual consistency of the Couple Portal.

This is NOT a feature sprint.

This is a Design System sprint.

====================================================
IMPORTANT
====================================================

This sprint is COMPLETELY INDEPENDENT.

Do NOT continue previous documentation.

Create NEW markdown documents.

====================================================
OUTPUT FILES
====================================================

Create exactly TWO markdown documents.

1.

couple_portal_design_system_review.md

2.

couple_portal_design_system_walkthrough.md

====================================================
MISSION
====================================================

Review the ENTIRE Couple Portal.

NOT features.

NOT business logic.

ONLY visual consistency.

Your mission is to make the whole Couple Portal look like it was designed by one professional design team.

====================================================
SCOPE
====================================================

Review and improve visual consistency across:

• Couple Dashboard

• Budget Planner

• Budget Detail

• Planning Settings

• Timeline Dashboard

• Timeline List

• Timeline Forms

• Wedding Insights

• Wedding Report

Any shared Couple Portal layouts and reusable UI components that affect these pages.

====================================================
DO NOT MODIFY
====================================================

Do NOT modify

Backend

Controllers

Models

Database

Routes

Business Logic

Calculations

Workflow

Features

====================================================
PRODUCT GOAL
====================================================

When users navigate between pages,

they should feel like they never left the same application.

Every page should share the same visual language.

====================================================
DESIGN SYSTEM AUDIT
====================================================

Audit the following:

1.

Typography hierarchy

H1

H2

H3

Subtitle

Description

Helper text

Body text

====================================================

2.

Color hierarchy

Primary text

Secondary text

Muted text

Borders

Background

Cards

Panels

Accent colors

Warning

Success

Danger

====================================================

3.

Contrast

Review all areas with weak contrast.

Examples:

White button on white card

Muted labels

Secondary buttons

Low-contrast helper text

Headers that blend into cards

Improve readability while maintaining a premium aesthetic.

====================================================

4.

Cards

Padding

Margins

Border radius

Border colors

Shadow

Header spacing

Footer spacing

Visual grouping

====================================================

5.

Buttons

Primary

Secondary

Ghost

Danger

Icon buttons

Outline buttons

Review:

Visibility

Consistency

Spacing

Hierarchy

Hover states

====================================================

6.

Badges

Status badges

Plan badges

Countdown badges

Budget badges

Review:

Consistency

Spacing

Colors

Size

Hierarchy

====================================================

7.

Icons

Review:

Sizes

Alignment

Spacing

Color usage

Consistency

====================================================

8.

Forms

Input spacing

Label spacing

Textarea

Checkboxes

Select

Validation

Required indicators

====================================================

9.

Empty States

Review:

Icons

Headlines

Descriptions

CTA buttons

Spacing

====================================================

10.

Tables & Lists

Review

Spacing

Alignment

Typography

Hover states

Headers

Pagination

====================================================

11.

Page Headers

Review every page header.

Ensure all pages share:

Breadcrumb style

Title hierarchy

Subtitle hierarchy

Action buttons

Spacing

====================================================
KNOWN PRODUCT OWNER OBSERVATIONS
====================================================

Please review these carefully.

1.

Some secondary buttons disappear on white backgrounds.

2.

Some card titles have weak contrast.

3.

Some helper text is too light.

4.

Some cards feel flat.

5.

Spacing is inconsistent between pages.

6.

Some icons appear too small.

7.

Button hierarchy is inconsistent.

8.

Section headers are inconsistent.

9.

Some pages feel premium.

Some still feel like admin panels.

Unify the experience.

====================================================
IMPLEMENT
====================================================

Immediately improve the visual consistency.

Keep all existing functionality.

Do NOT redesign features.

Do NOT move workflows.

Do NOT change calculations.

Only improve presentation.

====================================================
DESIGN REFERENCES
====================================================

Target quality should feel similar to:

• Linear

• Notion

• Stripe Dashboard

• Vercel Dashboard

Simple.

Premium.

Minimal.

Elegant.

====================================================
VERIFICATION
====================================================

Verify

Visual consistency

Responsive layout

Typography consistency

Button consistency

Card consistency

Spacing consistency

Browser rendering

PHP syntax

====================================================
OUTPUT
====================================================

couple_portal_design_system_review.md

Include

Problems found

Reasoning

Final Design System Score

----------------------------------------------------

couple_portal_design_system_walkthrough.md

Include

Files modified

Changes made

Screenshots

Responsive verification

PHP syntax verification

====================================================
IMPORTANT
====================================================

This sprint should make the entire Couple Portal feel like one polished premium product.

Do NOT continue into UX009.

Wait for the final audit sprint.