> ## Documentation Index
> Fetch the complete documentation index at: https://ihub.learnille.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Space

> Migrated from the previous Learnille internal documentation hub

**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](https://ihub.learnille.com/design/design-system/component-library.md)

* [Component Library Specs](https://ihub.learnille.com/design/design-system/component-library.md) - Reusable UI component specs, Chakra UI theme tokens, button states, card designs, and form controls across `student`, `instructor`, `consultant`, and `admin` portals.

### ♿ [Accessibility Guidelines](https://ihub.learnille.com/design/accessibility-guidelines/accessibility.md)

* [WCAG & Accessibility Standards](https://ihub.learnille.com/design/accessibility-guidelines/accessibility.md) - Color contrast standards, keyboard focus rings, screen reader ARIA label patterns, and motion reduction preferences (`prefers-reduced-motion`).

### 📐 [Wireframes & Mockups](https://ihub.learnille.com/design/wireframes-and-mockups/overview.md)

* [UX Wireframe Layouts](https://ihub.learnille.com/design/wireframes-and-mockups/overview.md) - Page layout architectures for Course Player, Multi-step Course Editor, Booking Calendar, and Provider Wallet.

### ⚡ [Prototypes](https://ihub.learnille.com/design/prototypes/prototyping-guide.md)

* [Interactive Prototype Guide](https://ihub.learnille.com/design/prototypes/prototyping-guide.md) - Prototyping workflows, interactive state maps, and UX animation specs.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.