Copilot instructions

1---
2applyTo: 'src/**/*.{tsx,css}'
3---
4# Design System Guidelines
5 
6## CRITICAL DESIGN RULES
7 
8### NEVER CREATE:
9- **Poor accessibility** - must maintain 4.5:1 contrast ratio minimum
10- **Generic designs** - always adapt to target industry/audience  
11- **Template-like layouts** - create unique, custom-crafted interfaces
12- **Static interfaces** - include sophisticated micro-interactions
13- **Default grays** (slate-400, gray-500) - use rich, intentional color palettes
14 
15### ALWAYS CREATE:
16- **Industry-appropriate design** - adapt colors/typography to target audience
17- **Premium visual hierarchy** - sophisticated use of scale, contrast, spacing
18- **Accessible interfaces** - WCAG 2.1 AA compliant (4.5:1 text contrast)
19- **Mobile-first responsive** - progressive enhancement approach
20- **Purposeful animations** - enhance usability, not just decoration
21 
22## Core Design Philosophy
23 
24**Every interface must feel like it was crafted by a top-tier design agency.**
25- **Emotional Impact First**: Ask "Does this make users stop and say 'wow'?"
26- **Sophisticated Hierarchy**: Use contrast, scale, and spacing strategically
27- **Purposeful Motion**: Every animation should enhance usability
28- **Breathing Room**: Generous whitespace creates luxury feel
29- **Cohesive Visual Story**: Design choices should work together harmoniously
30- **Unique Visual Identity**: Design should feel custom-crafted, never template-like
31- **Industry-Appropriate Design**: Visual language should match the target audience and use case
32- **Color Psychology**: Use colors intentionally to evoke the right emotions and associations
33 
34## Visual Quality Standards
35 
36**NEVER CREATE**:
37- Generic card grids with default shadows
38- Plain white backgrounds with black text
39- Basic hover states (simple color changes)
40- Template-like layouts
41- Uniform spacing everywhere
42- Overuse of default Tailwind grays without intention
43- Static, lifeless interfaces
44- Color choices without consideration for brand or industry context
45 
46**ALWAYS CREATE**:
47- Dynamic, engaging compositions with visual flow
48- Rich, intentional color palettes that serve the design purpose
49- Sophisticated micro-interactions
50- Asymmetrical layouts that guide the eye
51- Varied spacing that creates rhythm
52- High contrast, accessible text combinations
53- Interactive, responsive designs with personality
54- Color schemes that enhance the user experience and brand message
55 
56## INDUSTRY-SPECIFIC DESIGN ADAPTATION
57 
58### Design Philosophy by Industry
59**Always adapt visual identity, aesthetic tone, and emotional impact to match the target industry or niche:**
60 
61### Technology & SaaS
62- **Color Psychology**: Modern, innovative, forward-thinking palettes with high-tech feeling
63- **Typography**: Clean geometric sans-serif with futuristic character
64- **Visual Style**: Minimal, data-driven, sophisticated gradients and depth
65- **Animation**: Smooth, precise micro-interactions that feel cutting-edge
66- **Emotional Tone**: Innovation, efficiency, technological advancement
67 
68### Finance & Banking
69- **Color Psychology**: Trustworthy, stable, premium tones that convey security
70- **Typography**: Professional typography mixing authority with approachability
71- **Visual Style**: Clean, sophisticated, confidence-building with subtle luxury
72- **Animation**: Subtle, professional interactions that reinforce reliability
73- **Emotional Tone**: Trust, stability, professional competence
74 
75### Healthcare & Medical
76- **Color Psychology**: Calming, clean, trustworthy palette promoting wellness
77- **Typography**: Highly readable, accessible fonts prioritizing clarity
78- **Visual Style**: Clean, sterile-feeling but warm, emphasizing care and precision
79- **Animation**: Gentle, non-distracting transitions that don't overwhelm
80- **Emotional Tone**: Care, trust, healing, accessibility
81 
82### Creative & Design
83- **Color Psychology**: Bold, artistic, expressive palettes showcasing creativity
84- **Typography**: Creative font combinations demonstrating design expertise
85- **Visual Style**: Portfolio-focused, visually striking, artistic expression
86- **Animation**: Playful, engaging interactions that showcase creativity
87- **Emotional Tone**: Inspiration, creativity, artistic vision
88 
89### E-commerce & Retail
90- **Color Psychology**: Warm, inviting tones that encourage purchasing decisions
91- **Typography**: Friendly, approachable fonts that build customer connection
92- **Visual Style**: Product-focused, conversion-optimized, shopping-friendly
93- **Animation**: Shopping-focused interactions (product previews, cart actions)
94- **Emotional Tone**: Desire, comfort, value, satisfaction
95 
96### Education & Learning
97- **Color Psychology**: Fresh, energetic palettes that motivate and inspire learning
98- **Typography**: Clear, student-friendly fonts optimized for extended reading
99- **Visual Style**: Approachable, encouraging, progress-focused design patterns
100- **Animation**: Learning-focused progressions and achievement celebrations
101- **Emotional Tone**: Growth, achievement, encouragement, curiosity
102 
103### Real Estate & Property
104- **Color Psychology**: Sophisticated, luxurious tones suggesting premium lifestyle
105- **Typography**: Elegant typography reflecting property quality and sophistication
106- **Visual Style**: Property showcase-focused with luxury aesthetic appeal
107- **Animation**: Property tour-inspired interactions and smooth transitions
108- **Emotional Tone**: Aspiration, luxury, home, investment value
109 
110### Food & Restaurant
111- **Color Psychology**: Appetite-stimulating, warm palettes that enhance food appeal
112- **Typography**: Warm, inviting fonts that create culinary atmosphere
113- **Visual Style**: Food photography-focused with sensory appeal
114- **Animation**: Menu interactions and ordering flow optimizations
115- **Emotional Tone**: Appetite, comfort, satisfaction, culinary experience
116 
117### Fitness & Wellness
118- **Color Psychology**: Energetic, motivational palettes inspiring action and health
119- **Typography**: Strong, dynamic fonts conveying energy and motivation
120- **Visual Style**: Progress-focused, health-conscious, achievement-oriented
121- **Animation**: Activity-based interactions showing progress and momentum
122- **Emotional Tone**: Energy, motivation, achievement, transformation
123 
124### Legal & Professional Services
125- **Color Psychology**: Authoritative, trustworthy tones conveying expertise
126- **Typography**: Professional typography balancing authority with accessibility
127- **Visual Style**: Credible, document-focused, emphasizing expertise
128- **Animation**: Minimal, professional interactions maintaining gravitas
129- **Emotional Tone**: Authority, trust, competence, reliability
130 
131### Travel & Hospitality
132- **Color Psychology**: Wanderlust-inspiring palettes evoking adventure and escape
133- **Typography**: Adventure-inspiring fonts suggesting exploration and discovery
134- **Visual Style**: Destination-focused, experiential, emotionally evocative
135- **Animation**: Journey-themed interactions and exploration-inspired transitions
136- **Emotional Tone**: Adventure, escape, discovery, memorable experiences
137 
138### ALWAYS ASK YOURSELF:
1391. What industry/niche is this for?
1402. What emotions should this evoke in the target audience?
1413. What visual expectations and cultural norms does this industry have?
1424. How can the design reinforce trust, expertise, or desired brand perception?
1435. What level of formality, playfulness, or sophistication is appropriate?
1446. Does the color palette, typography, and layout communicate the right message?
1457. Will this design differentiate from competitors while meeting user expectations?
146 
147## ACCESSIBILITY & CONTRAST REQUIREMENTS (WCAG 2.1 AA)
148 
149### Text Contrast Standards
150- **Normal text**: Minimum 4.5:1 contrast ratio
151- **Large text (18pt+)**: Minimum 3:1 contrast ratio
152- **Interactive elements**: Must have visible focus states
153- **Color information**: Never rely solely on color to convey information
154 
155### Safe High-Contrast Combinations
156```tsx
157// Light backgrounds
158bg-white text-slate-900          // 21:1 ratio ✅
159bg-slate-50 text-slate-800       // 16.7:1 ratio ✅
160bg-blue-50 text-blue-900         // 14.2:1 ratio ✅
161 
162// Dark backgrounds  
163bg-slate-900 text-white          // 21:1 ratio ✅
164bg-slate-800 text-slate-100      // 15.8:1 ratio ✅
165bg-blue-900 text-blue-50         // 18.1:1 ratio ✅
166 
167// Buttons - maintain contrast in ALL states
168bg-blue-600 text-white           // Primary buttons ✅
169bg-slate-900 text-white          // Secondary buttons ✅
170hover:bg-blue-700 hover:text-white  // Maintain on hover ✅
171```
172 
173### CRITICAL: Avoid These Common Accessibility Failures
174```tsx
175// ❌ Poor contrast combinations - AVOID THESE PATTERNS
176bg-slate-400 text-white          // Only 3.1:1 ratio
177bg-slate-500 text-white          // Only 4.6:1 ratio (use darker backgrounds)
178text-slate-400 on bg-white       // Common CTA text mistake
179text-slate-500 on bg-slate-100   // Poor secondary button contrast
180border-slate-400 text-slate-400  // Poor outline button
181border-white/30 text-white       // Border invisible
182bg-gray-100 text-gray-500        // Very common but poor contrast
183 
184// ✅ Better alternatives - USE THESE PATTERNS
185bg-slate-600 text-white          // 8.59:1 ratio - safe
186bg-slate-700 text-white          // 11.63:1 ratio - safer
187text-slate-700 on bg-white       // 10.45:1 ratio - excellent
188border-slate-700 text-slate-700  // High contrast outline
189bg-slate-900 text-slate-100      // 15.8:1 ratio - premium
190```
191 
192### Button Accessibility Requirements
193**All buttons must maintain proper contrast in ALL states:**
194```tsx
195// ✅ Perfect button patterns
196<Button className="bg-blue-600 hover:bg-blue-700 text-white focus:ring-4 focus:ring-blue-500/50">
197<Button className="border-2 border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white">
198<Button disabled className="bg-slate-300 text-slate-600 cursor-not-allowed">
199 
200// ❌ Never use these patterns
201<Button className="bg-slate-400 text-white">     // Poor contrast
202<Button className="text-slate-500">             // Poor contrast  
203<Button className="hover:text-slate-400">       // Losing contrast on hover
204```
205 
206## JSX SYNTAX RULES
207 
208### SVG and Data URL Encoding
209When using SVG data URLs in CSS backgrounds, **ALWAYS** properly encode special characters:
210 
211❌ **WRONG - Causes build errors**:
212```tsx
213<div className="bg-[url('data:image/svg+xml,%3Csvg width="60" height="60"...')]" />
214```
215 
216✅ **CORRECT - Use these safe alternatives**:
217```tsx
218// Option 1: Use external SVG file (recommended)
219<div className="bg-[url('/pattern.svg')]" />
220 
221// Option 2: Use CSS custom properties in index.css
222<div className="bg-dot-pattern" />
223 
224// Option 3: Use Tailwind gradient utilities
225<div className="bg-gradient-radial from-blue-500/10 to-transparent" />
226```
227 
228### Safe Background Pattern Classes (Add to index.css)
229```css
230.bg-dot-pattern {
231  background-image: radial-gradient(circle, #334155 1px, transparent 1px);
232  background-size: 20px 20px;
233  opacity: 0.03;
234}
235 
236.bg-grid-pattern {
237  background-image: 
238    linear-gradient(rgba(51, 65, 85, 0.03) 1px, transparent 1px),
239    linear-gradient(90deg, rgba(51, 65, 85, 0.03) 1px, transparent 1px);
240  background-size: 20px 20px;
241}
242 
243.bg-neural-pattern {
244  background: linear-gradient(45deg, transparent 25%, rgba(168,85,247,0.1) 50%, transparent 75%),
245              linear-gradient(-45deg, transparent 25%, rgba(59,130,246,0.1) 50%, transparent 75%);
246  background-size: 40px 40px;
247}
248```
249 
250## PREMIUM COMPONENT PATTERNS
251 
252### Button System
253```tsx
254// Primary CTA - High contrast required
255<Button className="group bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-4 rounded-2xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 overflow-hidden">
256  <span className="absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left" />
257  <span className="relative z-10 flex items-center gap-2">
258    Get Started
259    <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" />
260  </span>
261</Button>
262 
263// Secondary Button - Outline with hover fill
264<Button variant="outline" className="group border-2 border-slate-900 text-slate-900 hover:text-white px-8 py-4 rounded-2xl font-semibold transition-all duration-300 overflow-hidden">
265  <span className="absolute inset-0 bg-slate-900 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left" />
266  <span className="relative z-10">Learn More</span>
267</Button>
268```
269 
270### Premium Hero Section
271```tsx
272<div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-950 via-violet-950 to-slate-950">
273  {/* Floating 3D elements */}
274  <div className="absolute inset-0">
275    <div className="absolute top-20 left-1/4 w-64 h-64 bg-gradient-to-br from-violet-500/20 to-purple-600/20 rounded-3xl rotate-12 animate-float backdrop-blur-sm" />
276    <div className="absolute top-40 right-1/4 w-48 h-48 bg-gradient-to-br from-cyan-500/20 to-blue-600/20 rounded-3xl -rotate-12 animate-float animation-delay-1000 backdrop-blur-sm" />
277  </div>
278  
279  <div className="relative z-10 min-h-screen flex items-center justify-center px-4">
280    <div className="text-center max-w-6xl mx-auto space-y-8">
281      <h1 className="text-7xl lg:text-9xl font-black leading-none">
282        <span className="block bg-gradient-to-r from-white via-violet-200 to-white bg-clip-text text-transparent">
283          FUTURE
284        </span>
285        <span className="block mt-4 bg-gradient-to-r from-violet-400 via-purple-500 to-pink-500 bg-clip-text text-transparent">
286          AWAITS
287        </span>
288      </h1>
289      
290      <p className="text-2xl lg:text-3xl text-violet-100/90 max-w-4xl mx-auto leading-relaxed font-light">
291        Experience the next evolution of digital interaction
292      </p>
293    </div>
294  </div>
295</div>
296```
297 
298### Feature Cards
299```tsx
300<div className="grid md:grid-cols-3 gap-8">
301  {features.map((feature, index) => (
302    <div 
303      key={index}
304      className="group relative bg-white/5 backdrop-blur-lg rounded-3xl p-8 border border-white/10 hover:border-white/20 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
305    >
306      <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
307      <div className="relative z-10">
308        <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-300">
309          <Icon className="w-8 h-8 text-white" />
310        </div>
311        <h3 className="text-2xl font-bold text-white mb-4">{feature.title}</h3>
312        <p className="text-slate-300 leading-relaxed text-lg">{feature.description}</p>
313      </div>
314    </div>
315  ))}
316</div>
317```
318 
319### Form Design
320```tsx
321<div className="group relative">
322  <Input 
323    className="w-full bg-slate-50 border-slate-200 focus:border-blue-500 focus:bg-white text-slate-900 placeholder:text-slate-500 rounded-2xl px-6 py-4 text-lg transition-all duration-300 focus:shadow-lg focus:scale-[1.02]"
324    placeholder="Enter your email"
325  />
326  <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-focus-within:opacity-100 pointer-events-none transition-opacity duration-300" />
327</div>
328```
329 
330## ANIMATION SYSTEM
331 
332### Custom Tailwind Animations (Add to tailwind.config.ts)
333```javascript
334theme: {
335  extend: {
336    animation: {
337      'float': 'float 3s ease-in-out infinite',
338      'shimmer': 'shimmer 2s linear infinite',
339      'fade-in': 'fadeIn 0.5s ease-out',
340      'gradient-x': 'gradient-x 3s ease infinite',
341    },
342    keyframes: {
343      float: {
344        '0%, 100%': { transform: 'translateY(0px)' },
345        '50%': { transform: 'translateY(-10px)' }
346      },
347      shimmer: {
348        '0%': { backgroundPosition: '-200% 0' },
349        '100%': { backgroundPosition: '200% 0' }
350      },
351      fadeIn: {
352        '0%': { opacity: '0' },
353        '100%': { opacity: '1' }
354      },
355      'gradient-x': {
356        '0%, 100%': { backgroundSize: '200% 200%', backgroundPosition: 'left center' },
357        '50%': { backgroundSize: '200% 200%', backgroundPosition: 'right center' }
358      }
359    }
360  }
361}
362```
363 
364## RESPONSIVE DESIGN
365 
366### Mobile-First Approach
367```tsx
368// Progressive enhancement
369<div className="
370  px-4 py-8
371  sm:px-6 sm:py-12  
372  md:px-8 md:py-16
373  lg:px-12 lg:py-20
374">
375 
376// Typography scaling
377<h1 className="
378  text-3xl font-bold
379  sm:text-4xl
380  md:text-5xl  
381  lg:text-6xl
382  leading-tight
383">
384```