Mobile App Design Prompt
Design specifications used with NanoBananaPro to create the TrickBook mobile app UI.
Brand Identity
Colors
Primary Color: Gold/Yellow - This is the signature TrickBook color
┌─────────────────────────────────────────────────────────────┐
│ DARK THEME │
├─────────────────────────────────────────────────────────────┤
│ Primary: #FFD700 (TrickBook Gold) │
│ Primary Dark: #FFC000 (Pressed/Active state) │
│ Secondary: #1976D2 (Blue accent) │
│ Background: #121212 │
│ Surface: #1E1E1E (Cards/Elevated) │
│ Surface Light: #2C2C2C (Elevated cards) │
│ Text Primary: #FFFFFF │
│ Text Secondary: #A0A0A0 │
│ Border: #333333 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ LIGHT THEME │
├─────────────────────────────────────────────────────────────┤
│ Primary: #FFD700 (TrickBook Gold) │
│ Primary Dark: #E6C200 (Pressed/Active state) │
│ Secondary: #1976D2 (Blue accent) │
│ Background: #FFFFFF │
│ Surface: #F5F5F5 (Cards/Elevated) │
│ Surface Dark: #EEEEEE (Elevated cards) │
│ Text Primary: #1A1A1A │
│ Text Secondary: #666666 │
│ Border: #E0E0E0 │
└─────────────────────────────────────────────────────────────┘
Semantic Colors (both themes):
│ Success: #4CAF50 │
│ Error: #F44336 │
│ Warning: #FF9800 │
│ Info: #2196F3 │
│ Premium Badge: #1DA1F2 (Verified Blue checkmark) │
Theme Support
IMPORTANT: The app must support both light and dark themes, automatically matching the user's system preference.
Design Philosophy: Personal First, Social Second
IMPORTANT: TrickBook is primarily a personal progression tool, not a social media app. The home screen should feel like opening YOUR trick book - personal, focused, and motivating. Social features (Feed, Homies) are supplementary, not the core experience.
The app should ask: "What are YOU working on?" not "What is everyone else doing?"
App Structure
Bottom Navigation (5 tabs)
┌─────────────────────────────────────────────────────┐
│ 🏠 📚 📍 👥 🎬 │
│ Home TrickBook Spots Homies Media │
└─────────────────────────────────────────────────────┘
| Tab | Icon | Primary Function |
|---|---|---|
| Home | House | Personal dashboard & feature hub |
| TrickBook | Book | Trick progression & Trickipedia |
| Spots | Map Pin | Location discovery |
| Homies | People | Social connections & messaging |
| Media | Film | Video content (Couch + Feed) |
Screen Designs
1. HOME TAB - Personal Dashboard
The Home tab is the user's personal TrickBook - a dashboard that welcomes them and provides quick access to their progression and all features.
┌─────────────────────────────────────────┐
│ [Avatar] Welcome back! 🔔 ⚙️ │
├─────────────────────────────────────────┤
│ 🎯 Current Goals │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Trick│ │Trick│ │Trick│ │
│ └─────┘ └─────┘ └─────┘ │
├─────────────────────────────────────────┤
│ 📊 Your Progress │
│ [Stats and visual chart] │
├─────────────────────────────────────────┤
│ Quick Access │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │
│ │📚 │ │📍 │ │👥 │ │🎬 │ │📺 │ │
│ └───┘ └───┘ └───┘ └───┘ └───┘ │
├─────────────────────────────────────────┤
│ 🔥 Homie Activity (compact) │
│ [2-3 recent updates from homies] │
└─────────────────────────────────────────┘
Key Elements:
- Personalized greeting with profile avatar
- Settings (gear) and notifications (bell) in header
- Current Goals section showing tricks user is actively learning
- Progress stats (tricks landed, spots saved, etc.)
- Quick Access grid to all main features
- Compact homie activity preview (not the main focus)
2. TRICKBOOK TAB
Trickipedia Browser:
- Segmented control: "Trickipedia" | "My Lists" | "Homie Lists"
- 3-column grid of trick cards
- Each card: Image, name, difficulty badge (1-10)
- Filter by category and difficulty
My TrickLists:
- List of user's trick lists
- Each item: List name, progress bar, trick count
- Status badges: Not Started, Learning, Landed, Mastered
3. SPOTS TAB
Map View:
- Full-screen map with spot markers
- Category filter chips at top
- Tag filter (bowl, street, lights, indoor)
- Current location button
- List view toggle
Spot Detail:
- Hero image gallery (swipe)
- Spot name and location
- Tags as chips
- Map preview with "Get Directions" button
- "Add to My List" button
4. HOMIES TAB
My Homies:
- Segmented control: "My Homies" | "Find Riders" | "Requests"
- List of connected homies
- Each item: Avatar (with premium badge), name, sport chips
- Chat/View Profile buttons
Chat:
- WhatsApp-style messaging UI
- Message bubbles (sent vs received)
- Typing indicator
5. MEDIA TAB
The Couch (Netflix-style):
- Featured video hero
- "Continue Watching" row
- Category rows (Skateboarding, Snowboarding, etc.)
- Each video card: Thumbnail, title, duration
The Feed (TikTok-style):
- Full-screen vertical video/image scroll
- Overlay UI: Profile pic, Love, Respect, Comment, Share
- Swipe up for next post
Component Library
Cards
- Trick Card (image, name, difficulty)
- Spot Card (image, name, location, tags)
- User Card (avatar, name, sports)
- Video Card (thumbnail, title, duration)
Badges
- Premium verified badge (blue check)
- Difficulty badge (1-10)
- Status badge (Not Started, Learning, Landed, Mastered)
- Count badge (notifications)
- Tag chips
Navigation
- Bottom tab bar
- Top app bar (with back, title, actions)
- Segmented control
Feed Post Layout
┌─────────────────────────────────────┐
│ [Full-bleed video/image] │
│ │
│ ┌───┐ │
│ │ 👤│ │ ← Avatar
│ ├───┤ │
│ │ ❤️│ │ ← Love
│ ├───┤ │
│ │ 🤝│ │ ← Respect
│ ├───┤ │
│ │ 💬│ │ ← Comments
│ ├───┤ │
│ │ ↗️│ │ ← Share
│ └───┘ │
│ │
│ @username │
│ Caption text goes here... │
│ #skateboarding #kickflip │
└─────────────────────────────────────┘
Technical Constraints
- React Native - Design with RN components in mind
- SafeAreaView - Account for notches and home indicators
- Minimum touch target: 44x44 points
- Theme Support: MUST provide both light and dark theme variants
- System Detection: App follows device appearance settings automatically