### 60/30/10 Color System Implementation (CSS)

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

Defines CSS variables for a 60/30/10 color system, prioritizing a neutral base, complementary colors for text and elements, and a brand accent. Includes examples for shadows and button styles, adapting shadow colors to backgrounds.

```css
/* Color System Implementation */
:root {
  /* 60% - Neutral Base */
  --color-base: #FFFFFF;
  --color-base-dark: #0F0F0F; /* Dark mode */

  /* 30% - Complementary (Text/Elements) */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: rgba(26, 26, 26, 0.7);
  --color-text-tertiary: rgba(26, 26, 26, 0.5);

  /* 10% - Brand Accent */
  --color-accent: #6366F1;
  --color-accent-hover: #4F46E5;
  --color-accent-light: rgba(99, 102, 241, 0.05); /* For secondary buttons */
  --color-accent-border: rgba(99, 102, 241, 0.1); /* For subtle borders */
}

/* Shadow Colors - Match to Background */
.card-on-white {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.card-on-purple {
  /* Tinted shadow - never pure gray/black */
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.2);
}

/* Button Examples */
.btn-primary {
  background: var(--color-accent);
  color: white;
  /* Subtle inner shadow for dimension */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-secondary {
  background: var(--color-accent-light);
  color: var(--color-accent);
  border: 1px solid var(--color-accent-border);
}
```

--------------------------------

### 8-Point Grid Spacing System Implementation (CSS)

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

Implements an 8-point grid system for spacing, ensuring all values are divisible by 8 or 4. It defines a spacing scale using CSS variables and provides examples of relationship-based spacing for UI elements like cards and forms.

```css
/* 8-Point Grid Spacing */
:root {
  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
}

/* Relationship-Based Spacing Example */
.card {
  padding: var(--space-5); /* 24px internal padding */
}

.card-header {
  margin-bottom: var(--space-3); /* 12px - related to content */
}

.card-title {
  margin-bottom: var(--space-2); /* 8px - closely related */
}

.card-description {
  margin-bottom: var(--space-4); /* 16px - before next section */
}

.card-actions {
  margin-top: var(--space-5); /* 24px - separate section */
  padding-top: var(--space-4);
  border-top: 1px solid rgba(0,0,0,0.1);
}

/* Section Spacing */
.section {
  padding: var(--space-9) var(--space-5); /* 80px vertical, 24px horizontal */
}

.section-major {
  padding: var(--space-10) var(--space-5); /* 96px for major sections */
}

/* Multiplier Rule: If related text = 16px gap, unrelated = 32px (2×) */
.form-field {
  margin-bottom: var(--space-4); /* 16px between fields */
}

.form-section {
  margin-bottom: var(--space-6); /* 32px between sections (2×) */
}
```

--------------------------------

### Reference Common Mobile UI/UX Anti-Patterns

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

A structured reference object identifying common visual and UX mistakes. It provides examples of 'bad' vs 'good' practices for elements like label emphasis and shadow styling.

```javascript
const antiPatterns = {
  visualMistakes: [
    "Overusing flashy gradients and blur effects",
    "More than 4 font sizes or 3 font weights",
    "Random spacing values (use 8-point grid!)",
    "Pure gray/black shadows on colored backgrounds",
    "Making all information the same visual weight"
  ],
  uxMistakes: [
    "Hiding key content behind banners or extra taps",
    "Placing CTAs outside the thumb zone",
    "Generic empty states with no guidance",
    "Using sliders for frequent/precise data entry",
    "Emphasizing labels over values"
  ],
  examples: {
    labelEmphasis: {
      bad: { label: "SALES (big)", value: "591 (small)" },
      good: { label: "Sales (small)", value: "591 (big)" }
    },
    shadowColor: {
      bad: "box-shadow: 0 4px 24px rgba(0,0,0,0.3)",
      good: "box-shadow: 0 4px 24px rgba(99,102,241,0.2)"
    }
  }
};
```

--------------------------------

### Peak-End Rule Implementation and Emotional Feedback (JavaScript)

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

JavaScript objects demonstrating the implementation of the Peak-End Rule, including journey mapping, designing peak and ending moments, and mitigating negative peaks. It also provides examples of emotional feedback loops for user interactions.

