Skip to content
Learnille Documentation

Design Space

Design Space

Purpose: Centralize UI/UX design philosophy, design system tokens, visual aesthetic standards, component library patterns, accessibility guidelines, and prototype specifications for Learnille.

🎨 Visual Philosophy & Aesthetic Standards

Learnille enforces a strict design philosophy to avoid generic, uninspired UI:

  • Distinctive Typography: Expressive typography using Google Fonts like Outfit, Plus Jakarta Sans, or Cabinet Grotesk for headings, paired with JetBrains Mono or Fira Code for technical metadata. Avoid default Inter, Arial, or system sans-serif font fallbacks.
  • Curated Color Palettes: Dynamic, rich dark & light mode themes built using CSS custom properties (--color-primary, --color-surface, --color-accent). Avoid timid, evenly-distributed palettes; use deep slate/navy surfaces (#0B0F19, #121826) paired with vibrant electric violet, emerald, or warm amber accents.
  • Atmospheric Backgrounds & Glassmorphism: Layered CSS gradients, mesh backgrounds, backdrop blur filters (backdrop-filter: blur(12px)), and subtle border glows instead of plain flat backgrounds.
  • Motion & Micro-interactions: Micro-animations using framer-motion / CSS keyframes for staggered page entry (animation-delay), active hover states, and smooth modal transitions.

📂 Navigation & Directory Structure

🧱 Design System

  • Component Library Specs - Reusable UI component specs, Chakra UI theme tokens, button states, card designs, and form controls across student, instructor, consultant, and admin portals.

♿ Accessibility Guidelines

  • WCAG & Accessibility Standards - Color contrast standards, keyboard focus rings, screen reader ARIA label patterns, and motion reduction preferences (prefers-reduced-motion).

📐 Wireframes & Mockups

  • UX Wireframe Layouts - Page layout architectures for Course Player, Multi-step Course Editor, Booking Calendar, and Provider Wallet.

⚡ Prototypes