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

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

Button("Action") {
    // action
}
.buttonStyle(PrimaryButtonStyle())

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

Card Style

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