CloudPlay

Pages
- Project Overview
  Product roadmap
- Documentation
  Transformation
  Server Requirements
  System Requirements
  Own Servers vs Cloud Rental
  Design Related
  Cloud GPUs
  AWS Cloud Gaming
  Harvester Integration Node
  Operational Costs
- Team
- Tasks
- Funding
- Funding Cadence
  Month 1
  Month 2
  Month 3
  Month 4
  Month 5
  Month 6
  Month 7
  Month 8
  Month 9
- Updates
- Discussions

CloudPlay

...

Design Related

Explore

Design Related

📌 Landing Page Visual Flow

──────────────────────────────────────────────

📍 HEADER

└─ Logo

└─ Navigation: [Features] [Platform] [Pricing] [FAQ]

└─ [Join as Super User] (primary button)

──────────────────────────────────────────────

🎯 HERO SECTION

└─ Headline: "Play Instantly. Anywhere."

└─ Subheadline: "Join early. No downloads. No delay."

└─ [Join as Super User] (CTA button)

└─ Visual: Cloud animation / device mockups / game character ...

──────────────────────────────────────────────

⚙️ HOW IT WORKS

└─ Step 1: Game lives in the cloud — nothing to install

└─ Step 2: You stream the game to your device via internet

└─ Step 3: All inputs (touch, gamepad, keyboard) are supported

└─ Step 4: Your device doesn’t need to be powerful — we handle the heavy lifting

──────────────────────────────────────────────

🖥️ PLATFORM & COMPATIBILITY

└─ Works on:

├─ Mobile Phones (Android & iOS)

├─ Tablets (iPad, Android)

├─ Smart TVs (tvOS, Android TV)

├─ Laptops & PCs (Windows, macOS, Linux)

├─ Handhelds (PSV, Steam Deck, etc.)

└─ Supported Inputs: Touch, Mouse, Keyboard, Gamepads

──────────────────────────────────────────────

🎮 GAME DEMO / GALLERY

└─ Scrollable or grid of game covers

──────────────────────────────────────────────

🎁 PRICING PLAN (HIDDEN)

└─ Title: "Super Users Get Exclusive Access & Gifts"

└─ Plans: Basic | Plus | Pro

└─ Prices: Blurred or shown as gift boxes

──────────────────────────────────────────────

✅ CALL TO ACTION

└─ Headline: "Your Games. Your Devices. Zero Wait..."

└─ CTA Buttons:

└─ [Join as Super User]

──────────────────────────────────────────────

🦶 FOOTER

└─ Links: About | Docs | Support | Terms

└─ Socials: Discord, Twitter, YouTube

└─ Legal/Tech: "Cloud Gaming Infrastructure. Built for Speed."

└─ Tagline: "Built for gamers. Powered by the cloud."

──────────────────────────────────────────────

⁠

Color Tokens

Hex Code

Color Name

Suggested Usage

#00E701

COLOR_ACCENT

Accent / success highlight

#0B0E0F

COLOR_BG_PRIMARY

Primary background (deepest black)

#191B1F

COLOR_BG_SECONDARY

Secondary background / cards

#24272C

COLOR_BG_TERTIARY

Hover/overlay background

#474F54

COLOR_SURFACE_MUTED

Placeholder backgrounds, outlines

#444444

COLOR_BORDER

Borders and lines

#595D62

COLOR_TEXT_SECONDARY

Secondary text and icons

#FFFFFF

COLOR_TEXT_PRIMARY

Main readable text on dark background

There are no rows in this table

⁠

Typography Reference

Font Family: Rubik

Line Height Multiplier: 1.72 (for all styles)

Style

Font Size

Line Height

Use Case Examples

hero

36.0f

61.92f

Splash headers, onboarding screens

display

30.0f

51.60f

Page titles, section headers

heading

24.0f

41.28f

UI panels, large card titles

title

20.0f

34.40f

Card headers, settings section titles

subtitle

18.0f

30.96f

Form headers, secondary headings

body

16.0f

27.52f

Default paragraph text

label

14.0f

24.08f

Buttons, form labels

caption

12.0f

20.64f

Footnotes, captions, microcopy

