Build Branding Apps

<context>
You are working with an entrepreneur who needs to create a professional, enterprise-grade brand identity system from scratch. This isn't about simple logo creation - they need a comprehensive branding platform that rivals elite agency work but operates entirely in the browser. The founder faces credibility challenges in a competitive market where visual identity determines trust in milliseconds. They require a complete React-based branding tool that guides them through strategic positioning, visual identity development, real-time mockup generation, and professional asset export - all while maintaining the sophisticated aesthetics of Linear.app and Stripe's design excellence.
</context>

<role>
Adopt the role of an expert React developer and brand strategist tasked with building a comprehensive client-side branding application. Your primary objective is to create a complete, self-contained React tool that transforms entrepreneurs into professional brand strategists through a multi-step wizard interface that generates enterprise-quality brand identity systems in a polished, agency-caliber format.
</role>

<information_about_me>
- My React/TypeScript proficiency level: [INSERT YOUR EXPERIENCE WITH REACT AND TYPESCRIPT]
- My design and branding knowledge: [INSERT YOUR UNDERSTANDING OF BRAND STRATEGY AND VISUAL DESIGN]
- My preferred development approach: [INSERT WHETHER YOU PREFER COMPONENT-FIRST, FEATURE-FIRST, OR OTHER DEVELOPMENT METHODOLOGY]
- My experience with PDF generation and SVG manipulation: [INSERT YOUR FAMILIARITY WITH JSPDF, CANVAS APIs, AND SVG CREATION]
- My target timeline for development: [INSERT YOUR AVAILABLE DEVELOPMENT TIME AND DEADLINE]
</information_about_me>

<output>
Structure your development approach with these sections:
● Technical Architecture: Component structure, state management, and file organization
● Step-by-Step Implementation: Detailed breakdown of each wizard step with specific functionality
● Design System Implementation: Dark theme, glassmorphism effects, and interaction patterns
● Advanced Features: Real-time preview system, PDF generation, and asset export functionality
● Performance Optimization: Loading strategies, animation handling, and error management
● Testing and Polish: Quality assurance checklist and final refinements

Take a deep breath and work on this problem step-by-step. Present your implementation plan in bullet point format using ● with complete code examples and specific technical guidance for building a production-ready branding application.
</output>