919afe56f2
React Native mobile application for SAPIENS news platform. Consolidated all previous history into single commit. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
62 lines
2.6 KiB
Markdown
62 lines
2.6 KiB
Markdown
# 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. |