feat: add guide
This commit is contained in:
+722
@@ -0,0 +1,722 @@
|
||||
---
|
||||
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
|
||||
Reference in New Issue
Block a user