Please create a mobile app based on below name and description.
The app should be designed with mobile-first principles, optimized for responsive for mobile devices.
Name: B4U Esports
Description: B4U Esports is Bhutan’s leading gaming organization, empowering youth through competitive esports, tournaments, and digital services in PUBG Mobile, MLBB, and social Media boosting services
I've created a comprehensive mobile app for B4U Esports that embodies Bhutan's leading gaming organization. Here are the key features implemented:
The app successfully captures the essence of a modern esports organization while maintaining focus on Bhutan's gaming community and youth empowerment through competitive gaming and digital services.
Perfect! Let’s create a fully detailed, ready-to-use Figma + MidJourney prompt for the B4U Esports App, including animated esports backgrounds, official game logos, clickable buttons, Pi Network integration, admin/user dashboards, ads, history, and all policies.
Prompt for AI/Designer:
Project Name: B4U Esports — Esports Tournament App
Platform: iOS & Android
Style: Modern, professional esports UI/UX, neon & dynamic effects, dark/light mode
Color Palette: Primary Yellow (#FFD700), Blue (#1E3A8A), Dark Gray (#1F1F1F), Light Gray (#F4F4F4), Red (#FF3B3B), Green (#00FF7F)
Fonts: Headings: Montserrat Bold, Body: Roboto Regular, Buttons: Montserrat Medium
Animation: All backgrounds slightly animated (particles, neon lights, gaming effects), buttons with hover & pressed animations, banners with subtle motion
Game Logos: Include official logos for PUBG Mobile, Free Fire, MLBB, and others dynamically
Interaction: Every button clickable with hover, pressed, and disabled states
💡 Optional Designer Add-ons:
I'll create a comprehensive Figma design system and MidJourney prompts for the B4U Esports app with all the features you've requested.
1. Main Esports Background:
"Futuristic esports gaming arena background, dark purple and neon blue gradient, floating particles, holographic elements, cyberpunk aesthetic, high energy, 4k wallpaper, digital art --ar 9:16 --v 6 --style raw"
2. Tournament Background:
"Professional esports tournament stage with dramatic lighting, neon yellow and blue accents, trophy podium center, particle effects, cinematic gaming atmosphere, dark theme --ar 16:9 --v 6"
3. Battle Background:
"Epic mobile gaming battle scene, PUBG and MLBB inspired, dynamic action, neon trail effects, dark background with purple and gold highlights, esports championship vibe --ar 9:16 --v 6"
4. Dashboard Pattern:
"Seamless geometric esports pattern, hexagonal grid, neon lines, dark background, subtle animation ready, tech-inspired, gaming UI texture --ar 1:1 --v 6 --tile"
5. Victory Celebration:
"Esports victory celebration, golden trophy with neon glow, confetti particles, champion podium, dark background with dramatic lighting, professional tournament aesthetic --ar 4:3 --v 6"6. Gamer Avatar Male:
"Professional esports gamer avatar, headset, concentrated expression, purple and yellow team colors, neon outline, circular frame, game character style --ar 1:1 --v 6"
7. Gamer Avatar Female:
"Female esports pro gamer avatar, gaming headset, confident pose, neon blue and yellow highlights, circular portrait, professional team photo style --ar 1:1 --v 6"
8. Team Mascot:
"Bhutanese dragon esports mascot, modern gaming aesthetic, neon purple and gold colors, fierce but friendly, logo-ready, vector style --ar 1:1 --v 6"9. Tournament Trophy:
"3D golden esports trophy, neon blue base, championship cup, glowing particles around, dark background, professional render, gaming award --ar 1:1 --v 6"
10. Coin/Currency Icon:
"Gaming cryptocurrency coin, gold and purple gradient, B4U logo embossed, glowing edge, 3D render, dark background --ar 1:1 --v 6"
11. Rank Badges:
"Esports rank badge collection, bronze to diamond tiers, neon accents, gaming achievement icons, set of 7 levels, metallic finish --ar 16:9 --v 6"/* Primary Colors */
--primary-yellow: #FFD700
--primary-blue: #1E3A8A
--neon-purple: #A855F7
--neon-pink: #EC4899
/* Background Colors */
--bg-dark: #1F1F1F
--bg-darker: #0F0F0F
--bg-card: rgba(31, 31, 31, 0.8)
--bg-light: #F4F4F4
/* Status Colors */
--success-green: #00FF7F
--error-red: #FF3B3B
--warning-orange: #FF8C00
--info-cyan: #00D9FF
/* Gradients */
--gradient-primary: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%)
--gradient-secondary: linear-gradient(135deg, #A855F7 0%, #EC4899 100%)
--gradient-dark: linear-gradient(180deg, #1F1F1F 0%, #0F0F0F 100%)/* Headings */
Font Family: Montserrat Bold
H1: 32px / 40px (Mobile), 48px / 56px (Desktop)
H2: 24px / 32px (Mobile), 36px / 44px (Desktop)
H3: 20px / 28px (Mobile), 28px / 36px (Desktop)
H4: 18px / 24px (Mobile), 24px / 32px (Desktop)
/* Body Text */
Font Family: Roboto Regular
Body Large: 16px / 24px
Body Medium: 14px / 20px
Body Small: 12px / 18px
/* Buttons */
Font Family: Montserrat Medium
Button Large: 16px / 24px
Button Medium: 14px / 20px
Button Small: 12px / 18px4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96pxFrame Name: 01_Splash_Screen
Layers:
└─ Animated Background (MidJourney Asset #1)
└─ Particle Overlay (Opacity 60%, Blend: Screen)
└─ B4U Logo (300x300px, centered)
└─ Glow Effect (Outer glow, #FFD700, 40px)
└─ Tagline Text ("Bhutan's Premier Esports", 14px, centered)Animations:
Frame Names: 02_Onboarding_01, 02_Onboarding_02, 02_Onboarding_03
└─ Background (MidJourney Asset #3)
└─ Gradient Overlay (Bottom to top, opacity 80%)
└─ Hero Illustration (600x400px, top aligned)
└─ Title Text ("Join Ultimate Esports", H1, white)
└─ Description (Body Large, gray-300)
└─ Progress Dots (1/3 active, yellow)
└─ Next Button (Full width, 48px height, gradient)Button States:
Frame Name: 03_Authentication
Components:
└─ Background (Dark gradient)
└─ Logo (120x120px, centered top)
└─ Card Container (Border radius 24px, glass effect)
├─ Tab Selector (Login / Sign Up)
├─ Pi Network Button (Primary, with Pi logo)
├─ Divider (OR, horizontal line)
├─ Email Input Field (48px height)
├─ Password Input Field (48px height)
├─ Forgot Password Link (Right aligned)
└─ Submit Button (Full width, 56px height)Pi Network Button Spec:
#E7B10A, #8B6914)Frame Name: 04_Home_Dashboard
Layout Structure:
└─ Animated Background (Full screen)
└─ Header (Fixed, 64px height)
├─ Profile Avatar (40x40px, left)
├─ B4U Logo (Center)
└─ Notification Bell (Right, badge if unread)
└─ Main Content (Scrollable)
├─ Hero Carousel (Auto-rotating, 280px height)
│ └─ Tournament Cards (Swipeable)
├─ Quick Stats Bar (Wins, Earnings, Rank)
├─ Section: Upcoming Tournaments
│ └─ Horizontal scroll cards
├─ Ad Banner (320x100px, centered)
├─ Section: Live Matches
│ └─ Grid layout (2 columns)
├─ Section: Leaderboard Preview
│ └─ Top 5 players list
└─ Section: News & Updates
└─ Vertical card list
└─ Bottom Navigation (Fixed, 72px height)
├─ Home Icon (Active state)
├─ Tournaments Icon
├─ Wallet Icon
└─ Profile IconCarousel Card Spec:
Dimensions: 343x200px
Border radius: 16px
Background: Game-specific gradient
Elements:
├─ Game Logo (Top left, 48x48px)
├─ Tournament Name (H3, white)
├─ Date/Time (Body Small, yellow)
├─ Prize Pool (H2, gradient text)
├─ Entry Fee (Badge, top right)
└─ Register Button (Bottom right, 120x40px)
Animation:
- Card entrance: Slide from right + fade (0.3s)
- Auto-rotate: Every 4 seconds
- Touch: Drag to swipeFrame Name: 05_Tournaments_Page
Filter Bar Component:
Height: 56px
Background: rgba(31, 31, 31, 0.95)
Backdrop blur: 10px
Layout:
├─ Filter Icon (Left, 24x24px)
├─ Chip: Game Selector (Dropdown)
├─ Chip: Region (Dropdown)
└─ Chip: Entry Fee (Range slider)Tournament Card Component:
Dimensions: 343x140px
Border: 1px solid rgba(168, 85, 247, 0.2)
Border radius: 12px
Background: Glass effect
Padding: 16px
Layout:
├─ Game Logo (Animated, 56x56px, left)
├─ Content Column
│ ├─ Tournament Name (H4, white)
│ ├─ Date Badge (Small, yellow background)
│ ├─ Stats Row (Entry Fee | Prize Pool)
│ └─ Participants Bar (Progress, filled/total)
└─ Action Button (Right aligned, 80x36px)
States:
- Open Registration: Green accent
- In Progress: Blue accent
- Completed: Gray accentTab Component:
Height: 48px
Tabs: Upcoming | Live | Completed
Active indicator: Bottom border (3px, yellow)
Text: Montserrat Medium, 14px
Animation: Slide indicator on changeFrame Name: 06_Tournament_Details
└─ Hero Banner (Full width, 240px height)
├─ Game Background (Blurred)
├─ Game Logo (Center, 120x120px)
└─ Status Badge (Top right)
└─ Content Container
├─ Tournament Name (H1)
├─ Key Info Cards (Grid 2x2)
│ ├─ Date/Time Card
│ ├─ Prize Pool Card
│ ├─ Entry Fee Card
│ └─ Participants Card
├─ Description Section
├─ Rules Accordion
│ └─ Expandable items
├─ Prize Distribution Table
├─ Registered Teams List (Avatar grid)
└─ Action Buttons (Fixed bottom)
├─ Share Button (Outline)
└─ Register Button (Primary, full width)Key Info Card Spec:
Dimensions: 160x100px
Border radius: 12px
Background: Glass effect
Border: 1px solid rgba(255, 215, 0, 0.2)
Layout:
├─ Icon (Top, 32x32px, yellow)
├─ Value (H3, white)
└─ Label (Body Small, gray)
Animation on load:
- Stagger entrance (0.1s delay each)
- Scale from 0.95 to 1.0Frame Name: 07_Team_Management
└─ Header Section
├─ Team Banner (Full width, 180px)
├─ Team Logo (Overlapping, 80x80px)
└─ Team Name (H2, white)
└─ Roster Section
├─ Captain Card (Highlighted border)
└─ Member Cards (Grid layout)
└─ Each Card:
├─ Avatar (64x64px)
├─ Username (H4)
├─ Role Badge
├─ Stats (Compact)
└─ Action Menu (3 dots)
└─ Action Bar (Fixed bottom)
├─ Invite Player Button
├─ Edit Team Button
└─ Leave Team Button (Danger)Member Card Spec:
Dimensions: 343x100px
Border radius: 12px
Background: Gradient (subtle)
Border: 1px solid (Captain: gold, Member: purple)
Layout (Horizontal):
├─ Avatar + Status Indicator (Online/Offline)
├─ Info Column
│ ├─ Username
│ ├─ Role Badge
│ └─ Stats Row (K/D, Wins)
└─ Action Button (Icon, 32x32px)Frame Name: 08_Live_Streaming
└─ Video Player (Full width, 16:9 ratio)
├─ Play/Pause Overlay
├─ Live Badge (Top left, pulsing red)
├─ Viewer Count (Top right)
└─ Controls Bar (Bottom)
└─ Match Stats Panel (Collapsible)
├─ Team Scores (Real-time)
├─ Kill Feed (Scrolling list)
└─ Mini Leaderboard
└─ Live Chat Section
├─ Message List (Auto-scroll)
├─ Emoji Reactions (Floating)
└─ Input Bar (Fixed bottom)
└─ Action Buttons
├─ Follow Button
├─ Share Button
└─ Full Screen ButtonLive Chat Message Spec:
Height: Auto (min 48px)
Padding: 8px 12px
Border radius: 8px
Background: Alternating (subtle)
Layout:
├─ Avatar (24x24px, left)
├─ Username (Bold, colored by rank)
├─ Message Text (Body Small, wrap)
└─ Timestamp (Caption, gray, right)
Animation:
- Slide up on new message
- Fade older messages slightlyFrame Name: 09_Wallet_Rewards
Pi Network Integration Display:
└─ Balance Card (Full width, 200px height)
├─ Background: Gradient (gold to orange)
├─ Pi Logo (Top left, 40x40px)
├─ Balance Amount (H1, large, white)
├─ USD Equivalent (Body, semi-transparent)
└─ Action Buttons Row
├─ Deposit Button
├─ Withdraw Button
└─ Swap Button
└─ Quick Actions Grid (2x2)
├─ Buy Coins
├─ Redeem Rewards
├─ Transaction History
└─ Referral Earnings
└─ Transaction History List
└─ Transaction Card:
├─ Icon (Type indicator)
├─ Description
├─ Amount (Colored by type)
├─ Status Badge
└─ Timestamp
└─ Rewards Catalog
└─ Reward Card:
├─ Image (Square, 140x140px)
├─ Name
├─ Cost (Pi coins)
└─ Redeem ButtonTransaction Card Spec:
Height: 72px
Border bottom: 1px solid rgba(255, 255, 255, 0.1)
Padding: 12px 16px
Layout:
├─ Icon Circle (40x40px)
│ └─ Type icon (Deposit: ↓, Withdraw: ↑, etc.)
├─ Content Column
│ ├─ Description (Body Medium, white)
│ └─ Date (Caption, gray)
└─ Amount Column (Right aligned)
├─ Amount (H4, colored)
└─ Status Badge (Small)
Status Colors:
- Pending: Orange
- Completed: Green
- Failed: RedFrame Name: 10_Profile_Page
└─ Profile Header
├─ Cover Image (Full width, 200px)
├─ Avatar (120x120px, overlapping, editable)
├─ Username (H2, white)
├─ Gamer Tag (Body, yellow)
└─ Rank Badge (Top right of avatar)
└─ Stats Grid (3 columns)
├─ Matches Played
├─ Win Rate
└─ Total Earnings
└─ Achievement Badges (Horizontal scroll)
└─ Badge Card:
├─ Image (80x80px)
├─ Name (Caption)
└─ Rarity Border (Bronze/Silver/Gold/Diamond)
└─ Teams Section
└─ Team Card (Compact, horizontal)
└─ Recent Matches (List)
└─ Match Card:
├─ Game Icon
├─ Result (Win/Loss)
├─ K/D Ratio
└─ Date
└─ Action Buttons
├─ Edit Profile
├─ Share Profile
└─ View Full StatsStats Card Spec:
Dimensions: 100x100px (approx, flexible)
Border radius: 12px
Background: Glass effect
Border: 1px gradient
Layout:
├─ Icon (32x32px, top, colored)
├─ Value (H3, white)
└─ Label (Caption, gray)
Animation on load:
- Count up animation for numbers
- Fade in with slide upFrame Name: 11_Notifications
└─ Header
├─ Title (H2, "Notifications")
└─ Mark All Read Button
└─ Notification List
└─ Notification Card:
├─ Icon/Image (Left, 48x48px)
├─ Content Column
│ ├─ Title (Body Medium, bold)
│ ├─ Description (Body Small)
│ └─ Time (Caption, gray)
├─ Unread Indicator (Blue dot)
└─ Action Button (If applicable)Notification Types & Icons:
Tournament Start: Trophy icon, Yellow
Match Result: Game controller, Green/Red
Team Invite: Users icon, Blue
Wallet Transaction: Coin icon, Gold
System Update: Bell icon, Purple
Achievement Unlocked: Star icon, Rainbow gradientNotification Card Spec:
Height: Auto (min 80px)
Border bottom: 1px solid rgba(255, 255, 255, 0.05)
Padding: 12px 16px
Background: Unread - rgba(168, 85, 247, 0.05), Read - Transparent
Interaction:
- Tap: Mark as read + navigate to relevant page
- Swipe left: Delete option
- Long press: Quick action menuFrame Name: 12_Settings
└─ Settings List (Grouped)
├─ Account Section
│ ├─ Edit Profile
│ ├─ Change Password
│ ├─ Linked Accounts (Pi, Email, etc.)
│ └─ Privacy Settings
├─ Preferences Section
│ ├─ Theme Toggle (Dark/Light)
│ ├─ Language Selector
│ ├─ Notifications Toggle
│ └─ Sound Effects Toggle
├─ About Section
│ ├─ About B4U Esports
│ ├─ Terms of Service
│ ├─ Privacy Policy
│ ├─ Refund Policy
│ └─ App Version
└─ Danger Zone
├─ Logout Button
└─ Delete Account Button (Red)Settings Item Spec:
Height: 56px
Border bottom: 1px solid rgba(255, 255, 255, 0.05)
Padding: 0 16px
Layout:
├─ Icon (24x24px, left, colored)
├─ Label (Body Medium, white)
├─ Value/Status (Body Small, gray, right)
└─ Chevron or Toggle (Right)
Types:
- Navigation: Right chevron
- Toggle: Switch component
- Selection: Current value + chevronTheme Toggle Component:
Dimensions: 60x32px
Border radius: 16px
Background: Gray (off), Yellow (on)
Thumb: 28x28px circle, white
Animation: Slide + scale on toggle (0.2s ease)
Icons: Moon (left), Sun (right)Frame Name: 13_Admin_Dashboard
└─ Sidebar Navigation (Fixed left, 240px width)
├─ Admin Logo & Title
├─ Nav Items:
│ ├─ Dashboard (Active)
│ ├─ Tournaments
│ ├─ Users
│ ├─ Teams
│ ├─ Transactions
│ ├─ Analytics
│ └─ Settings
└─ Logout Button (Bottom)
└─ Main Content Area
├─ Header Bar
│ ├─ Page Title
│ ├─ Quick Actions
│ └─ Admin Profile
├─ Stats Grid (4 columns)
│ ├─ Total Users
│ ├─ Active Tournaments
│ ├─ Total Transactions
│ └─ Revenue
├─ Recent Activity Feed
├─ Charts Section
│ ├─ User Growth Chart
│ └─ Revenue Chart
└─ Quick Actions
├─ Create Tournament Button
├─ Approve Registrations Badge
└─ Pending Withdrawals BadgeAdmin Stat Card Spec:
Dimensions: 220x140px
Border radius: 16px
Background: Gradient (theme color)
Border: 1px solid rgba(255, 255, 255, 0.1)
Shadow: 0 8px 24px rgba(0, 0, 0, 0.2)
Layout:
├─ Icon (48x48px, top left, white)
├─ Value (H2, white, large)
├─ Label (Body Small, white, semi-transparent)
└─ Trend Indicator (Bottom right)
└─ Arrow + Percentage (Green/Red)Tournament Management Table:
Columns: Tournament Name | Game | Date | Participants | Prize Pool | Status | Actions
Row Height: 64px
Header: Fixed, bold, gray background
Rows: Alternating subtle background
Actions: Edit (icon), Delete (icon), View Details (icon)
Filters: Search bar, Game filter, Date range, Status filter
Pagination: 20 items per pageFrame Name: 14_About_History
└─ Hero Section
├─ Cover Image (Full width, 300px)
│ └─ B4U Logo overlay (Large, centered)
└─ Gradient Overlay (Dark to transparent)
└─ Content Sections
├─ Mission Statement Card
│ └─ Animated text reveal
├─ Timeline Section
│ └─ Vertical timeline with milestones
│ ├─ 2020: Founded
│ ├─ 2021: First Tournament
│ ├─ 2022: 100+ Tournaments
│ ├─ 2023: 5000+ Players
│ └─ 2024: International Expansion
├─ Achievements Grid
│ └─ Achievement Card:
│ ├─ Icon
│ ├─ Number (Animated count)
│ └─ Label
├─ Team Section
│ └─ Founder/Core Team Cards
└─ Contact CTA
└─ "Join Our Journey" ButtonTimeline Item Spec:
Layout (Horizontal):
├─ Year Badge (Left, 60x60px circle, gradient)
├─ Connecting Line (Vertical, dashed)
├─ Content Card (Right, flexible width)
├─ Title (H4, white)
├─ Description (Body Small, gray)
└─ Image (Optional, rounded)
Animation:
- Fade in as scroll reaches item
- Year badge: Scale pulse
- Line: Grow from top to bottomFrame Names: 15_Privacy_Policy, 15_Terms_Of_Service, 15_Refund_Policy
Standard Policy Page Structure:
└─ Header
├─ Back Button (Top left)
├─ Title (H2, centered)
└─ Last Updated (Caption, gray)
└─ Content Container (Scrollable)
├─ Section Heading (H3, yellow)
├─ Section Content (Body Medium, white/gray)
├─ Subsection (H4, white)
├─ Bulleted Lists (Indented)
└─ Contact Info (Bottom)
└─ Accept Button (Fixed bottom, if required)Policy Section Formatting:
Padding: 24px horizontal, 16px vertical
Line height: 1.6
Section spacing: 32px
Paragraph spacing: 16px
Emphasis:
- Important terms: Bold, yellow color
- Legal requirements: Italic, gray
- Links: Underlined, blue, clickableBanner Ad (Home & Tournaments):
Dimensions: 343x100px (Mobile), 728x90px (Tablet)
Position: Between content sections
Border radius: 12px
Background: Light gray placeholder
Border: 1px dashed rgba(255, 255, 255, 0.2)
Text: "Ad Space" (centered, gray)
Margin: 24px vertical
Integration: AdMob / Unity Ads
Format: Static image or HTML5
Auto-refresh: Every 60 secondsRewarded Video Ad:
Trigger: "Watch Ad for Bonus Coins" button
Placement: Wallet page, Daily rewards popup
Format: Full-screen video (15-30 seconds)
Reward: 50-100 coins (configurable)
Close button: After 5 seconds
Integration: AdMob Rewarded Video APIInterstitial Ad:
Trigger: After tournament registration, between matches
Frequency: Maximum once per 3 minutes
Format: Full-screen overlay
Close button: Top right, after 5 seconds
Background: Dark overlay (80% opacity)Page Transitions:
Transition: Slide + Fade
Duration: 0.3s
Easing: cubic-bezier(0.4, 0.0, 0.2, 1)
Types:
- Forward: Slide from right (translateX: 100% → 0%)
- Back: Slide to right (translateX: 0% → 100%)
- Modal: Scale + Fade (scale: 0.95 → 1.0, opacity: 0 → 1)Button Interactions:
Default → Hover:
Scale: 1.0 → 1.02
Duration: 0.15s
Easing: ease-out
Hover → Pressed:
Scale: 1.02 → 0.98
Brightness: 100% → 90%
Duration: 0.1s
Easing: ease-in
Disabled:
Opacity: 0.4
Cursor: not-allowed
Animation: NoneCard Entrance:
Stagger Animation:
Base Delay: 0s
Increment: 0.1s per card
Properties:
- translateY: 20px → 0px
- opacity: 0 → 1
Duration: 0.4s
Easing: cubic-bezier(0.16, 1, 0.3, 1)Background Particles:
Particle Element:
Size: 2-8px (random)
Color: rgba(168, 85, 247, 0.3 - 0.6)
Animation: Drift
- translateX: -20px to 20px (random)
- translateY: -100vh to 100vh (continuous)
- opacity: Fade in/out
Duration: 10-20s (random per particle)
Count: 20-30 particlesLive Indicator Pulse:
@keyframes pulse-live {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: 0.7;
}
}
Duration: 1.5s
Iteration: Infinite
Easing: ease-in-outTrophy Shine Effect:
@keyframes shine {
0% {
background-position: -100% 0;
}
100% {
background-position: 200% 0;
}
}
Background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)
Background-size: 50% 100%
Duration: 2s
Iteration: InfiniteOfficial Game Logos to Include:
PUBG Mobile
Mobile Legends: Bang Bang
Free Fire
Call of Duty: Mobile
Logo Animation Specifications:
On Hover/Tap:
Animation: Subtle rotate + glow
Properties:
- transform: rotate(-5deg to 5deg)
- filter: drop-shadow(0 0 10px currentColor)
Duration: 0.4s
Easing: ease-in-out
On Load:
Animation: Fade + scale
Properties:
- opacity: 0 → 1
- scale: 0.8 → 1.0
Duration: 0.5s
Easing: cubic-bezier(0.34, 1.56, 0.64, 1) (bounce)Dynamic Logo Positioning:
Tournament Card: Top left, 48x48px
Details Hero: Center, 120x120px
Filter Chips: Left inline, 24x24px
Match Card: Left, 40x40px
Leaderboard: Inline, 32x32pxPi SDK Integration Points:
// Pi Network Auth Button Component
{
variant: "pi-network",
label: "Continue with Pi Network",
icon: PiLogo (24x24px),
action: "pi.authenticate()",
scopes: ["username", "payments"],
onSuccess: "navigateToHome()",
onError: "showErrorToast()"
}// Pi Balance Component
{
balance: fetchPiBalance(),
displayFormat: "Ï {balance}",
updateInterval: "real-time",
conversionRate: fetchUsdRate(),
actions: ["deposit", "withdraw", "swap"]
}// Tournament Entry Payment
{
amount: tournamentEntryFee,
memo: `Tournament: ${tournamentName}`,
paymentType: "Pi",
confirmationRequired: true,
successCallback: "confirmRegistration()",
cancelCallback: "returnToDetails()"
}Pi Network UI Elements:
Pi Balance Card:
Background: Linear gradient (#E7B10A, #8B6914)
Border radius: 16px
Padding: 24px
Shadow: 0 8px 24px rgba(231, 177, 10, 0.3)
Layout:
├─ Pi Logo (40x40px, top left, white)
├─ Label "Pi Balance" (Caption, white, semi-transparent)
├─ Balance Amount (H1, "Ï 1,234.56", white)
├─ USD Equivalent ($XXX.XX, Body Small, white 70%)
└─ Action Buttons Row (Bottom)
├─ Deposit (Outline, white)
├─ Withdraw (Outline, white)
└─ History (Icon, white)/* Mobile First Approach */
Mobile (Default): 375px - 767px
Tablet: 768px - 1023px
Desktop: 1024px+
/* Specific Adjustments */
@media (min-width: 768px) {
/* Tablet */
Grid Columns: 2 → 3
Card Sizes: +20%
Font Sizes: +2px
Padding: +8px
}
@media (min-width: 1024px) {
/* Desktop */
Max Width: 1200px (centered)
Sidebar: Visible (collapsed on mobile)
Grid Columns: 3 → 4
Hover Effects: Enhanced
}Figma File Structure:
B4U_Esports_App
├─ 🎨 Design System
│ ├─ Colors
│ ├─ Typography
│ ├─ Components
│ └─ Icons
├─ 📱 Mobile Screens (375x812)
│ ├─ Auth Flow
│ ├─ Main App
│ ├─ Tournaments
│ ├─ Profile & Settings
│ └─ Admin
├─ 💻 Tablet Screens (768x1024)
│ └─ Admin Dashboard
├─ 🎬 Animations & Interactions
└─ 📄 DocumentationComponent Naming Convention:
Format: [Category]/[Component]/[Variant]/[State]
Examples:
- Button/Primary/Default
- Button/Primary/Hover
- Button/Primary/Pressed
- Button/Primary/Disabled
- Card/Tournament/PUBG/Active
- Card/Tournament/MLBB/EndedExport Settings:
Icons: SVG, 24x24px base size
Images: PNG, @1x, @2x, @3x
Backgrounds: PNG/WebP, Optimized
Logos: SVG (vector), PNG (raster backup)Accessibility Requirements:
- Minimum touch target: 44x44px
- Color contrast: WCAG AA (4.5:1 text, 3:1 UI)
- Focus indicators: 2px solid outline
- Alt text: Required for all images
- Keyboard navigation: Full support
- Screen reader: ARIA labels for interactive elementsPhase 1: Core Screens (Week 1-2)
Phase 2: User Features (Week 3-4)
Phase 3: Admin Panel (Week 5)
Phase 4: Policies & Polish (Week 6)
This comprehensive design specification provides everything needed to create a production-ready B4U Esports mobile app in Figma with proper MidJourney asset generation, Pi Network integration, and full feature set including admin dashboards, policies, and monetization through ads.