Instruction file imported from Divy97/quizito (
.cursor/rules/quizito-modern-design-system.mdc). Copyright stays with the author.
🎨 Quizito Modern Design System - Complete UI Revamp
🌟 Design Philosophy: Glassmorphism + Electric Vibrancy
Quizito's new design language combines:
- Glassmorphism: Frosted glass surfaces with blur effects
- Electric Vibrancy: Bold neon accents and gradients
- Minimalism: Clean, spacious layouts with purposeful elements
- Premium Feel: Sophisticated shadows and smooth animations
🎨 New Color Palette
Primary Brand Colors
/* Electric Blue - Primary brand color */
--quizito-electric-blue: #00D4FF;
--quizito-electric-blue-hover: #00B8E6;
--quizito-electric-blue-light: #33DDFF;
/* Neon Purple - Secondary accent */
--quizito-neon-purple: #8B5CF6;
--quizito-neon-purple-hover: #7C3AED;
--quizito-neon-purple-light: #A78BFA;
/* Cyber Green - Success/positive actions */
--quizito-cyber-green: #00FF88;
--quizito-cyber-green-hover: #00E670;
/* Hot Pink - Error/destructive actions */
--quizito-hot-pink: #FF006E;
--quizito-hot-pink-hover: #E6005D;
/* Electric Yellow - Warning/attention */
--quizito-electric-yellow: #FFD60A;
--quizito-electric-yellow-hover: #E6C109;Surface & Background Colors
/* Dark Glass Surfaces */
--quizito-bg-primary: #0A0A0F; /* Deep space background */
--quizito-bg-secondary: #12121A; /* Section backgrounds */
--quizito-glass-surface: rgba(255, 255, 255, 0.05); /* Glass cards */
--quizito-glass-surface-hover: rgba(255, 255, 255, 0.08);
--quizito-glass-border: rgba(255, 255, 255, 0.1);
--quizito-glass-border-hover: rgba(0, 212, 255, 0.3); /* Electric blue border */Typography Colors
--quizito-text-primary: #FFFFFF; /* Pure white for headings */
--quizito-text-secondary: #B8BCC8; /* Light gray for body text */
--quizito-text-muted: #6B7280; /* Muted for helper text */
--quizito-text-accent: #00D4FF; /* Electric blue for links/accents */🧱 Typography System
Font Stack & Hierarchy
/* Primary Font: Inter for clean, modern feel */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Typography Scale */
--quizito-text-xs: 0.75rem; /* 12px - Small labels */
--quizito-text-sm: 0.875rem; /* 14px - Body small */
--quizito-text-base: 1rem; /* 16px - Body text */
--quizito-text-lg: 1.125rem; /* 18px - Large body */
--quizito-text-xl: 1.25rem; /* 20px - Card titles */
--quizito-text-2xl: 1.5rem; /* 24px - Section titles */
--quizito-text-3xl: 1.875rem; /* 30px - Page titles */
--quizito-text-4xl: 2.25rem; /* 36px - Hero titles */
--quizito-text-5xl: 3rem; /* 48px - Large hero */Typography Components
// Hero Title - Large gradient text with glow
<HeroTitle className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-[var(--quizito-electric-blue)] via-[var(--quizito-neon-purple)] to-[var(--quizito-cyber-green)] bg-clip-text text-transparent">
Transform Content Into Quizzes
</HeroTitle>
// Section Title - Clean white text
<SectionTitle className="text-3xl font-semibold text-[var(--quizito-text-primary)] mb-6">
Your Quizzes
</SectionTitle>
// Body Text - Light gray, good readability
<BodyText className="text-base text-[var(--quizito-text-secondary)] leading-relaxed">
Create engaging quizzes from any content instantly.
</BodyText>
// Accent Text - Electric blue for emphasis
<AccentText className="text-[var(--quizito-text-accent)] font-medium">
Learn More →
</AccentText>🔧 Component Design Standards
Glass Cards
// Standard Glass Card
<div className="
bg-[var(--quizito-glass-surface)]
backdrop-blur-xl
border border-[var(--quizito-glass-border)]
rounded-2xl
p-6
shadow-2xl shadow-black/20
hover:bg-[var(--quizito-glass-surface-hover)]
hover:border-[var(--quizito-glass-border-hover)]
transition-all duration-300
">
Card Content
</div>
// Premium Glass Card (for important content)
<div className="
bg-gradient-to-br from-[var(--quizito-glass-surface)] to-transparent
backdrop-blur-2xl
border border-[var(--quizito-glass-border)]
rounded-3xl
p-8
shadow-[0_8px_32px_rgba(0,212,255,0.1)]
hover:shadow-[0_8px_32px_rgba(0,212,255,0.2)]
transition-all duration-500
">
Premium Content
</div>Modern Buttons
// Primary Electric Button
<button className="
bg-gradient-to-r from-[var(--quizito-electric-blue)] to-[var(--quizito-neon-purple)]
text-white font-semibold
px-8 py-4 rounded-2xl
shadow-[0_0_20px_rgba(0,212,255,0.4)]
hover:shadow-[0_0_30px_rgba(0,212,255,0.6)]
hover:scale-105
transition-all duration-300
border-0
">
Create Quiz
</button>
// Glass Button (secondary)
<button className="
bg-[var(--quizito-glass-surface)]
backdrop-blur-xl
border border-[var(--quizito-glass-border)]
text-[var(--quizito-text-primary)]
font-medium
px-6 py-3 rounded-xl
hover:bg-[var(--quizito-glass-surface-hover)]
hover:border-[var(--quizito-electric-blue)]/50
transition-all duration-300
">
Learn More
</button>
// Neon Outline Button
<button className="
bg-transparent
border-2 border-[var(--quizito-electric-blue)]
text-[var(--quizito-electric-blue)]
font-semibold
px-6 py-3 rounded-xl
hover:bg-[var(--quizito-electric-blue)]
hover:text-black
hover:shadow-[0_0_20px_rgba(0,212,255,0.5)]
transition-all duration-300
">
Start Now
</button>
// Danger/Delete Button
<button className="
bg-[var(--quizito-hot-pink)]
text-white font-medium
px-4 py-2 rounded-lg
hover:bg-[var(--quizito-hot-pink-hover)]
hover:shadow-[0_0_15px_rgba(255,0,110,0.4)]
transition-all duration-300
">
Delete
</button>Form Elements
// Glass Input Field
<input className="
bg-[var(--quizito-glass-surface)]
backdrop-blur-xl
border border-[var(--quizito-glass-border)]
text-[var(--quizito-text-primary)]
placeholder:text-[var(--quizito-text-muted)]
px-4 py-3 rounded-xl
focus:border-[var(--quizito-electric-blue)]
focus:shadow-[0_0_0_3px_rgba(0,212,255,0.1)]
focus:outline-none
transition-all duration-300
w-full
">
// Glass Textarea
<textarea className="
bg-[var(--quizito-glass-surface)]
backdrop-blur-xl
border border-[var(--quizito-glass-border)]
text-[var(--quizito-text-primary)]
placeholder:text-[var(--quizito-text-muted)]
px-4 py-3 rounded-xl
focus:border-[var(--quizito-electric-blue)]
focus:shadow-[0_0_0_3px_rgba(0,212,255,0.1)]
focus:outline-none
transition-all duration-300
resize-none
min-h-[120px]
">
// Modern Select Dropdown
<select className="
bg-[var(--quizito-glass-surface)]
backdrop-blur-xl
border border-[var(--quizito-glass-border)]
text-[var(--quizito-text-primary)]
px-4 py-3 rounded-xl
focus:border-[var(--quizito-electric-blue)]
focus:outline-none
transition-all duration-300
appearance-none
cursor-pointer
">🎠Animation System
Entrance Animations
// Page Load Animation
const pageVariants = {
hidden: { opacity: 0, y: 50 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
}
};
// Staggered List Animation
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { staggerChildren: 0.1, delayChildren: 0.2 }
}
};
// Card Hover Animation
const cardHover = {
y: -8,
scale: 1.02,
transition: { duration: 0.3, ease: "easeOut" }
};
// Button Press Animation
const buttonTap = {
scale: 0.95,
transition: { duration: 0.1 }
};Glow Effects
// Electric Glow on Hover
.electric-glow:hover {
box-shadow:
0 0 20px rgba(0, 212, 255, 0.4),
0 0 40px rgba(0, 212, 255, 0.2),
0 0 60px rgba(0, 212, 255, 0.1);
}
// Neon Text Glow
.neon-text {
text-shadow:
0 0 5px rgba(0, 212, 255, 0.5),
0 0 10px rgba(0, 212, 255, 0.3),
0 0 15px rgba(0, 212, 255, 0.2);
}🌟 Layout Patterns
Page Structure
export default function ModernPage() {
return (
<div className="min-h-screen bg-[var(--quizito-bg-primary)]">
{/* Background gradient overlay */}
<div className="fixed inset-0 bg-gradient-to-br from-[var(--quizito-bg-primary)] via-[var(--quizito-bg-secondary)] to-[var(--quizito-bg-primary)] -z-10" />
{/* Floating particles/dots effect */}
<div className="fixed inset-0 opacity-30 -z-10">
{/* Animated background elements */}
</div>
{/* Main content */}
<motion.div
variants={pageVariants}
initial="hidden"
animate="visible"
className="relative z-10 container mx-auto px-6 py-12"
>
<HeroTitle>Your Page Title</HeroTitle>
<BodyText>Page description</BodyText>
{/* Glass cards grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
{/* Glass cards */}
</div>
</motion.div>
</div>
);
}Navigation Bar
<nav className="
sticky top-0 z-50
bg-[var(--quizito-glass-surface)]
backdrop-blur-2xl
border-b border-[var(--quizito-glass-border)]
px-6 py-4
">
<div className="container mx-auto flex items-center justify-between">
{/* Logo with electric glow */}
<div className="text-2xl font-bold bg-gradient-to-r from-[var(--quizito-electric-blue)] to-[var(--quizito-neon-purple)] bg-clip-text text-transparent">
Quizito
</div>
{/* Navigation items */}
<div className="hidden md:flex items-center space-x-8">
<a className="text-[var(--quizito-text-secondary)] hover:text-[var(--quizito-electric-blue)] transition-colors">
Create
</a>
<a className="text-[var(--quizito-text-secondary)] hover:text-[var(--quizito-electric-blue)] transition-colors">
My Quizzes
</a>
</div>
{/* CTA Button */}
<button className="electric-primary-button">
Get Started
</button>
</div>
</nav>📱 Responsive Design
Breakpoints
- Mobile: < 768px (single column, larger touch targets)
- Tablet: 768px - 1024px (two columns, medium spacing)
- Desktop: > 1024px (three+ columns, full spacing)
Mobile-First Patterns
// Responsive grid
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8"
// Responsive text sizes
className="text-2xl md:text-3xl lg:text-4xl"
// Responsive padding
className="p-4 md:p-6 lg:p-8"
// Responsive glass effects (reduce blur on mobile for performance)
className="backdrop-blur-sm md:backdrop-blur-xl"✅ Implementation Rules
ALWAYS Use:
- Glass surfaces for all cards and containers
- Electric blue as primary accent color
- Backdrop blur effects for depth
- Smooth animations (300ms duration max)
- Gradient text for hero titles
- Round corners (12px-24px radius)
- Consistent spacing (multiples of 4px)
NEVER Use:
- Harsh solid colors for backgrounds
- Sharp corners or borders
- Heavy drop shadows (use glow effects instead)
- More than 3 accent colors in one view
- Animation durations longer than 500ms
- Pure black or pure white backgrounds
Color Usage Guide:
- Electric Blue: Primary buttons, links, focus states
- Neon Purple: Secondary accents, gradients
- Cyber Green: Success states, positive feedback
- Hot Pink: Errors, destructive actions, warnings
- Electric Yellow: Attention, notifications, highlights
🚀 Component Library Structure
components/
├── ui/
│ ├── glass-card.tsx # Glass morphism cards
│ ├── electric-button.tsx # All button variants
│ ├── glass-input.tsx # Form inputs
│ ├── neon-badge.tsx # Status badges
│ └── glow-effects.tsx # Glow animations
├── layout/
│ ├── modern-navbar.tsx # Glass navigation
│ ├── glass-sidebar.tsx # Sidebar navigation
│ └── electric-footer.tsx # Footer component
└── effects/
├── particle-background.tsx # Animated background
├── floating-orbs.tsx # Floating elements
└── aurora-gradient.tsx # Dynamic gradients
This design system creates a futuristic, premium, and instantly recognizable interface that users will associate specifically with Quizito. The glassmorphism effects combined with electric accents create a modern, sophisticated feel while maintaining excellent usability and accessibility.