| name | design-system |
| description | Visual design system and component library for Syllabus tutorials. Includes 4 theme presets with glassmorphism, gradient systems, micro-interactions, component specs, spacing scale, and icon conventions. |
Design System Skill
Theme Presets
Each theme defines base colors plus gradient, glass, and glow tokens.
Midnight Scholar (Dark - Default for coding topics)
--bg: #0a0e1a; --surface: #131829; --surface-hover: #1a2035;
--primary: #6366f1; --primary-hover: #818cf8; --accent: #22d3ee;
--success: #34d399; --warning: #fbbf24; --error: #f87171;
--text: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b;
--border: #1e293b; --code-bg: #0f1320;
--gradient-hero: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #34d399 100%);
--gradient-surface: linear-gradient(180deg, rgba(99,102,241,0.05) 0%, transparent 100%);
--gradient-card: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(34,211,238,0.04) 100%);
--mesh-bg: radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(34,211,238,0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(52,211,153,0.08) 0%, transparent 50%);
--glass-bg: rgba(19,24,41,0.7); --glass-blur: 16px; --glass-border: rgba(255,255,255,0.08);
--glow-primary: 0 0 20px rgba(99,102,241,0.3); --glow-accent: 0 0 20px rgba(34,211,238,0.2);
--surface-rgb: 19,24,41;
Paper & Ink (Light - For general topics)
--bg: #fafaf9; --surface: #ffffff; --surface-hover: #f5f5f4;
--primary: #2563eb; --primary-hover: #3b82f6; --accent: #0891b2;
--success: #16a34a; --warning: #d97706; --error: #dc2626;
--text: #1c1917; --text-secondary: #57534e; --text-muted: #a8a29e;
--border: #e7e5e4; --code-bg: #f5f5f4;
--gradient-hero: linear-gradient(135deg, #2563eb 0%, #0891b2 50%, #16a34a 100%);
--gradient-surface: linear-gradient(180deg, rgba(37,99,235,0.03) 0%, transparent 100%);
--gradient-card: linear-gradient(135deg, rgba(37,99,235,0.04) 0%, rgba(8,145,178,0.02) 100%);
--mesh-bg: radial-gradient(ellipse at 20% 50%, rgba(37,99,235,0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(8,145,178,0.04) 0%, transparent 50%);
--glass-bg: rgba(255,255,255,0.8); --glass-blur: 12px; --glass-border: rgba(0,0,0,0.06);
--glow-primary: 0 4px 20px rgba(37,99,235,0.12); --glow-accent: 0 4px 20px rgba(8,145,178,0.1);
--surface-rgb: 255,255,255;
Terminal Green (For DevOps/CLI topics)
--bg: #0c0c0c; --surface: #1a1a1a; --surface-hover: #222222;
--primary: #22c55e; --primary-hover: #4ade80; --accent: #a3e635;
--success: #22c55e; --warning: #eab308; --error: #ef4444;
--text: #d4d4d4; --text-secondary: #a3a3a3; --text-muted: #737373;
--border: #2a2a2a; --code-bg: #111111;
--gradient-hero: linear-gradient(135deg, #22c55e 0%, #a3e635 50%, #22d3ee 100%);
--gradient-surface: linear-gradient(180deg, rgba(34,197,94,0.05) 0%, transparent 100%);
--gradient-card: linear-gradient(135deg, rgba(34,197,94,0.06) 0%, rgba(163,230,53,0.03) 100%);
--mesh-bg: radial-gradient(ellipse at 30% 50%, rgba(34,197,94,0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 30%, rgba(163,230,53,0.06) 0%, transparent 50%);
--glass-bg: rgba(26,26,26,0.75); --glass-blur: 16px; --glass-border: rgba(34,197,94,0.15);
--glow-primary: 0 0 20px rgba(34,197,94,0.3); --glow-accent: 0 0 15px rgba(163,230,53,0.2);
--surface-rgb: 26,26,26;
Notebook (For data science/research)
--bg: #fffbeb; --surface: #ffffff; --surface-hover: #fef9c3;
--primary: #7c3aed; --primary-hover: #8b5cf6; --accent: #f59e0b;
--success: #10b981; --warning: #f59e0b; --error: #ef4444;
--text: #292524; --text-secondary: #57534e; --text-muted: #a8a29e;
--border: #e7e5e4; --code-bg: #f5f5f0;
--gradient-hero: linear-gradient(135deg, #7c3aed 0%, #f59e0b 50%, #10b981 100%);
--gradient-surface: linear-gradient(180deg, rgba(124,58,237,0.04) 0%, transparent 100%);
--gradient-card: linear-gradient(135deg, rgba(124,58,237,0.05) 0%, rgba(245,158,11,0.03) 100%);
--mesh-bg: radial-gradient(ellipse at 20% 40%, rgba(124,58,237,0.08) 0%, transparent 50%), radial-gradient(ellipse at 75% 60%, rgba(245,158,11,0.06) 0%, transparent 50%);
--glass-bg: rgba(255,255,255,0.85); --glass-blur: 12px; --glass-border: rgba(124,58,237,0.1);
--glow-primary: 0 4px 20px rgba(124,58,237,0.15); --glow-accent: 0 4px 20px rgba(245,158,11,0.12);
--surface-rgb: 255,255,255;
Visual Effects System
Mesh Gradient Backgrounds
Apply var(--mesh-bg) to the page body or hero sections. It creates depth with overlapping radial gradients. Always layer it behind content:
body::before {
content: '';
position: fixed; inset: 0; z-index: 0;
background: var(--mesh-bg);
pointer-events: none;
}
Glassmorphism
Use for sidebar, floating cards, top bar, and modal overlays:
.glass {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
}
Gradient Text (Headings)
Use on hero titles and section headers:
.gradient-text {
background: var(--gradient-hero);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
Glow Effects
Use sparingly on hover states and active elements:
.card:hover { box-shadow: var(--glow-primary); }
.active-nav-item { box-shadow: var(--glow-accent); }
Noise Texture Overlay
Adds subtle grain for depth. Use a CSS-only noise pattern:
body::after {
content: '';
position: fixed; inset: 0; z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.015;
pointer-events: none;
mix-blend-mode: overlay;
}
Component Specs
Sidebar Navigation (Floating Glass)
- Width: 280px (desktop), full-screen drawer (mobile)
- Style: floating — detached from left edge by 12px, rounded-2xl, glass effect
- Desktop:
margin: 12px; border-radius: 16px; height: calc(100vh - 24px);
- Sections: Progress ring, module list, settings
- Active item: primary color left border (3px) + glass highlight + subtle glow
- Completed items: animated checkmark with success color
- Hover:
transform: translateX(4px) + surface-hover bg
Lesson Content Area
- Max width: 760px, centered
- Line height: 1.75 for body text
- Paragraph spacing: 1.5rem
- Section headers: gradient text on module titles
- Content sections appear with staggered fade-in on scroll (IntersectionObserver)
- Code blocks: full-width with rounded corners, glass border, language badge top-right
Code Blocks (Enhanced)
- Glass frame with rounded-xl corners
- Top bar: language badge (left), filename (center, if provided), copy button (right)
- Line numbers: subtle, muted color
- Hover: subtle glow effect (
box-shadow: var(--glow-primary))
- Copy button: animated checkmark on success
- Tab support for multi-file examples
Quiz Cards (Interactive)
- Glass container with gradient-card background
- Options as hoverable cards with spring animation
- Hover: lift + glow (
transform: translateY(-2px); box-shadow: var(--glow-primary))
- Correct: green border + animated checkmark draw + explanation slide-down + particle burst
- Incorrect: gentle shake (3px, 300ms) + red border flash + encouragement text
- Score reveal: animated counter + grade ring
Progress Indicators
- Overall: SVG ring with gradient stroke, animated dash-offset, percentage center with counter animation
- Per-module: horizontal bar with gradient fill + shine animation sweeping left-to-right
- Per-lesson: animated checkmark (draw-on) or pulsing dot for in-progress
- Completion celebration: confetti particle burst + achievement badge fly-in
Module Hero Cards
- Gradient-card background with glass overlay
- Floating icon/illustration at top-right (subtle, decorative)
- Hover: card lifts 4px with glow shadow
- Completed: success border with shimmer animation
Micro-Interactions Catalog
| Element | Trigger | Animation |
|---|
| Nav item | Hover | translateX(4px) + bg tint, 150ms ease-out |
| Nav item | Active | Left border grow + glow pulse |
| Card | Hover | translateY(-2px) + box-shadow: var(--glow-primary), 200ms spring |
| Card | Click | scale(0.98) then release, 100ms |
| Code block | Copy | Button → check icon, 200ms; reset after 2s |
| Progress bar | Update | Width transition 600ms ease-out + shine sweep |
| Progress ring | Update | Stroke-dashoffset 800ms ease-out + number counter |
| Quiz option | Hover | translateY(-2px) + border color, 150ms |
| Quiz correct | Submit | Border → green, check draw-on 400ms, confetti burst |
| Quiz wrong | Submit | Shake 300ms, border flash red 500ms |
| Page | Enter | Fade-in + translateY(16px) → 0, 250ms ease-out |
| Section | Scroll-in | Staggered fade-up, 100ms delay per item, IntersectionObserver |
| Lesson complete | Click | Check draw animation + progress bar fill |
| Module complete | All done | Confetti burst + badge fly-in from bottom |
| Heading | Scroll-in | Gradient text reveal, clip-path left→right 400ms |
| Button (primary) | Hover | Gradient shift + subtle glow |
| Toast | Appear | Slide-in from right + fade, 200ms spring |
Spacing Scale (based on 0.5rem unit)
xs: 0.25rem (4px) | sm: 0.5rem (8px) | md: 1rem (16px) | lg: 1.5rem (24px)
xl: 2rem (32px) | 2xl: 3rem (48px) | 3xl: 4rem (64px) | 4xl: 6rem (96px)
Shadow Scale
sm: 0 1px 3px rgba(0,0,0,0.1)
md: 0 4px 12px rgba(0,0,0,0.1)
lg: 0 8px 30px rgba(0,0,0,0.12)
xl: 0 16px 50px rgba(0,0,0,0.15)
glow: var(--glow-primary) — per-theme
Icon Usage (Lucide React)
- Navigation:
ChevronLeft, ChevronRight, Menu, X
- Status:
Check, X, AlertCircle, Info, Lightbulb
- Content:
Code, BookOpen, Puzzle, Trophy, Clock
- Actions:
Copy, Play, RotateCcw, ChevronDown
- Progress:
Flame, Target, Award, Sparkles
- Audio:
Headphones, Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, ChevronUp, ChevronDown
Audio Player Design Specs
AudioMiniPlayer (Floating Bottom Bar)
- Position: Fixed bottom, full width, z-40
- Height: 64px (compact)
- Style: Glass-morphism matching the active theme
- Background:
var(--glass-bg) with backdrop-filter: blur(var(--glass-blur))
- Border: 1px top border using
var(--glass-border)
- Progress bar: 2px thin bar at very top edge, gradient fill (
var(--gradient-hero))
- Layout: 3 zones — left (lesson info), center (controls), right (speed + expand)
- Animation: Slides up from bottom (Framer Motion
y: 100 → 0)
- Collapse: When no audio active, fully hidden (not just minimized)
- Mobile: Full width, slightly taller (72px) for touch targets
.audio-mini-player {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 40;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-top: 1px solid var(--glass-border);
}
AudioPlayer (Expanded View)
- Style: Glass card, centered, max-width 500px
- Appears: Slides up from mini-player position (sheet/modal style)
- Backdrop: Semi-transparent overlay (click to dismiss)
- Controls: Large seek bar, play/pause (56px button), ±15s skip, volume slider, speed selector
- Section indicator: Shows current section name with subtle highlight
- Seek bar: Gradient fill matching
--gradient-hero, 8px height, rounded-full
- Speed selector: Pill buttons (0.75x, 1x, 1.25x, 1.5x, 2x), active = primary color
- Volume: Smaller slider, with mute toggle icon
ListenMode (Full-Screen Mobile)
- Background: Solid
var(--bg) with mesh gradient (not glass — too blurry on full screen)
- Center: Large album-art style card with gradient background + lesson icon
- Play button: 80px circular button, gradient background, play/pause icon
- Layout: Vertical stack — lesson title, module name, progress bar, controls, key takeaways
- Key takeaways: Displayed as readable text below controls (useful while walking)
- Swipe: Left/right for prev/next lesson (Framer Motion drag gesture)
- Transition: Slides up from mini-player (full height sheet)
Audio Toggle in TopBar
- Icon:
Headphones icon (lucide-react)
- Placement: Right side of TopBar, next to settings/theme toggle
- States: Default (inactive), Active (playing — icon pulses gently)
- Click: If no audio playing → start current lesson audio. If playing → show/hide mini-player
- Badge: Small dot indicator when audio is available but not playing
Theme Integration
The audio player inherits ALL theme variables — no hardcoded colors. In each theme:
| Theme | Player Accent |
|---|
| Midnight Scholar | Indigo play button with cyan progress bar |
| Paper & Ink | Blue play button with teal progress bar |
| Terminal Green | Green play button with lime progress bar |
| Notebook | Purple play button with amber progress bar |
Micro-Interactions (Audio)
| Element | Trigger | Animation |
|---|
| Mini-player | Audio starts | Slide up from bottom, 300ms spring |
| Mini-player | Dismiss | Slide down, 200ms ease-out |
| Play button | Tap | Scale 0.95 → 1.0, 100ms |
| Play button | Playing | Subtle pulse glow (2s infinite, reduced-motion: none) |
| Progress bar | Seek | Thumb grows on hover/drag |
| Speed button | Select | Background transition 150ms |
| Listen mode | Enter | Sheet slides up from bottom, 400ms spring |
| Listen mode | Leave | Slides down, 250ms ease-out |
| Section label | Change | Crossfade text, 200ms |
Content Area Padding Adjustment
When the audio mini-player is visible, the main content area needs bottom padding to avoid the player overlapping content:
.content-area--audio-active {
padding-bottom: 80px;
}
@media (max-width: 767px) {
.content-area--audio-active {
padding-bottom: 88px;
}
}
