CSP Learning Platform

Minecraft Pixel Art Style UI Kit

DESIGN DELIVERY DOCUMENT • V1.0 • OCTOBER 2023

Design Concept

NEW

The Voxel World Metaphor

The CSP Learning Platform's design is deeply rooted in the "Minecraft" aesthetic, utilizing a voxel/pixel art style to create an immersive and engaging learning environment for programming students. This choice is strategic:

  • Gamification: Leveraging the familiarity of sandbox games to make coding challenges feel like quests.
  • Modularity: The block-based nature of Minecraft mirrors the modular nature of code and algorithms.
  • Creativity: Encouraging students to "build" their knowledge just as they build structures in-game.

Visual Language

Our visual language relies on distinct 8-bit textures, bold black borders, and high-contrast colors. The interface uses skeuomorphic elements (wooden signs, stone buttons) combined with flat pixel art to ensure usability while maintaining the theme.


> System Status: ONLINE

> Style Loaded: PIXEL_ART_V2

> Assets: READY

UI Kit Components

Basic Components System
Basic UI Components

Comprehensive system including color palette, typography hierarchy, input fields, and standard buttons with 4 states (Normal, Hover, Pressed, Disabled).

Button States & Feedback
Button States
Gamification & Progress
Gamification Components
Level System & XP Visualization ANIMATED
Level System

Page Designs

01. Login & Authentication
Login Page
02. Problem Library
Problem Library Page
03. Code Editor IDE
Code Editor Page
04. User Profile Center
Profile Page
05. Contest Arena
Contest Page

Responsive Behavior

Responsive Design Showcase

Desktop (>1200px)

Tablet Landscape (1024px)

Tablet Portrait (768px)

Mobile (< 480px)

Development Guidelines

CSS Naming

Core CSS Implementation (SCSS)

// Variables & Mixins
$mc-grass-top: #5cb85c;
$mc-dirt: #795548;
$pixel-scale: 4px;

@mixin pixel-border($color: #000) {
    box-shadow: 
        -4px 0 0 0 $color,
        4px 0 0 0 $color,
        0 -4px 0 0 $color,
        0 4px 0 0 $color;
    margin: 4px;
}

.mc-btn {
    background-color: $mc-stone;
    border: none;
    color: #fff;
    padding: 12px 24px;
    font-family: 'Minecraft', monospace;
    @include pixel-border(#212121);
    
    &:hover {
        background-color: lighten($mc-stone, 10%);
        transform: translateY(-2px);
    }
}

Asset Library

Navigation Icons (32px)
Navigation Icons
Difficulty & Prog. Icons
Difficulty Icons
Tiled Textures (256px)
Textures
Achievement Badges
Badges
Blocks, Particles & Effects
Blocks and Particles

Download Resources

Complete UI Kit - Figma Source
.fig | 145 MB | Updated Oct 24, 2023
Download
Icon Set (SVG + PNG)
.zip | 24 MB | 120 Icons
Download
Texture Pack High-Res
.zip | 312 MB | Seamless Patterns
Download
Pixel Fonts Bundle
.ttf | 2 MB | 4 Font Families
Download

Appendix: Color Tokens

Grass Top #5CB85C
Dirt #795548
Stone #9E9E9E
Wood #8D6E63
Gold #FFD700
Diamond #40E0D0
Redstone #F44336
Obsidian #212121