```javascript
// Peak-End Rule Implementation
const peakEndDesign = {
  // Step 1: Map Your Journey
  journeyMapping: {
    process: [
      "Lay out every step in core flow",
      "Identify: Where is user slowed down?",
      "Identify: Where might stress peak?",
      "Identify: Where's the quiet in between?",
      "Treat as living document"
    ]
  },

  // Step 2: Design The Peak
  peakMoments: {
    triggers: [
      "After completing a core task",
      "Hitting a milestone",
      "Investing significant effort",
      "Finding what they want"
    ],
    implementations: [
      "Badge or achievement",
      "Sparkle animation",
      "Surprise copy",
      "Personalized brief that builds in front of them",
      "Micro-animations with supporting tags"
    ]
  },

  // Step 3: Design The Ending
  endingMoments: {
    requirements: [
      "Never let app 'fall off' without closure",
      "Celebrate what was done (check mark, summary card)",
      "Encourage what comes next",
      "Reaffirm progress",
      "Gentle nudge to return"
    ],
    exampleCopy: "You showed up today. That's huge."
  },

  // Step 4: Reduce Negative Peaks
  negativePeakMitigation: {
    problemAreas: ["wait screens", "error states", "long forms"],
    solutions: [
      "Uplifting microcopy",
      "Helpful tools before users ask",
      "Loading animations with tips",
      "Turn delays into opportunities"
    ]
  }
};

// Emotional Feedback Loop Examples
const emotionalFeedback = {
  correctAnswer: {
    bad: "✓ Correct",
    good: "🎉 You got it! Nice work!"
  },
  mistake: {
    bad: "✗ Wrong",
    good: "Almost! Here's a hint..."
  },
  milestone: {
    bad: "Level complete",
    good: "🏆 Level 5 unlocked! You're on fire!"
  },
  progress: {
    bad: "50% complete",
    good: "Halfway there! Keep the momentum going 🚀"
  }
};
```

--------------------------------

### Define Spotify Strategic Design Principles in JavaScript

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

A configuration object representing three core design principles: The Trojan Horse, The Vanity Mirror, and The Comfort Trap. It serves as a reference for implementing user-centric design strategies in mobile applications.

```javascript
const spotifyPrinciples = {
  trojanHorse: {
    principle: "Hide complex tech in familiar interfaces",
    implementation: [
      "Wrap sophisticated features in familiar UI patterns",
      "Users don't want to interact with algorithms",
      "They want experiences that feel natural"
    ],
    question: "What's the simplest, most familiar way users can interact with this feature?"
  },
  vanityMirror: {
    principle: "Make sharing about identity, not the app",
    implementation: [
      "Create personal insights so meaningful sharing feels like self-expression",
      "Don't celebrate what users did in your app",
      "Celebrate who they are"
    ],
    examples: {
      bad: "You completed 25 tasks",
      good: "You're a night owl who does their best work after 9 PM"
    }
  },
  comfortTrap: {
    principle: "Consistency as a competitive moat",
    implementation: [
      "Every interaction follows the same logic",
      "Feels like it belongs to the same family",
      "Predictable patterns become second nature",
      "Switching costs increase naturally"
    ],
    insight: "Design consistency isn't about aesthetics — it's about creating habits competitors can't replicate"
  }
};
```

--------------------------------

### Implement Typography System with CSS

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

Defines a scalable typography system using CSS variables to enforce design constraints, such as limited font sizes and weights. It promotes visual hierarchy through opacity and font-family selection.

```css
.typography-system {
  --font-primary: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xl: 32px;
  --text-lg: 24px;
  --text-md: 16px;
  --text-sm: 14px;
  --font-bold: 600;
  --font-regular: 400;
  --opacity-heading: 100%;
  --opacity-body: 80%;
  --opacity-secondary: 60%;
}

.heading {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  opacity: var(--opacity-heading);
}

.body-text {
  font-size: var(--text-md);
  font-weight: var(--font-regular);
  opacity: var(--opacity-body);
}

.secondary-text {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  opacity: var(--opacity-secondary);
}

.price-display {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
```

--------------------------------

### Define Mobile Design Philosophy and Process

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

Provides JavaScript configuration objects to define core design goals, user context, UX structure, visual design rules, and emotional design strategies. These structures help maintain consistency across the mobile app development lifecycle.

