Cursor rule

1---
2description: Design system, accessibility standards, and industry-specific styling guidelines
3globs: ["src/**/*.{tsx,css}", "src/components/**/*.tsx"]
4alwaysApply: false
5---
6 
7# Design System Rules
8 
9## CRITICAL DESIGN REQUIREMENTS
10 
11### Accessibility Standards (WCAG 2.1 AA)
12- **TEXT CONTRAST**: Minimum 4.5:1 ratio for normal text
13- **LARGE TEXT**: Minimum 3:1 ratio for 18pt+ text
14- **FOCUS STATES**: All interactive elements must have visible focus indicators
15- **COLOR INFORMATION**: Never rely solely on color to convey information
16 
17### Safe High-Contrast Combinations
18```tsx
19// Light backgrounds
20bg-white text-slate-900          // 21:1 ratio
21bg-slate-50 text-slate-800       // 16.7:1 ratio
22bg-blue-50 text-blue-900         // 14.2:1 ratio
23 
24// Dark backgrounds  
25bg-slate-900 text-white          // 21:1 ratio
26bg-slate-800 text-slate-100      // 15.8:1 ratio
27bg-blue-900 text-blue-50         // 18.1:1 ratio
28```
29 
30### NEVER USE These Low-Contrast Combinations
31```tsx
32bg-slate-400 text-white          // Only 3.1:1 ratio
33text-slate-400 on bg-white       // Common mistake
34text-slate-500 on bg-slate-100   // Poor secondary text
35border-slate-400 text-slate-400  // Poor outline buttons
36```
37 
38## Industry-Specific Design Psychology
39 
40### Technology & SaaS
41- **Color Psychology**: Modern, innovative, forward-thinking palettes with high-tech feeling
42- **Typography**: Clean geometric sans-serif with futuristic character
43- **Visual Style**: Minimal, data-driven, sophisticated gradients and depth
44- **Animation**: Smooth, precise micro-interactions that feel cutting-edge
45- **Emotional Tone**: Innovation, efficiency, technological advancement
46 
47### Finance & Banking
48- **Color Psychology**: Trustworthy, stable, premium tones that convey security
49- **Typography**: Professional typography mixing authority with approachability
50- **Visual Style**: Clean, sophisticated, confidence-building with subtle luxury
51- **Animation**: Subtle, professional interactions that reinforce reliability
52- **Emotional Tone**: Trust, stability, professional competence
53 
54### Healthcare & Medical
55- **Color Psychology**: Calming, clean, trustworthy palette promoting wellness
56- **Typography**: Highly readable, accessible fonts prioritizing clarity
57- **Visual Style**: Clean, sterile-feeling but warm, emphasizing care and precision
58- **Animation**: Gentle, non-distracting transitions that don't overwhelm
59- **Emotional Tone**: Care, trust, healing, accessibility
60 
61### Creative & Design
62- **Color Psychology**: Bold, artistic, expressive palettes showcasing creativity
63- **Typography**: Creative font combinations demonstrating design expertise
64- **Visual Style**: Portfolio-focused, visually striking, artistic expression
65- **Animation**: Playful, engaging interactions that showcase creativity
66- **Emotional Tone**: Inspiration, creativity, artistic vision
67 
68## Premium Component Patterns
69 
70### Button System
71```tsx
72// Primary CTA - High contrast required
73<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">
74  <span className="flex items-center gap-2">
75    Get Started
76    <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" />
77  </span>
78</Button>
79 
80// Secondary - Outline with hover fill
81<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">
82  <span className="absolute inset-0 bg-slate-900 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left" />
83  <span className="relative z-10">Learn More</span>
84</Button>
85```
86 
87### Feature Cards
88```tsx
89<div 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">
90  <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" />
91  <div className="relative z-10">
92    <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">
93      <Icon className="w-8 h-8 text-white" />
94    </div>
95    <h3 className="text-2xl font-bold text-white mb-4">{title}</h3>
96    <p className="text-slate-300 leading-relaxed text-lg">{description}</p>
97  </div>
98</div>
99```
100 
101## Responsive Design
102 
103### Mobile-First Approach
104```tsx
105<div className="
106  px-4 py-8
107  sm:px-6 sm:py-12  
108  md:px-8 md:py-16
109  lg:px-12 lg:py-20
110">
111 
112<h1 className="
113  text-3xl font-bold
114  sm:text-4xl
115  md:text-5xl  
116  lg:text-6xl
117  leading-tight
118">
119```
120 
121## NEVER CREATE
122- Generic designs that look template-like
123- Poor accessibility (contrast violations)
124- Static interfaces without micro-interactions
125- Overuse of default grays without intention
126- Color choices without consideration for brand or industry context
127 
128## ALWAYS CREATE
129- Industry-appropriate visual identity and emotional tone
130- Premium visual hierarchy with scale and contrast
131- Accessible interfaces with proper contrast (4.5:1 minimum)
132- Purposeful animations that enhance usability
133- Color schemes that enhance user experience and brand message
134- Unique, custom-crafted interfaces that feel premium
135