honeyDueKMP/iosApp/DESIGN_SYSTEM.md

# MyCrib iOS Design System

## Overview
This document outlines the modern, sleek design system implemented for the MyCrib iOS app.

## Design Philosophy
- **Modern & Clean**: Minimalist approach with ample white space
- **Consistent**: Reusable components with unified styling
- **Accessible**: High contrast ratios and readable typography
- **Delightful**: Subtle animations and gradient accents

## Color Palette

### Primary Colors
- **Primary**: `#2563EB` - Modern blue for primary actions
- **Primary Light**: `#3B82F6` - Lighter variant for gradients
- **Primary Dark**: `#1E40AF` - Darker variant for pressed states

### Accent Colors
- **Accent**: `#8B5CF6` - Purple for special highlights
- **Accent Light**: `#A78BFA` - Lighter purple for gradients

### Semantic Colors
- **Success**: `#10B981` - Green for completed/success states
- **Warning**: `#F59E0B` - Orange for in-progress/warning states
- **Error**: `#EF4444` - Red for errors and destructive actions
- **Info**: `#3B82F6` - Blue for informational content

### Neutral Colors
- **Background**: `#F9FAFB` - Light gray for app background
- **Surface**: `#FFFFFF` - White for cards and surfaces
- **Surface Secondary**: `#F3F4F6` - Light gray for secondary surfaces
- **Text Primary**: `#111827` - Near black for primary text
- **Text Secondary**: `#6B7280` - Medium gray for secondary text
- **Text Tertiary**: `#9CA3AF` - Light gray for tertiary text
- **Border**: `#E5E7EB` - Light gray for borders
- **Border Light**: `#F3F4F6` - Very light gray for subtle borders

## Typography

### Display (Hero Sections)
- **Display Large**: 57pt, Bold, Rounded
- **Display Medium**: 45pt, Bold, Rounded
- **Display Small**: 36pt, Bold, Rounded

### Headline (Section Headers)
- **Headline Large**: 32pt, Bold, Rounded
- **Headline Medium**: 28pt, Semibold, Rounded
- **Headline Small**: 24pt, Semibold, Rounded

### Title (Card Titles)
- **Title Large**: 22pt, Semibold
- **Title Medium**: 18pt, Semibold
- **Title Small**: 16pt, Semibold

### Body (Main Content)
- **Body Large**: 17pt, Regular
- **Body Medium**: 15pt, Regular
- **Body Small**: 13pt, Regular

### Label (Labels & Captions)
- **Label Large**: 14pt, Medium
- **Label Medium**: 12pt, Medium
- **Label Small**: 11pt, Medium

### Caption
- **Caption**: 12pt, Regular

## Spacing Scale
- **XXS**: 4pt
- **XS**: 8pt
- **SM**: 12pt
- **MD**: 16pt
- **LG**: 24pt
- **XL**: 32pt
- **XXL**: 48pt
- **XXXL**: 64pt

## Border Radius
- **XS**: 4pt
- **SM**: 8pt
- **MD**: 12pt
- **LG**: 16pt
- **XL**: 20pt
- **XXL**: 24pt
- **Full**: 9999pt (Circular)

## Shadows
- **SM**: rgba(0,0,0,0.05), radius: 2, y: 1
- **MD**: rgba(0,0,0,0.1), radius: 4, y: 2
- **LG**: rgba(0,0,0,0.1), radius: 8, y: 4
- **XL**: rgba(0,0,0,0.15), radius: 16, y: 8

## Component Patterns

### Cards
- White background (`AppColors.surface`)
- Rounded corners (16pt or 20pt)
- Subtle shadow (`AppShadow.md` or `AppShadow.lg`)
- Padding: 16-32pt depending on content

### Buttons
- **Primary**: Gradient background, white text, 56pt height
- **Secondary**: Light gray background, primary color text, 56pt height
- Rounded corners: 12pt
- Pressed state: Scale to 0.98

### Text Fields
- Light gray background (`AppColors.surfaceSecondary`)
- 16pt padding
- 12pt rounded corners
- Focused state: Primary color border + subtle shadow
- Icon prefix for visual context

### Navigation Cards
- Gradient icon background in rounded rectangle
- Clear hierarchy: Title (semibold) + Subtitle (secondary color)
- Chevron indicator
- Hover/tap feedback

## Modernization Highlights

### Login Screen
- Circular gradient app icon with shadow
- Card-based form layout
- Animated focus states on input fields
- Gradient button with disabled states
- Clean error messaging

### Home Screen
- Personalized greeting header
- Stats overview card with icon badges
- Modern navigation cards with gradient icons
- Smooth scroll experience

### Components
- **OverviewCard**: Stats grid with dividers and icon badges
- **StatView**: Circular icon backgrounds with modern typography
- **HomeNavigationCard**: Gradient icons with clean layout
- **Design System**: Centralized colors, typography, and spacing

## Usage

### Importing the Design System
```swift
import SwiftUI

// Colors
.foregroundColor(AppColors.primary)
.background(AppColors.surface)

// Typography
.font(AppTypography.headlineSmall)

// Spacing
.padding(AppSpacing.md)

// Radius
.cornerRadius(AppRadius.lg)

// Shadows
.shadow(color: AppShadow.lg.color, radius: AppShadow.lg.radius, y: AppShadow.lg.y)

// Gradients
.fill(AppColors.primaryGradient)
```

### Button Styles
```swift
Button("Action") {
    // action
}
.buttonStyle(PrimaryButtonStyle())

Button("Cancel") {
    // action
}
.buttonStyle(SecondaryButtonStyle())
```

### Card Style
```swift
VStack {
    // content
}
.cardStyle()  // Applies background, corners, and shadow
```

## Future Enhancements
- Dark mode support with adaptive colors
- Additional component styles (chips, badges, alerts)
- Animation utilities for transitions
- Accessibility utilities (dynamic type, VoiceOver)
- Custom SF Symbols integration

## Migration Guide
When updating existing views:

1. Replace hardcoded colors with `AppColors.*`
2. Replace hardcoded fonts with `AppTypography.*`
3. Replace hardcoded spacing with `AppSpacing.*`
4. Use `cardStyle()` modifier for cards
5. Apply button styles for consistency
6. Add gradients to prominent UI elements
7. Ensure proper spacing hierarchy