aimond/sapiens-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4caa75785008d76ef494c0953b191f05cd44789f
sapiens-mobile/design_guidelines.md
jungwoo choi 919afe56f2 feat: SAPIENS Mobile App - Initial commit 
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>
2025-10-23 14:30:25 +09:00

2.6 KiB
Raw Blame History

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.