# Vineyard Schools - Design System
**Based on UI UX Pro Max - Education Industry Guidelines**

## Design Pattern
**Hero-Centric + Social Proof**
- Clear value proposition in hero section
- Trust elements (testimonials, achievements)
- Multiple CTAs for key actions (admissions, contact)
- Social proof through testimonials and accreditations

## Color Palette
Professional, trustworthy palette for education:

- **Primary**: `#1e40af` (Professional Blue) - Main brand, trust
- **Secondary**: `#059669` (Education Green) - Positive, growth
- **Accent**: `#dc2626` (Action Red) - CTAs, important elements  
- **Neutral-50**: `#f9fafb` (Off-white) - Backgrounds
- **Neutral-100**: `#f3f4f6` (Light Gray) - Subtle backgrounds
- **Neutral-700**: `#374151` (Dark Gray) - Body text
- **Neutral-900**: `#111827` (Near-black) - Headlines
- **Success**: `#10b981` (Green) - Confirmations
- **Warning**: `#f59e0b` (Amber) - Alerts
- **Error**: `#ef4444` (Red) - Errors

## Typography

### Font Stack
- **Headings**: Inter, -apple-system, sans-serif (modern, clean)
- **Body**: Inter, -apple-system, sans-serif (professional, readable)

### Sizes & Weights
- **H1 (Hero)**: 3.75rem (60px), font-weight 700, line-height 1
- **H2 (Section)**: 2.25rem (36px), font-weight 700, line-height 1.1
- **H3 (Subsection)**: 1.875rem (30px), font-weight 600, line-height 1.2
- **H4 (Card)**: 1.25rem (20px), font-weight 600, line-height 1.3
- **Body Large**: 1.125rem (18px), font-weight 400, line-height 1.6
- **Body**: 1rem (16px), font-weight 400, line-height 1.6
- **Body Small**: 0.875rem (14px), font-weight 400, line-height 1.5
- **Label**: 0.75rem (12px), font-weight 600, text-transform uppercase, letter-spacing 0.05em

## Spacing Scale
- xs: 0.25rem (4px)
- sm: 0.5rem (8px)
- md: 1rem (16px)
- lg: 1.5rem (24px)
- xl: 2rem (32px)
- 2xl: 3rem (48px)
- 3xl: 4rem (64px)

## Page Sections Structure

### Home Page
1. **Hero** - Tagline, CTA for admissions
2. **Why Choose Us** - Cards with icons (6 points)
3. **Programs** - Grid of education levels
4. **Facilities** - Grid showcase with images
5. **Testimonials** - Parent & student quotes with 5-star ratings
6. **Latest News** - Blog cards with dates
7. **CTA Footer** - "Ready to enroll?" with contact options
8. **Contact** - Footer with location, contact info

### Key Components
- **Cards**: Subtle shadow (0 1px 3px rgba), hover lift, no border
- **Buttons**: Rounded corners (6px), full-width on mobile, icon support
- **Hero**: Full viewport height, gradient background, centered text
- **Navigation**: Fixed header, logo + links, sticky on scroll
- **Testimonials**: Avatar + name/role, star rating, italic quote
- **Grid**: Responsive (mobile: 1, tablet: 2, desktop: 3-4)

## Animation & Micro-interactions
- **Transitions**: 150-200ms on hover/focus
- **Ease**: cubic-bezier(0.4, 0, 0.2, 1) for smooth motion
- **Hover**: Subtle lift (shadow increase, scale 1.02)
- **Focus**: Clear outline with primary color (2px)
- **Scroll**: Smooth behavior, fade-in animations on section appear

## Best Practices
- ✅ All clickable elements have cursor-pointer
- ✅ Hover states visible on buttons, links, cards
- ✅ Keyboard navigation support
- ✅ Focus indicators for accessibility
- ✅ Mobile-first responsive design
- ✅ Light mode optimized (dark mode future)
- ✅ Semantic HTML with proper contrast (WCAG AA)
- ✅ Use Lucide icons for consistency
- ✅ No emoji icons, use SVG icons

## Anti-Patterns to AVOID
- ❌ Harsh bright neon colors
- ❌ Excessive animations
- ❌ Unprofessional fonts for education
- ❌ Low contrast text
- ❌ Cluttered layouts without whitespace
- ❌ Inconsistent spacing
- ❌ Missing focus states
- ❌ Auto-playing media without user control
- ❌ Emoji as icons

## Performance
- Icons: Lucide React (lightweight SVGs)
- Images: Optimize with next/image or similar
- Fonts: System fonts preferred (fast load)
- Animations: GPU-accelerated transforms
- Accessibility: WCAG AA compliance

## Responsive Breakpoints
- Mobile: 375px
- Tablet: 768px
- Desktop: 1024px
- Wide: 1440px+