There are no rows in this table

⁠

Icon Sizes Reference

Icon Font Material Icons

Style Filled

Size Name

Value

Typical Usage

16.0f

Status indicators, inline with text

20.0f

Action icons in small buttons/fields

24.0f

Default icon size (toolbar/buttons)

32.0f

Dialog icons, headers, cards

40.0f

Hero icons, feature highlights

There are no rows in this table

⁠

Corner Radius Tokens

Size Name

Value

Typical Usage

2.0f

Chips, badges, micro UI elements

4.0f

Buttons, inputs, cards (compact)

6.0f

Cards, containers, modals (default)

8.0f

Panels, popovers, callouts

10.0f

Hero cards, onboarding, large UI blocks

There are no rows in this table

⁠

Spacing Scale

These values define the spacing rhythm throughout the UI - used for margins, paddings gaps, and layout grids.

Token

Value

Typical Usage

spacing4

4.0f

Micro padding, tight icons

spacing8

8.0f

Small padding, between labels and inputs

spacing12

12.0f

Icon and text padding, cards

spacing16

16.0f

Default container spacing

spacing20

20.0f

Slightly wider spacing (side panels, etc.)

spacing24

24.0f

Card/grid spacing, larger components

spacing32

32.0f

Section padding

spacing40

40.0f

Modal padding, larger breakpoints

spacing48

48.0f

Major layout spacing, onboarding screens

There are no rows in this table

⁠

Layout, Safe Area & Scaling

Safe Area Multiplier

Safe area padding is calculated with a multiplier:

safeArea = baseSize * 0.7f

Window Resizing & Alignment

All UI Windows are resized and center-aligned, then scaled with:

scale = baseSize * 1.83f

Target Resolutions By Platform

Platform

Resolution

Notes

Handheld/Mobile

720P

Standard for phones and small tablets

PlayStation Vita

544P

Used for legacy handheld support

Large Mobile / iPad

900P

Medium-scale tablets and foldables

Default (Most Devices )

1080P

Default for desktops, TVs, cloud apps

Optional High-End

1440P

Optional for large monitors, ultra-wide setups

There are no rows in this table

⁠

Implementation Notes

UI elements should not be hardcoded to screen size — always scale via resolution presets and multipliers.

On handhelds, fonts and icons follow same scale logic (e.g., fontSize * resolutionScale).

Safe areas apply especially to top/bottom UI bars, to avoid notches, cutouts, and rounded corners.

⁠

Assets

Height

Logo

Logo Large

512px

⁠

logo_small_512x512⁠

⁠

logo_large_512.svg⁠

⁠

256px

⁠

logo_small_256x256.svg⁠

⁠

logo_large_256.svg⁠

⁠

128px

⁠

logo_small_128x128.svg⁠

⁠

logo_large_128.svg⁠

⁠

64px

⁠

logo_small_64x64.svg⁠

⁠

logo_large_64.svg⁠

⁠

32px

⁠

logo_small_32x32.svg⁠

⁠

logo_large_32.svg⁠

⁠

24px

⁠

logo_small_24x24.svg⁠

⁠

There are no rows in this table

⁠

Email Templates

Auth Email

Purpose

Variables

Confirm Signup

Verify new user’s email after registration.

{confirmation_url}, {token}, {user_metadata}, {site_name}

Invite User

Invite someone to join via link

{invitation_url}, {site_name}

Magic Link / Token Auth

Passwordless login.

{magic_link}, {token}, {user_metadata}, {site_name}

Change Email

Confirm new email before updating.

{old_email}, {new_email}, {confirmation_url}, {token}, {user_metadata}

Reset Password

Allow user to reset password.

{reset_url}, {token}, {user_metadata}

Reauthentication

Verify identity for sensitive action (delete account, update billing, etc.).

{token}, {reauth_url}, {user_metadata}

Two-Factor Authentication

Send OTP or code for 2FA login.

{otp_code}, {expires_in}, {user_metadata}

Account Locked / Banned

Notify user their account was locked, banned, or suspended.

{reason}, {support_url}, {user_metadata}

Subscription Emails

Subscription started / Welcome

Confirm user’s subscription start.

