---
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