================================================================================ LIQUID GLASS DESIGN SYSTEM PLAYBOOK Apple-Inspired Glassmorphism ================================================================================ OVERVIEW -------- This playbook documents the liquid glass (glassmorphism) design system used throughout the Job-Pages application. This design creates a premium, Apple-like aesthetic using frosted glass effects, subtle transparency, and smooth transitions. Last Updated: 2024 Version: 2.0 ================================================================================ CORE PRINCIPLES ================================================================================ 1. TRANSPARENCY & BLUR - Use backdrop-blur for frosted glass effects - Semi-transparent backgrounds (white/40, white/60, white/70, white/80) - Subtle borders with white/20 to white/40 opacity - Gradient background provides depth: from-gray-50 via-blue-50/30 to-indigo-50/40 2. DEPTH & SHADOWS - Layered shadows (shadow-sm, shadow-lg, shadow-xl, shadow-2xl) - Colored shadows for interactive elements (shadow-indigo-500/30, shadow-indigo-500/50) - Hover states increase shadow intensity - Shadow-lg for buttons, shadow-xl for cards, shadow-2xl for modals/dropdowns 3. SMOOTH TRANSITIONS - All interactive elements use transition-all or transition-colors - Scale effects on hover (hover:scale-105 for avatars, hover:scale-[1.02] for cards) - Opacity changes for hover states - Duration-300 for smooth animations 4. ROUNDED CORNERS - Standard: rounded-xl (12px) - buttons, inputs - Large cards: rounded-2xl (16px) - main containers, cards - Modals: rounded-3xl (24px) - modal content - Full rounded: rounded-full (for avatars) ================================================================================ BACKGROUND SYSTEM ================================================================================ MAIN PAGE BACKGROUND -------------------- Class: bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/40 Purpose: Creates a subtle gradient that provides depth and visual interest Usage: Applied to element on all pages Example: This gradient creates the foundation for the glassmorphism effect, allowing transparent elements to show through with a beautiful backdrop. ================================================================================ NAVIGATION BAR ================================================================================ STANDARD NAVIGATION ------------------- Classes: - backdrop-blur-xl - bg-white/70 - border-b border-white/20 - shadow-sm - sticky top-0 z-40 Purpose: Creates a frosted glass navigation that stays at the top Container: - max-w-7xl mx-auto - px-4 sm:px-6 lg:px-8 - py-4 sm:py-4 (consistent padding on all screen sizes) - px-2 (additional horizontal padding) Example: NAVIGATION LINKS ---------------- Classes: - text-indigo-600 - hover:text-indigo-700 - font-medium - text-sm sm:text-base - transition-colors Example: ← Dashboard ================================================================================ CARDS & CONTAINERS ================================================================================ STANDARD CARD ------------- Classes: - backdrop-blur-xl - bg-white/60 - rounded-2xl - shadow-xl - border border-white/30 - p-6 Purpose: Main content cards with glassmorphism effect Example:
CARD WITH HOVER EFFECT ---------------------- Additional classes: - hover:bg-white/70 - hover:shadow-2xl - hover:border-white/50 - hover:scale-[1.02] - transition-all duration-300 - cursor-pointer Example:
SEARCH/FILTER CONTAINER ----------------------- Classes: - backdrop-blur-xl - bg-white/60 - rounded-2xl - shadow-xl - border border-white/30 - p-6 - mb-6 Example:
MODAL/CONTAINER --------------- Classes: - backdrop-blur-2xl - bg-white/80 - rounded-3xl - shadow-2xl - border border-white/30 Backdrop: - backdrop-blur-sm - bg-black/20 Example:
QUICK INFO CARD (Smaller card) ------------------------------- Classes: - backdrop-blur-xl - bg-white/40 - rounded-2xl - p-4 - border border-white/30 - shadow-lg Example:
================================================================================ BUTTONS ================================================================================ PRIMARY BUTTON (ACTIVE STATE) ------------------------------ Classes: - backdrop-blur-sm - bg-indigo-600/90 - text-white - rounded-xl - shadow-lg - hover:bg-indigo-700/90 - hover:shadow-xl - transition-all Example: