Act as the Lead Product Designer, Senior Frontend Engineer, and Design System Architect for the INVEETAIRE Wedding Platform.

This is QA-001C — Visual Design Stabilization & Premium UI Polish.

IMPORTANT

This is NOT a feature release.

This is NOT a refactor.

Do NOT add new features.

Do NOT redesign the product.

Do NOT modify business logic.

Your goal is ONLY to stabilize, polish, and repair the existing UI after QA-001A and QA-001B introduced several visual regressions.

The objective is to make the platform feel like one cohesive premium SaaS product.

====================================================
DESIGN GOAL
====================================================

INVEETAIRE should feel like:

• elegant
• modern
• premium
• soft
• wedding focused
• enterprise SaaS

NOT

• gaming
• neon
• oversaturated
• purple everywhere
• inconsistent

====================================================
DESIGN SYSTEM
====================================================

Replace the current harsh blue→pink gradient with a softer palette.

Preferred palette:

Sky Blue
↓

Soft Blue

↓

Lavender

↓

Soft Pink

Example direction:

#60A5FA
#818CF8
#A78BFA
#F472B6

Avoid overly saturated colors.

The gradient should feel smooth and premium.

====================================================
1. FIX HERO REGRESSION
====================================================

QA-001A introduced a regression where Dashboard Hero became almost completely white.

Restore the Hero.

Verify:

- background gradient
- overlay opacity
- text visibility
- badge visibility
- countdown card
- shadows
- contrast

Ensure the Hero is readable again.

====================================================
2. BUTTON POLISH
====================================================

Audit every gradient button.

Fix:

- color bleeding on rounded corners
- overflow
- border radius clipping
- hover transition
- focus ring
- shadow consistency

Buttons must feel premium.

====================================================
3. LOGIN FORM
====================================================

Audit login page.

Fix overlapping:

- floating labels
- icons
- placeholders
- input padding

Ensure:

label

↓

input

↓

icon

never overlap.

====================================================
4. SIDEBAR POLISH
====================================================

Audit the sidebar.

Current issues:

- oversized arrows
- inconsistent spacing
- icon alignment

Use smaller chevrons.

Keep icon containers consistent.

Make navigation elegant.

====================================================
5. ICON AUDIT
====================================================

Audit ALL icons.

Pages include:

Dashboard

Invitation

Guest List

RSVP Center

Guest Wishes

Wedding Day

Workspace Users

Settings

Fix:

alignment

size

padding

overlap

visual weight

All icons should look like one icon family.

====================================================
6. CARD SPACING
====================================================

Audit every card.

Fix:

padding

margin

vertical rhythm

header spacing

button spacing

empty states

Statistics cards should align perfectly.

====================================================
7. DESKTOP PREVIEW
====================================================

The Invitation Preview currently focuses mostly on a phone simulator.

Improve the Preview Workspace.

Desktop mode should become the primary preview.

Requirements:

Desktop Preview

- occupy approximately 90–100% available content width
- realistic browser frame
- responsive scaling

Tablet Preview

- medium width

Mobile Preview

- phone simulator

Switching between modes should remain smooth.

====================================================
8. RESPONSIVE AUDIT
====================================================

Verify:

Desktop

Laptop

Tablet

Mobile

No broken layouts.

No overlaps.

No cropped buttons.

No hidden text.

====================================================
9. COLOR CONSISTENCY
====================================================

Audit all components.

Success

Warning

Danger

Info

Primary

Secondary

Ensure colors belong to the same design language.

====================================================
10. SHADOW SYSTEM
====================================================

Unify shadows.

Cards

Dropdowns

Buttons

Modals

Hero

Avoid random shadow intensities.

====================================================
11. TYPOGRAPHY
====================================================

Audit:

font sizes

line heights

heading spacing

subtitles

captions

weights

Create a consistent visual hierarchy.

====================================================
12. OVERFLOW AUDIT
====================================================

Search entire Couple Portal for:

overflow

rounded corner bleeding

gradient leaks

clipped shadows

cropped content

hidden overflow bugs

Fix all occurrences.

====================================================
13. REGRESSION TEST
====================================================

After modifications verify ALL pages:

Landing Page

Login

Dashboard

Invitation

Theme Preview

Guest List

Guest Import

Guest Create

Guest Edit

RSVP Center

Guest Wishes

Wedding Day

Workspace Users

Settings

Verify:

No overlapping

No white Hero regression

No icon collision

No button bleeding

No broken gradient

No broken spacing

No layout regression

====================================================
RESTRICTIONS
====================================================

DO NOT

change database

change routes

change controllers

change APIs

change permissions

change business logic

change workflows

Only improve presentation.

====================================================
DELIVERABLE
====================================================

Produce a complete walkthrough describing:

- every modified file
- every visual improvement
- regression fixes
- before vs after summary
- screenshots
- responsive verification
- browser verification
- PHP syntax verification

Name this release:

QA-001C
Visual Design Stabilization & Premium UI Polish