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 |