Design System & Component Library Specs

Overview

🎨 Theme Tokens & Design Variables

: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.