lovable-boilerplate / rules

---
description: Design system, accessibility standards, and industry-specific styling guidelines
globs: ["src/**/*.{tsx,css}", "src/components/**/*.tsx"]
alwaysApply: false
---

# Design System Rules

## CRITICAL DESIGN REQUIREMENTS

### Accessibility Standards (WCAG 2.1 AA)
- **TEXT CONTRAST**: Minimum 4.5:1 ratio for normal text
- **LARGE TEXT**: Minimum 3:1 ratio for 18pt+ text
- **FOCUS STATES**: All interactive elements must have visible focus indicators
- **COLOR INFORMATION**: Never rely solely on color to convey information

### Safe High-Contrast Combinations
```tsx
// Light backgrounds
bg-white text-slate-900          // 21:1 ratio
bg-slate-50 text-slate-800       // 16.7:1 ratio
bg-blue-50 text-blue-900         // 14.2:1 ratio

// Dark backgrounds  
bg-slate-900 text-white          // 21:1 ratio
bg-slate-800 text-slate-100      // 15.8:1 ratio
bg-blue-900 text-blue-50         // 18.1:1 ratio
```

### NEVER USE These Low-Contrast Combinations
```tsx
bg-slate-400 text-white          // Only 3.1:1 ratio
text-slate-400 on bg-white       // Common mistake
text-slate-500 on bg-slate-100   // Poor secondary text
border-slate-400 text-slate-400  // Poor outline buttons
```

## Industry-Specific Design Psychology

### Technology & SaaS
- **Color Psychology**: Modern, innovative, forward-thinking palettes with high-tech feeling
- **Typography**: Clean geometric sans-serif with futuristic character
- **Visual Style**: Minimal, data-driven, sophisticated gradients and depth
- **Animation**: Smooth, precise micro-interactions that feel cutting-edge
- **Emotional Tone**: Innovation, efficiency, technological advancement

### Finance & Banking
- **Color Psychology**: Trustworthy, stable, premium tones that convey security
- **Typography**: Professional typography mixing authority with approachability
- **Visual Style**: Clean, sophisticated, confidence-building with subtle luxury
- **Animation**: Subtle, professional interactions that reinforce reliability
- **Emotional Tone**: Trust, stability, professional competence

### Healthcare & Medical
- **Color Psychology**: Calming, clean, trustworthy palette promoting wellness
- **Typography**: Highly readable, accessible fonts prioritizing clarity
- **Visual Style**: Clean, sterile-feeling but warm, emphasizing care and precision
- **Animation**: Gentle, non-distracting transitions that don't overwhelm
- **Emotional Tone**: Care, trust, healing, accessibility

### Creative & Design
- **Color Psychology**: Bold, artistic, expressive palettes showcasing creativity
- **Typography**: Creative font combinations demonstrating design expertise
- **Visual Style**: Portfolio-focused, visually striking, artistic expression
- **Animation**: Playful, engaging interactions that showcase creativity
- **Emotional Tone**: Inspiration, creativity, artistic vision

## Premium Component Patterns

### Button System
```tsx
// Primary CTA - High contrast required
<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">
  <span className="flex items-center gap-2">
    Get Started
    <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" />
  </span>
</Button>

// Secondary - Outline with hover fill
<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">
  <span className="absolute inset-0 bg-slate-900 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left" />
  <span className="relative z-10">Learn More</span>
</Button>
```

### Feature Cards
```tsx
<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">
  <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" />
  <div className="relative z-10">
    <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">
      <Icon className="w-8 h-8 text-white" />
    </div>
    <h3 className="text-2xl font-bold text-white mb-4">{title}</h3>
    <p className="text-slate-300 leading-relaxed text-lg">{description}</p>
  </div>
</div>
```

## Responsive Design

### Mobile-First Approach
```tsx
<div className="
  px-4 py-8
  sm:px-6 sm:py-12  
  md:px-8 md:py-16
  lg:px-12 lg:py-20
">

<h1 className="
  text-3xl font-bold
  sm:text-4xl
  md:text-5xl  
  lg:text-6xl
  leading-tight
">
```

## NEVER CREATE
- Generic designs that look template-like
- Poor accessibility (contrast violations)
- Static interfaces without micro-interactions
- Overuse of default grays without intention
- Color choices without consideration for brand or industry context

## ALWAYS CREATE
- Industry-appropriate visual identity and emotional tone
- Premium visual hierarchy with scale and contrast
- Accessible interfaces with proper contrast (4.5:1 minimum)
- Purposeful animations that enhance usability
- Color schemes that enhance user experience and brand message
- Unique, custom-crafted interfaces that feel premium