> ## 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 System & Component Library Specs

> Migrated from the previous Learnille internal documentation hub

## Overview

The Learnille Design System is built upon React, Chakra UI, custom CSS design tokens, and Motion animations. It ensures visual consistency across all frontends (`admin`, `instructor`, `consultant`, `student`).

***

## 🎨 Theme Tokens & Design Variables

```css theme={null}
:root {
  /* Color Palette - Dark Mode Default */
  --bg-base: #0b0f19;
  --bg-surface: #121826;
  --bg-surface-elevated: #1a2234;
  --bg-glass: rgba(18, 24, 38, 0.75);
  
  --color-primary: #6366f1;       /* Indigo Accent */
  --color-primary-glow: rgba(99, 102, 241, 0.25);
  --color-secondary: #10b981;     /* Emerald Success */
  --color-accent: #f59e0b;        /* Amber Warning/Highlight */
  
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-subtle: #6b7280;
  
  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Elevation & Blur */
  --border-glass: 1px solid rgba(255, 255, 255, 0.08);
  --glass-blur: blur(12px);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
```

***

## 🧩 Core Component Specifications

### 1. Primary Action Button (`<Button />`)

* **Visual Style**: Gradient fill (`linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)`) with subtle glow on hover.
* **States**: `Default`, `Hover` (scale 1.02 + shadow glow), `Active` (scale 0.98), `Loading` (animated spinner + text disabled), `Disabled` (opacity 0.4).

### 2. Glassmorphism Card (`<GlassCard />`)

* **Background**: `var(--bg-glass)` with `backdrop-filter: blur(12px)`.
* **Border**: `var(--border-glass)` with smooth rounded corners (`border-radius: 16px`).
* **Hover Effect**: Slight translate Y lift (`-4px`) and glowing border accent.

### 3. Consultation Slot Picker (`<SlotPicker />`)

* **Display**: Grid of available time badges with timezone indicator.
* **Selection**: Highlighted active slot in `var(--color-primary)` with radio select aria checkmark.

### 4. Course Video Player Shell (`<CoursePlayer />`)

* **Layout**: 16:9 main video viewport with collapsible right-side sidebar for curriculum list, section accordions, and real-time InstantDB comments.


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