Design Documentation

Project Overview

Despresso is a multi-page task management website built for CS343 Web Technologies. It combines practical task CRUD workflows with a gamified progression layer so users can plan work, execute consistently, and review personal productivity trends.

The Design Challenge

The lab challenge asks us to reconcile two conflicting visual philosophies in one product: minimalism and immersive interaction. The core requirement is a unified toggle that instantly shifts the whole interface without breaking functionality.

The Solution: A Toggle Architecture

The app switches theme with a single data-mode attribute on the html element. Theme preference is persisted in localStorage as nexus_theme. The shared theme.js runs on every page and applies mode during page initialization so UI transition stays smooth across navigation.

function applyTheme(mode) {
  document.documentElement.setAttribute("data-mode", mode);
  localStorage.setItem("nexus_theme", mode);
}

Minimal Mode Design Decisions

DM Sans is used for readability and visual calm. High whitespace, restrained borders, and neutral surfaces help users focus on action and content rather than decoration. The layout is mobile-first to support quick task access on compact screens.

Cyberpunk Mode Design Decisions

Cyber mode uses Orbitron to signal a futuristic identity and JetBrains Mono for telemetry-like labels. Cyan (#00f5d4) represents data flow and hacker-culture UI conventions. Grid overlays and scanlines reference retro CRT interfaces while preserving modern responsiveness.

Gamification System

Tasks award XP by priority, streaks reward daily consistency, and levels follow Math.floor(totalXP / 500) + 1. Achievements mark milestones such as streak depth, completion speed, and total discipline. This layer improves long-term engagement by turning routine completion into progression.

Technical Architecture

The JavaScript architecture is split into focused modules: tasks.js manages CRUD and page rendering, gamification.js handles XP/streak/achievements, theme.js handles mode toggling, and utils.js provides shared data and formatting utilities.

Challenges Faced

One challenge is maintaining modal accessibility and keyboard focus behavior in two highly different themes. Another is avoiding CSS specificity conflicts while still allowing instant global visual switching. A third is designing localStorage structures that are simple, version-friendly, and reliable across all pages.