# BA006B — Final Brand Presentation & Browser Branding ## Final Brand Visibility, Logo Presentation & Browser Experience Before Production --- # ROLE You are the Lead Brand Integration Engineer and Lead Product Designer for INVEETAIRE. The branding assets have already been integrated correctly. The logo variants have already been mapped correctly. Your responsibility is NOT to redesign the application. Your responsibility is to deliver the FINAL visual polish of the INVEETAIRE brand before production. This sprint focuses ONLY on brand presentation, logo visibility, browser branding, and premium visual perception. --- # OBJECTIVES Improve: • Brand visibility • Logo presentation • Brand hierarchy • Browser branding • Favicon consistency • Premium brand perception Do NOT redesign layouts. --- # CONTEXT The current implementation is technically correct. However, several branding elements still feel visually too subtle. The brand should be immediately recognizable within the first second of viewing the application. The user should instantly recognize INVEETAIRE as a premium wedding platform. --- # TASK 1 — Landing Navbar Logo Current issue: The navbar logo is technically correct but visually too small. Improve it by: - Increase rendered height by approximately 40–60%. - Preserve aspect ratio. - Keep navbar height unchanged whenever possible. - Improve readability from a normal desktop viewing distance. - Maintain generous whitespace. - Do not allow the logo to dominate the navigation. Target visual quality: Stripe Notion Linear Vercel The logo should look intentional, premium, and clearly visible. It should never resemble a favicon. --- # TASK 2 — Portal Sidebar Logos Review: - Couple Portal - Admin Portal - Crew Portal Current issue: Sidebar logos appear visually undersized. Improve: - Increase rendered width approximately 15–25%. - Preserve padding. - Preserve alignment. - Preserve responsive behavior. - Prevent overflow. - Keep the logo visually centered. Target: Premium SaaS dashboard quality. --- # TASK 3 — Landing Hero Brand Signature Current issue: The secondary logo above "Premium Wedding Platform" is too small. It currently feels more like a watermark than a brand signature. Improve it by: - Increase rendered size approximately 2×. - Preserve generous whitespace. - Keep the logo centered. - Use the approved Secondary Logo. - Use the approved logo variant for the current background. - Ensure it remains clearly secondary to the main headline. Visual hierarchy should become: Secondary Logo ↓ Premium Wedding Platform ↓ Modern Wedding Management Platform The secondary logo should feel like a luxury signature. Not a decorative icon. --- # TASK 4 — Browser Branding Current issue: The favicon is not consistently visible. Verify and fix: - favicon.ico - favicon-16x16 - favicon-32x32 - apple-touch-icon - android-chrome icons - manifest - browser title - theme-color Do NOT rely only on source code. Verify in the browser after a hard refresh. --- # TASK 5 — Adaptive Favicon (Preferred) If technically feasible without introducing unnecessary complexity: Light browser theme ↓ Use: Primary favicon Dark browser theme ↓ Use: Light-BG favicon variant Implement using: prefers-color-scheme or another officially supported browser mechanism. If adaptive favicon behavior is unreliable across browsers: Keep one stable favicon. Document the limitation. Do NOT implement fragile hacks. --- # TASK 6 — Browser Verification Open and verify: Landing ✓ Navbar logo clearly visible ✓ Secondary logo clearly visible ✓ Favicon visible Couple Portal ✓ Sidebar logo visible ✓ Favicon visible Admin Portal ✓ Sidebar logo visible Crew Portal ✓ Sidebar logo visible Authentication ✓ Logo visible 404 ✓ Logo visible 500 ✓ Logo visible --- # DESIGN PRINCIPLES The brand should communicate: Luxury Elegant Premium Modern Confident Minimal The logo should never feel: Tiny Hidden Blurry Like a favicon Like an afterthought At the same time it must never overpower the interface. --- # DO NOT Do NOT redesign layouts. Do NOT move sections. Do NOT change typography. Do NOT modify layout rhythm. Do NOT modify spacing unnecessarily. Do NOT replace branding assets. Do NOT change approved logo variants. Only improve brand presentation and browser branding. --- # VISUAL ACCEPTANCE CRITERIA Landing Navbar ✓ Logo is immediately recognizable. ✓ Logo is comfortably readable. ✓ Logo has stronger visual presence. Landing Hero ✓ Secondary logo is clearly visible. ✓ It complements the hero. ✓ It does not compete with the headline. Portal Sidebar ✓ Logos feel proportional. ✓ Logos no longer appear undersized. ✓ Premium SaaS appearance. Browser ✓ favicon.ico visible ✓ favicon-16 visible ✓ favicon-32 visible ✓ Apple Touch Icon works ✓ Manifest loads ✓ Browser title correct ✓ Theme color correct --- # DELIVERABLES ## 1. Brand Presentation Improvements Describe every visual improvement. Explain why each improvement enhances brand perception. --- ## 2. Browser Branding Verification Verify: ✓ favicon.ico ✓ favicon-16x16 ✓ favicon-32x32 ✓ apple-touch-icon ✓ manifest ✓ browser title ✓ theme-color --- ## 3. Files Modified List every modified file. --- ## 4. Browser Verification Include visual confirmation that: ✓ Navbar logo visibility improved. ✓ Hero secondary logo visibility improved. ✓ Sidebar logo visibility improved. ✓ Browser favicon visible after hard refresh. --- ## 5. PHP Verification Run: php -l for every modified PHP file. --- # SUCCESS This sprint is complete ONLY when: ✓ Navbar logo has stronger visual presence. ✓ Sidebar logos no longer appear undersized. ✓ Secondary logo has a premium visual presence. ✓ Browser favicon is visible. ✓ Browser branding is complete. ✓ No branding asset returns HTTP 404. ✓ Browser rendering matches the official INVEETAIRE brand guideline. ✓ The INVEETAIRE brand is immediately recognizable within the first second of viewing the application. # BA006B REVISION The previous implementation inverted the intended visual hierarchy. Correct the logo scale as follows. --- ## Landing Navbar Reduce the navbar logo. Target: Approximately 20–30% smaller than the current implementation. The navbar logo should function only as navigation branding. It must never become the dominant visual element. --- ## Landing Hero Secondary Logo Increase the secondary hero logo. Target: Approximately 2× larger than the navbar logo. The secondary logo should become the primary brand signature of the hero section. It should sit comfortably above: Premium Wedding Platform without overpowering the main headline. --- ## Required Hierarchy Navbar Logo ↓ Hero Secondary Logo (largest logo on page) ↓ Premium Wedding Platform ↓ Modern Wedding Management Platform --- The hierarchy above is mandatory. Do not invert it again.