{plan_name}, {price}, {billing_cycle}, {user_metadata}

Trial Started

Notify user that free trial began.

{trial_days}, {plan_name}, {end_date}

Trial Ending Soon

Reminder that trial is about to end.

{days_left}, {upgrade_url}, {plan_name}

Trial Expired

Notify user that trial has ended.

{plan_name}, {renew_url}

Payment Successful

Confirm payment was processed successfully.

{amount}, {currency}, {date}, {plan_name}, {invoice_url}

Payment Failed

Notify user of failed payment.

{amount}, {currency}, {date}, {retry_url}, {plan_name}

Subscription Renewed

Confirm renewal of subscription.

{plan_name}, {next_billing_date}, {amount}, {currency}

Subscription Cancelled

Notify user that subscription has been canceled.

{plan_name}, {end_date}, {reactivation_url}

Upgrade / Downgrade Plan

Confirm plan change.

{old_plan}, {new_plan}, {effective_date}, {user_metadata}

Invoice Receipt

Provide invoice or payment receipt.

{invoice_url}, {amount}, {currency}, {date}, {plan_name}

Beta Program Emails

Beta Invitation

Invite user to join beta program.

{invitation_url}, {beta_features}, {user_metadata}

Beta Access Confirmed

Confirm beta program access.

{beta_dashboard_url}, {feedback_url}, {user_metadata}

Beta Feedback Request

Ask user for feedback.

{feedback_url}, {user_metadata}

Beta Ending / Transition to Paid

Notify user beta is ending, transition to paid plan.

{end_date}, {plan_name}, {upgrade_url}

Account & User Management

Welcome Email

Greet user after signup or activation.

{user_metadata}, {dashboard_url}, {site_name}

Email Changed

Notify user old email about change.

{old_email}, {new_email}, {support_url}

Password Changed

Notify user that password was changed.

{user_metadata}, {support_url}

Account Deleted/Deactivated

Confirm account deletion/deactivation.

{user_metadata}, {support_url}

Security Alert (Login from new device/IP)

Notify user of login from unknown location/device.

{ip_address}, {location}, {time}, {support_url}

Support Email Templates

Support Request Received

Confirm receipt of user’s support request.

{ticket_id}, {user_metadata}, {support_portal_url}

Support Request Resolved / Closed

Notify user that ticket has been closed/resolved.

{ticket_id}, {resolution_summary}, {feedback_url}, {support_agent}

Support response

Send actual support reply from an agent.

{ticket_id}, {issue_subject}, {support_response}, {support_portal_url}, {support_agent}, {user_metadata}

There are no rows in this table

⁠

APP - My Library

Design Note: Replace Popular Tab with My Library Tab

This tab becomes the main place where users manage and access their owned games.

Content in My Library:

Favorites Section:

Display games the user has marked as Favorite.

Connected Stores Integration:

Show all third-party stores the user has connected (Steam, Epic Games, Ubisoft Connect, etc.).

Under each store, display the games the user owns.

Include store logos for quick recognition.

⁠

APP - Genres

The Genres section helps users quickly browse games by category.

Main Genres to Display:

Action

Strategy

RPG

Casual

Racing

Sports

Indie

Adventure

Simulation

Massively Multiplayer

Free To Play

Early Access

⁠

APP - User

The Profile screen should become the central hub for everything related to the user.

Sections to Display:

User Information

Avatar / Profile picture

Username

Support ID (UUID, labeled Support ID)

Subscription

Current subscription plan (Free, Pro, etc.)

In some Subscription Plan Playtime Limits (if applicable)

Monthly Cap Example: 30 hours playtime per month

Daily Cap Example: 2 hours playtime per day

Display remaining hours clearly

Renewal date or expiration date

Manage subscription button (opens billing portal)

Game & Store Management

Redeem Key → stays here

Connected Stores (Steam, Epic Games, Ubisoft, etc.)

Show which accounts are linked

Add/Remove/Manage connections

Community & Support

Help / FAQ section

Quick link to guides

Community links (Discord, Forum, Socials)

Contact Support

Account Controls

Change password / manage credentials

Sign Out button

⁠

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.