```javascript
// Design Philosophy Checklist
const designChecklist = {
  userGoal: "What is the user trying to accomplish?",
  approach: "Reduce friction to that goal",
  emotionalTarget: "How should this make the user feel?",
  options: ["trust", "delight", "confidence", "calm"],
  visualHierarchy: "What's the one thing they should notice first?",
  approach: "Design clear visual hierarchy"
};

// 5-Step Design Process
const context = {
  appType: "fitness | finance | social | productivity | health | crypto",
  userType: "new | returning | power_user",
  primaryAction: "The one thing user should do on this screen",
  industryConventions: "See industry-conventions.md"
};

const uxStructure = {
  userFlow: "Map screen before and after",
  mvpElements: "Only what's essential",
  thumbZone: "Primary actions in bottom 1/3",
  readingPattern: "F-pattern for content layout",
  interactionCost: "Expose content directly, don't hide behind taps",
  emptyStates: "Turn into opportunities with guidance + CTA"
};

const visualDesign = {
  typography: { fontFamily: 1, maxSizes: 4, maxWeights: 2 },
  colorRule: { neutral: "60%", complementary: "30%", accent: "10%" },
  spacing: "8-point grid (8, 12, 16, 24, 32, 48, 64, 80, 96)",
  shadows: "Soft only, match color to background"
};

const emotionalDesign = {
  peakMoment: "Completing core task, milestone, finding what they want",
  peakDesign: "micro-animations, badges, sparkles, encouraging copy",
  endingDesign: "summary card, progress affirmation, gentle nudge to return"
};

const polish = {
  glowEffects: "Subtle glow behind key elements",
  buttonDetails: "White inner shadows on primary buttons",
  borders: "5% opacity primary-color on secondary elements",
  tapTargets: "Minimum 44×44pt",
  states: "error, empty, loading, success"
};
```

--------------------------------

### JavaScript UI Patterns for Mobile Apps

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

Defines JavaScript objects representing common UI patterns for mobile apps. These include user stage personalization (new, returning, power user), a smart search pattern to avoid blank states, a selection pattern over manual input, and an empty state pattern with guidance.

```javascript
// User Stage Personalization
const userStagePatterns = {
  newUser: {
    approach: "Simple welcome, guided setup",
    features: "Minimal options, clear onboarding",
    tone: "Encouraging, educational"
  },
  returningUser: {
    approach: "Personalized content, routine-focused",
    features: "Progress indicators, quick actions",
    tone: "Familiar, efficient"
  },
  powerUser: {
    approach: "Advanced stats, optimization tools",
    features: "Dense information, shortcuts",
    tone: "Professional, data-rich"
  }
};

// Smart Search Pattern - Never show blank search
const smartSearchPattern = {
  emptyState: {
    include: [
      "Recent searches",
      "Popular/trending items",
      "Personalized recommendations"
    ],
    avoid: "Blank screen with just search bar"
  }
};

// Selection Over Manual Input
const selectionPattern = {
  approach: "Offer tappable selections for common options",
  elements: [
    "Icons/emojis alongside options",
    "Pre-defined choices for common values",
    "'Other' option with manual input fallback"
  ],
  example: {
    question: "What's your role?",
    options: ["👨‍💻 Developer", "🎨 Designer", "📊 Manager", "Other..."]
  }
};

// Empty State Pattern
const emptyStatePattern = {
  bad: "No items found",
  good: {
    illustration: "Friendly visual",
    message: "Your collection is empty",
    guidance: "Add your first item to get started",
    cta: "Add Item"
  }
};

```

--------------------------------

### Industry Design Conventions Reference (JavaScript)

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

A JavaScript object defining design conventions for various industries, including color palettes, UI elements, motion, and themes. This serves as a reference for tailoring designs to specific app categories.

