# Mobile News App Design Guidelines

## Design Approach
**Reference-Based Approach**: Drawing inspiration from modern mobile news apps like Apple News, Google News, and Flipboard, with emphasis on clean typography, intuitive navigation, and content-first design.

## Core Design Elements

### A. Color Palette
**Primary Colors:**
- Dark mode: Background 222 15% 8%, Surface 222 15% 12%, Text 210 15% 95%
- Light mode: Background 0 0% 98%, Surface 0 0% 100%, Text 222 15% 15%

**Accent Colors:**
- Primary brand: 210 85% 55% (modern blue)
- Success/active: 142 76% 45% (green for interactions)

### B. Typography
**Font Stack:** Inter (Google Fonts) for exceptional mobile readability
- Headlines: 600 weight, 1.2rem-1.8rem
- Body text: 400 weight, 0.875rem-1rem
- Captions: 500 weight, 0.75rem-0.825rem

### C. Layout System
**Spacing Units:** Tailwind units of 2, 4, 6, and 8 (p-2, m-4, gap-6, h-8)
- Consistent 4-unit grid system for mobile optimization
- 6-unit spacing for section breaks
- 2-unit for tight element spacing

### D. Component Library

**Navigation:**
- Sticky header with search icon, logo, and profile/language selector
- Bottom tab navigation for main categories (People, Topics, Companies)
- Swipeable horizontal card carousel on homepage

**Content Cards:**
- Article preview cards with AI-generated thumbnails (16:9 aspect ratio)
- Media outlet profile cards with circular avatars and bio sections
- Consistent card shadows: shadow-sm with subtle elevation

**Interactive Elements:**
- Search overlay with instant results filtering
- Language selector dropdown with flag icons
- Smooth scroll-based pagination for article feeds

**Article Layout:**
- Full-width hero images with gradient overlays
- Navigation arrows for previous/next article browsing
- Floating action buttons for sharing and bookmarking

### E. Mobile-First Considerations
- Touch-friendly tap targets (minimum 44px)
- Thumb-zone navigation placement
- Optimized scroll performance with virtual scrolling
- Progressive image loading for thumbnails

## Images
**AI-Generated Thumbnails:** Each article requires a 16:9 landscape thumbnail generated via DALL-E based on article content. Place thumbnails prominently on article cards and as hero images on detail pages.

**Media Outlet Avatars:** Circular profile images (64px) for each media outlet representing their focus area (People: portrait styles, Topics: abstract concepts, Companies: corporate/brand imagery).

**No Large Hero Image:** The design prioritizes content discovery over large hero sections, focusing on article thumbnails and clean typography instead.