722 lines
16 KiB
Markdown
722 lines
16 KiB
Markdown
|
---
|
|||
|
|
version: alpha
|
|||
|
|
name: Gamified Learning UI
|
|||
|
|
description: A playful, game-like design system for an English learning web application. Built around a bright learning world, chunky tactile 3D controls, soft rounded surfaces, clear progress signals, and lightweight game mechanics such as XP, levels, streaks, badges, and rewards. The interface feels like a friendly game rather than a traditional LMS — energetic and motivating without becoming childish or visually noisy.
|
|||
|
|
|
|||
|
|
colors:
|
|||
|
|
primary: "#5B5FEF"
|
|||
|
|
primary-dark: "#4548C9"
|
|||
|
|
primary-light: "#E8E9FF"
|
|||
|
|
|
|||
|
|
secondary: "#FFB84D"
|
|||
|
|
secondary-dark: "#E59A28"
|
|||
|
|
secondary-light: "#FFF1D6"
|
|||
|
|
|
|||
|
|
success: "#35C978"
|
|||
|
|
success-dark: "#239B58"
|
|||
|
|
success-light: "#DDF7E8"
|
|||
|
|
|
|||
|
|
accent: "#FF6B6B"
|
|||
|
|
accent-light: "#FFE3E3"
|
|||
|
|
|
|||
|
|
sky: "#55B9F3"
|
|||
|
|
sky-light: "#E2F4FF"
|
|||
|
|
|
|||
|
|
canvas: "#F7F8FC"
|
|||
|
|
surface: "#FFFFFF"
|
|||
|
|
surface-soft: "#F0F2F8"
|
|||
|
|
surface-hover: "#E9EBF5"
|
|||
|
|
|
|||
|
|
ink: "#20233A"
|
|||
|
|
ink-secondary: "#62677F"
|
|||
|
|
ink-muted: "#969BAE"
|
|||
|
|
ink-inverse: "#FFFFFF"
|
|||
|
|
|
|||
|
|
border: "#E2E5EF"
|
|||
|
|
|
|||
|
|
shadow-color: "#252A52"
|
|||
|
|
|
|||
|
|
typography:
|
|||
|
|
display-xl:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 64px
|
|||
|
|
fontWeight: 900
|
|||
|
|
lineHeight: 1.0
|
|||
|
|
letterSpacing: -1px
|
|||
|
|
|
|||
|
|
display-lg:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 48px
|
|||
|
|
fontWeight: 900
|
|||
|
|
lineHeight: 1.05
|
|||
|
|
letterSpacing: -0.5px
|
|||
|
|
|
|||
|
|
display-md:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 36px
|
|||
|
|
fontWeight: 800
|
|||
|
|
lineHeight: 1.1
|
|||
|
|
letterSpacing: -0.25px
|
|||
|
|
|
|||
|
|
heading-lg:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 28px
|
|||
|
|
fontWeight: 800
|
|||
|
|
lineHeight: 1.2
|
|||
|
|
letterSpacing: 0
|
|||
|
|
|
|||
|
|
heading-md:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 22px
|
|||
|
|
fontWeight: 800
|
|||
|
|
lineHeight: 1.25
|
|||
|
|
letterSpacing: 0
|
|||
|
|
|
|||
|
|
heading-sm:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 18px
|
|||
|
|
fontWeight: 800
|
|||
|
|
lineHeight: 1.3
|
|||
|
|
letterSpacing: 0
|
|||
|
|
|
|||
|
|
body-lg:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 18px
|
|||
|
|
fontWeight: 600
|
|||
|
|
lineHeight: 1.5
|
|||
|
|
letterSpacing: 0
|
|||
|
|
|
|||
|
|
body:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 16px
|
|||
|
|
fontWeight: 500
|
|||
|
|
lineHeight: 1.5
|
|||
|
|
letterSpacing: 0
|
|||
|
|
|
|||
|
|
body-sm:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 14px
|
|||
|
|
fontWeight: 500
|
|||
|
|
lineHeight: 1.45
|
|||
|
|
letterSpacing: 0
|
|||
|
|
|
|||
|
|
button:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 16px
|
|||
|
|
fontWeight: 800
|
|||
|
|
lineHeight: 1.2
|
|||
|
|
letterSpacing: 0
|
|||
|
|
|
|||
|
|
button-lg:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 18px
|
|||
|
|
fontWeight: 800
|
|||
|
|
lineHeight: 1.2
|
|||
|
|
letterSpacing: 0
|
|||
|
|
|
|||
|
|
label:
|
|||
|
|
fontFamily: Nunito
|
|||
|
|
fontSize: 13px
|
|||
|
|
fontWeight: 800
|
|||
|
|
lineHeight: 1.2
|
|||
|
|
letterSpacing: 0.2px
|
|||
|
|
|
|||
|
|
rounded:
|
|||
|
|
xs: 8px
|
|||
|
|
sm: 12px
|
|||
|
|
md: 16px
|
|||
|
|
lg: 20px
|
|||
|
|
xl: 28px
|
|||
|
|
xxl: 36px
|
|||
|
|
pill: 999px
|
|||
|
|
full: 50%
|
|||
|
|
|
|||
|
|
spacing:
|
|||
|
|
xxs: 4px
|
|||
|
|
xs: 8px
|
|||
|
|
sm: 12px
|
|||
|
|
md: 16px
|
|||
|
|
lg: 20px
|
|||
|
|
xl: 24px
|
|||
|
|
xxl: 32px
|
|||
|
|
xxxl: 40px
|
|||
|
|
section: 64px
|
|||
|
|
hero: 96px
|
|||
|
|
|
|||
|
|
components:
|
|||
|
|
|
|||
|
|
nav-bar:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
typography: "{typography.body}"
|
|||
|
|
padding: "{spacing.md} {spacing.xl}"
|
|||
|
|
borderBottom: "1px solid {colors.border}"
|
|||
|
|
|
|||
|
|
button-primary:
|
|||
|
|
backgroundColor: "{colors.primary}"
|
|||
|
|
textColor: "{colors.ink-inverse}"
|
|||
|
|
typography: "{typography.button-lg}"
|
|||
|
|
rounded: "{rounded.md}"
|
|||
|
|
padding: "14px {spacing.xl}"
|
|||
|
|
shadow: "0 5px 0 {colors.primary-dark}"
|
|||
|
|
minHeight: "52px"
|
|||
|
|
|
|||
|
|
button-secondary:
|
|||
|
|
backgroundColor: "{colors.secondary}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
typography: "{typography.button}"
|
|||
|
|
rounded: "{rounded.md}"
|
|||
|
|
padding: "12px {spacing.xl}"
|
|||
|
|
shadow: "0 4px 0 {colors.secondary-dark}"
|
|||
|
|
minHeight: "48px"
|
|||
|
|
|
|||
|
|
button-success:
|
|||
|
|
backgroundColor: "{colors.success}"
|
|||
|
|
textColor: "{colors.ink-inverse}"
|
|||
|
|
typography: "{typography.button}"
|
|||
|
|
rounded: "{rounded.md}"
|
|||
|
|
padding: "12px {spacing.xl}"
|
|||
|
|
shadow: "0 4px 0 {colors.success-dark}"
|
|||
|
|
minHeight: "48px"
|
|||
|
|
|
|||
|
|
button-outline:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.primary}"
|
|||
|
|
borderColor: "{colors.primary}"
|
|||
|
|
typography: "{typography.button}"
|
|||
|
|
rounded: "{rounded.md}"
|
|||
|
|
padding: "11px {spacing.xl}"
|
|||
|
|
minHeight: "48px"
|
|||
|
|
|
|||
|
|
button-ghost:
|
|||
|
|
backgroundColor: "transparent"
|
|||
|
|
textColor: "{colors.ink-secondary}"
|
|||
|
|
typography: "{typography.button}"
|
|||
|
|
rounded: "{rounded.sm}"
|
|||
|
|
padding: "{spacing.sm} {spacing.md}"
|
|||
|
|
|
|||
|
|
icon-button:
|
|||
|
|
backgroundColor: "{colors.surface-soft}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.md}"
|
|||
|
|
minSize: "44px"
|
|||
|
|
|
|||
|
|
hero:
|
|||
|
|
backgroundColor: "{colors.canvas}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
typography: "{typography.display-xl}"
|
|||
|
|
padding: "{spacing.hero}"
|
|||
|
|
decoration: "soft game-world shapes and floating 3D objects"
|
|||
|
|
|
|||
|
|
game-card:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.xl}"
|
|||
|
|
padding: "{spacing.xl}"
|
|||
|
|
borderColor: "{colors.border}"
|
|||
|
|
shadow: "0 6px 0 rgba(37,42,82,0.08)"
|
|||
|
|
|
|||
|
|
game-card-primary:
|
|||
|
|
backgroundColor: "{colors.primary}"
|
|||
|
|
textColor: "{colors.ink-inverse}"
|
|||
|
|
rounded: "{rounded.xl}"
|
|||
|
|
padding: "{spacing.xl}"
|
|||
|
|
shadow: "0 6px 0 {colors.primary-dark}"
|
|||
|
|
|
|||
|
|
lesson-card:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.lg}"
|
|||
|
|
padding: "{spacing.xl}"
|
|||
|
|
borderColor: "{colors.border}"
|
|||
|
|
|
|||
|
|
lesson-tile:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.lg}"
|
|||
|
|
padding: "{spacing.lg}"
|
|||
|
|
minHeight: "160px"
|
|||
|
|
shadow: "0 5px 0 rgba(37,42,82,0.08)"
|
|||
|
|
|
|||
|
|
progress-card:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.lg}"
|
|||
|
|
padding: "{spacing.lg}"
|
|||
|
|
borderColor: "{colors.border}"
|
|||
|
|
|
|||
|
|
xp-card:
|
|||
|
|
backgroundColor: "{colors.secondary-light}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.lg}"
|
|||
|
|
padding: "{spacing.lg}"
|
|||
|
|
|
|||
|
|
streak-card:
|
|||
|
|
backgroundColor: "{colors.accent-light}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.lg}"
|
|||
|
|
padding: "{spacing.lg}"
|
|||
|
|
|
|||
|
|
level-card:
|
|||
|
|
backgroundColor: "{colors.primary-light}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.xl}"
|
|||
|
|
padding: "{spacing.xl}"
|
|||
|
|
|
|||
|
|
reward-card:
|
|||
|
|
backgroundColor: "{colors.secondary}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.xl}"
|
|||
|
|
padding: "{spacing.xl}"
|
|||
|
|
shadow: "0 6px 0 {colors.secondary-dark}"
|
|||
|
|
|
|||
|
|
badge:
|
|||
|
|
backgroundColor: "{colors.primary-light}"
|
|||
|
|
textColor: "{colors.primary-dark}"
|
|||
|
|
typography: "{typography.label}"
|
|||
|
|
rounded: "{rounded.pill}"
|
|||
|
|
padding: "6px 12px"
|
|||
|
|
|
|||
|
|
badge-success:
|
|||
|
|
backgroundColor: "{colors.success-light}"
|
|||
|
|
textColor: "{colors.success-dark}"
|
|||
|
|
typography: "{typography.label}"
|
|||
|
|
rounded: "{rounded.pill}"
|
|||
|
|
padding: "6px 12px"
|
|||
|
|
|
|||
|
|
xp-badge:
|
|||
|
|
backgroundColor: "{colors.secondary}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
typography: "{typography.label}"
|
|||
|
|
rounded: "{rounded.pill}"
|
|||
|
|
padding: "6px 12px"
|
|||
|
|
|
|||
|
|
level-badge:
|
|||
|
|
backgroundColor: "{colors.primary}"
|
|||
|
|
textColor: "{colors.ink-inverse}"
|
|||
|
|
typography: "{typography.label}"
|
|||
|
|
rounded: "{rounded.pill}"
|
|||
|
|
padding: "6px 12px"
|
|||
|
|
|
|||
|
|
progress-bar:
|
|||
|
|
trackColor: "{colors.surface-soft}"
|
|||
|
|
fillColor: "{colors.primary}"
|
|||
|
|
height: "12px"
|
|||
|
|
rounded: "{rounded.pill}"
|
|||
|
|
|
|||
|
|
progress-bar-success:
|
|||
|
|
trackColor: "{colors.surface-soft}"
|
|||
|
|
fillColor: "{colors.success}"
|
|||
|
|
height: "12px"
|
|||
|
|
rounded: "{rounded.pill}"
|
|||
|
|
|
|||
|
|
answer-option:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
borderColor: "{colors.border}"
|
|||
|
|
rounded: "{rounded.lg}"
|
|||
|
|
padding: "{spacing.lg}"
|
|||
|
|
minHeight: "64px"
|
|||
|
|
shadow: "0 4px 0 rgba(37,42,82,0.06)"
|
|||
|
|
|
|||
|
|
answer-option-correct:
|
|||
|
|
backgroundColor: "{colors.success-light}"
|
|||
|
|
textColor: "{colors.success-dark}"
|
|||
|
|
borderColor: "{colors.success}"
|
|||
|
|
rounded: "{rounded.lg}"
|
|||
|
|
padding: "{spacing.lg}"
|
|||
|
|
|
|||
|
|
answer-option-wrong:
|
|||
|
|
backgroundColor: "{colors.accent-light}"
|
|||
|
|
textColor: "{colors.accent}"
|
|||
|
|
borderColor: "{colors.accent}"
|
|||
|
|
rounded: "{rounded.lg}"
|
|||
|
|
padding: "{spacing.lg}"
|
|||
|
|
|
|||
|
|
mascot-card:
|
|||
|
|
backgroundColor: "{colors.sky-light}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.xxl}"
|
|||
|
|
padding: "{spacing.xl}"
|
|||
|
|
|
|||
|
|
daily-challenge:
|
|||
|
|
backgroundColor: "{colors.primary}"
|
|||
|
|
textColor: "{colors.ink-inverse}"
|
|||
|
|
rounded: "{rounded.xl}"
|
|||
|
|
padding: "{spacing.xxl}"
|
|||
|
|
shadow: "0 7px 0 {colors.primary-dark}"
|
|||
|
|
|
|||
|
|
empty-state:
|
|||
|
|
backgroundColor: "{colors.surface-soft}"
|
|||
|
|
textColor: "{colors.ink-secondary}"
|
|||
|
|
rounded: "{rounded.xl}"
|
|||
|
|
padding: "{spacing.xxxl}"
|
|||
|
|
|
|||
|
|
modal-card:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.xl}"
|
|||
|
|
padding: "{spacing.xxl}"
|
|||
|
|
shadow: "0 20px 60px rgba(32,35,58,0.18)"
|
|||
|
|
|
|||
|
|
toast:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.md}"
|
|||
|
|
padding: "{spacing.sm} {spacing.md}"
|
|||
|
|
shadow: "0 8px 24px rgba(32,35,58,0.15)"
|
|||
|
|
|
|||
|
|
footer:
|
|||
|
|
backgroundColor: "{colors.surface-soft}"
|
|||
|
|
textColor: "{colors.ink-secondary}"
|
|||
|
|
typography: "{typography.body}"
|
|||
|
|
padding: "{spacing.section}"
|
|||
|
|
|
|||
|
|
|
|||
|
|
# ───────────────────────────────────────────────────────────
|
|||
|
|
# GAME MECHANICS
|
|||
|
|
# ───────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
xp-display:
|
|||
|
|
icon: "⭐"
|
|||
|
|
color: "{colors.secondary}"
|
|||
|
|
typography: "{typography.heading-sm}"
|
|||
|
|
|
|||
|
|
streak-display:
|
|||
|
|
icon: "🔥"
|
|||
|
|
color: "{colors.accent}"
|
|||
|
|
typography: "{typography.heading-sm}"
|
|||
|
|
|
|||
|
|
level-display:
|
|||
|
|
icon: "🏆"
|
|||
|
|
color: "{colors.primary}"
|
|||
|
|
typography: "{typography.heading-sm}"
|
|||
|
|
|
|||
|
|
reward-popup:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.ink}"
|
|||
|
|
rounded: "{rounded.xl}"
|
|||
|
|
padding: "{spacing.xxl}"
|
|||
|
|
shadow: "0 12px 40px rgba(32,35,58,0.18)"
|
|||
|
|
animation: "scale-in + bounce"
|
|||
|
|
|
|||
|
|
completion-state:
|
|||
|
|
backgroundColor: "{colors.success-light}"
|
|||
|
|
textColor: "{colors.success-dark}"
|
|||
|
|
rounded: "{rounded.xl}"
|
|||
|
|
padding: "{spacing.xxxl}"
|
|||
|
|
animation: "celebration"
|
|||
|
|
|
|||
|
|
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
# OVERVIEW
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
## Overview
|
|||
|
|
|
|||
|
|
This design system transforms an English learning website into a lightweight game-like learning experience.
|
|||
|
|
|
|||
|
|
The product should feel like a friendly game that happens to teach English — not like a traditional LMS, school management system, or enterprise dashboard.
|
|||
|
|
|
|||
|
|
The visual language is built around:
|
|||
|
|
|
|||
|
|
- Playful 3D / tactile controls
|
|||
|
|
- Large, obvious actions
|
|||
|
|
- Soft rounded surfaces
|
|||
|
|
- Bright but controlled colors
|
|||
|
|
- Strong progress visualization
|
|||
|
|
- XP, levels, streaks, badges, and rewards
|
|||
|
|
- Friendly illustrations and optional mascot characters
|
|||
|
|
- Minimal navigation
|
|||
|
|
- Short learning interactions
|
|||
|
|
- Clear success and failure feedback
|
|||
|
|
|
|||
|
|
The interface should be energetic enough to motivate children and students while remaining mature enough for teenagers and adults who are starting English from zero.
|
|||
|
|
|
|||
|
|
The core principle is:
|
|||
|
|
|
|||
|
|
> **Game-like, not childish.**
|
|||
|
|
|
|||
|
|
The interface should communicate:
|
|||
|
|
|
|||
|
|
> "Let's play and learn."
|
|||
|
|
|
|||
|
|
rather than:
|
|||
|
|
|
|||
|
|
> "Here is your educational dashboard."
|
|||
|
|
|
|||
|
|
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
# DESIGN LANGUAGE
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
## Design Direction
|
|||
|
|
|
|||
|
|
Primary style:
|
|||
|
|
|
|||
|
|
**Gamified Learning UI**
|
|||
|
|
|
|||
|
|
Visual style:
|
|||
|
|
|
|||
|
|
**Playful 3D / Tactile UI**
|
|||
|
|
|
|||
|
|
UX philosophy:
|
|||
|
|
|
|||
|
|
**Game-like learning**
|
|||
|
|
|
|||
|
|
Tone:
|
|||
|
|
|
|||
|
|
**Friendly · Encouraging · Simple · Rewarding**
|
|||
|
|
|
|||
|
|
The UI should make actions feel physical.
|
|||
|
|
|
|||
|
|
Buttons should appear slightly raised from the surface. When pressed, they should move downward and visually lose their elevation.
|
|||
|
|
|
|||
|
|
Cards should feel like game tiles.
|
|||
|
|
|
|||
|
|
Progress should feel like progression through a game world.
|
|||
|
|
|
|||
|
|
Rewards should feel immediate and satisfying.
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Core Principles
|
|||
|
|
|
|||
|
|
### 1. Action First
|
|||
|
|
|
|||
|
|
Every major screen should have one obvious primary action.
|
|||
|
|
|
|||
|
|
Examples:
|
|||
|
|
|
|||
|
|
- Continue
|
|||
|
|
- Start Lesson
|
|||
|
|
- Practice
|
|||
|
|
- Check Answer
|
|||
|
|
- Continue
|
|||
|
|
- Claim Reward
|
|||
|
|
|
|||
|
|
Avoid screens where five actions compete for attention.
|
|||
|
|
|
|||
|
|
### 2. Game Before Dashboard
|
|||
|
|
|
|||
|
|
Do not expose complex LMS structures unless necessary.
|
|||
|
|
|
|||
|
|
Prefer:
|
|||
|
|
|
|||
|
|
Home → Activity → Result → Reward → Next Activity
|
|||
|
|
|
|||
|
|
over:
|
|||
|
|
|
|||
|
|
Dashboard → Course → Chapter → Lesson → Content → Quiz
|
|||
|
|
|
|||
|
|
### 3. Chunky Controls
|
|||
|
|
|
|||
|
|
Interactive elements should be larger than typical SaaS interfaces.
|
|||
|
|
|
|||
|
|
Recommended minimum:
|
|||
|
|
|
|||
|
|
- Primary CTA: 48–52px
|
|||
|
|
- Secondary CTA: 44–48px
|
|||
|
|
- Answer option: 60–72px
|
|||
|
|
- Icon button: 44px minimum
|
|||
|
|
|
|||
|
|
### 4. Tactile Feedback
|
|||
|
|
|
|||
|
|
Buttons should have visible depth.
|
|||
|
|
|
|||
|
|
Default:
|
|||
|
|
|
|||
|
|
`translateY(0)`
|
|||
|
|
|
|||
|
|
Pressed:
|
|||
|
|
|
|||
|
|
`translateY(4px)`
|
|||
|
|
|
|||
|
|
The shadow should reduce proportionally.
|
|||
|
|
|
|||
|
|
This creates a physical button effect without requiring heavy 3D rendering.
|
|||
|
|
|
|||
|
|
### 5. Reward Progress
|
|||
|
|
|
|||
|
|
Learning actions should produce visible progress.
|
|||
|
|
|
|||
|
|
Examples:
|
|||
|
|
|
|||
|
|
- +10 XP
|
|||
|
|
- +1 streak
|
|||
|
|
- Level progress
|
|||
|
|
- Lesson completion
|
|||
|
|
- Badge unlocked
|
|||
|
|
- Daily challenge completed
|
|||
|
|
|
|||
|
|
Avoid rewarding every tiny interaction. Rewards should reinforce meaningful learning actions.
|
|||
|
|
|
|||
|
|
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
# COLORS
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
The palette moves away from Discord's dark gaming aesthetic.
|
|||
|
|
|
|||
|
|
The learning environment uses a bright neutral canvas with a small number of recognizable game colors.
|
|||
|
|
|
|||
|
|
### Primary
|
|||
|
|
|
|||
|
|
**Purple / Indigo**
|
|||
|
|
|
|||
|
|
`#5B5FEF`
|
|||
|
|
|
|||
|
|
Used for:
|
|||
|
|
|
|||
|
|
- Primary CTA
|
|||
|
|
- Active navigation
|
|||
|
|
- Main progress
|
|||
|
|
- Level indicators
|
|||
|
|
- Important interactive states
|
|||
|
|
|
|||
|
|
### Secondary
|
|||
|
|
|
|||
|
|
**Warm Yellow**
|
|||
|
|
|
|||
|
|
`#FFB84D`
|
|||
|
|
|
|||
|
|
Used for:
|
|||
|
|
|
|||
|
|
- XP
|
|||
|
|
- Stars
|
|||
|
|
- Rewards
|
|||
|
|
- Achievements
|
|||
|
|
- Celebration
|
|||
|
|
|
|||
|
|
### Success
|
|||
|
|
|
|||
|
|
**Green**
|
|||
|
|
|
|||
|
|
`#35C978`
|
|||
|
|
|
|||
|
|
Used for:
|
|||
|
|
|
|||
|
|
- Correct answers
|
|||
|
|
- Completed lessons
|
|||
|
|
- Positive progress
|
|||
|
|
- Success actions
|
|||
|
|
|
|||
|
|
### Accent
|
|||
|
|
|
|||
|
|
**Coral**
|
|||
|
|
|
|||
|
|
`#FF6B6B`
|
|||
|
|
|
|||
|
|
Used for:
|
|||
|
|
|
|||
|
|
- Streak
|
|||
|
|
- Attention
|
|||
|
|
- Wrong answer
|
|||
|
|
- Limited-time challenge indicators
|
|||
|
|
|
|||
|
|
### Sky
|
|||
|
|
|
|||
|
|
**Light Blue**
|
|||
|
|
|
|||
|
|
`#55B9F3`
|
|||
|
|
|
|||
|
|
Used for:
|
|||
|
|
|
|||
|
|
- Friendly illustrations
|
|||
|
|
- Secondary learning areas
|
|||
|
|
- Background decorations
|
|||
|
|
|
|||
|
|
### Canvas
|
|||
|
|
|
|||
|
|
`#F7F8FC`
|
|||
|
|
|
|||
|
|
The primary application background.
|
|||
|
|
|
|||
|
|
It should remain visually quiet so game elements stand out.
|
|||
|
|
|
|||
|
|
### Surface
|
|||
|
|
|
|||
|
|
`#FFFFFF`
|
|||
|
|
|
|||
|
|
Used for cards, lesson tiles, dialogs, and interactive surfaces.
|
|||
|
|
|
|||
|
|
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
# TYPOGRAPHY
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
Typography should feel friendly rather than corporate.
|
|||
|
|
|
|||
|
|
Recommended primary family:
|
|||
|
|
|
|||
|
|
**Nunito**
|
|||
|
|
|
|||
|
|
Alternative:
|
|||
|
|
|
|||
|
|
**Plus Jakarta Sans**
|
|||
|
|
|
|||
|
|
Display text should be bold and rounded.
|
|||
|
|
|
|||
|
|
Body text should remain highly readable.
|
|||
|
|
|
|||
|
|
Avoid:
|
|||
|
|
|
|||
|
|
- Condensed display fonts
|
|||
|
|
- Aggressive gaming fonts
|
|||
|
|
- Excessive ALL CAPS
|
|||
|
|
- Decorative fonts for learning content
|
|||
|
|
|
|||
|
|
Unlike Discord, headlines do not need to shout.
|
|||
|
|
|
|||
|
|
A friendly:
|
|||
|
|
|
|||
|
|
> Learn 5 new words today
|
|||
|
|
|
|||
|
|
is preferable to:
|
|||
|
|
|
|||
|
|
> MASTER YOUR ENGLISH NOW!
|
|||
|
|
|
|||
|
|
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
# LAYOUT
|
|||
|
|
# ─────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
## Grid
|
|||
|
|
|
|||
|
|
Use a centered application container.
|
|||
|
|
|
|||
|
|
Recommended maximum width:
|
|||
|
|
|
|||
|
|
`1200px`
|
|||
|
|
|
|||
|
|
Preferred content width:
|
|||
|
|
|
|||
|
|
`960–1200px`
|
|||
|
|
|
|||
|
|
The layout should feel spacious.
|
|||
|
|
|
|||
|
|
Avoid dense dashboard layouts.
|
|||
|
|
|
|||
|
|
## Home Layout
|
|||
|
|
|
|||
|
|
Recommended hierarchy:
|
|||
|
|
|
|||
|
|
```text
|
|||
|
|
Top Navigation
|
|||
|
|
|
|||
|
|
Greeting
|
|||
|
|
Current Level / XP
|
|||
|
|
|
|||
|
|
Continue Learning
|
|||
|
|
↓
|
|||
|
|
Main Lesson Card
|
|||
|
|
|
|||
|
|
Daily Challenge
|
|||
|
|
↓
|
|||
|
|
Learning Activities
|
|||
|
|
|
|||
|
|
Vocabulary
|
|||
|
|
Listening
|
|||
|
|
Speaking
|
|||
|
|
Reading
|
|||
|
|
|
|||
|
|
Achievements / Streak
|