Navigation Hub
Emerv AI — All Pages
Every page of the platform in one place. Click any card to open it, or use it as the internal navigation reference for development.
🚀 7 Pages. One Platform.
Landing → Onboarding → Builder → Marketplace → Seller Upload → Seller Dashboard → User Dashboard. A complete, production-ready game creation platform.
7
Pages Built
100%
HTML/CSS/JS
1
Design System
🌐
✓ Done
emerv.io
Landing Page
Marketing homepage with hero, live demo builder, features, marketplace preview, pricing, DE/EN toggle.
👋
✓ Done
emerv.io/start
Onboarding Flow
6-step registration: Account → Profile → Interests → Plan → First Game → Success. 60 seconds to playable.
⚡
✓ Done
emerv.io/build
Game Builder
Full IDE: Monaco editor, live game preview, genre panel, asset injection, AI chat, export & publish.
🏪
✓ Done
emerv.io/marketplace
Marketplace
Full asset store: filters, search, 3D preview, wishlist, detail modal with reviews, 1-click inject.
📤
✓ Done
emerv.io/sell
Seller Upload
5-step upload flow: drag & drop → details → AI analysis → pricing → review & publish.
📊
✓ Done
emerv.io/seller
Seller Dashboard
Revenue charts, KPIs, asset performance table, transactions & Stripe Connect earnings.
🎮
✓ Done
emerv.io/dashboard
User Dashboard
My games (12), asset library (18), activity chart, account settings, plan & notifications.
💳
Next
emerv.io/pricing
Checkout Flow
Stripe integration, plan upgrade, payment confirmation.
🔧
Next
emerv.io/admin
Admin Panel
Platform stats, user management, asset moderation.
User Flow
🌐 Landing
→
👋 Onboarding
→
⚡ Builder
→
🎮 Dashboard
↕
🏪 Marketplace
↕
📤 Sell → 📊 Earn
Foundations
Colors & Design Tokens
The complete Creveo color system. All values are CSS custom properties — use them everywhere for consistency.
Brand Colors
Primary
Cosmic Pink
--c1: #FF3CAC
CTAs, active states, brand accents
Secondary
Deep Purple
--c2: #784BA0
Gradients, hover states
Blue
Electric Blue
--c3: #2B86C5
Info, links, 3D assets
Success
Neon Green
--c4: #00F5A0
Success, live, earnings, free
Warning
Solar Yellow
--c5: #FFD93D
Warnings, stars, ratings
Orange
Ember Orange
--c6: #FF6B35
VFX tags, hot labels
Surface Colors
Background
--bg: #07070f
Surface 1
--bg2: #0e0e1c
Surface 2
--bg3: #13132a
Surface 3
--bg4: #1a1a35
CSS Tokens — Quick Copy
:root {
/* Brand */
--c1: #FF3CAC; --c2: #784BA0; --c3: #2B86C5;
--c4: #00F5A0; --c5: #FFD93D; --c6: #FF6B35;
/* Surfaces */
--bg: #07070f; --bg2: #0e0e1c; --bg3: #13132a; --bg4: #1a1a35;
/* Text */
--text: #f0f0ff; --muted: #6060aa;
/* Border */
--border: rgba(255,255,255,0.07);
}
/* Brand */
--c1: #FF3CAC; --c2: #784BA0; --c3: #2B86C5;
--c4: #00F5A0; --c5: #FFD93D; --c6: #FF6B35;
/* Surfaces */
--bg: #07070f; --bg2: #0e0e1c; --bg3: #13132a; --bg4: #1a1a35;
/* Text */
--text: #f0f0ff; --muted: #6060aa;
/* Border */
--border: rgba(255,255,255,0.07);
}
Foundations
Typography
Two typefaces. Syne for display & headings — bold, geometric, unmistakable. Plus Jakarta Sans for UI — clean, readable, versatile.
Display — Syne
Build Games
with AI.
with AI.
Section Title
Card Heading
UI — Plus Jakarta Sans
Build, share and sell games without writing a single line of code. Our AI does it all in seconds.
Label / Body text
Section Label
--c1: #FF3CAC
Foundations
Spacing & Grid
4px base unit. All spacing is a multiple of 4. Border radius scale from 8px to 24px.
Spacing Scale
4px
8px
12px
16px
20px
24px
28px
32px
48px
64px
Border Radius
4px
8px
12px
16px
20px
24px
99px
Design Tokens
--r-sm
8px
Buttons, tags, small UI
--r-md
12px
Inputs, chips, list items
--r-lg
16px
Cards, panels
--r-xl
20px
Modal sections, large cards
--r-2xl
24px
Modals, hero sections
--shadow-pink
0 0 40px rgba(255,60,172,0.25)
Primary CTA glow
Foundations
Icons
Creveo uses emoji icons throughout the UI for maximum cross-platform compatibility and personality. Click any to copy.
Navigation
🎮
🏪
📊
📦
⚡
👤
🔔
⚙️
💳
📤
Game Genres
🏃
🚀
🧩
🎯
⚔️
🏰
👆
🐦
🎱
🗡️
Asset Types
📦
🖼️
🎬
🔊
✨
🎮
🔥
🌲
🏙️
🧙
Components
Buttons
Every button variant used across Creveo. Always use gradient for primary CTAs. Always pair with a shadow token.
Variants
Primary · CTA
Success
Secondary
Ghost & Danger
Sizes
Components
Forms & Inputs
Input states, validation, toggles and interactive form elements used across all Creveo pages.
Input States
Default
Valid
Error
Toggles
Click to toggle
Tag Input
cyberpunk ✕
3d-model ✕
neon ✕
Components
Cards & Panels
The card system used across builder, marketplace, dashboard and all other pages.
🎮
Default Card
Base surface card with hover lift. Used for games, assets, features.
⚡
Accent Card
Top border accent in brand color. Used for featured or highlighted content.
🚀
Branded Card
Tinted background with brand border. Used for CTAs, upgrade prompts.
Progress Bar
Components
Badges & Pills
Status indicators, type labels, plan badges and navigation pills.
Status Badges
● Live
◌ In Review
★ Featured
ℹ New
⭐ Creator
🔥 Hot
Navigation Pills
✦ All
📦 3D Models
🖼️ Sprites
🎵 Audio
✨ VFX
Avatars
FK
🎮
🚀
🤖
Components
Feedback & Toasts
Toasts, alerts and loading states used across the platform.
Toast Notifications
Inline Alerts
✅ Auto-approved! Your asset passed all checks and is now live.
⚠️ Heads up: Adding a README increases sales by ~40%.
🔥 Upgrade to Studio to unlock AI music generation and App Store export.
Patterns
UI Patterns
Recurring layout patterns used across Creveo's pages.
KPI Card Pattern
💰 TOTAL REVENUE
€1,847
↑ +23.4% vs last period
Asset Card Pattern
Revenue Split Pattern
You: €9.09
Creveo: €3.90
Plan Comparison Pattern
🌱
Free
€0
⚡
Creator
€14,99
🏆
Studio
€49
Patterns
Motion & Animation
The animation language of Creveo. Purposeful, fast, satisfying. Never distracting.
duration-fast
150ms
Hover states, color transitions
duration-default
200–250ms
Button hovers, panel transitions
duration-slow
300–500ms
Page transitions, modals, charts
easing-default
ease
General purpose
easing-spring
cubic-bezier(.34,1.56,.64,1)
Bounce effects, success states
fadeUp
opacity + translateY(16px)
Panel entry animation
Live Animation Examples
⚡
Shimmer Text