📐 Layout & Dimensions
- Max height: 580px (WebView safe area)
- Width: 375px (mobile-first only)
- No desktop version – mobile-only designs, every adaptive designs
- No fixed footers unless pre-approved - on small screens it will be overlapped
🧱 Blocks & Structure
- ✅ Use only pre-approved blocks – https://docs.web2wave.com/reference/blocks-list#/
- 🚫 No custom blocks
- 🚫 No nested blocks or grouped containers with colored backgrounds
🔁 Screen Flow & Logic
- Define flow logic between screens
- If answer A → Go to screen 4, etc.
- Add clickable prototype in Figma, or
- Add logic as Figma comments
- Name screens clearly: 01 - welcome, 02 - gender, etc, so we know how to name screens and variables in editor
- Prefer linear flow unless branching is required
- Explain where we have Multiple/Single choice questions
- Include all states for answers
- Selected, Disabled
✏️ Visual Design
- Font sizes: 16px (body), 22–26px (headlines)
- Less blur, shadows, or complex effects
- Layouts must support longer translations and smaller screen
🎨 Themes & Branding
- Use color tokens/variables
- Avoid hardcoded colors
- No custom gradients or advanced shadows
📦 Assets & Export
- Animations should be provided separately as MOV, Lottie or RIVE
- All icons, illustrations named and grouped
🧩 Paywall-Specific
- Use this structure for paywall
- Value offer - multiple options
- Visualization - 2-3 ideas for before/after
- Prices
- Button to pay
- 30 days money back guarantee
- How will it work
- Features / benefits
- For who
- User reviews
- Video review / Before-after
- Prices
- FAQ
- Button
- 30 days money back guarantee
- Company info / Policies
- Create Prices in Stripe/Paddle in advance
✅ Final Review Before Sharing
-
Max height fits under 580px
-
Mobile-only, width 375px
-
Only approved blocks used
-
No containers for multiple blocks
-
Logic between screens defined