PlayFrame Version 1.0

Level 4
65/100 XP
325

Overview

Badges

Leaderboards

Guidelines

Invite Friends & Earn Rewards

Get 100 XP for each friend who joins using your referral code

Overall Progress

System Configuration

60%

Complete all steps to unlock exclusive rewards and achievements!

Completion Rate

70% Completion

Key Metrics

Total Points Awarded

12,500

Challenges Completed

75

Active Users

250

Typography

Font Families

Primary: Manrope (Sans-Serif)

Secondary: Noto Sans (Fallback)

Headings

Heading 1

Heading 2

Heading 3

Body Text

Regular body text (16px)

Secondary/small text (14px)

Spacing System

Base Unit: 0.25rem (4px)

1x (4px)
1.5x (6px)
2x (8px)
3x (12px)

Common Spacing

Padding: p-2 (8px)

Padding: p-4 (16px)

Padding: p-6 (24px)

Padding: p-8 (32px)

Responsive Breakpoints

Screen Size Prefix Min-Width Usage
Mobile sm: 640px Phones (portrait)
Tablet md: 768px Tablets (portrait)
Laptop lg: 1024px Small laptops
Desktop xl: 1280px Standard desktops
Large Desktop 2xl: 1536px Large monitors

Responsive Container Example:

.container {
width: 100%;
padding: 1rem; /* base padding */
@media (min-width: 640px) { padding: 1.5rem; }
@media (min-width: 1024px) { max-width: 1024px; margin: 0 auto; }
}

Active Quests

Daily Login

5/7 days

Login for 7 consecutive days

Social Butterfly

3/5 comments

Comment on 5 different posts

Quest Types

calendar_today

Daily

event

Weekly

emoji_events

Achievement

people

Social

celebration

Event

Player Badges

school
Novice

Novice

explore
Explorer

Explorer

chat
Socialite

Socialite

emoji_events
Champion

Champion

star
Master

Master

help_outline

Unknown

Leaderboard

1
star

LegendPro

Online

XP

12,450

Level

25

2

GreenArrow

3m ago

XP

10,780

Level

21

3

FireStorm

5m ago

XP

9,240

Level

19

4

AquaBlast

12m ago

XP

8,590

Level

17

5

NeonNinja

15m ago

XP

7,820

Level

16

Recent Activity

emoji_events
emoji_events
5★

User Sarah completed the 'Content Creation' challenge

+50 XP • 2 hours ago

badge

Admin added a new badge: 'Content Master'

1 day ago

trending_up

User David reached Level 5

3 days ago

monetization_on

System awarded 500 points to all users

1 week ago

flag

Challenge 'Community Engagement' started

2 weeks ago

Quiz Component

Gamification Knowledge Quiz

Test your understanding of gamification principles

Question 1/5

Which psychological principle is most associated with unpredictable rewards?

Time remaining: 1:45

Quiz Complete!

You scored 4/5 (80%)

Performance Master

Correct

4

Time Taken

2:15

Design System Guidelines

Psychological Principles

  • Use variable rewards (unpredictable intervals) to increase engagement
  • Implement social proof through leaderboards and activity feeds
  • Enable status/recognition through badges and level progression

Implementation Rules

  1. Always tie rewards to meaningful actions that drive business goals
  2. Make progress visible through progress bars and milestones
  3. Balance challenge and skill level for optimal engagement
  4. Implement short-term and long-term goals (daily streaks + level progression)
  5. Provide clear paths to mastery with escalating challenges

Accessibility Checklist

Ensure all visual elements have proper contrast ratios (WCAG AA)
Provide text alternatives for all badge/achievement graphics
Ensure all interactive elements are keyboard navigable
Provide ways to disable animations or flashing elements

Color Palette

Primary

#FF5722

Secondary

#8BC34A

Dark

#1A1A2E

Main BG

#181F29

Card BG

#1F2A37

Sidebar BG

#111418

Gradient

Blue-Purple

Accent

#FF9800

Visual Hierarchy Guide

Reward Levels:

Common
Rare
Epic
Legendary

Importance Levels:

High (Badges, Leaderboards)

Medium (Progress Bars)

Low (Point Indicators)

Toast Notifications

Success!

Your action was completed successfully.

.toast-success

Error!

Something went wrong. Please try again.

.toast-error

Warning!

This action cannot be undone.

.toast-warning

Information

Your profile has been updated.

.toast-info

Implementation Guidelines

  • Use toast-success for positive confirmations and successful actions
  • Use toast-error for error messages and failed operations
  • Use toast-warning for important warnings and cautions
  • Use toast-info for general information and status updates
  • Toast notifications should auto-dismiss after 5 seconds
  • Position toasts in the top-right corner of the viewport

Icon Guidelines

Using Material Icons

This design system uses Google's Material Icons for consistency and ease of use. Follow these guidelines to implement icons correctly.

Sizing

Set the icon size using the font-size property. Common sizes in this design system are:

  • Navigation icons: 24px
  • Badge icons: 48px
  • Inline icons: 16px or 20px

Common Icons

home home - Dashboard
people people - Users
article article - Content
emoji_events emoji_events - Gamification
settings settings - Settings
logout logout - Logout

Icon List

For a complete list of available icons, visit the Material Icons website.

Buttons

Primary Button

Secondary Button

Primary Button with Icon

Secondary Button with Icon

Disabled Primary Button

Disabled Secondary Button

Use primary buttons for main actions and secondary buttons for less prominent actions. Ensure buttons have sufficient contrast and are accessible.

Form Inputs with Errors

report

Username cannot contain special characters.

report

Please enter a valid email address.

report

Password must be at least 8 characters long.

report

Passwords do not match.

Use the Material error icon to visually indicate input issues in a consistent and accessible way.

Setup Wizard

1
Account Setup
2
Config
3
Preferences
4
Finalize

Enter your account details to get started.

Configuration

Set up your configuration

Account Type

Preferences

Choose your notification theme preferences.

Finalize

Review and complete your setup.

You're all set! Click finish to complete.