aplp/aplp.frontend.web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
271fdb25212728697c6a6141b63a8c2c60f80fb6
aplp.frontend.web/docs/DESIGN.md
T
namdh 271fdb2521 feat: add guide
2026-08-22 08:24:38 +07:00

16 KiB
Raw Blame History

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:

Top Navigation

Greeting
Current Level / XP

Continue Learning
        ↓
Main Lesson Card

Daily Challenge
        ↓
Learning Activities

Vocabulary
Listening
Speaking
Reading

Achievements / Streak
Reference in New Issue View Git Blame Copy Permalink