```javascript
const industryConventions = {
  aiTech: {
    palette: "Soft gradients, ethereal accents",
    elements: "Depth, dimensionality, glowing elements",
    motion: "Smooth animations communicating intelligence",
    theme: "Dark or light with moving elements"
  },

  cryptoWeb3: {
    palette: "Neon colors, high contrast",
    elements: "Geometric shapes, futuristic aesthetic",
    motion: "Polish builds trust (Phantom lesson)",
    theme: "Dark mode backgrounds",
    keyInsight: "Treat visual details, motion, transitions as core product features"
  },

  financeBanking: {
    palette: "Blue-dominant (trust, stability)",
    elements: "Generous white space, clean layouts",
    motion: "Tactile interactions (Revolut: draggable charts, 3D card flips)",
    theme: "Professional, conservative typography",
    keyInsight: "Tactile interactions turn basic features into premium experiences"
  },

  healthWellness: {
    palette: "Bright, approachable colors",
    elements: "Friendly illustrations, warm micro-interactions",
    motion: "Non-intimidating onboarding flows",
    theme: "Reduce anxiety through design",
    keyInsight: "Guide users kindly, peak = personalized insight moment"
  },

  educationLearning: {
    palette: "Bright, playful colors",
    elements: "Character-driven experiences",
    motion: "Emotional feedback loops",
    theme: "Personality in every interaction",
    keyInsight: "Duolingo: character animations doubled DAUs (14.2M → 34M+)"
  },

  fitness: {
    palette: "Energetic colors, bold typography",
    elements: "Progress-focused, visual momentum",
    motion: "Adapt UI complexity to user stage",
    theme: "New → Returning → Power user progression"
  },

  productivity: {
    palette: "Clean, minimal",
    elements: "Information-dense but organized",
    motion: "Quick-action patterns, keyboard shortcuts",
    theme: "Strong grid systems, consistent spacing"
  },

  ecommerce: {
    palette: "Product photography focused",
    elements: "Prominent CTAs, trust signals",
    motion: "Frictionless checkout flows",
    theme: "Reviews, ratings, delivery estimates"
  }
};
```

--------------------------------

### React and Tailwind CSS Mobile App Card Component

Source: https://context7.com/ceorkm/mobile-app-ui-design/llms.txt

Implements a reusable mobile app card component using React and Tailwind CSS. It includes features like an image display, typography hierarchy, stat display with monospace numbers, and action buttons, all styled with Tailwind CSS classes for a modern UI.

```jsx
// Mobile App Card Component Example
import { Heart, Share2, MoreHorizontal } from 'lucide-react';

const AppCard = ({ title, description, image, stats }) => {
  return (
    <div className="bg-white rounded-3xl p-6 shadow-sm">
      {/* Image with soft shadow */}
      <div className="relative mb-4">
        <img
          src={image}
          alt={title}
          className="w-full h-48 object-cover rounded-2xl"
        />
        <div className="absolute inset-0 rounded-2xl shadow-inner" />
      </div>

      {/* Typography Hierarchy */}
      <h3 className="text-xl font-semibold text-gray-900 mb-1">
        {title}
      </h3>
      <p className="text-base text-gray-900/70 mb-4">
        {description}
      </p>

      {/* Stats with monospace numbers */}
      <div className="flex gap-6 mb-6">
        {stats.map((stat, i) => (
          <div key={i}>
            <span className="font-mono text-2xl font-semibold text-gray-900">
              {stat.value}
            </span>
            <span className="text-sm text-gray-900/60 ml-1">
              {stat.label}
            </span>
          </div>
        ))}
      </div>

      {/* Actions in thumb zone */}
      <div className="flex gap-3">
        {/* Primary CTA - 10% accent color */}
        <button className="flex-1 bg-indigo-500 text-white py-3 px-6 rounded-2xl font-medium shadow-sm hover:bg-indigo-600 transition-colors">
          Get Started
        </button>

        {/* Secondary actions */}
        <button className="p-3 bg-indigo-500/5 rounded-2xl text-indigo-500 hover:bg-indigo-500/10 transition-colors">
          <Heart className="w-5 h-5" />
        </button>
        <button className="p-3 bg-indigo-500/5 rounded-2xl text-indigo-500 hover:bg-indigo-500/10 transition-colors">
          <Share2 className="w-5 h-5" />
        </button>
      </div>
    </div>
  );
};

// Usage
<AppCard
  title="Morning Routine"
  description="Start your day with intention"
  image="/routine.jpg"
  stats={[
    { value: "12", label: "days" },
    { value: "89%", label: "complete" }
  ]}
/>

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.