{"category": "Visual Design - Color Theory", "scenario": "Creating a minimal color palette for a professional SaaS dashboard", "principles_applied": ["60-30-10 rule", "Color contrast ratios (WCAG AA)", "Semantic color mapping", "Neutral base with accent colors"], "solution": "Use a neutral grayscale base (slate/cool grays) with a single primary accent color (indigo) for CTAs and active states. Maintain 4.5:1 contrast ratio for text. Use semantic colors: green for success, amber for warning, red for error, blue for info. Apply 60% neutral backgrounds, 30% secondary surfaces, 10% accent colors.", "code_example": "/* Tailwind CSS configuration */\n{\n theme: {\n extend: {\n colors: {\n primary: { 50: '#eef2ff', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca' },\n neutral: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 800: '#1e293b', 900: '#0f172a' }\n }\n }\n }\n}", "accessibility_notes": "White text on indigo-600 = 7.2:1 contrast ratio (AAA). All combinations meet WCAG AA. Provide non-color indicators for color-coded info."}
{"category": "Visual Design - Color Theory", "scenario": "Bold high-contrast palette for creative agency website", "principles_applied": ["High contrast design", "Vibrant accent colors", "Dark mode first", "Triadic color scheme"], "solution": "Pure black (#000000) and white (#FFFFFF) base with electric lime (#39FF14) and hot pink (#FF10F0) accents. Creates striking visual impact. Use large typography with color overlays.", "code_example": ".bold-agency {\n --bg-primary: #000000;\n --bg-secondary: #0a0a0a;\n --text-primary: #ffffff;\n --accent-lime: #39FF14;\n --accent-pink: #FF10F0;\n}\n.hero-title {\n background: linear-gradient(135deg, #39FF14 0%, #FF10F0 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}", "accessibility_notes": "Electric colors on black pass WCAG AAA. Ensure hover states maintain 3:1 minimum. Offer reduced motion option."}
{"category": "Visual Design - Color Theory", "scenario": "Earthy natural palette for eco-friendly product site", "principles_applied": ["Nature-inspired colors", "Warm undertones", "Organic harmony", "Psychology of color"], "solution": "Forest green (#2D5A27), terracotta (#C17F59), sand beige (#E8DCC4), moss green (#4A6B4A), warm cream (#F5F1E8). Creates calming, trustworthy feeling. Green as primary, terracotta for CTAs.", "code_example": ":root {\n --forest: #2D5A27;\n --terracotta: #C17F59;\n --sand: #E8DCC4;\n --moss: #4A6B4A;\n --cream: #F5F1E8;\n}\n.eco-button {\n background-color: var(--terracotta);\n color: var(--cream);\n padding: 12px 24px;\n border-radius: 8px;\n}", "accessibility_notes": "Terracotta on cream = 7.8:1 (AAA). Forest green text on cream = 8.2:1. Ensure colorblind-friendly patterns for graphs."}
{"category": "Visual Design - Color Theory", "scenario": "Neon cyberpunk palette for gaming platform", "principles_applied": ["High saturation", "Dark background", "Glowing effects", "Complementary colors"], "solution": "Deep navy (#0A0E27) background with neon cyan (#00FFFF), magenta (#FF00FF), and yellow (#FFFF00) accents. Use box-shadow for glow effects.", "code_example": ".cyberpunk {\n --bg-deep: #0A0E27;\n --neon-cyan: #00FFFF;\n --neon-magenta: #FF00FF;\n --neon-yellow: #FFFF00;\n}\n.neon-button {\n background: transparent;\n border: 2px solid var(--neon-cyan);\n color: var(--neon-cyan);\n box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);\n}", "accessibility_notes": "Neon on dark navy = 8.5:1 (AAA). Respect prefers-reduced-motion for glow animations."}
{"category": "Visual Design - Color Theory", "scenario": "Pastel dreamy palette for children's app", "principles_applied": ["Soft saturation", "Playful colors", "Friendly psychology", "Low visual stress"], "solution": "Lavender (#E6E6FA), mint green (#98FF98), baby pink (#FFB6C1), sky blue (#87CEEB), butter yellow (#FFFACD). All colors have high lightness (70-90%). Use darker shades for text.", "code_example": ".pastel-theme {\n --lavender: #E6E6FA;\n --mint: #98FF98;\n --baby-pink: #FFB6C1;\n --sky-blue: #87CEEB;\n --text-dark: #4A4A4A;\n}\n.pastel-card {\n background: var(--lavender);\n border-radius: 16px;\n padding: 20px;\n color: var(--text-dark);\n}", "accessibility_notes": "Dark gray text on pastels = 7.2:1 average (AAA). Avoid light text on pastel backgrounds."}
{"category": "Visual Design - Color Theory", "scenario": "Monochromatic blue palette for enterprise software", "principles_applied": ["Single hue progression", "Professional psychology", "Trust-building", "Clean aesthetic"], "solution": "Blue scale from #EBF8FF (50) to #1A365D (900). Use lighter values for backgrounds, medium for borders, dark for text.", "code_example": ".enterprise-blue {\n --blue-50: #EBF8FF;\n --blue-200: #90CDF4;\n --blue-600: #3182CE;\n --blue-900: #1A365D;\n}\n.enterprise-button-primary {\n background: var(--blue-600);\n color: white;\n}", "accessibility_notes": "White on blue-600 = 7.5:1 (AAA). Blue-900 text on blue-50 = 14.2:1 (AAA)."}
{"category": "Visual Design - Color Theory", "scenario": "Warm autumn palette for restaurant website", "principles_applied": ["Appetizing colors", "Seasonal psychology", "Warm undertones", "Comfort atmosphere"], "solution": "Burnt orange (#CC5500), golden yellow (#FFB300), deep red (#8B0000), warm brown (#8B4513), cream (#FFFDD0). Orange stimulates appetite.", "code_example": ".autumn-restaurant {\n --burnt-orange: #CC5500;\n --golden-yellow: #FFB300;\n --deep-red: #8B0000;\n --warm-brown: #8B4513;\n --cream: #FFFDD0;\n}\n.cta-button {\n background: var(--golden-yellow);\n color: var(--deep-red);\n font-weight: bold;\n}", "accessibility_notes": "Deep red text on cream = 13.1:1 (AAA). Golden yellow on brown = 6.8:1 (AA)."}
{"category": "Visual Design - Color Theory", "scenario": "Luxurious gold palette for high-end jewelry brand", "principles_applied": ["Premium psychology", "Metallic tones", "Elegant minimalism", "Sophistication"], "solution": "Black (#000000) and charcoal (#1C1C1C) backgrounds with gold gradient (#D4AF37 to #FFD700), white (#FFFFFF) text.", "code_example": ".luxury-gold {\n --black: #000000;\n --charcoal: #1C1C1C;\n --gold-light: #FFD700;\n --gold-base: #D4AF37;\n --white: #FFFFFF;\n}\n.gold-text {\n background: linear-gradient(135deg, var(--gold-light), var(--gold-base));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}", "accessibility_notes": "White text on charcoal = 15.8:1 (AAA). Gold gradient on charcoal = 4.2:1 minimum (AA)."}
{"category": "Visual Design - Typography", "scenario": "Modern tech blog using Inter and Source Serif Pro", "principles_applied": ["Geometric sans-serif with serif", "High readability", "Modern professional", "Clear hierarchy"], "solution": "Inter (sans-serif) for UI elements, navigation, headings up to H3. Source Serif Pro (serif) for body text, H1, H2 for editorial feel.", "code_example": ":root {\n --font-sans: 'Inter', -apple-system, sans-serif;\n --font-serif: 'Source Serif Pro', Georgia, serif;\n}\nbody {\n font-family: var(--font-serif);\n font-size: 18px;\n line-height: 1.7;\n}\nh3, h4, h5, h6 {\n font-family: var(--font-sans);\n font-weight: 600;\n}", "accessibility_notes": "Inter and Source Serif Pro both have excellent legibility at small sizes. Maintain minimum 16px for body text."}
{"category": "Visual Design - Typography", "scenario": "E-commerce fashion site using Playfair Display and Poppins", "principles_applied": ["Elegant serif with geometric sans", "Luxury aesthetic", "High contrast pairing", "Editorial style"], "solution": "Playfair Display (high-contrast serif) for hero headlines and product names. Poppins (geometric sans) for navigation, prices, buttons, and body text.", "code_example": ":root {\n --font-display: 'Playfair Display', serif;\n --font-body: 'Poppins', sans-serif;\n}\n.hero-title {\n font-family: var(--font-display);\n font-size: clamp(2.5rem, 5vw, 4.5rem);\n font-weight: 700;\n}\n.product-price {\n font-family: var(--font-body);\n font-size: 1.25rem;\n font-weight: 600;\n}", "accessibility_notes": "Playfair Display has high contrast but maintain minimum 32px for headlines to ensure legibility."}
{"category": "Visual Design - Typography", "scenario": "SaaS dashboard using IBM Plex Sans and JetBrains Mono", "principles_applied": ["Corporate professional", "Code-friendly", "Data density", "Technical clarity"], "solution": "IBM Plex Sans (professional sans) for UI, navigation, labels, data displays. JetBrains Mono (monospaced) for code snippets, numbers, tabular data.", "code_example": ":root {\n --font-ui: 'IBM Plex Sans', sans-serif;\n --font-mono: 'JetBrains Mono', monospace;\n}\n.metric-value {\n font-family: var(--font-mono);\n font-size: 2rem;\n font-weight: 600;\n}\n.code-block {\n font-family: var(--font-mono);\n font-size: 13px;\n background: #1A202C;\n color: #E2E8F0;\n}", "accessibility_notes": "IBM Plex Sans optimized for UI at 14-16px. JetBrains Mono has excellent character differentiation."}
{"category": "Visual Design - Typography", "scenario": "Creative agency website using Space Grotesk and Instrument Serif", "principles_applied": ["Bold personality", "Artistic expression", "Geometric contrast", "Modern editorial"], "solution": "Space Grotesk (eccentric geometric) for headlines, navigation, statements. Instrument Serif (elegant serif) for body copy, descriptions.", "code_example": ":root {\n --font-headline: 'Space Grotesk', sans-serif;\n --font-body: 'Instrument Serif', serif;\n}\n.hero-headline {\n font-family: var(--font-headline);\n font-size: clamp(3rem, 8vw, 6rem);\n font-weight: 700;\n letter-spacing: -0.04em;\n text-transform: uppercase;\n}\n.project-description {\n font-family: var(--font-body);\n font-size: 1.125rem;\n line-height: 1.7;\n}", "accessibility_notes": "Space Grotesk readable at 20px+ for headlines. Instrument Serif provides excellent body text readability at 18px."}
{"category": "Visual Design - Typography", "scenario": "Children's educational app using Nunito and Comic Neue", "principles_applied": ["Friendly psychology", "Readability for young users", "Playful but clear", "Approachable design"], "solution": "Nunito (rounded sans) for headings, buttons, instructions. Comic Neue (casual handwriting) for fun elements, speech bubbles.", "code_example": ":root {\n --font-heading: 'Nunito', sans-serif;\n --font-fun: 'Comic Neue', cursive;\n}\n.activity-title {\n font-family: var(--font-heading);\n font-size: 2rem;\n font-weight: 800;\n}\n.character-speech {\n font-family: var(--font-fun);\n font-size: 1.125rem;\n background: #FEFCBF;\n padding: 16px 20px;\n border-radius: 20px;\n}", "accessibility_notes": "Nunito rounded ends improve readability for children. Minimum 18px for instructions."}
{"category": "Visual Design - Typography", "scenario": "Restaurant menu using Cormorant Garamond and Montserrat", "principles_applied": ["Elegant dining", "Menu readability", "Upscale atmosphere", "Category organization"], "solution": "Cormorant Garamond (elegant display serif) for restaurant name, section headers, specials. Montserrat (geometric sans) for menu items, descriptions, prices.", "code_example": ":root {\n --font-display: 'Cormorant Garamond', Garamond, serif;\n --font-body: 'Montserrat', sans-serif;\n}\n.restaurant-name {\n font-family: var(--font-display);\n font-size: 3rem;\n font-weight: 600;\n letter-spacing: 0.05em;\n}\n.menu-item {\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 1.125rem;\n}", "accessibility_notes": "Cormorant Garamond requires minimum 24px for headings. Montserrat ensures menu items are readable at 16-18px."}
{"category": "Visual Design - Typography", "scenario": "Fitness app using Oswald and Open Sans", "principles_applied": ["Bold and energetic", "High impact", "Motivational", "Clear data display"], "solution": "Oswald (condensed sans-serif) for headlines, metrics, motivational quotes, stats. Open Sans (friendly sans) for body text, instructions, navigation.", "code_example": ":root {\n --font-display: 'Oswald', sans-serif;\n --font-body: 'Open Sans', sans-serif;\n}\n.workout-title {\n font-family: var(--font-display);\n font-size: 2.5rem;\n font-weight: 700;\n text-transform: uppercase;\n}\n.stat-display {\n font-family: var(--font-display);\n font-size: 3.5rem;\n font-weight: 700;\n color: #48BB78;\n}", "accessibility_notes": "Oswald's condensed style needs 24px+ for headlines. Open Sans optimized for body text at 16px."}
{"category": "Visual Design - Typography", "scenario": "Luxury hotel website using Cinzel and Raleway", "principles_applied": ["Classic elegance", "Luxury signaling", "Sophistication", "Timeless appeal"], "solution": "Cinzel (classical serif) for hotel name, room categories, elegant headings. Raleway (elegant sans) for navigation, room descriptions, amenities, booking form.", "code_example": ":root {\n --font-display: 'Cinzel', serif;\n --font-body: 'Raleway', sans-serif;\n}\n.hotel-name {\n font-family: var(--font-display);\n font-size: clamp(2rem, 5vw, 3.5rem);\n font-weight: 600;\n letter-spacing: 0.15em;\n}\n.room-description {\n font-family: var(--font-body);\n font-size: 1rem;\n line-height: 1.7;\n}", "accessibility_notes": "Cinzel requires minimum 24px for headings due to classical styling. Raleway provides excellent body readability at 16px."}
{"category": "Visual Design - Typography", "scenario": "Non-profit organization using Merriweather and Roboto", "principles_applied": ["Trust and warmth", "High readability", "Universal appeal", "Clear communication"], "solution": "Merriweather (slab serif) for headlines, stories, emotional content. Roboto (neutral sans) for navigation, forms, donation buttons, body text.", "code_example": ":root {\n --font-serif: 'Merriweather', Georgia, serif;\n --font-sans: 'Roboto', sans-serif;\n}\n.mission-statement {\n font-family: var(--font-serif);\n font-size: 2rem;\n font-weight: 700;\n line-height: 1.3;\n}\n.donate-button {\n font-family: var(--font-sans);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}", "accessibility_notes": "Merriweather optimized for screen reading at 16-18px. Roboto provides excellent UI clarity."}
{"category": "Visual Design - Typography", "scenario": "Beauty brand using DM Serif Display and Mulish", "principles_applied": ["Elegant femininity", "Premium positioning", "Editorial style", "Soft sophistication"], "solution": "DM Serif Display (elegant display serif) for brand name, product names, campaign headlines. Mulish (geometric sans) for navigation, product descriptions, ingredients, prices.", "code_example": ":root {\n --font-display: 'DM Serif Display', serif;\n --font-body: 'Mulish', sans-serif;\n}\n.brand-name {\n font-family: var(--font-display);\n font-size: clamp(2.5rem, 6vw, 4rem);\n font-weight: 400;\n line-height: 1.1;\n}\n.product-description {\n font-family: var(--font-body);\n font-size: 1rem;\n line-height: 1.7;\n}", "accessibility_notes": "DM Serif Display needs minimum 32px for headlines. Mulish optimized for body text at 14-16px."}
{"category": "Visual Design - Spacing Systems", "scenario": "Implementing a 4px baseline grid system", "principles_applied": ["Baseline rhythm", "Vertical rhythm", "Consistent spacing", "Modular scale"], "solution": "Use 4px as base unit. All spacing multiples of 4: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px. Line heights also align to 4px grid. Creates visual harmony and consistency.", "code_example": "/* 4px Grid System */\n:root {\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-6: 24px;\n --space-8: 32px;\n --space-12: 48px;\n --space-16: 64px;\n --space-24: 96px;\n}\n.card {\n padding: var(--space-6);\n margin-bottom: var(--space-8);\n gap: var(--space-4);\n}\nh1 {\n margin-bottom: var(--space-6);\n line-height: 1.2; /* 48px for 40px font */\n}", "accessibility_notes": "Consistent spacing helps users with cognitive disabilities. Ensure touch targets minimum 44x44px (11x space units)."}
{"category": "Visual Design - Spacing Systems", "scenario": "Implementing an 8px spacing scale for component library", "principles_applied": ["Coarser granularity", "Faster development", "Component consistency", "Design tokens"], "solution": "8px base unit. Spacing scale: 8, 16, 24, 32, 40, 48, 64, 80, 96, 128. Simpler than 4px grid but less precise. Good for UI components where exact alignment less critical.", "code_example": "/* 8px Spacing Scale */\n$spacing: (\n 'xs': 8px,\n 'sm': 16px,\n 'md': 24px,\n 'lg': 32px,\n 'xl': 48px,\n '2xl': 64px,\n '3xl': 96px\n);\n.button {\n padding: spacing('sm') spacing('md');\n gap: spacing('xs');\n}\n.card {\n padding: spacing('lg');\n margin-bottom: spacing('xl');\n}", "accessibility_notes": "8px scale ensures sufficient spacing for interactive elements. Maintain minimum 8px between adjacent clickable elements."}
{"category": "Visual Design - Spacing Systems", "scenario": "Creating responsive spacing with fluid units", "principles_applied": ["Fluid typography", "Responsive spacing", "Viewport-relative units", "Mobile-first"], "solution": "Use clamp() for fluid spacing that scales with viewport. Base sizes at mobile, maximum at desktop. Ensures comfortable spacing on all screen sizes without breakpoints.", "code_example": "/* Fluid Spacing */\n:root {\n --space-fluid-sm: clamp(1rem, 2vw, 1.5rem);\n --space-fluid-md: clamp(1.5rem, 3vw, 2.5rem);\n --space-fluid-lg: clamp(2rem, 4vw, 4rem);\n --space-fluid-xl: clamp(3rem, 6vw, 6rem);\n}\n.hero {\n padding: var(--space-fluid-xl) var(--space-fluid-md);\n}\n.section {\n margin-bottom: var(--space-fluid-lg);\n}\n.container {\n gap: var(--space-fluid-sm);\n}", "accessibility_notes": "Fluid spacing prevents cramped layouts on small screens. Test with text zoom up to 200%."}
{"category": "Visual Design - Spacing Systems", "scenario": "Implementing modular scale for typography and spacing", "principles_applied": ["Golden ratio", "Harmonious proportions", "Typographic scale", "Visual hierarchy"], "solution": "Use 1.25 (major fifth) or 1.414 (perfect fourth) ratio for type and spacing. Creates harmonious progression: 16, 20, 25, 31, 39, 49, 61. Spacing follows same scale.", "code_example": "/* Modular Scale - 1.25 ratio */\n:root {\n --ratio: 1.25;\n --size-1: 16px; /* Base */\n --size-2: 20px; /* 16 × 1.25 */\n --size-3: 25px; /* 20 × 1.25 */\n --size-4: 31px; /* 25 × 1.25 */\n --size-5: 39px; /* 31 × 1.25 */\n --size-6: 49px; /* 39 × 1.25 */\n --space-1: var(--size-1);\n --space-2: var(--size-2);\n --space-3: var(--size-3);\n}\nh1 { font-size: var(--size-6); margin-bottom: var(--space-3); }\nh2 { font-size: var(--size-5); margin-bottom: var(--space-2); }", "accessibility_notes": "Modular scale creates predictable sizing. Ensure base size (16px) meets minimum requirements. Respect user font size preferences."}
{"category": "Visual Design - Spacing Systems", "scenario": "Designing spacing for mobile touch interfaces", "principles_applied": ["Touch target size", "Fitts's Law", "Mobile ergonomics", "Thumb-friendly zones"], "solution": "Minimum 44x44px (iOS) or 48x48px (Android) for touch targets. 8-12px gap between elements. Group related items with 16-24px spacing. Bottom navigation 56-64px height.", "code_example": "/* Mobile Touch Spacing */\n:root {\n --touch-target: 44px;\n --touch-target-min: 44px;\n --gap-sm: 8px;\n --gap-md: 12px;\n --gap-lg: 16px;\n --nav-height: 56px;\n}\n.touch-button {\n min-width: var(--touch-target-min);\n min-height: var(--touch-target-min);\n padding: 12px 24px;\n}\n.button-group {\n gap: var(--gap-md);\n}\n.bottom-nav {\n height: var(--nav-height);\n padding: 0 16px;\n}", "accessibility_notes": "44x44px minimum ensures users with motor impairments can interact. Provide adequate spacing to prevent accidental touches."}
{"category": "Visual Design - Shadow and Depth", "scenario": "Creating elevation-based shadow system for Material Design", "principles_applied": ["Elevation metaphor", "Progressive depth", "Light consistency", "Layer hierarchy"], "solution": "24 elevation levels (0-24px). Higher elevation = larger, more diffuse shadow. Ambient shadow + key shadow combo. Creates clear sense of layering and Z-axis.", "code_example": "/* Material Design Elevation Shadows */\n:root {\n --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n --shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n --shadow-4: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);\n --shadow-8: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);\n --shadow-16: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);\n --shadow-24: 0 27px 55px rgba(0,0,0,0.30), 0 21px 17px rgba(0,0,0,0.22);\n}\n.card { box-shadow: var(--shadow-2); }\n.card:hover { box-shadow: var(--shadow-8); }\n.modal { box-shadow: var(--shadow-24); }", "accessibility_notes": "Shadows shouldn't be the only indicator of elevation. Use border and background color changes too. Respect prefers-reduced-motion."}
{"category": "Visual Design - Shadow and Depth", "scenario": "Neumorphic soft UI shadow system", "principles_applied": ["Soft shadows", "Convex/concave", "Subtle depth", "Monochromatic"], "solution": "Two shadows: light top-left, dark bottom-right. Creates extruded (pressed) or embossed (raised) appearance. Matches background color exactly. Very subtle contrast.", "code_example": "/* Neumorphic Shadows */\n:root {\n --bg: #e0e5ec;\n --shadow-light: #ffffff;\n --shadow-dark: #a3b1c6;\n}\n.neu-raised {\n background: var(--bg);\n box-shadow:\n 9px 9px 16px var(--shadow-dark),\n -9px -9px 16px var(--shadow-light);\n border-radius: 20px;\n}\n.neu-pressed {\n background: var(--bg);\n box-shadow:\n inset 6px 6px 10px var(--shadow-dark),\n inset -6px -6px 10px var(--shadow-light);\n border-radius: 20px;\n}\n.neu-raised:active {\n box-shadow:\n inset 4px 4px 8px var(--shadow-dark),\n inset -4px -4px 8px var(--shadow-light);\n}", "accessibility_notes": "Neumorphism has accessibility concerns - low contrast can be difficult for some users. Provide clear borders or labels. Ensure focus states are visible."}
{"category": "Visual Design - Shadow and Depth", "scenario": "Glassmorphism blur and transparency system", "principles_applied": ["Background blur", "Transparency layers", "Acrylic effect", "Depth through blur"], "solution": "Semi-transparent white/dark backgrounds with backdrop-filter: blur(). Border with slight transparency. White text shadow for readability. Creates layered glass effect.", "code_example": "/* Glassmorphism */\n:root {\n --glass-bg: rgba(255, 255, 255, 0.1);\n --glass-border: rgba(255, 255, 255, 0.2);\n --glass-blur: 20px;\n}\n.glass-card {\n background: var(--glass-bg);\n backdrop-filter: blur(var(--glass-blur));\n -webkit-backdrop-filter: blur(var(--glass-blur));\n border: 1px solid var(--glass-border);\n border-radius: 16px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n}\n.glass-card-dark {\n background: rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(var(--glass-blur));\n border: 1px solid rgba(255, 255, 255, 0.1);\n}", "accessibility_notes": "Glass effects can reduce contrast. Ensure text contrast meets WCAG AA. Provide fallback for browsers without backdrop-filter support."}
{"category": "Visual Design - Shadow and Depth", "scenario": "Colored shadow system for vibrant interfaces", "principles_applied": ["Color psychology", "Brand shadows", "Soft emphasis", "Playful depth"], "solution": "Tinted shadows matching brand colors instead of black. Softer, more friendly appearance. Use low opacity (5-15%) for subtle effect. Creates distinctive brand identity.", "code_example": "/* Colored Shadows */\n:root {\n --brand-primary: #6366f1;\n --brand-secondary: #ec4899;\n --shadow-primary: 0 10px 40px -10px rgba(99, 102, 241, 0.3);\n --shadow-secondary: 0 10px 40px -10px rgba(236, 72, 153, 0.3);\n}\n.card-primary {\n box-shadow: var(--shadow-primary);\n border: 1px solid rgba(99, 102, 241, 0.1);\n}\n.card-secondary {\n box-shadow: var(--shadow-secondary);\n border: 1px solid rgba(236, 72, 153, 0.1);\n}\n.button-primary:hover {\n box-shadow: 0 20px 60px -15px rgba(99, 102, 241, 0.4);\n}", "accessibility_notes": "Colored shadows may not provide sufficient depth cues for all users. Use with other elevation indicators. Test with various color vision types."}
{"category": "Visual Design - Border Radius", "scenario": "Consistent border radius scale for component library", "principles_applied": ["Shape consistency", "Design tokens", "Component hierarchy", "Visual language"], "solution": "Define radius scale: 0 (sharp), 4px (small), 8px (medium), 12px (large), 16px (xlarge), 9999px (pill/circle). Match radius to component size. Smaller elements get smaller radius.", "code_example": "/* Border Radius Scale */\n:root {\n --radius-none: 0;\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --radius-2xl: 24px;\n --radius-full: 9999px;\n}\n.button-sm { border-radius: var(--radius-sm); }\n.button-md { border-radius: var(--radius-md); }\n.button-lg { border-radius: var(--radius-lg); }\n.pill { border-radius: var(--radius-full); }\n.avatar { border-radius: var(--radius-full); }\n.card { border-radius: var(--radius-lg); }", "accessibility_notes": "Consistent border radius helps users recognize component types. Ensure focus indicators are visible on rounded elements."}
{"category": "Visual Design - Border Radius", "scenario": "Superellipse/squircle shapes for modern iOS-style interfaces", "principles_applied": ["Continuous curvature", "Modern aesthetic", "Apple-inspired", "Smooth corners"], "solution": "Use larger border radius values (16-24px) with smooth corners. Creates superellipse (squircle) shape. More modern than simple circles. Common in iOS design.", "code_example": "/* Superellipse/Squircle Shapes */\n:root {\n --radius-smooth: 20px;\n --radius-smooth-lg: 28px;\n}\n.ios-card {\n border-radius: var(--radius-smooth);\n box-shadow: 0 4px 24px rgba(0,0,0,0.08);\n}\n.ios-button {\n border-radius: var(--radius-smooth);\n background: #007AFF;\n}\n/* For true squircle, use SVG or border-radius with smooth corners */\n.squircle {\n border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\n}", "accessibility_notes": "Smooth corners can be aesthetically pleasing but ensure touch targets remain 44x44px minimum. Maintain clear focus states."}
{"category": "Visual Design - Border Radius", "scenario": "Sharp edges and mixed radius for brutalist design", "principles_applied": ["Bold aesthetic", "Raw authenticity", "Mixed shapes", "High contrast"], "solution": "Combine sharp (0px) and rounded (8-16px) corners. Use sharp for structural elements, rounded for interactive. Creates distinctive brutalist aesthetic. Bold borders.", "code_example": "/* Brutalist Mixed Radius */\n:root {\n --radius-sharp: 0;\n --radius-brutal: 16px;\n}\n.brutalist-container {\n border: 3px solid #000;\n border-radius: var(--radius-sharp);\n box-shadow: 8px 8px 0 #000;\n}\n.brutalist-button {\n border: 3px solid #000;\n border-radius: var(--radius-brutal);\n background: #FF0;\n box-shadow: 4px 4px 0 #000;\n transition: all 0.1s;\n}\n.brutalist-button:active {\n transform: translate(4px, 4px);\n box-shadow: 0 0 0 #000;\n}", "accessibility_notes": "Brutalist design can be overwhelming. Ensure content remains readable. Provide clear focus states. High contrast benefits accessibility."}
{"category": "Layout Patterns - Responsive Grids", "scenario": "12-column CSS Grid layout with auto-fit and minmax", "principles_applied": ["Flexible grid", "Auto-layout", "Responsive without media queries", "Grid gaps"], "solution": "12-column grid using repeat(12, 1fr). Use minmax() for responsive columns without breakpoints. Grid gap for spacing. Span columns with grid-column.", "code_example": "/* 12-Column Grid System */\n:root {\n --grid-columns: 12;\n --grid-gap: 24px;\n --container-max: 1200px;\n}\n.grid-container {\n display: grid;\n grid-template-columns: repeat(var(--grid-columns), 1fr);\n gap: var(--grid-gap);\n max-width: var(--container-max);\n margin: 0 auto;\n padding: 0 var(--grid-gap);\n}\n.col-span-12 { grid-column: span 12; }\n.col-span-6 { grid-column: span 6; }\n.col-span-4 { grid-column: span 4; }\n.col-span-3 { grid-column: span 3; }\n/* Auto-fit responsive cards */\n.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: var(--grid-gap);\n}", "accessibility_notes": "Grid layout should maintain reading order. Use logical properties for RTL support. Ensure grid doesn't create orphaned content on mobile."}
{"category": "Layout Patterns - Responsive Grids", "scenario": "Fluid container query-based layout", "principles_applied": ["Container queries", "Component responsiveness", "Context-aware", "Modern CSS"], "solution": "Use @container for component-level responsiveness. Components adapt to their container, not viewport. More modular and reusable.", "code_example": "/* Container Query Layout */\n.card-container {\n container-type: inline-size;\n}\n.card {\n padding: 16px;\n}\n@container (max-width: 400px) {\n .card {\n padding: 12px;\n }\n .card h3 {\n font-size: 1.25rem;\n }\n}\n@container (min-width: 600px) {\n .card {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n}\n/* Parent with container context */\n.sidebar {\n container-name: sidebar;\n}", "accessibility_notes": "Container queries are cutting-edge. Provide fallbacks. Test with text zoom. Ensure responsive behavior doesn't hide content."}
{"category": "Layout Patterns - Responsive Grids", "scenario": "Masonry-style uneven grid for image gallery", "principles_applied": ["Masonry layout", "Optimal space use", "Visual interest", "Card-based"], "solution": "CSS columns or grid with dense packing. Creates Pinterest-style layout. Items span different heights. Efficient space utilization.", "code_example": "/* Masonry Grid with CSS Columns */\n.masonry {\n column-count: 4;\n column-gap: 16px;\n}\n.masonry-item {\n break-inside: avoid;\n margin-bottom: 16px;\n}\n@media (max-width: 1200px) {\n .masonry { column-count: 3; }\n}\n@media (max-width: 768px) {\n .masonry { column-count: 2; }\n}\n@media (max-width: 480px) {\n .masonry { column-count: 1; }\n}\n/* Alternative: CSS Grid with dense packing */\n.masonry-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n grid-auto-flow: dense;\n gap: 16px;\n}", "accessibility_notes": "Masonry layouts can be challenging for screen readers. Maintain logical reading order. Ensure focus order matches visual order when possible."}
{"category": "Layout Patterns - Responsive Grids", "scenario": "Bento box grid for dashboard widgets", "principles_applied": ["Grid template areas", "Widget hierarchy", "Flexible arrangement", "Dashboard UX"], "solution": "CSS Grid with grid-template-areas. Named areas for semantic layout. Easily rearrange. Different spanning for importance-based sizing.", "code_example": "/* Bento Box Grid */\n.bento-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: repeat(3, minmax(180px, auto));\n gap: 20px;\n grid-template-areas:\n \"header header header stats\"\n \"main main sidebar sidebar\"\n \"main main footer footer\";\n}\n.widget-header { grid-area: header; }\n.widget-main { grid-area: main; }\n.widget-sidebar { grid-area: sidebar; }\n.widget-stats { grid-area: stats; }\n.widget-footer { grid-area: footer; }\n@media (max-width: 768px) {\n .bento-grid {\n grid-template-columns: 1fr;\n grid-template-areas:\n \"header\"\n \"stats\"\n \"main\"\n \"sidebar\"\n \"footer\";\n }\n}", "accessibility_notes": "Named grid areas improve code maintainability. Ensure widgets can be reordered without breaking screen reader flow. Use ARIA landmarks appropriately."}
{"category": "Layout Patterns - Dashboard Layouts", "scenario": "Classic sidebar navigation dashboard", "principles_applied": ["Persistent navigation", "Clear hierarchy", "Scanable content", "Progressive disclosure"], "solution": "Fixed left sidebar (240-280px) with navigation. Main content area with max-width. Top bar for search, profile, notifications. Collapsible sidebar on mobile.", "code_example": "/* Sidebar Dashboard Layout */\n.dashboard-layout {\n display: grid;\n grid-template-columns: 260px 1fr;\n grid-template-rows: 64px 1fr;\n min-height: 100vh;\n}\n.sidebar {\n grid-row: 1 / -1;\n background: #1A202C;\n color: white;\n padding: 20px 0;\n}\n.top-bar {\n grid-column: 2;\n background: white;\n border-bottom: 1px solid #E2E8F0;\n padding: 0 24px;\n}\n.main-content {\n grid-column: 2;\n padding: 24px;\n}\n@media (max-width: 768px) {\n .dashboard-layout {\n grid-template-columns: 1fr;\n }\n .sidebar {\n position: fixed;\n left: -260px;\n transition: left 0.3s;\n }\n .sidebar.open {\n left: 0;\n }\n}", "accessibility_notes": "Sidebar should be toggleable with keyboard. Use landmark roles (nav, main). Ensure focus trap in mobile menu. Skip to content link."}
{"category": "Layout Patterns - Dashboard Layouts", "scenario": "Top navigation dashboard with mega menu", "principles_applied": ["Horizontal navigation", "Mega menu organization", "Content-first", "Maximum width for content"], "solution": "Fixed top bar with primary navigation. Mega menus for dropdowns. Full-width content area. Breadcrumb for location. Search prominent in header.", "code_example": "/* Top Navigation Dashboard */\n.top-nav-dashboard {\n display: grid;\n grid-template-rows: 64px 1fr;\n min-height: 100vh;\n}\n.nav-bar {\n background: white;\n border-bottom: 2px solid #E2E8F0;\n padding: 0 32px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.mega-menu {\n position: absolute;\n top: 64px;\n left: 0;\n right: 0;\n background: white;\n border-bottom: 1px solid #E2E8F0;\n padding: 24px 32px;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n}\n.main-content {\n max-width: 1400px;\n margin: 0 auto;\n padding: 32px;\n}", "accessibility_notes": "Mega menus need proper ARIA attributes. Ensure keyboard navigation works. Escape key closes menu. Focus management is critical."}
{"category": "Layout Patterns - Dashboard Layouts", "scenario": "Bento grid analytics dashboard", "principles_applied": ["Widget-based", "Visual hierarchy", "Data density", "Glanceable metrics"], "solution": "CSS Grid bento layout. Widgets of varying sizes based on importance. Key metrics large (2x2). Charts medium (2x1). Lists small (1x1). Responsive reflow.", "code_example": "/* Bento Analytics Dashboard */\n.analytics-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-auto-rows: minmax(180px, auto);\n gap: 20px;\n padding: 20px;\n}\n.widget-kpi {\n grid-column: span 1;\n grid-row: span 1;\n}\n.widget-kpi-large {\n grid-column: span 2;\n grid-row: span 2;\n}\n.widget-chart {\n grid-column: span 2;\n grid-row: span 1;\n}\n.widget-list {\n grid-column: span 1;\n grid-row: span 2;\n}\n@media (max-width: 1024px) {\n .analytics-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@media (max-width: 640px) {\n .analytics-grid {\n grid-template-columns: 1fr;\n }\n .widget-kpi-large,\n .widget-chart,\n .widget-list {\n grid-column: span 1;\n grid-row: span 1;\n }\n}", "accessibility_notes": "Grid reordering can confuse screen readers. Maintain logical DOM order. Use aria-label for widgets. Ensure data is available in text format."}
{"category": "Layout Patterns - Dashboard Layouts", "scenario": "Multi-tab dashboard with view switching", "principles_applied": ["Tab organization", "View switching", "Context preservation", "Progressive loading"], "solution": "Horizontal tabs for major views. Sidebar for filtering. Content area switches without page reload. Maintain state when switching. Lazy load heavy content.", "code_example": "/* Multi-Tab Dashboard */\n.tab-dashboard {\n display: flex;\n flex-direction: column;\n height: 100vh;\n}\n.tabs-header {\n background: white;\n border-bottom: 1px solid #E2E8F0;\n padding: 0 24px;\n}\n.tab-list {\n display: flex;\n gap: 4px;\n list-style: none;\n}\n.tab-button {\n padding: 12px 20px;\n border: none;\n background: transparent;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n}\n.tab-button.active {\n border-bottom-color: #4F46E5;\n color: #4F46E5;\n}\n.tab-panel {\n display: none;\n flex: 1;\n overflow-y: auto;\n}\n.tab-panel.active {\n display: block;\n}", "accessibility_notes": "Use role=tablist, role=tab, role=tabpanel. Arrow key navigation. Auto-activate or manual activate options. Maintain focus on tab switch."}
{"category": "Layout Patterns - Landing Pages", "scenario": "Product-focused hero with feature grid", "principles_applied": ["Value proposition first", "Social proof", "Feature benefits", "Clear CTA"], "solution": "Full-width hero with headline, subhead, CTA, product image. 3-column feature grid below. Social proof section. Testimonials. Final CTA. Sticky header for navigation.", "code_example": "/* Product Landing Page */\n.landing-hero {\n min-height: 90vh;\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n gap: 64px;\n padding: 0 10%;\n}\n.hero-content h1 {\n font-size: clamp(2.5rem, 5vw, 4rem);\n line-height: 1.1;\n margin-bottom: 24px;\n}\n.hero-content p {\n font-size: 1.25rem;\n margin-bottom: 32px;\n max-width: 600px;\n}\n.cta-group {\n display: flex;\n gap: 16px;\n}\n.features-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 32px;\n padding: 80px 10%;\n}\n@media (max-width: 768px) {\n .landing-hero {\n grid-template-columns: 1fr;\n text-align: center;\n }\n .features-grid {\n grid-template-columns: 1fr;\n }\n}", "accessibility_notes": "Skip link to main content. Semantic heading hierarchy (one h1). Alt text for hero image. CTA buttons have clear purpose."}
{"category": "Layout Patterns - Landing Pages", "scenario": "Split-screen lead generation landing page", "principles_applied": ["Form prominence", "Value proposition", "Minimal distraction", "Trust signals"], "solution": "50/50 split: left side value proposition, right side form. Sticky form on desktop. Benefits list. Trust badges below form. Clean, focused design.", "code_example": "/* Split-Screen Landing Page */\n.split-landing {\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: 100vh;\n}\n.value-prop {\n padding: 80px 10%;\n background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);\n color: white;\n}\n.form-section {\n padding: 80px 10%;\n display: flex;\n align-items: center;\n background: white;\n}\n.lead-form {\n width: 100%;\n max-width: 480px;\n}\n.benefit-list {\n list-style: none;\n margin: 32px 0;\n}\n.benefit-list li {\n padding: 12px 0;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n@media (max-width: 768px) {\n .split-landing {\n grid-template-columns: 1fr;\n }\n}", "accessibility_notes": "Form should have clear labels and error messages. Trust badges should have alt text. Contrast ratio on gradient background. Form validation."}
{"category": "Layout Patterns - Landing Pages", "scenario": "Long-scroll storytelling landing page", "principles_applied": ["Narrative flow", "Scroll progression", "Visual breaks", "Progressive disclosure"], "solution": "Single column, full-width sections. Each section tells part of story. Alternating layouts (text left/image right, then reverse). Sticky navigation showing progress. Scroll-triggered animations.", "code_example": "/* Storytelling Landing Page */\n.story-section {\n min-height: 100vh;\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n gap: 80px;\n padding: 80px 10%;\n}\n.story-section:nth-child(even) {\n direction: rtl;\n}\n.story-section:nth-child(even) > * {\n direction: ltr;\n}\n.section-number {\n font-size: 8rem;\n font-weight: 700;\n color: #E2E8F0;\n position: absolute;\n top: -40px;\n left: -20px;\n z-index: -1;\n}\n.progress-nav {\n position: fixed;\n right: 32px;\n top: 50%;\n transform: translateY(-50%);\n}\n.progress-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #CBD5E0;\n margin: 12px 0;\n}\n.progress-dot.active {\n background: #4F46E5;\n}", "accessibility_notes": "Scroll progress should be announced. Skip to section links. Respect prefers-reduced-motion for scroll animations. Semantic sections with headings."}
{"category": "Layout Patterns - Landing Pages", "scenario": "Video-first product demo landing page", "principles_applied": ["Visual demonstration", "Product in action", "Social proof", "Easy trial"], "solution": "Hero with autoplay muted video preview. Large play button to launch full demo. Features below with mini video clips. Comparison section. Pricing with trial CTA.", "code_example": "/* Video-First Landing Page */\n.video-hero {\n position: relative;\n height: 100vh;\n overflow: hidden;\n}\n.video-background {\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.video-overlay {\n position: absolute;\n inset: 0;\n background: rgba(0,0,0,0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.play-button {\n width: 120px;\n height: 120px;\n border-radius: 50%;\n background: rgba(255,255,255,0.9);\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.3s;\n}\n.play-button:hover {\n transform: scale(1.1);\n}\n.feature-videos {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n padding: 80px 10%;\n}", "accessibility_notes": "Video should have captions and transcripts. Autoplay with pause button. Audio shouldn't start automatically. Keyboard controls for video player."}
{"category": "Layout Patterns - E-commerce", "scenario": "Product grid with filtering and sorting", "principles_applied": ["Scannability", "Filter hierarchy", "Visual comparison", "Load more/pagination"], "solution": "Sidebar with filters (category, price, color, size). Main area product grid (3-4 columns). Sort dropdown at top. Filter count badges. Clear all filters button.", "code_example": "/* E-commerce Product Grid */\n.ecommerce-layout {\n display: grid;\n grid-template-columns: 280px 1fr;\n gap: 32px;\n padding: 32px;\n}\n.filters-sidebar {\n position: sticky;\n top: 32px;\n height: fit-content;\n}\n.filter-group {\n margin-bottom: 24px;\n}\n.filter-header {\n font-weight: 600;\n margin-bottom: 12px;\n}\n.product-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 24px;\n}\n.product-card {\n display: flex;\n flex-direction: column;\n}\n.sort-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 24px;\n}\n@media (max-width: 768px) {\n .ecommerce-layout {\n grid-template-columns: 1fr;\n }\n .filters-sidebar {\n display: none;\n }\n}", "accessibility_notes": "Filters should be keyboard accessible. Clear filter states. Use form controls for filters. Product cards need descriptive alt text. Load more should be a button."}
{"category": "Layout Patterns - E-commerce", "scenario": "Product detail page with gallery and purchase options", "principles_applied": ["Product focus", "Image gallery", "Clear pricing", "Purchase prominence"], "solution": "Left: image gallery with thumbnails. Right: product info, price, variants, add to cart. Below: description, specifications, reviews. Sticky purchase box on scroll.", "code_example": "/* Product Detail Page */\n.pdp-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 64px;\n max-width: 1200px;\n margin: 0 auto;\n padding: 32px;\n}\n.product-gallery {\n position: sticky;\n top: 32px;\n height: fit-content;\n}\n.main-image {\n width: 100%;\n aspect-ratio: 1;\n object-fit: cover;\n border-radius: 8px;\n}\n.thumbnail-strip {\n display: flex;\n gap: 12px;\n margin-top: 16px;\n}\n.thumbnail {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-radius: 4px;\n cursor: pointer;\n}\n.purchase-box {\n position: sticky;\n top: 32px;\n height: fit-content;\n}\n.variant-selector {\n display: flex;\n gap: 12px;\n margin: 16px 0;\n}\n@media (max-width: 768px) {\n .pdp-container {\n grid-template-columns: 1fr;\n }\n}", "accessibility_notes": "Image gallery should be keyboard navigable. Alt text for all images. Color swatches need labels. Size buttons should indicate selection. Form validation for add to cart."}
{"category": "Layout Patterns - E-commerce", "scenario": "Shopping cart with quantity controls and cross-sells", "principles_applied": ["Edit convenience", "Cost clarity", "Cross-selling", "Checkout flow"], "solution": "List of cart items with thumbnail, details, quantity stepper, remove button. Order summary with subtotal, shipping, total. Cross-sell suggestions below. Sticky checkout button.", "code_example": "/* Shopping Cart */\n.cart-layout {\n display: grid;\n grid-template-columns: 1fr 380px;\n gap: 32px;\n max-width: 1200px;\n margin: 0 auto;\n padding: 32px;\n}\n.cart-items {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n.cart-item {\n display: grid;\n grid-template-columns: 100px 1fr auto;\n gap: 16px;\n padding: 16px;\n border: 1px solid #E2E8F0;\n border-radius: 8px;\n}\n.quantity-stepper {\n display: flex;\n align-items: center;\n border: 1px solid #E2E8F0;\n border-radius: 4px;\n}\n.order-summary {\n position: sticky;\n top: 32px;\n height: fit-content;\n padding: 24px;\n background: #F7FAFC;\n border-radius: 8px;\n}\n.summary-row {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n}", "accessibility_notes": "Quantity controls should have min/max. Remove buttons need confirmation. Price updates announced. Cross-sells should be clearly separated. Form validation before checkout."}
{"category": "Layout Patterns - E-commerce", "scenario": "Multi-step checkout with progress indicator", "principles_applied": ["Progressive disclosure", "Error prevention", "Clear progress", "Guest checkout option"], "solution": "3-4 steps: Shipping, Billing, Review, Confirm. Progress bar at top. Each step has clear heading. Back/next buttons. Guest checkout option. Order summary sidebar.", "code_example": "/* Multi-Step Checkout */\n.checkout-container {\n display: grid;\n grid-template-columns: 1fr 380px;\n gap: 32px;\n max-width: 1000px;\n margin: 0 auto;\n padding: 32px;\n}\n.progress-indicator {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n margin-bottom: 32px;\n}\n.progress-step {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n.step-number {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: #E2E8F0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n}\n.progress-step.completed .step-number {\n background: #48BB78;\n color: white;\n}\n.progress-step.active .step-number {\n background: #4F46E5;\n color: white;\n}\n.checkout-form {\n display: none;\n}\n.checkout-form.active {\n display: block;\n}", "accessibility_notes": "Each step should have heading. Progress announced to screen readers. Form validation per step. Keyboard navigation through steps. Save for later option."}
{"category": "Layout Patterns - Form Layouts", "scenario": "Single column form with floating labels", "principles_applied": ["Label clarity", "Input grouping", "Validation feedback", "Accessible form controls"], "solution": "Single column, left-aligned labels. Floating labels move up on focus/input. Inline validation messages. Helper text below inputs. Primary/secondary action buttons.", "code_example": "/* Single Column Form with Floating Labels */\n.form-container {\n max-width: 480px;\n margin: 0 auto;\n padding: 32px;\n}\n.form-group {\n position: relative;\n margin-bottom: 24px;\n}\n.floating-label {\n position: absolute;\n left: 16px;\n top: 16px;\n color: #718096;\n pointer-events: none;\n transition: 0.2s;\n}\n.form-input:focus + .floating-label,\n.form-input:not(:placeholder-shown) + .floating-label {\n top: -8px;\n left: 12px;\n font-size: 12px;\n background: white;\n padding: 0 4px;\n}\n.form-input {\n width: 100%;\n padding: 16px;\n border: 2px solid #E2E8F0;\n border-radius: 8px;\n font-size: 16px;\n}\n.form-input:focus {\n border-color: #4F46E5;\n outline: none;\n}\n.error-message {\n color: #E53E3E;\n font-size: 14px;\n margin-top: 4px;\n}", "accessibility_notes": "Labels must be programmatically associated. Validation errors announced. Required fields indicated. Focus visible on all inputs. Error messages linked via aria-describedby."}
{"category": "Layout Patterns - Form Layouts", "scenario": "Multi-step form with progress and confirmation", "principles_applied": ["Chunking information", "Progress indication", "Save and continue", "Step validation"], "solution": "Break complex form into 3-5 logical steps. Show progress indicator. Validate each step before proceeding. Allow saving progress. Show confirmation summary.", "code_example": "/* Multi-Step Form */\n.multi-step-form {\n max-width: 640px;\n margin: 0 auto;\n}\n.steps-nav {\n display: flex;\n justify-content: space-between;\n margin-bottom: 32px;\n position: relative;\n}\n.steps-nav::after {\n content: '';\n position: absolute;\n top: 20px;\n left: 0;\n right: 0;\n height: 2px;\n background: #E2E8F0;\n}\n.step-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n position: relative;\n z-index: 1;\n}\n.step-circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: white;\n border: 2px solid #E2E8F0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n}\n.form-step {\n display: none;\n}\n.form-step.active {\n display: block;\n animation: fadeIn 0.3s;\n}\n.step-actions {\n display: flex;\n justify-content: space-between;\n margin-top: 32px;\n}", "accessibility_notes": "Use role=form with aria-labelledby. Each step has heading. Focus management between steps. Progress announced. Save progress explicitly. Review step before submit."}
{"category": "Layout Patterns - Form Layouts", "scenario": "Inline validation form with real-time feedback", "principles_applied": ["Immediate feedback", "Error prevention", "Success confirmation", "Clear requirements"], "solution": "Validate on blur or after input. Show success icon for valid fields. Inline error messages below field. Character counter for limited fields. Password strength indicator.", "code_example": "/* Inline Validation Form */\n.form-group {\n position: relative;\n margin-bottom: 20px;\n}\n.input-wrapper {\n position: relative;\n}\n.form-input {\n width: 100%;\n padding: 12px 40px 12px 16px;\n border: 2px solid #E2E8F0;\n border-radius: 6px;\n}\n.form-input.valid {\n border-color: #48BB78;\n}\n.form-input.invalid {\n border-color: #E53E3E;\n}\n.validation-icon {\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n}\n.validation-message {\n font-size: 14px;\n margin-top: 4px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.validation-message.success {\n color: #48BB78;\n}\n.validation-message.error {\n color: #E53E3E;\n}\n.character-count {\n text-align: right;\n font-size: 12px;\n color: #718096;\n margin-top: 4px;\n}", "accessibility_notes": "Use aria-invalid and aria-describedby. Don't validate too early (respect user flow). Error messages specific and actionable. Success states not too prominent. Respect prefers-reduced-motion."}
{"category": "Layout Patterns - Form Layouts", "scenario": "Complex form with conditional logic and sections", "principles_applied": ["Logical grouping", "Conditional fields", "Section disclosure", "Form hierarchy"], "solution": "Group related fields in fieldsets with legends. Show/hide fields based on previous answers. Use expandable sections for optional info. Clear visual hierarchy.", "code_example": "/* Complex Conditional Form */\n.form-section {\n margin-bottom: 32px;\n}\n.fieldset {\n border: none;\n padding: 0;\n margin: 0;\n}\n.legend {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 16px;\n}\n.conditional-fields {\n display: none;\n margin-top: 16px;\n padding-left: 20px;\n border-left: 3px solid #4F46E5;\n}\n.conditional-fields.visible {\n display: block;\n animation: slideDown 0.3s;\n}\n.collapsible-section {\n border: 1px solid #E2E8F0;\n border-radius: 8px;\n margin-bottom: 16px;\n}\n.section-header {\n padding: 16px;\n background: #F7FAFC;\n font-weight: 600;\n cursor: pointer;\n}\n.section-content {\n display: none;\n padding: 16px;\n}\n.section-content.expanded {\n display: block;\n}", "accessibility_notes": "Use fieldset/legend for grouping. aria-expanded for collapsible sections. aria-controls for conditional fields. Focus management when showing/hiding. Keyboard navigation for all controls."}
{"category": "Component Design - Buttons", "scenario": "Complete button system with variants and states", "principles_applied": ["Visual hierarchy", "State feedback", "Accessibility", "Consistent sizing"], "solution": "Primary, secondary, tertiary, ghost buttons. Hover, active, focus, disabled states. Loading spinner. Icon buttons. Sizes: sm, md, lg.", "code_example": "/* Button System */\n:root {\n --btn-primary: #4F46E5;\n --btn-primary-hover: #4338CA;\n --btn-secondary: #E2E8F0;\n --btn-ghost: transparent;\n}\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 24px;\n border-radius: 8px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n border: none;\n}\n.btn-primary {\n background: var(--btn-primary);\n color: white;\n}\n.btn-primary:hover {\n background: var(--btn-primary-hover);\n}\n.btn-secondary {\n background: var(--btn-secondary);\n color: #1A202C;\n}\n.btn-ghost {\n background: var(--btn-ghost);\n color: #4F46E5;\n border: 2px solid #E2E8F0;\n}\n.btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn:focus-visible {\n outline: 3px solid #4F46E5;\n outline-offset: 2px;\n}\n.btn-sm { padding: 8px 16px; font-size: 14px; }\n.btn-lg { padding: 16px 32px; font-size: 18px; }", "accessibility_notes": "Buttons must have accessible name. Focus indicator clearly visible. Disabled state properly implemented. Loading state announced. Icon buttons have aria-label."}
{"category": "Component Design - Cards", "scenario": "Content card with image, text, and actions", "principles_applied": ["Content hierarchy", "Scanability", "Action clarity", "Visual boundaries"], "solution": "Card with optional image, category tag, title, description, metadata, action buttons. Consistent padding and borders. Hover effect for interactivity.", "code_example": "/* Content Card */\n.card {\n background: white;\n border: 1px solid #E2E8F0;\n border-radius: 12px;\n overflow: hidden;\n transition: box-shadow 0.3s, transform 0.3s;\n}\n.card:hover {\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\n transform: translateY(-2px);\n}\n.card-image {\n width: 100%;\n height: 200px;\n object-fit: cover;\n}\n.card-content {\n padding: 20px;\n}\n.card-category {\n display: inline-block;\n padding: 4px 12px;\n background: #EBF8FF;\n color: #4299E1;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n margin-bottom: 12px;\n}\n.card-title {\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 8px;\n}\n.card-description {\n color: #718096;\n line-height: 1.6;\n margin-bottom: 16px;\n}\n.card-actions {\n display: flex;\n gap: 8px;\n}\n.card-meta {\n display: flex;\n gap: 16px;\n font-size: 14px;\n color: #A0AEC0;\n margin-top: 16px;\n}", "accessibility_notes": "Cards should be semantic article or div with role=article. Images have alt text. Links have descriptive text. Hover states not only indication of interactivity."}
{"category": "Component Design - Navigation", "scenario": "Responsive top navigation with mobile menu", "principles_applied": ["Clear branding", "Menu hierarchy", "Mobile adaptation", "Search prominence"], "solution": "Logo left, navigation center, actions right. Desktop: horizontal links. Mobile: hamburger menu with full-screen overlay. Sticky on scroll. Search in header.", "code_example": "/* Responsive Navigation */\n.navbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n background: white;\n border-bottom: 1px solid #E2E8F0;\n position: sticky;\n top: 0;\n z-index: 100;\n}\n.nav-links {\n display: flex;\n gap: 32px;\n list-style: none;\n}\n.nav-link {\n color: #4A5568;\n text-decoration: none;\n font-weight: 500;\n padding: 8px 0;\n border-bottom: 2px solid transparent;\n}\n.nav-link:hover,\n.nav-link.active {\n color: #4F46E5;\n border-bottom-color: #4F46E5;\n}\n.nav-actions {\n display: flex;\n gap: 16px;\n}\n.menu-toggle {\n display: none;\n background: none;\n border: none;\n font-size: 24px;\n cursor: pointer;\n}\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n .menu-toggle {\n display: block;\n }\n}", "accessibility_notes": "Use nav element with aria-label. Menu toggle has aria-expanded. Mobile menu trap focus. Skip navigation link. Current page indicated."}
{"category": "Component Design - Modals", "scenario": "Accessible modal dialog with overlay and focus trap", "principles_applied": ["Focus management", "Backdrop dismissal", "Escape key", "ARIA attributes"], "solution": "Modal with backdrop overlay. Close button top-right. Focus trap inside modal. Return focus on close. Escape key closes. Click outside closes.", "code_example": "/* Accessible Modal */\n.modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n.modal {\n background: white;\n border-radius: 12px;\n max-width: 600px;\n width: 90%;\n max-height: 90vh;\n overflow-y: auto;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n}\n.modal-header {\n padding: 20px 24px;\n border-bottom: 1px solid #E2E8F0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.modal-title {\n font-size: 20px;\n font-weight: 700;\n}\n.modal-close {\n background: none;\n border: none;\n font-size: 24px;\n cursor: pointer;\n color: #A0AEC0;\n}\n.modal-body {\n padding: 24px;\n}\n.modal-footer {\n padding: 16px 24px;\n border-top: 1px solid #E2E8F0;\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n}", "accessibility_notes": "Use role=dialog with aria-modal=true. aria-labelledby points to title. Focus trap implemented. Scroll body locked. Focus returns to trigger."}
{"category": "Component Design - Tables", "scenario": "Data table with sort, filter, and pagination", "principles_applied": ["Data density", "Sort indication", "Row selection", "Responsive behavior"], "solution": "Sortable columns with indicators. Row hover effect. Checkbox for selection. Pagination at bottom. Responsive: card view on mobile. Sticky header.", "code_example": "/* Data Table */\n.table-container {\n overflow-x: auto;\n}\n.data-table {\n width: 100%;\n border-collapse: collapse;\n}\n.table-header {\n background: #F7FAFC;\n position: sticky;\n top: 0;\n}\n.table-header th {\n padding: 12px 16px;\n text-align: left;\n font-weight: 600;\n cursor: pointer;\n user-select: none;\n}\n.sort-indicator {\n margin-left: 8px;\n opacity: 0.3;\n}\n.table-header th.sorted .sort-indicator {\n opacity: 1;\n}\n.table-row {\n border-bottom: 1px solid #E2E8F0;\n}\n.table-row:hover {\n background: #F7FAFC;\n}\n.table-cell {\n padding: 12px 16px;\n}\n.row-checkbox {\n width: 40px;\n}\n.pagination {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n}\n@media (max-width: 768px) {\n .data-table,\n .table-header,\n .table-row,\n .table-cell {\n display: block;\n }\n .table-row {\n border: 1px solid #E2E8F0;\n border-radius: 8px;\n margin-bottom: 16px;\n padding: 16px;\n }\n}", "accessibility_notes": "Use table headers properly. Sort announced to screen readers. Selection tracked via aria-selected. Pagination links descriptive. Table caption provided."}
{"category": "Component Design - Form Inputs", "scenario": "Text input with validation states and helper text", "principles_applied": ["Clear labeling", "Validation feedback", "Helper context", "Error prevention"], "solution": "Label above input. Helper text below. Error message appears below input on invalid. Success indicator when valid. Focus ring visible.", "code_example": "/* Text Input Component */\n.input-group {\n margin-bottom: 16px;\n}\n.input-label {\n display: block;\n font-weight: 600;\n margin-bottom: 6px;\n color: #2D3748;\n}\n.input-label .required {\n color: #E53E3E;\n margin-left: 2px;\n}\n.text-input {\n width: 100%;\n padding: 10px 12px;\n border: 2px solid #E2E8F0;\n border-radius: 6px;\n font-size: 16px;\n}\n.text-input:focus {\n border-color: #4F46E5;\n outline: none;\n box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n.text-input.error {\n border-color: #E53E3E;\n}\n.text-input.success {\n border-color: #48BB78;\n}\n.helper-text {\n font-size: 14px;\n color: #718096;\n margin-top: 4px;\n}\n.error-message {\n font-size: 14px;\n color: #E53E3E;\n margin-top: 4px;\n display: flex;\n align-items: center;\n gap: 4px;\n}", "accessibility_notes": "Label for attribute matches input id. aria-describedby for helper text. aria-invalid for errors. aria-describedby links error message. Required attribute used."}
{"category": "Component Design - Form Inputs", "scenario": "Select dropdown with search and clear", "principles_applied": ["Selection clarity", "Search capability", "Clear action", "Keyboard navigation"], "solution": "Custom select with searchable dropdown. Clear button when value selected. Keyboard navigation through options. Grouped options support. Multi-select variant.", "code_example": "/* Custom Select Component */\n.select-wrapper {\n position: relative;\n}\n.select-trigger {\n width: 100%;\n padding: 10px 36px 10px 12px;\n border: 2px solid #E2E8F0;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.select-trigger::after {\n content: '▼';\n font-size: 10px;\n margin-left: 8px;\n}\n.select-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n border: 1px solid #E2E8F0;\n border-radius: 6px;\n margin-top: 4px;\n max-height: 300px;\n overflow-y: auto;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n z-index: 10;\n}\n.select-search {\n padding: 8px;\n border-bottom: 1px solid #E2E8F0;\n}\n.select-search input {\n width: 100%;\n padding: 6px 8px;\n border: 1px solid #E2E8F0;\n border-radius: 4px;\n}\n.select-option {\n padding: 10px 12px;\n cursor: pointer;\n}\n.select-option:hover,\n.select-option.highlighted {\n background: #F7FAFC;\n}\n.select-option.selected {\n background: #EBF8FF;\n color: #4299E1;\n}", "accessibility_notes": "Use native select when possible. Custom select needs role=combobox. aria-expanded for dropdown. Keyboard navigation implemented. Options properly labeled."}
{"category": "Component Design - Notifications", "scenario": "Toast notification system with variants", "principles_applied": ["Non-intrusive", "Clear messaging", "Actionable", "Auto-dismissal"], "solution": "Stackable toasts in corner. Info, success, warning, error variants. Auto-dismiss after 5s. Close button. Optional action button. Progress bar for time.", "code_example": "/* Toast Notifications */\n.toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 2000;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.toast {\n min-width: 320px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 10px 40px rgba(0,0,0,0.15);\n padding: 16px;\n display: flex;\n gap: 12px;\n animation: slideIn 0.3s;\n}\n.toast-icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n}\n.toast-content {\n flex: 1;\n}\n.toast-title {\n font-weight: 600;\n margin-bottom: 4px;\n}\n.toast-message {\n color: #718096;\n font-size: 14px;\n}\n.toast-close {\n background: none;\n border: none;\n cursor: pointer;\n color: #A0AEC0;\n}\n.toast.info { border-left: 4px solid #4299E1; }\n.toast.success { border-left: 4px solid #48BB78; }\n.toast.warning { border-left: 4px solid #ECC94B; }\n.toast.error { border-left: 4px solid #E53E3E; }\n.toast-progress {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3px;\n background: currentColor;\n animation: progress 5s linear;\n}", "accessibility_notes": "Use role=alert or role=status. aria-live region for dynamic toasts. Auto-dismiss with user control. Focus management for action buttons. Clear and concise messages."}
{"category": "Component Design - Loading States", "scenario": "Skeleton screen loading placeholders", "principles_applied": ["Perceived performance", "Content structure", "Animation subtlety", "Progressive loading"], "solution": "Gray placeholder boxes matching content structure. Shimmer animation from left to right. Different heights for text variants. Circular for avatars.", "code_example": "/* Skeleton Loading */\n.skeleton {\n background: #E2E8F0;\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n}\n.skeleton::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255,255,255,0.4),\n transparent\n );\n animation: shimmer 1.5s infinite;\n}\n@keyframes shimmer {\n 100% { left: 100%; }\n}\n.skeleton-text {\n height: 16px;\n margin-bottom: 8px;\n}\n.skeleton-text.title {\n height: 24px;\n width: 60%;\n margin-bottom: 16px;\n}\n.skeleton-text.paragraph {\n height: 14px;\n}\n.skeleton-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n}\n.skeleton-button {\n height: 40px;\n width: 120px;\n border-radius: 8px;\n}\n.skeleton-card {\n padding: 20px;\n border: 1px solid #E2E8F0;\n border-radius: 8px;\n}", "accessibility_notes": "Use aria-busy=true on container. aria-live for status updates. Respect prefers-reduced-motion. Screen readers announce loading state. Don't hide content behind skeletons too long."}
{"category": "Interaction Design - Hover States", "scenario": "Button hover effects with scale and shadow", "principles_applied": ["Feedback clarity", "Delight factor", "Performance", "Accessibility"], "solution": "Subtle scale (1.02-1.05) on hover. Shadow increases. Background darkens slightly. Transition 150-300ms. Focus state visible. Active state press effect.", "code_example": "/* Button Hover Effects */\n.button {\n padding: 12px 24px;\n border: none;\n border-radius: 8px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n transform: translateY(0);\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n.button:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 16px rgba(0,0,0,0.15);\n}\n.button:active {\n transform: translateY(0);\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.button:focus-visible {\n outline: 3px solid #4F46E5;\n outline-offset: 2px;\n}\n/* Icon button hover */\n.icon-button {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background: #F7FAFC;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n}\n.icon-button:hover {\n background: #E2E8F0;\n transform: rotate(15deg);\n}", "accessibility_notes": "Hover states not only indicator. Focus states always visible. Respects prefers-reduced-motion. Touch devices get :active state. Color contrast maintained."}
{"category": "Interaction Design - Dark Mode", "scenario": "System-aware dark mode with toggle", "principles_applied": ["Respect system preference", "User control", "Smooth transition", "Color adaptation"], "solution": "CSS custom properties for colors. prefers-color-scheme media query. Manual toggle with localStorage. Smooth color transition. Adjust shadows and borders for dark.", "code_example": "/* Dark Mode Implementation */\n:root {\n --bg-primary: #FFFFFF;\n --bg-secondary: #F7FAFC;\n --text-primary: #1A202C;\n --text-secondary: #718096;\n --border-color: #E2E8F0;\n --shadow: rgba(0,0,0,0.1);\n}\n[data-theme='dark'] {\n --bg-primary: #1A202C;\n --bg-secondary: #2D3748;\n --text-primary: #F7FAFC;\n --text-secondary: #A0AEC0;\n --border-color: #4A5568;\n --shadow: rgba(0,0,0,0.3);\n}\nbody {\n background: var(--bg-primary);\n color: var(--text-primary);\n transition: background 0.3s, color 0.3s;\n}\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme='light']) {\n --bg-primary: #1A202C;\n --bg-secondary: #2D3748;\n --text-primary: #F7FAFC;\n }\n}\n.theme-toggle {\n background: var(--bg-secondary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n}", "accessibility_notes": "Respect system preference by default. User choice persists. All colors have contrast in both modes. Images may need adjustment. Focus visible in both modes."}
{"category": "UX Principles - Accessibility", "scenario": "Keyboard navigation and focus management", "principles_applied": ["Keyboard accessibility", "Visible focus", "Logical order", "Skip links"], "solution": "All interactive elements keyboard accessible. Visible focus indicator (3:1 contrast). Tab order follows visual order. Skip navigation link. Focus trap in modals.", "code_example": "/* Keyboard Accessibility */\n/* Skip Navigation Link */\n.skip-link {\n position: absolute;\n top: -40px;\n left: 0;\n background: #4F46E5;\n color: white;\n padding: 8px 16px;\n text-decoration: none;\n z-index: 100;\n}\n.skip-link:focus {\n top: 0;\n}\n/* Focus Styles */\n:focus-visible {\n outline: 3px solid #4F46E5;\n outline-offset: 2px;\n}\n/* Remove outline only when using mouse */\n:focus:not(:focus-visible) {\n outline: none;\n}\n/* Focus Trap in Modal */\n.modal {\n display: none;\n}\n.modal.active {\n display: flex;\n}\n.focusable-elements {\n outline: 2px solid transparent;\n}\n.focusable-elements:focus {\n outline-color: #4F46E5;\n}", "accessibility_notes": "Test all functionality with keyboard only. Focus indicator always visible. Tab order logical. Skip links functional. Focus management in dynamic content."}
{"category": "UX Principles - Accessibility", "scenario": "Screen reader support with ARIA attributes", "principles_applied": ["Semantic HTML", "ARIA labels", "Live regions", "Landmarks"], "solution": "Use semantic HTML first. ARIA labels for unlabeled icons. aria-live for dynamic content. Landmarks for navigation. aria-describedby for additional context.", "code_example": "/* Screen Reader Support */\n\n\n\n Page Title
\n\n\n\n\n\n\n \n
\n\n\n Annual Report\n\n (PDF, 2.3MB)", "accessibility_notes": "Test with actual screen readers. Semantic HTML over ARIA when possible. aria-live used appropriately. Landmarks properly nested. Descriptive link text."}
{"category": "UX Principles - Accessibility", "scenario": "Color contrast and visual accessibility", "principles_applied": ["WCAG AA contrast", "Not color alone", "Text resize", "Focus visibility"], "solution": "4.5:1 for normal text, 3:1 for large text. Don't use color alone to convey info. Support 200% text resize. Focus indicators visible. Avoid low contrast placeholders.", "code_example": "/* Color Contrast */\n.text-primary {\n color: #1A202C; /* On white: 15.8:1 (AAA) */\n}\n.text-secondary {\n color: #4A5568; /* On white: 7.1:1 (AA) */\n}\n.link-color {\n color: #4F46E5; /* On white: 6.2:1 (AA) */\n}\n.error-color {\n color: #E53E3E; /* On white: 5.9:1 (AA) */\n}\n/* Success/Error States with Icons */\n.status-success {\n color: #48BB78;\n}\n.status-success::before {\n content: '✓ ';\n font-weight: bold;\n}\n.status-error {\n color: #E53E3E;\n}\n.status-error::before {\n content: '✕ ';\n font-weight: bold;\n}\n/* Text Resize Support */\nhtml {\n font-size: 16px;\n}\nbody {\n font-size: 1rem; /* Resizes with html */\n}\n@media (prefers-reduced-motion: reduce) {\n * {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n}", "accessibility_notes": "Test contrast with tools. Ensure patterns/icons work for colorblind users. Test with 200% zoom. Respect prefers-reduced-motion. Focus always visible."}
{"category": "UX Principles - Accessibility", "scenario": "Form accessibility with error handling", "principles_applied": ["Clear labels", "Error identification", "Inline validation", "Help context"], "solution": "Labels programmatically associated. Required fields indicated. Errors clearly identified and described. Helper text available. Form submission feedback.", "code_example": "/* Accessible Forms */\n\n