Pony-Alpha-2-Dataset-Training/datasets/11-ui-ux-design/ui-ux-design.jsonl

{"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<!-- Semantic Landmarks -->\n<header role='banner'>\n  <nav aria-label='Main'>\n    <ul>\n      <li><a href='/home' aria-current='page'>Home</a></li>\n      <li><a href='/about'>About</a></li>\n    </ul>\n  </nav>\n</header>\n<main role='main' aria-labelledby='page-title'>\n  <h1 id='page-title'>Page Title</h1>\n</main>\n<aside aria-label='Sidebar'>\n  <!-- Sidebar content -->\n</aside>\n<!-- Icon Buttons with Labels -->\n<button aria-label='Close dialog'>\n  <span aria-hidden='true'>×</span>\n</button>\n<!-- Live Regions -->\n<div aria-live='polite' aria-atomic='true'>\n  <!-- Status updates appear here -->\n</div>\n<!-- Descriptive Links -->\n<a href='/document.pdf' aria-describedby='pdf-info'>\n  Annual Report\n</a>\n<span id='pdf-info' class='sr-only'> (PDF, 2.3MB)</span>", "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<form novalidate>\n  <div class='form-group'>\n    <label for='email'>\n      Email Address\n      <span aria-hidden='true'>*</span>\n      <span class='sr-only'> (required)</span>\n    </label>\n    <input\n      type='email'\n      id='email'\n      name='email'\n      required\n      aria-required='true'\n      aria-describedby='email-hint email-error'\n      aria-invalid='false'\n    >\n    <span id='email-hint' class='helper-text'>\n      We'll never share your email\n    </span>\n    <span id='email-error' class='error-message' role='alert'>\n      Please enter a valid email address\n    </span>\n  </div>\n  <button type='submit'>Submit</button>\n</form>\n<!-- CSS States */\n.form-group {\n  margin-bottom: 16px;\n}\ninput[aria-invalid='true'] {\n  border-color: #E53E3E;\n}\n.error-message {\n  display: none;\n  color: #E53E3E;\n}\ninput[aria-invalid='true'] + .helper-text + .error-message {\n  display: block;\n}", "accessibility_notes": "Labels properly associated. Required fields indicated. Errors linked with aria-describedby. aria-invalid toggled. Submit button clear. Form validation accessible."}
{"category": "Design Styles - Glassmorphism", "scenario": "Glassmorphic card with frosted glass effect", "principles_applied": ["Background blur", "Transparency", "Border gloss", "Layered depth"], "solution": "Semi-transparent white with backdrop-filter blur. Thin border with slight transparency. White text shadow. Layered cards with varying opacity.", "code_example": "/* Glassmorphism Card */\n.glass-card {\n  background: rgba(255, 255, 255, 0.1);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 20px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n  padding: 32px;\n  color: white;\n}\n.glass-card h3 {\n  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}\n.glass-button {\n  background: rgba(255, 255, 255, 0.2);\n  backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  color: white;\n  padding: 12px 24px;\n  border-radius: 12px;\n}\n/* Dark background required for effect */\n.glass-container {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  min-height: 100vh;\n  padding: 40px;\n}", "accessibility_notes": "Glass effects reduce contrast. Ensure text contrast meets WCAG. Fallback for browsers without backdrop-filter. Test on various backgrounds. Don't overuse."}
{"category": "Design Styles - Neumorphism", "scenario": "Neumorphic soft UI controls", "principles_applied": ["Soft shadows", "Extruded forms", "Monochromatic", "Subtle depth"], "solution": "Dual shadows: light top-left, dark bottom-right. Matches background exactly. Convex for raised, concave for pressed. Very subtle contrast.", "code_example": "/* Neumorphism */\n:root {\n  --neu-bg: #e0e5ec;\n  --neu-light: #ffffff;\n  --neu-dark: #a3b1c6;\n}\nbody {\n  background: var(--neu-bg);\n}\n.neu-raised {\n  background: var(--neu-bg);\n  box-shadow:\n    9px 9px 16px var(--neu-dark),\n    -9px -9px 16px var(--neu-light);\n  border-radius: 20px;\n  padding: 20px;\n}\n.neu-pressed {\n  background: var(--neu-bg);\n  box-shadow:\n    inset 6px 6px 10px var(--neu-dark),\n    inset -6px -6px 10px var(--neu-light);\n  border-radius: 20px;\n}\n.neu-button {\n  background: var(--neu-bg);\n  box-shadow:\n    6px 6px 10px var(--neu-dark),\n    -6px -6px 10px var(--neu-light);\n  border: none;\n  border-radius: 10px;\n  padding: 12px 24px;\n}\n.neu-button:active {\n  box-shadow:\n    inset 4px 4px 8px var(--neu-dark),\n    inset -4px -4px 8px var(--neu-light);\n}", "accessibility_notes": "Low contrast can be inaccessible. Add borders or labels. Focus states critical. Avoid for essential interactive elements. Consider accessibility alternatives."}
{"category": "Design Styles - Brutalism", "scenario": "Brutalist design with bold borders and shadows", "principles_applied": ["Raw aesthetic", "High contrast", "Bold borders", "Offset shadows"], "solution": "Thick black borders (2-4px). Hard offset shadows. Bright, clashing colors. Raw, unpolished appearance. Large typography. Sharp edges.", "code_example": "/* Brutalism */\n.brutalist-container {\n  border: 4px solid #000;\n  box-shadow: 12px 12px 0 #000;\n  background: #FFFF00;\n  padding: 0;\n  margin: 40px;\n}\n.brutalist-header {\n  background: #FF0066;\n  color: white;\n  padding: 24px;\n  border-bottom: 4px solid #000;\n}\n.brutalist-button {\n  background: #00FFFF;\n  border: 3px solid #000;\n  color: #000;\n  padding: 16px 32px;\n  font-size: 18px;\n  font-weight: bold;\n  box-shadow: 6px 6px 0 #000;\n  cursor: pointer;\n  transition: all 0.1s;\n}\n.brutalist-button:hover {\n  transform: translate(-2px, -2px);\n  box-shadow: 8px 8px 0 #000;\n}\n.brutalist-button:active {\n  transform: translate(4px, 4px);\n  box-shadow: 0 0 0 #000;\n}", "accessibility_notes": "High contrast benefits accessibility. Bold borders help focus. Can be overwhelming. Ensure content remains readable. Clear visual hierarchy important."}
{"category": "Design Styles - Minimalism", "scenario": "Minimalist design with whitespace focus", "principles_applied": ["Less is more", "Whitespace emphasis", "Content focus", "Subtle interactions"], "solution": "Generous whitespace. Limited color palette (1-2 colors). Simple typography. Hidden until hover. No decorative elements. Content-first approach.", "code_example": "/* Minimalism */\n:root {\n  --bg: #FFFFFF;\n  --text: #1A1A1A;\n  --accent: #4A4A4A;\n  --spacing-unit: 8px;\n}\nbody {\n  background: var(--bg);\n  color: var(--text);\n  font-family: 'Inter', sans-serif;\n  line-height: 1.6;\n}\n.container {\n  max-width: 720px;\n  margin: 0 auto;\n  padding: calc(var(--spacing-unit) * 8);\n}\n.minimal-header {\n  margin-bottom: calc(var(--spacing-unit) * 12);\n}\n.minimal-h1 {\n  font-size: clamp(2rem, 4vw, 3rem);\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: calc(var(--spacing-unit) * 4);\n}\n.minimal-link {\n  color: var(--text);\n  text-decoration: none;\n  border-bottom: 1px solid var(--accent);\n  transition: border-color 0.2s;\n}\n.minimal-link:hover {\n  border-bottom-color: var(--text);\n}\n.minimal-button {\n  background: transparent;\n  border: 1px solid var(--text);\n  color: var(--text);\n  padding: 12px 24px;\n  transition: all 0.2s;\n}\n.minimal-button:hover {\n  background: var(--text);\n  color: var(--bg);\n}", "accessibility_notes": "Minimalism aids focus. Clear typography benefits readability. Ample whitespace reduces cognitive load. Ensure focus states visible. Don't sacrifice accessibility for aesthetics."}
{"category": "Design Styles - Claymorphism", "scenario": "Clay-like 3D elements with soft shadows", "principles_applied": ["Soft 3D", "Rounded forms", "Pastel colors", "Playful depth"], "solution": "Very rounded corners. Soft inner and outer shadows. Pastel color palette. Slightly inflated appearance. Floating effect.", "code_example": "/* Claymorphism */\n:root {\n  --clay-bg: #f0f0f3;\n  --clay-primary: #6C5CE7;\n  --clay-secondary: #00CEC9;\n}\n.clay-button {\n  background: var(--clay-primary);\n  border-radius: 30px;\n  padding: 16px 32px;\n  color: white;\n  border: none;\n  box-shadow:\n    inset 6px 6px 12px rgba(255,255,255,0.4),\n    inset -6px -6px 12px rgba(0,0,0,0.2),\n    8px 8px 16px rgba(0,0,0,0.2);\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.clay-button:hover {\n  box-shadow:\n    inset 4px 4px 8px rgba(255,255,255,0.4),\n    inset -4px -4px 8px rgba(0,0,0,0.2),\n    12px 12px 20px rgba(0,0,0,0.25);\n  transform: translateY(-2px);\n}\n.clay-card {\n  background: var(--clay-bg);\n  border-radius: 24px;\n  padding: 32px;\n  box-shadow:\n    12px 12px 24px rgba(0,0,0,0.15),\n    -12px -12px 24px rgba(255,255,255,0.8);\n}\n.clay-icon {\n  width: 64px;\n  height: 64px;\n  background: var(--clay-secondary);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow:\n    inset 4px 4px 8px rgba(255,255,255,0.5),\n    inset -4px -4px 8px rgba(0,0,0,0.1),\n    6px 6px 12px rgba(0,0,0,0.15);\n}", "accessibility_notes": "Soft shadows may reduce contrast. Ensure text is readable. Focus states critical on rounded elements. Don't overuse. Test with color blindness."}
{"category": "Design Styles - Flat Design", "scenario": "Flat design with solid colors and no gradients", "principles_applied": ["No gradients", "Solid colors", "Simple shapes", "Clear typography"], "solution": "Solid colors only. No shadows or gradients. Simple geometric shapes. Bold typography. High contrast. Clear iconography.", "code_example": "/* Flat Design */\n:root {\n  --primary: #3498db;\n  --secondary: #2ecc71;\n  --accent: #e74c3c;\n  --dark: #34495e;\n  --light: #ecf0f1;\n}\n.flat-button {\n  background: var(--primary);\n  color: white;\n  border: none;\n  border-radius: 4px;\n  padding: 12px 24px;\n  font-size: 16px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.flat-button:hover {\n  background: #2980b9;\n}\n.flat-button-secondary {\n  background: var(--secondary);\n  color: white;\n}\n.flat-card {\n  background: white;\n  border: 2px solid var(--light);\n  border-radius: 4px;\n  padding: 20px;\n}\n.flat-icon {\n  width: 48px;\n  height: 48px;\n  background: var(--accent);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n}", "accessibility_notes": "Flat design can be very accessible. Clear solid colors. Good contrast ratios. Focus states essential. Ensure depth through other means (borders, spacing)."}
{"category": "Design Styles - Skeuomorphism", "scenario": "Skeuomorphic UI with realistic textures", "principles_applied": ["Realistic textures", "Gradients", "Inner shadows", "Familiar metaphors"], "solution": "Realistic textures (wood, leather, metal). Complex gradients. Inner shadows for depth. Familiar object metaphors (switches, knobs). High detail.", "code_example": "/* Skeuomorphism */\n.skeuo-button {\n  background: linear-gradient(180deg, #6495ED 0%, #4169E1 50%, #0000CD 100%);\n  border: 1px solid #000080;\n  border-radius: 8px;\n  padding: 12px 24px;\n  color: white;\n  font-weight: bold;\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,0.4),\n    0 2px 4px rgba(0,0,0,0.4);\n  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);\n}\n.skeuo-button:active {\n  background: linear-gradient(180deg, #0000CD 0%, #4169E1 50%, #6495ED 100%);\n  box-shadow:\n    inset 0 2px 4px rgba(0,0,0,0.4);\n}\n.skeuo-panel {\n  background: linear-gradient(180deg, #8B7355 0%, #6B4423 100%);\n  border: 4px solid #3D2914;\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,0.2),\n    0 4px 8px rgba(0,0,0,0.4);\n}\n.skeuo-input {\n  background: linear-gradient(180deg, #1a1a1a 0%, #333 100%);\n  border: 2px inset #444;\n  border-radius: 4px;\n  padding: 8px 12px;\n  color: #0f0;\n  font-family: 'Courier New', monospace;\n  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);\n}", "accessibility_notes": "Can be dated and less accessible. Complex gradients may reduce readability. Focus states critical. Use sparingly. Consider modern alternatives. Test contrast thoroughly."}