freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.3

package/dist/assets/uiux/data/colors.csv

@@ -0,0 +1,193 @@
+No,Product Type,Primary,On Primary,Secondary,On Secondary,Accent,On Accent,Background,Foreground,Card,Card Foreground,Muted,Muted Foreground,Border,Destructive,On Destructive,Ring,Notes
+1,SaaS (General),#2563EB,#FFFFFF,#3B82F6,#000000,#EA580C,#000000,#F8FAFC,#1E293B,#FFFFFF,#1E293B,#E9EFF8,#475569,#E2E8F0,#DC2626,#FFFFFF,#2563EB,Trust blue + orange CTA contrast [Accent adjusted from #F97316]
+2,Micro SaaS,#6366F1,#000000,#818CF8,#0F172A,#059669,#000000,#F5F3FF,#1E1B4B,#FFFFFF,#1E1B4B,#EBEFF9,#475569,#E0E7FF,#DC2626,#FFFFFF,#6366F1,Indigo primary + emerald CTA [Accent adjusted from #10B981]
+3,E-commerce,#059669,#000000,#10B981,#0F172A,#EA580C,#000000,#ECFDF5,#064E3B,#FFFFFF,#064E3B,#E8F1F3,#475569,#A7F3D0,#DC2626,#FFFFFF,#059669,Success green + urgency orange [Accent adjusted from #F97316]
+4,E-commerce Luxury,#1C1917,#FFFFFF,#44403C,#FFFFFF,#A16207,#FFFFFF,#FAFAF9,#0C0A09,#FFFFFF,#0C0A09,#E8ECF0,#475569,#D6D3D1,#DC2626,#FFFFFF,#1C1917,Premium dark + gold accent [Accent adjusted from #CA8A04]
+5,B2B Service,#0F172A,#FFFFFF,#334155,#FFFFFF,#0369A1,#FFFFFF,#F8FAFC,#020617,#FFFFFF,#020617,#E8ECF1,#475569,#E2E8F0,#DC2626,#FFFFFF,#0F172A,Professional navy + blue CTA
+6,Financial Dashboard,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#22C55E,#0F172A,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#EF4444,#000000,#FFFFFF,Dark bg + green positive indicators
+7,Analytics Dashboard,#1E40AF,#FFFFFF,#3B82F6,#000000,#D97706,#000000,#F8FAFC,#1E3A8A,#FFFFFF,#1E3A8A,#E9EEF6,#475569,#DBEAFE,#DC2626,#FFFFFF,#1E40AF,Blue data + amber highlights [Accent adjusted from #F59E0B]
+8,Healthcare App,#0891B2,#000000,#22D3EE,#0F172A,#059669,#000000,#ECFEFF,#164E63,#FFFFFF,#164E63,#E8F1F6,#475569,#A5F3FC,#DC2626,#FFFFFF,#0891B2,Calm cyan + health green
+9,Educational App,#4F46E5,#FFFFFF,#818CF8,#0F172A,#EA580C,#000000,#EEF2FF,#1E1B4B,#FFFFFF,#1E1B4B,#EBEEF8,#475569,#C7D2FE,#DC2626,#FFFFFF,#4F46E5,Playful indigo + energetic orange [Accent adjusted from #F97316]
+10,Creative Agency,#EC4899,#000000,#F472B6,#0F172A,#0891B2,#000000,#FDF2F8,#831843,#FFFFFF,#831843,#F1EEF5,#475569,#FBCFE8,#DC2626,#FFFFFF,#EC4899,Bold pink + cyan accent [Accent adjusted from #06B6D4]
+11,Portfolio/Personal,#18181B,#FFFFFF,#3F3F46,#FFFFFF,#2563EB,#FFFFFF,#FAFAFA,#09090B,#FFFFFF,#09090B,#E8ECF0,#475569,#E4E4E7,#DC2626,#FFFFFF,#18181B,Monochrome + blue accent
+12,Gaming,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#F43F5E,#000000,#0F0F23,#E2E8F0,#1E1C35,#E2E8F0,#27273B,#94A3B8,#4C1D95,#EF4444,#000000,#7C3AED,Neon purple + rose action
+13,Government/Public Service,#0F172A,#FFFFFF,#334155,#FFFFFF,#0369A1,#FFFFFF,#F8FAFC,#020617,#FFFFFF,#020617,#E8ECF1,#475569,#E2E8F0,#DC2626,#FFFFFF,#0F172A,High contrast navy + blue
+14,Fintech/Crypto,#F59E0B,#0F172A,#FBBF24,#0F172A,#8B5CF6,#000000,#0F172A,#F8FAFC,#222735,#F8FAFC,#272F42,#94A3B8,#334155,#EF4444,#000000,#F59E0B,Gold trust + purple tech
+15,Social Media App,#E11D48,#FFFFFF,#FB7185,#0F172A,#2563EB,#FFFFFF,#FFF1F2,#881337,#FFFFFF,#881337,#F0ECF2,#475569,#FECDD3,#DC2626,#FFFFFF,#E11D48,Vibrant rose + engagement blue
+16,Productivity Tool,#0D9488,#000000,#14B8A6,#0F172A,#EA580C,#000000,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F4,#475569,#99F6E4,#DC2626,#FFFFFF,#0D9488,Teal focus + action orange [Accent adjusted from #F97316]
+17,Design System/Component Library,#4F46E5,#FFFFFF,#6366F1,#000000,#EA580C,#000000,#EEF2FF,#312E81,#FFFFFF,#312E81,#EBEEF8,#475569,#C7D2FE,#DC2626,#FFFFFF,#4F46E5,Indigo brand + doc hierarchy [Accent adjusted from #F97316]
+18,AI/Chatbot Platform,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#0891B2,#000000,#FAF5FF,#1E1B4B,#FFFFFF,#1E1B4B,#ECEEF9,#475569,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,AI purple + cyan interactions [Accent adjusted from #06B6D4]
+19,NFT/Web3 Platform,#8B5CF6,#000000,#A78BFA,#0F172A,#FBBF24,#0F172A,#0F0F23,#F8FAFC,#1E1D35,#F8FAFC,#27273B,#94A3B8,#4C1D95,#EF4444,#000000,#8B5CF6,Purple tech + gold value
+20,Creator Economy Platform,#EC4899,#000000,#F472B6,#0F172A,#EA580C,#000000,#FDF2F8,#831843,#FFFFFF,#831843,#F1EEF5,#475569,#FBCFE8,#DC2626,#FFFFFF,#EC4899,Creator pink + engagement orange [Accent adjusted from #F97316]
+21,Remote Work/Collaboration Tool,#6366F1,#000000,#818CF8,#0F172A,#059669,#000000,#F5F3FF,#312E81,#FFFFFF,#312E81,#EBEFF9,#475569,#E0E7FF,#DC2626,#FFFFFF,#6366F1,Calm indigo + success green [Accent adjusted from #10B981]
+22,Mental Health App,#8B5CF6,#000000,#C4B5FD,#0F172A,#059669,#000000,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#EDEFF9,#475569,#EDE9FE,#DC2626,#FFFFFF,#8B5CF6,Calming lavender + wellness green [Accent adjusted from #10B981]
+23,Pet Tech App,#F97316,#0F172A,#FB923C,#0F172A,#2563EB,#FFFFFF,#FFF7ED,#9A3412,#FFFFFF,#9A3412,#F1F0F0,#475569,#FED7AA,#DC2626,#FFFFFF,#000000,Playful orange + trust blue
+24,Smart Home/IoT Dashboard,#1E293B,#FFFFFF,#334155,#FFFFFF,#22C55E,#0F172A,#0F172A,#F8FAFC,#1B2336,#F8FAFC,#272F42,#94A3B8,#475569,#EF4444,#000000,#FFFFFF,Dark tech + status green
+25,EV/Charging Ecosystem,#0891B2,#000000,#22D3EE,#0F172A,#16A34A,#000000,#ECFEFF,#164E63,#FFFFFF,#164E63,#E8F1F6,#475569,#A5F3FC,#DC2626,#FFFFFF,#0891B2,Electric cyan + eco green [Accent adjusted from #22C55E]
+26,Subscription Box Service,#D946EF,#000000,#E879F9,#0F172A,#EA580C,#000000,#FDF4FF,#86198F,#FFFFFF,#86198F,#F0EEF9,#475569,#F5D0FE,#DC2626,#FFFFFF,#D946EF,Excitement purple + urgency orange [Accent adjusted from #F97316]
+27,Podcast Platform,#1E1B4B,#FFFFFF,#312E81,#FFFFFF,#F97316,#0F172A,#0F0F23,#F8FAFC,#1B1B30,#F8FAFC,#27273B,#94A3B8,#4338CA,#EF4444,#000000,#FFFFFF,Dark audio + warm accent
+28,Dating App,#E11D48,#FFFFFF,#FB7185,#0F172A,#EA580C,#000000,#FFF1F2,#881337,#FFFFFF,#881337,#F0ECF2,#475569,#FECDD3,#DC2626,#FFFFFF,#E11D48,Romantic rose + warm orange [Accent adjusted from #F97316]
+29,Micro-Credentials/Badges Platform,#0369A1,#FFFFFF,#0EA5E9,#0F172A,#A16207,#FFFFFF,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#475569,#BAE6FD,#DC2626,#FFFFFF,#0369A1,Trust blue + achievement gold [Accent adjusted from #CA8A04]
+30,Knowledge Base/Documentation,#475569,#FFFFFF,#64748B,#FFFFFF,#2563EB,#FFFFFF,#F8FAFC,#1E293B,#FFFFFF,#1E293B,#EAEFF3,#475569,#E2E8F0,#DC2626,#FFFFFF,#475569,Neutral grey + link blue
+31,Hyperlocal Services,#059669,#000000,#10B981,#0F172A,#EA580C,#000000,#ECFDF5,#064E3B,#FFFFFF,#064E3B,#E8F1F3,#475569,#A7F3D0,#DC2626,#FFFFFF,#059669,Location green + action orange [Accent adjusted from #F97316]
+32,Beauty/Spa/Wellness Service,#EC4899,#000000,#F9A8D4,#0F172A,#8B5CF6,#000000,#FDF2F8,#831843,#FFFFFF,#831843,#F1EEF5,#475569,#FBCFE8,#DC2626,#FFFFFF,#EC4899,Soft pink + lavender luxury
+33,Luxury/Premium Brand,#1C1917,#FFFFFF,#44403C,#FFFFFF,#A16207,#FFFFFF,#FAFAF9,#0C0A09,#FFFFFF,#0C0A09,#E8ECF0,#475569,#D6D3D1,#DC2626,#FFFFFF,#1C1917,Premium black + gold accent [Accent adjusted from #CA8A04]
+34,Restaurant/Food Service,#DC2626,#FFFFFF,#F87171,#0F172A,#A16207,#FFFFFF,#FEF2F2,#450A0A,#FFFFFF,#450A0A,#F0EDF1,#475569,#FECACA,#DC2626,#FFFFFF,#DC2626,Appetizing red + warm gold [Accent adjusted from #CA8A04]
+35,Fitness/Gym App,#F97316,#0F172A,#FB923C,#0F172A,#22C55E,#0F172A,#1F2937,#F8FAFC,#313742,#F8FAFC,#37414F,#CBD5E1,#374151,#EF4444,#000000,#F97316,Energy orange + success green
+36,Real Estate/Property,#0F766E,#FFFFFF,#14B8A6,#0F172A,#0369A1,#FFFFFF,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F0F3,#475569,#99F6E4,#DC2626,#FFFFFF,#0F766E,Trust teal + professional blue
+37,Travel/Tourism Agency,#0EA5E9,#0F172A,#38BDF8,#0F172A,#EA580C,#000000,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E8F2F8,#475569,#BAE6FD,#DC2626,#FFFFFF,#000000,Sky blue + adventure orange [Accent adjusted from #F97316]
+38,Hotel/Hospitality,#1E3A8A,#FFFFFF,#3B82F6,#000000,#A16207,#FFFFFF,#F8FAFC,#1E40AF,#FFFFFF,#1E40AF,#E9EEF5,#475569,#BFDBFE,#DC2626,#FFFFFF,#1E3A8A,Luxury navy + gold service [Accent adjusted from #CA8A04]
+39,Wedding/Event Planning,#DB2777,#FFFFFF,#F472B6,#0F172A,#A16207,#FFFFFF,#FDF2F8,#831843,#FFFFFF,#831843,#F0EDF4,#475569,#FBCFE8,#DC2626,#FFFFFF,#DB2777,Romantic pink + elegant gold [Accent adjusted from #CA8A04]
+40,Legal Services,#1E3A8A,#FFFFFF,#1E40AF,#FFFFFF,#B45309,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EEF5,#475569,#CBD5E1,#DC2626,#FFFFFF,#1E3A8A,Authority navy + trust gold
+41,Insurance Platform,#0369A1,#FFFFFF,#0EA5E9,#0F172A,#16A34A,#000000,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#475569,#BAE6FD,#DC2626,#FFFFFF,#0369A1,Security blue + protected green [Accent adjusted from #22C55E]
+42,Banking/Traditional Finance,#0F172A,#FFFFFF,#1E3A8A,#FFFFFF,#A16207,#FFFFFF,#F8FAFC,#020617,#FFFFFF,#020617,#E8ECF1,#475569,#E2E8F0,#DC2626,#FFFFFF,#0F172A,Trust navy + premium gold [Accent adjusted from #CA8A04]
+43,Online Course/E-learning,#0D9488,#000000,#2DD4BF,#0F172A,#EA580C,#000000,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F4,#475569,#5EEAD4,#DC2626,#FFFFFF,#0D9488,Progress teal + achievement orange [Accent adjusted from #F97316]
+44,Non-profit/Charity,#0891B2,#000000,#22D3EE,#0F172A,#EA580C,#000000,#ECFEFF,#164E63,#FFFFFF,#164E63,#E8F1F6,#475569,#A5F3FC,#DC2626,#FFFFFF,#0891B2,Compassion blue + action orange [Accent adjusted from #F97316]
+45,Music Streaming,#1E1B4B,#FFFFFF,#4338CA,#FFFFFF,#22C55E,#0F172A,#0F0F23,#F8FAFC,#1B1B30,#F8FAFC,#27273B,#94A3B8,#312E81,#EF4444,#000000,#FFFFFF,Dark audio + play green
+46,Video Streaming/OTT,#0F0F23,#FFFFFF,#1E1B4B,#FFFFFF,#E11D48,#FFFFFF,#000000,#F8FAFC,#0C0C0D,#F8FAFC,#181818,#94A3B8,#312E81,#EF4444,#000000,#FFFFFF,Cinema dark + play red
+47,Job Board/Recruitment,#0369A1,#FFFFFF,#0EA5E9,#0F172A,#16A34A,#000000,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#475569,#BAE6FD,#DC2626,#FFFFFF,#0369A1,Professional blue + success green [Accent adjusted from #22C55E]
+48,Marketplace (P2P),#7C3AED,#FFFFFF,#A78BFA,#0F172A,#16A34A,#000000,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#475569,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Trust purple + transaction green [Accent adjusted from #22C55E]
+49,Logistics/Delivery,#2563EB,#FFFFFF,#3B82F6,#000000,#EA580C,#000000,#EFF6FF,#1E40AF,#FFFFFF,#1E40AF,#E9EFF8,#475569,#BFDBFE,#DC2626,#FFFFFF,#2563EB,Tracking blue + delivery orange [Accent adjusted from #F97316]
+50,Agriculture/Farm Tech,#15803D,#FFFFFF,#22C55E,#0F172A,#A16207,#FFFFFF,#F0FDF4,#14532D,#FFFFFF,#14532D,#E8F0F1,#475569,#BBF7D0,#DC2626,#FFFFFF,#15803D,Earth green + harvest gold [Accent adjusted from #CA8A04]
+51,Construction/Architecture,#64748B,#FFFFFF,#94A3B8,#0F172A,#EA580C,#000000,#F8FAFC,#334155,#FFFFFF,#334155,#EBF0F5,#475569,#E2E8F0,#DC2626,#FFFFFF,#64748B,Industrial grey + safety orange [Accent adjusted from #F97316]
+52,Automotive/Car Dealership,#1E293B,#FFFFFF,#334155,#FFFFFF,#DC2626,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EDF1,#475569,#E2E8F0,#DC2626,#FFFFFF,#1E293B,Premium dark + action red
+53,Photography Studio,#18181B,#FFFFFF,#27272A,#FFFFFF,#F8FAFC,#0F172A,#000000,#FAFAFA,#0C0C0C,#FAFAFA,#181818,#94A3B8,#3F3F46,#EF4444,#000000,#FFFFFF,Pure black + white contrast
+54,Coworking Space,#F59E0B,#0F172A,#FBBF24,#0F172A,#2563EB,#FFFFFF,#FFFBEB,#78350F,#FFFFFF,#78350F,#F1F2EF,#475569,#FDE68A,#DC2626,#FFFFFF,#000000,Energetic amber + booking blue
+55,Home Services (Plumber/Electrician),#1E40AF,#FFFFFF,#3B82F6,#000000,#EA580C,#000000,#EFF6FF,#1E3A8A,#FFFFFF,#1E3A8A,#E9EEF6,#475569,#BFDBFE,#DC2626,#FFFFFF,#1E40AF,Professional blue + urgent orange [Accent adjusted from #F97316]
+56,Childcare/Daycare,#F472B6,#0F172A,#FBCFE8,#0F172A,#16A34A,#000000,#FDF2F8,#9D174D,#FFFFFF,#9D174D,#F1F0F6,#475569,#FCE7F3,#DC2626,#FFFFFF,#000000,Soft pink + safe green [Accent adjusted from #22C55E]
+57,Senior Care/Elderly,#0369A1,#FFFFFF,#38BDF8,#0F172A,#16A34A,#000000,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#475569,#E0F2FE,#DC2626,#FFFFFF,#0369A1,Calm blue + reassuring green [Accent adjusted from #22C55E]
+58,Medical Clinic,#0891B2,#000000,#22D3EE,#0F172A,#16A34A,#000000,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F6,#475569,#CCFBF1,#DC2626,#FFFFFF,#0891B2,Medical teal + health green [Accent adjusted from #22C55E]
+59,Pharmacy/Drug Store,#15803D,#FFFFFF,#22C55E,#0F172A,#0369A1,#FFFFFF,#F0FDF4,#14532D,#FFFFFF,#14532D,#E8F0F1,#475569,#BBF7D0,#DC2626,#FFFFFF,#15803D,Pharmacy green + trust blue
+60,Dental Practice,#0EA5E9,#0F172A,#38BDF8,#0F172A,#0EA5E9,#0F172A,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E8F2F8,#475569,#BAE6FD,#DC2626,#FFFFFF,#000000,Fresh blue + smile yellow [Accent adjusted from #FBBF24]
+61,Veterinary Clinic,#0D9488,#000000,#14B8A6,#0F172A,#EA580C,#000000,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F4,#475569,#99F6E4,#DC2626,#FFFFFF,#0D9488,Caring teal + warm orange [Accent adjusted from #F97316]
+62,Florist/Plant Shop,#15803D,#FFFFFF,#22C55E,#0F172A,#EC4899,#000000,#F0FDF4,#14532D,#FFFFFF,#14532D,#E8F0F1,#475569,#BBF7D0,#DC2626,#FFFFFF,#15803D,Natural green + floral pink
+63,Bakery/Cafe,#92400E,#FFFFFF,#B45309,#FFFFFF,#92400E,#FFFFFF,#FEF3C7,#78350F,#FFFFFF,#78350F,#EDEEF0,#475569,#FDE68A,#DC2626,#FFFFFF,#92400E,Warm brown + cream white [Accent adjusted from #F8FAFC]
+64,Brewery/Winery,#7C2D12,#FFFFFF,#B91C1C,#FFFFFF,#A16207,#FFFFFF,#FEF2F2,#450A0A,#FFFFFF,#450A0A,#ECEDF0,#475569,#FECACA,#DC2626,#FFFFFF,#7C2D12,Deep burgundy + craft gold [Accent adjusted from #CA8A04]
+65,Airline,#1E3A8A,#FFFFFF,#3B82F6,#000000,#EA580C,#000000,#EFF6FF,#1E40AF,#FFFFFF,#1E40AF,#E9EEF5,#475569,#BFDBFE,#DC2626,#FFFFFF,#1E3A8A,Sky blue + booking orange [Accent adjusted from #F97316]
+66,News/Media Platform,#DC2626,#FFFFFF,#EF4444,#000000,#1E40AF,#FFFFFF,#FEF2F2,#450A0A,#FFFFFF,#450A0A,#F0EDF1,#475569,#FECACA,#DC2626,#FFFFFF,#DC2626,Breaking red + link blue
+67,Magazine/Blog,#18181B,#FFFFFF,#3F3F46,#FFFFFF,#EC4899,#000000,#FAFAFA,#09090B,#FFFFFF,#09090B,#E8ECF0,#475569,#E4E4E7,#DC2626,#FFFFFF,#18181B,Editorial black + accent pink
+68,Freelancer Platform,#6366F1,#000000,#818CF8,#0F172A,#16A34A,#000000,#EEF2FF,#312E81,#FFFFFF,#312E81,#EBEFF9,#475569,#C7D2FE,#DC2626,#FFFFFF,#6366F1,Creative indigo + hire green [Accent adjusted from #22C55E]
+69,Marketing Agency,#EC4899,#000000,#F472B6,#0F172A,#0891B2,#000000,#FDF2F8,#831843,#FFFFFF,#831843,#F1EEF5,#475569,#FBCFE8,#DC2626,#FFFFFF,#EC4899,Bold pink + creative cyan [Accent adjusted from #06B6D4]
+70,Event Management,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#EA580C,#000000,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#475569,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Excitement purple + action orange [Accent adjusted from #F97316]
+71,Membership/Community,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#16A34A,#000000,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#475569,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Community purple + join green [Accent adjusted from #22C55E]
+72,Newsletter Platform,#0369A1,#FFFFFF,#0EA5E9,#0F172A,#EA580C,#000000,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E7EFF5,#475569,#BAE6FD,#DC2626,#FFFFFF,#0369A1,Trust blue + subscribe orange [Accent adjusted from #F97316]
+73,Digital Products/Downloads,#6366F1,#000000,#818CF8,#0F172A,#16A34A,#000000,#EEF2FF,#312E81,#FFFFFF,#312E81,#EBEFF9,#475569,#C7D2FE,#DC2626,#FFFFFF,#6366F1,Digital indigo + buy green [Accent adjusted from #22C55E]
+74,Church/Religious Organization,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#A16207,#FFFFFF,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#475569,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Spiritual purple + warm gold [Accent adjusted from #CA8A04]
+75,Sports Team/Club,#DC2626,#FFFFFF,#EF4444,#000000,#DC2626,#FFFFFF,#FEF2F2,#7F1D1D,#FFFFFF,#7F1D1D,#F0EDF1,#475569,#FECACA,#DC2626,#FFFFFF,#DC2626,Team red + championship gold [Accent adjusted from #FBBF24]
+76,Museum/Gallery,#18181B,#FFFFFF,#27272A,#FFFFFF,#18181B,#FFFFFF,#FAFAFA,#09090B,#FFFFFF,#09090B,#E8ECF0,#475569,#E4E4E7,#DC2626,#FFFFFF,#18181B,Gallery black + white space [Accent adjusted from #F8FAFC]
+77,Theater/Cinema,#1E1B4B,#FFFFFF,#312E81,#FFFFFF,#CA8A04,#0F172A,#0F0F23,#F8FAFC,#1B1B30,#F8FAFC,#27273B,#94A3B8,#4338CA,#EF4444,#000000,#FFFFFF,Dramatic dark + spotlight gold
+78,Language Learning App,#4F46E5,#FFFFFF,#818CF8,#0F172A,#16A34A,#000000,#EEF2FF,#312E81,#FFFFFF,#312E81,#EBEEF8,#475569,#C7D2FE,#DC2626,#FFFFFF,#4F46E5,Learning indigo + progress green [Accent adjusted from #22C55E]
+79,Coding Bootcamp,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#22C55E,#0F172A,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#EF4444,#000000,#FFFFFF,Terminal dark + success green
+80,Cybersecurity Platform,#00FF41,#0F172A,#0D0D0D,#FFFFFF,#FF3333,#000000,#000000,#E0E0E0,#0C130E,#E0E0E0,#181818,#94A3B8,#1F1F1F,#EF4444,#000000,#00FF41,Matrix green + alert red
+81,Developer Tool / IDE,#1E293B,#FFFFFF,#334155,#FFFFFF,#22C55E,#0F172A,#0F172A,#F8FAFC,#1B2336,#F8FAFC,#272F42,#94A3B8,#475569,#EF4444,#000000,#FFFFFF,Code dark + run green
+82,Biotech / Life Sciences,#0EA5E9,#0F172A,#0284C7,#000000,#059669,#000000,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E8F2F8,#475569,#BAE6FD,#DC2626,#FFFFFF,#000000,DNA blue + life green [Accent adjusted from #10B981]
+83,Space Tech / Aerospace,#F8FAFC,#0F172A,#94A3B8,#0F172A,#3B82F6,#000000,#0B0B10,#F8FAFC,#1E1E23,#F8FAFC,#232328,#94A3B8,#1E293B,#EF4444,#000000,#F8FAFC,Star white + launch blue
+84,Architecture / Interior,#171717,#FFFFFF,#404040,#FFFFFF,#A16207,#FFFFFF,#FFFFFF,#171717,#FFFFFF,#171717,#E8ECF0,#475569,#E5E5E5,#DC2626,#FFFFFF,#171717,Minimal black + accent gold [Accent adjusted from #D4AF37]
+85,Quantum Computing Interface,#00FFFF,#0F172A,#7B61FF,#000000,#FF00FF,#000000,#050510,#E0E0FF,#101823,#E0E0FF,#1D1D28,#94A3B8,#333344,#EF4444,#000000,#00FFFF,Quantum cyan + interference purple
+86,Biohacking / Longevity App,#FF4D4D,#000000,#4D94FF,#000000,#059669,#000000,#F5F5F7,#1C1C1E,#FFFFFF,#1C1C1E,#F2EEF2,#475569,#E5E5EA,#DC2626,#FFFFFF,#FF4D4D,Bio red/blue + vitality green [Accent adjusted from #00E676]
+87,Autonomous Drone Fleet Manager,#00FF41,#0F172A,#008F11,#000000,#FF3333,#000000,#0D1117,#E6EDF3,#182424,#E6EDF3,#25292F,#94A3B8,#30363D,#EF4444,#000000,#00FF41,Terminal green + alert red
+88,Generative Art Platform,#18181B,#FFFFFF,#3F3F46,#FFFFFF,#EC4899,#000000,#FAFAFA,#09090B,#FFFFFF,#09090B,#E8ECF0,#475569,#E4E4E7,#DC2626,#FFFFFF,#18181B,Canvas neutral + creative pink
+89,Spatial Computing OS / App,#FFFFFF,#0F172A,#E5E5E5,#0F172A,#FFFFFF,#0F172A,#888888,#000000,#999999,#000000,#E5E7EB,#5F6673,#CCCCCC,#FF3B30,#000000,#000000,Glass white + system blue [Accent adjusted from #007AFF]
+90,Sustainable Energy / Climate Tech,#059669,#000000,#10B981,#0F172A,#059669,#000000,#ECFDF5,#064E3B,#FFFFFF,#064E3B,#E8F1F3,#475569,#A7F3D0,#DC2626,#FFFFFF,#059669,Nature green + solar gold [Accent adjusted from #FBBF24]
+91,Personal Finance Tracker,#1E40AF,#FFFFFF,#3B82F6,#000000,#059669,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#101A34,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#FFFFFF,Trust blue + profit green on dark
+92,Chat & Messaging App,#2563EB,#FFFFFF,#6366F1,#000000,#059669,#000000,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Messenger blue + online green
+93,Notes & Writing App,#78716C,#FFFFFF,#A8A29E,#000000,#D97706,#000000,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#F6F6F6,#475569,#EEEDED,#DC2626,#FFFFFF,#78716C,Warm ink + amber accent on cream
+94,Habit Tracker,#D97706,#000000,#F59E0B,#0F172A,#059669,#000000,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF6F0,#475569,#FAEEE1,#DC2626,#FFFFFF,#D97706,Streak amber + habit green
+95,Food Delivery / On-Demand,#EA580C,#000000,#F97316,#000000,#2563EB,#FFFFFF,#FFF7ED,#0F172A,#FFFFFF,#0F172A,#FDF4F0,#475569,#FCEAE1,#DC2626,#FFFFFF,#EA580C,Appetizing orange + trust blue
+96,Ride Hailing / Transportation,#1E293B,#FFFFFF,#334155,#FFFFFF,#2563EB,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#10182B,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#FFFFFF,Map dark + route blue
+97,Recipe & Cooking App,#9A3412,#FFFFFF,#C2410C,#FFFFFF,#059669,#000000,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#F8F2F0,#475569,#F2E6E2,#DC2626,#FFFFFF,#9A3412,Warm terracotta + fresh green
+98,Meditation & Mindfulness,#7C3AED,#FFFFFF,#8B5CF6,#000000,#059669,#000000,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#475569,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,Calm lavender + mindful green
+99,Weather App,#0284C7,#000000,#0EA5E9,#000000,#F59E0B,#0F172A,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#EFF7FB,#475569,#E0F0F8,#DC2626,#FFFFFF,#0284C7,Sky blue + sun amber
+100,Diary & Journal App,#92400E,#FFFFFF,#A16207,#FFFFFF,#6366F1,#000000,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#F8F3F0,#475569,#F1E8E2,#DC2626,#FFFFFF,#92400E,Warm journal brown + ink violet
+101,CRM & Client Management,#2563EB,#FFFFFF,#3B82F6,#000000,#059669,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Professional blue + deal green
+102,Inventory & Stock Management,#334155,#FFFFFF,#475569,#FFFFFF,#059669,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F2F3F4,#475569,#E6E8EA,#DC2626,#FFFFFF,#334155,Industrial slate + stock green
+103,Flashcard & Study Tool,#7C3AED,#FFFFFF,#8B5CF6,#000000,#059669,#000000,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#475569,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,Study purple + correct green
+104,Booking & Appointment App,#0284C7,#000000,#0EA5E9,#000000,#059669,#000000,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#EFF7FB,#475569,#E0F0F8,#DC2626,#FFFFFF,#0284C7,Calendar blue + available green
+105,Invoice & Billing Tool,#1E3A5F,#FFFFFF,#2563EB,#FFFFFF,#059669,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F3F5,#475569,#E4E7EB,#DC2626,#FFFFFF,#1E3A5F,Navy professional + paid green
+106,Grocery & Shopping List,#059669,#000000,#10B981,#000000,#D97706,#000000,#ECFDF5,#0F172A,#FFFFFF,#0F172A,#F0F8F6,#475569,#E1F2ED,#DC2626,#FFFFFF,#059669,Fresh green + food amber
+107,Timer & Pomodoro,#DC2626,#FFFFFF,#EF4444,#000000,#059669,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#1F1829,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#DC2626,Focus red on dark + break green
+108,Parenting & Baby Tracker,#EC4899,#000000,#F472B6,#000000,#0284C7,#000000,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FDF4F8,#475569,#FCE9F2,#DC2626,#FFFFFF,#EC4899,Soft pink + trust blue
+109,Scanner & Document Manager,#1E293B,#FFFFFF,#334155,#FFFFFF,#2563EB,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F2F3,#475569,#E4E5E7,#DC2626,#FFFFFF,#1E293B,Document grey + scan blue
+110,Calendar & Scheduling App,#2563EB,#FFFFFF,#3B82F6,#000000,#059669,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Calendar blue + event green
+111,Password Manager,#1E3A5F,#FFFFFF,#334155,#FFFFFF,#059669,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#10192E,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#FFFFFF,Vault dark blue + secure green
+112,Expense Splitter / Bill Split,#059669,#000000,#10B981,#000000,#DC2626,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F0F8F6,#475569,#E1F2ED,#DC2626,#FFFFFF,#059669,Balance green + owe red
+113,Voice Recorder & Memo,#DC2626,#FFFFFF,#EF4444,#000000,#2563EB,#FFFFFF,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#FCF1F1,#475569,#FAE4E4,#DC2626,#FFFFFF,#DC2626,Recording red + waveform blue
+114,Bookmark & Read-Later,#D97706,#000000,#F59E0B,#0F172A,#2563EB,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF6F0,#475569,#FAEEE1,#DC2626,#FFFFFF,#D97706,Warm amber + link blue
+115,Translator App,#2563EB,#FFFFFF,#0891B2,#000000,#EA580C,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Global blue + teal + accent orange
+116,Calculator & Unit Converter,#EA580C,#000000,#F97316,#000000,#2563EB,#FFFFFF,#1C1917,#FFFFFF,#262321,#FFFFFF,#2C1E16,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#EA580C,Operation orange on dark
+117,Alarm & World Clock,#D97706,#000000,#F59E0B,#0F172A,#6366F1,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#1F1E27,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#D97706,Time amber + night indigo on dark
+118,File Manager & Transfer,#2563EB,#FFFFFF,#3B82F6,#000000,#D97706,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Folder blue + file amber
+119,Email Client,#2563EB,#FFFFFF,#3B82F6,#000000,#DC2626,#FFFFFF,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Inbox blue + priority red
+120,Casual Puzzle Game,#EC4899,#000000,#8B5CF6,#000000,#F59E0B,#0F172A,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FDF4F8,#475569,#FCE9F2,#DC2626,#FFFFFF,#EC4899,Cheerful pink + reward gold
+121,Trivia & Quiz Game,#2563EB,#FFFFFF,#7C3AED,#FFFFFF,#F59E0B,#0F172A,#EFF6FF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Quiz blue + gold leaderboard
+122,Card & Board Game,#15803D,#FFFFFF,#166534,#FFFFFF,#D97706,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#0F1F2B,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#15803D,Felt green + gold on dark
+123,Idle & Clicker Game,#D97706,#000000,#F59E0B,#0F172A,#7C3AED,#FFFFFF,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF6F0,#475569,#FAEEE1,#DC2626,#FFFFFF,#D97706,Coin gold + prestige purple
+124,Word & Crossword Game,#15803D,#FFFFFF,#059669,#000000,#D97706,#000000,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#F0F7F3,#475569,#E2EFE7,#DC2626,#FFFFFF,#15803D,Word green + letter amber
+125,Arcade & Retro Game,#DC2626,#FFFFFF,#2563EB,#FFFFFF,#22C55E,#0F172A,#0F172A,#FFFFFF,#192134,#FFFFFF,#1F1829,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#DC2626,Neon red+blue on dark + score green
+126,Photo Editor & Filters,#7C3AED,#FFFFFF,#6366F1,#000000,#0891B2,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#171939,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#7C3AED,Editor violet + filter cyan on dark
+127,Short Video Editor,#EC4899,#000000,#DB2777,#FFFFFF,#2563EB,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#201A32,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#EC4899,Video pink on dark + timeline blue
+128,Drawing & Sketching Canvas,#7C3AED,#FFFFFF,#8B5CF6,#000000,#0891B2,#000000,#1C1917,#FFFFFF,#262321,#FFFFFF,#231B28,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#7C3AED,Canvas purple + tool teal on dark
+129,Music Creation & Beat Maker,#7C3AED,#FFFFFF,#6366F1,#000000,#22C55E,#0F172A,#0F172A,#FFFFFF,#192134,#FFFFFF,#171939,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#7C3AED,Studio purple + waveform green on dark
+130,Meme & Sticker Maker,#EC4899,#000000,#F59E0B,#0F172A,#2563EB,#FFFFFF,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#FDF4F8,#475569,#FCE9F2,#DC2626,#FFFFFF,#EC4899,Viral pink + comedy yellow + share blue
+131,AI Photo & Avatar Generator,#7C3AED,#FFFFFF,#6366F1,#000000,#EC4899,#000000,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#475569,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,AI purple + generation pink
+132,Link-in-Bio Page Builder,#2563EB,#FFFFFF,#7C3AED,#FFFFFF,#EC4899,#000000,#FFFFFF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Brand blue + creator purple
+133,Wardrobe & Outfit Planner,#BE185D,#FFFFFF,#EC4899,#000000,#D97706,#000000,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FBF1F5,#475569,#F7E3EB,#DC2626,#FFFFFF,#BE185D,Fashion rose + gold accent
+134,Plant Care Tracker,#15803D,#FFFFFF,#059669,#000000,#D97706,#000000,#F0FDF4,#0F172A,#FFFFFF,#0F172A,#F0F7F3,#475569,#E2EFE7,#DC2626,#FFFFFF,#15803D,Nature green + sun yellow
+135,Book & Reading Tracker,#78716C,#FFFFFF,#92400E,#FFFFFF,#D97706,#000000,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#F6F6F6,#475569,#EEEDED,#DC2626,#FFFFFF,#78716C,Book brown + page amber
+136,Couple & Relationship App,#BE185D,#FFFFFF,#EC4899,#000000,#DC2626,#FFFFFF,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FBF1F5,#475569,#F7E3EB,#DC2626,#FFFFFF,#BE185D,Romance rose + love red
+137,Family Calendar & Chores,#2563EB,#FFFFFF,#059669,#000000,#D97706,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Family blue + chore green
+138,Mood Tracker,#7C3AED,#FFFFFF,#6366F1,#000000,#D97706,#000000,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#475569,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,Mood purple + insight amber
+139,Gift & Wishlist,#DC2626,#FFFFFF,#D97706,#000000,#EC4899,#000000,#FFF1F2,#0F172A,#FFFFFF,#0F172A,#FCF1F1,#475569,#FAE4E4,#DC2626,#FFFFFF,#DC2626,Gift red + gold + surprise pink
+140,Running & Cycling GPS,#EA580C,#000000,#F97316,#000000,#059669,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#201C27,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#EA580C,Energetic orange + pace green on dark
+141,Yoga & Stretching Guide,#6B7280,#FFFFFF,#78716C,#FFFFFF,#0891B2,#000000,#F5F5F0,#0F172A,#FFFFFF,#0F172A,#F6F6F7,#475569,#EDEEEF,#DC2626,#FFFFFF,#6B7280,Sage neutral + calm teal
+142,Sleep Tracker,#4338CA,#FFFFFF,#6366F1,#000000,#7C3AED,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#131936,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#FFFFFF,Night indigo + dream violet on dark
+143,Calorie & Nutrition Counter,#059669,#000000,#10B981,#000000,#EA580C,#000000,#ECFDF5,#0F172A,#FFFFFF,#0F172A,#F0F8F6,#475569,#E1F2ED,#DC2626,#FFFFFF,#059669,Healthy green + macro orange
+144,Period & Cycle Tracker,#BE185D,#FFFFFF,#EC4899,#000000,#7C3AED,#FFFFFF,#FDF2F8,#0F172A,#FFFFFF,#0F172A,#FBF1F5,#475569,#F7E3EB,#DC2626,#FFFFFF,#BE185D,Blush rose + fertility lavender
+145,Medication & Pill Reminder,#0284C7,#000000,#0891B2,#000000,#DC2626,#FFFFFF,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#EFF7FB,#475569,#E0F0F8,#DC2626,#FFFFFF,#0284C7,Medical blue + alert red
+146,Water & Hydration Reminder,#0284C7,#000000,#06B6D4,#000000,#0891B2,#000000,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#EFF7FB,#475569,#E0F0F8,#DC2626,#FFFFFF,#0284C7,Refreshing blue + water cyan
+147,Fasting & Intermittent Timer,#6366F1,#000000,#4338CA,#FFFFFF,#059669,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#151D39,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#6366F1,Fasting indigo on dark + eating green
+148,Anonymous Community / Confession,#475569,#FFFFFF,#334155,#FFFFFF,#0891B2,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#131B2F,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#FFFFFF,Protective grey + subtle teal on dark
+149,Local Events & Discovery,#EA580C,#000000,#F97316,#000000,#2563EB,#FFFFFF,#FFF7ED,#0F172A,#FFFFFF,#0F172A,#FDF4F0,#475569,#FCEAE1,#DC2626,#FFFFFF,#EA580C,Event orange + map blue
+150,Study Together / Virtual Coworking,#2563EB,#FFFFFF,#3B82F6,#000000,#059669,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Focus blue + session green
+151,Coding Challenge & Practice,#22C55E,#0F172A,#059669,#000000,#D97706,#000000,#0F172A,#FFFFFF,#192134,#FFFFFF,#10242E,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#22C55E,Code green + difficulty amber on dark
+152,Kids Learning (ABC & Math),#2563EB,#FFFFFF,#F59E0B,#0F172A,#EC4899,#000000,#EFF6FF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Learning blue + play yellow + fun pink
+153,Music Instrument Learning,#DC2626,#FFFFFF,#9A3412,#FFFFFF,#D97706,#000000,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF1F1,#475569,#FAE4E4,#DC2626,#FFFFFF,#DC2626,Musical red + warm amber
+154,Parking Finder,#2563EB,#FFFFFF,#059669,#000000,#DC2626,#FFFFFF,#F0F9FF,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Available blue/green + occupied red
+155,Public Transit Guide,#2563EB,#FFFFFF,#0891B2,#000000,#EA580C,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Transit blue + line colors
+156,Road Trip Planner,#EA580C,#000000,#0891B2,#000000,#D97706,#000000,#FFF7ED,#0F172A,#FFFFFF,#0F172A,#FDF4F0,#475569,#FCEAE1,#DC2626,#FFFFFF,#EA580C,Adventure orange + map teal
+157,VPN & Privacy Tool,#1E3A5F,#FFFFFF,#334155,#FFFFFF,#22C55E,#0F172A,#0F172A,#FFFFFF,#192134,#FFFFFF,#10192E,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#FFFFFF,Shield dark + connected green
+158,Emergency SOS & Safety,#DC2626,#FFFFFF,#EF4444,#000000,#2563EB,#FFFFFF,#FFF1F2,#0F172A,#FFFFFF,#0F172A,#FCF1F1,#475569,#FAE4E4,#DC2626,#FFFFFF,#DC2626,Alert red + safety blue
+159,Wallpaper & Theme App,#7C3AED,#FFFFFF,#EC4899,#000000,#2563EB,#FFFFFF,#FAF5FF,#0F172A,#FFFFFF,#0F172A,#F7F3FD,#475569,#EFE7FC,#DC2626,#FFFFFF,#7C3AED,Aesthetic purple + trending pink
+160,White Noise & Ambient Sound,#475569,#FFFFFF,#334155,#FFFFFF,#4338CA,#FFFFFF,#0F172A,#FFFFFF,#192134,#FFFFFF,#131B2F,#94A3B8,"rgba(255,255,255,0.08)",#DC2626,#FFFFFF,#FFFFFF,Ambient grey + deep indigo on dark
+161,Home Decoration & Interior Design,#78716C,#FFFFFF,#A8A29E,#000000,#D97706,#000000,#FAF5F2,#0F172A,#FFFFFF,#0F172A,#F6F6F6,#475569,#EEEDED,#DC2626,#FFFFFF,#78716C,Interior warm grey + gold accent
+162,Academic Journal / Scholarly Publishing,#1E3A5F,#FFFFFF,#334155,#FFFFFF,#B45309,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EEF5,#475569,#CBD5E1,#DC2626,#FFFFFF,#1E3A5F,Scholarly navy + citation gold + serif accent
+163,API Developer Portal,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#22C55E,#0F172A,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#EF4444,#000000,#FFFFFF,Code dark + endpoint green + syntax colors
+164,Forum / Discussion Board,#475569,#FFFFFF,#64748B,#FFFFFF,#2563EB,#FFFFFF,#F8FAFC,#1E293B,#FFFFFF,#1E293B,#EAEFF3,#475569,#E2E8F0,#DC2626,#FFFFFF,#475569,Neutral grey + topic accent + unread indicator
+165,Directory / Listing Site,#059669,#000000,#10B981,#0F172A,#D97706,#000000,#ECFDF5,#064E3B,#FFFFFF,#064E3B,#E8F1F3,#475569,#A7F3D0,#DC2626,#FFFFFF,#059669,Category green + verified badge + map accent
+166,Status Page / Incident Management,#16A34A,#000000,#22C55E,#0F172A,#DC2626,#FFFFFF,#F0FDF4,#14532D,#FFFFFF,#14532D,#E8F0F1,#475569,#BBF7D0,#DC2626,#FFFFFF,#16A34A,Operational green + incident red + maintenance amber
+167,Wiki / Encyclopedia,#1E3A8A,#FFFFFF,#3B82F6,#000000,#7C3AED,#FFFFFF,#F8FAFC,#1E40AF,#FFFFFF,#1E40AF,#E9EEF5,#475569,#BFDBFE,#DC2626,#FFFFFF,#1E3A8A,Knowledge blue + link purple + clean white
+168,Auction Platform,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#16A34A,#0F172A,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#DC2626,#FFFFFF,#FFFFFF,Dark luxury + bid green + outbid red + urgency
+169,Changelog / Release Notes,#475569,#FFFFFF,#64748B,#FFFFFF,#059669,#000000,#F8FAFC,#1E293B,#FFFFFF,#1E293B,#EAEFF3,#475569,#E2E8F0,#DC2626,#FFFFFF,#475569,Feature green + fix blue + breaking red badges
+170,Citizen Science Platform,#15803D,#FFFFFF,#22C55E,#0F172A,#D97706,#000000,#F0FDF4,#14532D,#FFFFFF,#14532D,#E8F0F1,#475569,#BBF7D0,#DC2626,#FFFFFF,#15803D,Discovery green + volunteer badge + data neutral
+171,Classifieds / Buy-Sell,#2563EB,#FFFFFF,#3B82F6,#000000,#16A34A,#000000,#EFF6FF,#1E40AF,#FFFFFF,#1E40AF,#E9EFF8,#475569,#BFDBFE,#DC2626,#FFFFFF,#2563EB,Listing blue + price green + seller badge
+172,Conference / Symposium Landing Page,#1E3A5F,#FFFFFF,#2563EB,#FFFFFF,#A16207,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EEF5,#475569,#CBD5E1,#DC2626,#FFFFFF,#1E3A5F,Academic navy + gold keynote + track chips
+173,Crowdfunding Platform,#D97706,#000000,#F59E0B,#0F172A,#16A34A,#000000,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF6F0,#475569,#FAEEE1,#DC2626,#FFFFFF,#D97706,Funding progress amber + goal green + urgency
+174,Digital Signage / Kiosk,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#EF4444,#000000,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#EF4444,#000000,#FFFFFF,High contrast dark + brand accent + large touch targets
+175,E-signature / Document Workflow,#1E3A5F,#FFFFFF,#2563EB,#FFFFFF,#16A34A,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EEF5,#475569,#CBD5E1,#DC2626,#FFFFFF,#1E3A5F,Trust navy + signature green + audit trail
+176,Feature Flag / Config Management,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#16A34A,#0F172A,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#DC2626,#FFFFFF,#FFFFFF,Enabled green + disabled grey + experimental amber
+177,Government Portal / Civic Services,#1E40AF,#FFFFFF,#3B82F6,#000000,#16A34A,#000000,#EFF6FF,#1E3A8A,#FFFFFF,#1E3A8A,#E9EFF5,#475569,#BFDBFE,#DC2626,#FFFFFF,#1E40AF,Professional blue + service green + accessibility
+178,Grant / Funding Portal,#1E3A5F,#FFFFFF,#2563EB,#FFFFFF,#16A34A,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EEF5,#475569,#CBD5E1,#DC2626,#FFFFFF,#1E3A5F,Institution navy + funding green + deadline urgency
+179,LMS (Learning Management System),#0D9488,#000000,#2DD4BF,#0F172A,#D97706,#000000,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F4,#475569,#5EEAD4,#DC2626,#FFFFFF,#0D9488,Education teal + course amber + grade green
+180,No-code / Low-code Builder,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#EC4899,#000000,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#475569,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Builder purple + component pink + canvas neutral
+181,Open Source Project Landing,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#A16207,#FFFFFF,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#DC2626,#FFFFFF,#FFFFFF,Dark code + star gold + fork silver + sponsor purple
+182,Patient Portal / Health Records,#0284C7,#000000,#0891B2,#000000,#16A34A,#000000,#F0F9FF,#0C4A6E,#FFFFFF,#0C4A6E,#E8F2F8,#475569,#BAE6FD,#DC2626,#FFFFFF,#0284C7,Clinical blue + health green + alert red
+183,Patent / IP Database,#475569,#FFFFFF,#64748B,#FFFFFF,#A16207,#FFFFFF,#F8FAFC,#1E293B,#FFFFFF,#1E293B,#EAEFF3,#475569,#E2E8F0,#DC2626,#FFFFFF,#475569,Formal neutral + patent type chips + status badges
+184,Q&A Community Platform,#2563EB,#FFFFFF,#0891B2,#000000,#D97706,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#F1F5FD,#475569,#E4ECFC,#DC2626,#FFFFFF,#2563EB,Knowledge blue + accepted green + reputation gold
+185,Research Lab / University Department,#1E3A5F,#FFFFFF,#2563EB,#FFFFFF,#A16207,#FFFFFF,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EEF5,#475569,#CBD5E1,#DC2626,#FFFFFF,#1E3A5F,Institutional navy + research accent + serif headings
+186,Resume / CV Builder,#1E3A5F,#FFFFFF,#2563EB,#FFFFFF,#16A34A,#000000,#F8FAFC,#0F172A,#FFFFFF,#0F172A,#E9EEF5,#475569,#CBD5E1,#DC2626,#FFFFFF,#1E3A5F,Professional navy + section accent + success green
+187,Review Platform,#F59E0B,#0F172A,#FBBF24,#0F172A,#16A34A,#000000,#FFFBEB,#0F172A,#FFFFFF,#0F172A,#FCF6F0,#475569,#FAEEE1,#DC2626,#FFFFFF,#000000,Star gold + positive green + negative red
+188,RPA / Automation Dashboard,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#16A34A,#0F172A,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#DC2626,#FFFFFF,#FFFFFF,Dark terminal + running green + failed red + queued amber
+189,Survey / Form Builder,#0D9488,#000000,#2DD4BF,#0F172A,#D97706,#000000,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F4,#475569,#5EEAD4,#DC2626,#FFFFFF,#0D9488,Question teal + progress green + submit blue
+190,Telemedicine Platform,#0891B2,#000000,#22D3EE,#0F172A,#16A34A,#000000,#F0FDFA,#134E4A,#FFFFFF,#134E4A,#E8F1F6,#475569,#CCFBF1,#DC2626,#FFFFFF,#0891B2,Medical teal + video green + waiting amber
+191,Testimonial & Social Proof Widget,#7C3AED,#FFFFFF,#A78BFA,#0F172A,#F59E0B,#0F172A,#FAF5FF,#4C1D95,#FFFFFF,#4C1D95,#ECEEF9,#475569,#DDD6FE,#DC2626,#FFFFFF,#7C3AED,Trust purple + quote gold + verified blue
+192,Ticketing / Box Office,#0F172A,#FFFFFF,#1E293B,#FFFFFF,#16A34A,#0F172A,#020617,#F8FAFC,#0E1223,#F8FAFC,#1A1E2F,#94A3B8,#334155,#DC2626,#FFFFFF,#FFFFFF,Event theme colors + available green + sold-out red

package/dist/assets/uiux/data/icons.csv

@@ -0,0 +1,106 @@
+No,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style,Semantic Role,Allowed Contexts
+1,Navigation,list,hamburger menu navigation toggle bars,Phosphor,import { List } from '@phosphor-icons/react',"<List size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Mobile navigation drawer toggle sidebar,Outline,interactive,decorative|meaningful|interactive
+2,Navigation,arrow-left,back previous return navigate,Phosphor,import { ArrowLeft } from '@phosphor-icons/react',"<ArrowLeft size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Back button breadcrumb navigation,Outline,interactive,decorative|meaningful|interactive
+3,Navigation,arrow-right,next forward continue navigate,Phosphor,import { ArrowRight } from '@phosphor-icons/react',"<ArrowRight size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Forward button next step CTA,Outline,interactive,decorative|meaningful|interactive
+4,Navigation,caret-down,dropdown expand accordion select,Phosphor,import { CaretDown } from '@phosphor-icons/react',"<CaretDown size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Dropdown toggle accordion header,Outline,interactive,decorative|meaningful|interactive
+5,Navigation,caret-up,collapse close accordion minimize,Phosphor,import { CaretUp } from '@phosphor-icons/react',"<CaretUp size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Accordion collapse minimize,Outline,interactive,decorative|meaningful|interactive
+6,Navigation,house,homepage main dashboard start,Phosphor,import { House } from '@phosphor-icons/react',"<House size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Home navigation main page,Outline,meaningful,decorative|meaningful|interactive
+7,Navigation,x,close cancel dismiss remove exit,Phosphor,import { X } from '@phosphor-icons/react',"<X size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Modal close dismiss button,Outline,interactive,decorative|meaningful|interactive
+8,Navigation,arrow-square-out,open new tab external link,Phosphor,import { ArrowSquareOut } from '@phosphor-icons/react',"<ArrowSquareOut size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",External link indicator,Outline,interactive,decorative|meaningful|interactive
+9,Action,plus,add create new insert,Phosphor,import { Plus } from '@phosphor-icons/react',"<Plus size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Add button create new item,Outline,interactive,decorative|meaningful|interactive
+10,Action,minus,remove subtract decrease delete,Phosphor,import { Minus } from '@phosphor-icons/react',"<Minus size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Remove item quantity decrease,Outline,interactive,decorative|meaningful|interactive
+11,Action,trash,delete remove discard bin,Phosphor,import { Trash } from '@phosphor-icons/react',"<Trash size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Delete action destructive,Outline,interactive,decorative|meaningful|interactive
+12,Action,pencil-simple,pencil modify change update,Phosphor,import { PencilSimple } from '@phosphor-icons/react',"<PencilSimple size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Edit button modify content,Outline,interactive,decorative|meaningful|interactive
+13,Action,floppy-disk,disk store persist save,Phosphor,import { FloppyDisk } from '@phosphor-icons/react',"<FloppyDisk size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Save button persist changes,Outline,interactive,decorative|meaningful|interactive
+14,Action,download-simple,export save file download,Phosphor,import { DownloadSimple } from '@phosphor-icons/react',"<DownloadSimple size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Download file export,Outline,meaningful,decorative|meaningful|interactive
+15,Action,upload-simple,import file attach upload,Phosphor,import { UploadSimple } from '@phosphor-icons/react',"<UploadSimple size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Upload file import,Outline,meaningful,decorative|meaningful|interactive
+16,Action,copy,duplicate clipboard paste,Phosphor,import { Copy } from '@phosphor-icons/react',"<Copy size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Copy to clipboard,Outline,meaningful,decorative|meaningful|interactive
+17,Action,share,social distribute send,Phosphor,import { Share } from '@phosphor-icons/react',"<Share size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Share button social,Outline,interactive,decorative|meaningful|interactive
+18,Action,magnifying-glass,find lookup filter query,Phosphor,import { MagnifyingGlass } from '@phosphor-icons/react',"<MagnifyingGlass size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Search input bar,Outline,interactive,decorative|meaningful|interactive
+19,Action,funnel,sort refine narrow options,Phosphor,import { Funnel } from '@phosphor-icons/react',"<Funnel size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Filter dropdown sort,Outline,interactive,decorative|meaningful|interactive
+20,Action,gear,gear cog preferences config,Phosphor,import { Gear } from '@phosphor-icons/react',"<Gear size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Settings page configuration,Outline,meaningful,decorative|meaningful|interactive
+21,Status,check,success done complete verified,Phosphor,import { Check } from '@phosphor-icons/react',"<Check size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Success state checkmark,Outline,meaningful,decorative|meaningful|interactive
+22,Status,check-circle,success verified approved complete,Phosphor,import { CheckCircle } from '@phosphor-icons/react',"<CheckCircle size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Success badge verified,Outline,meaningful,decorative|meaningful|interactive
+23,Status,x-circle,error failed cancel rejected,Phosphor,import { XCircle } from '@phosphor-icons/react',"<XCircle size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Error state failed,Outline,meaningful,decorative|meaningful|interactive
+24,Status,warning,warning caution attention danger,Phosphor,import { Warning } from '@phosphor-icons/react',"<Warning size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Warning message caution,Outline,meaningful,decorative|meaningful|interactive
+25,Status,warning-circle,info notice information help,Phosphor,import { WarningCircle } from '@phosphor-icons/react',"<WarningCircle size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Info notice alert,Outline,meaningful,decorative|meaningful|interactive
+26,Status,info,information help tooltip details,Phosphor,import { Info } from '@phosphor-icons/react',"<Info size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Information tooltip help,Outline,meaningful,decorative|meaningful|interactive
+27,Status,circle-notch,loading spinner processing wait,Phosphor,import { CircleNotch } from '@phosphor-icons/react',"<CircleNotch size={20} weight=""regular"" className=""animate-spin"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Loading state spinner,Outline,meaningful,decorative|meaningful|interactive
+28,Status,clock,time schedule pending wait,Phosphor,import { Clock } from '@phosphor-icons/react',"<Clock size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Pending time schedule,Outline,meaningful,decorative|meaningful|interactive
+29,Communication,envelope,email message inbox letter,Phosphor,import { Envelope } from '@phosphor-icons/react',"<Envelope size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Email contact inbox,Outline,meaningful,decorative|meaningful|interactive
+30,Communication,chat-circle,chat comment bubble conversation,Phosphor,import { ChatCircle } from '@phosphor-icons/react',"<ChatCircle size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Chat comment message,Outline,meaningful,decorative|meaningful|interactive
+31,Communication,phone,call mobile telephone contact,Phosphor,import { Phone } from '@phosphor-icons/react',"<Phone size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Phone contact call,Outline,meaningful,decorative|meaningful|interactive
+32,Communication,paper-plane-tilt,submit dispatch message airplane,Phosphor,import { PaperPlaneTilt } from '@phosphor-icons/react',"<PaperPlaneTilt size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Send message submit,Outline,meaningful,decorative|meaningful|interactive
+33,Communication,bell,notification alert ring reminder,Phosphor,import { Bell } from '@phosphor-icons/react',"<Bell size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Notification bell alert,Outline,meaningful,decorative|meaningful|interactive
+34,User,user,profile account person avatar,Phosphor,import { User } from '@phosphor-icons/react',"<User size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",User profile account,Outline,meaningful,decorative|meaningful|interactive
+35,User,users,team group people members,Phosphor,import { Users } from '@phosphor-icons/react',"<Users size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Team group members,Outline,meaningful,decorative|meaningful|interactive
+36,User,user-plus,add invite new member,Phosphor,import { UserPlus } from '@phosphor-icons/react',"<UserPlus size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Add user invite,Outline,interactive,decorative|meaningful|interactive
+37,User,sign-in,signin authenticate enter,Phosphor,import { SignIn } from '@phosphor-icons/react',"<SignIn size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Login signin,Outline,meaningful,decorative|meaningful|interactive
+38,User,sign-out,signout exit leave logout,Phosphor,import { SignOut } from '@phosphor-icons/react',"<SignOut size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Logout signout,Outline,meaningful,decorative|meaningful|interactive
+39,Media,image,photo picture gallery thumbnail,Phosphor,import { Image } from '@phosphor-icons/react',"<Image size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Image photo gallery,Outline,meaningful,decorative|meaningful|interactive
+40,Media,video,movie film play record,Phosphor,import { Video } from '@phosphor-icons/react',"<Video size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Video player media,Outline,interactive,decorative|meaningful|interactive
+41,Media,play,start video audio media,Phosphor,import { Play } from '@phosphor-icons/react',"<Play size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Play button video audio,Outline,interactive,decorative|meaningful|interactive
+42,Media,pause,stop halt video audio,Phosphor,import { Pause } from '@phosphor-icons/react',"<Pause size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Pause button media,Outline,interactive,decorative|meaningful|interactive
+43,Media,speaker-high,sound audio speaker music,Phosphor,import { SpeakerHigh } from '@phosphor-icons/react',"<SpeakerHigh size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Volume audio sound,Outline,meaningful,decorative|meaningful|interactive
+44,Media,microphone,microphone record voice audio,Phosphor,import { Microphone } from '@phosphor-icons/react',"<Microphone size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Microphone voice record,Outline,meaningful,decorative|meaningful|interactive
+45,Media,camera,photo capture snapshot picture,Phosphor,import { Camera } from '@phosphor-icons/react',"<Camera size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Camera photo capture,Outline,meaningful,decorative|meaningful|interactive
+46,Commerce,shopping-cart,cart checkout basket buy,Phosphor,import { ShoppingCart } from '@phosphor-icons/react',"<ShoppingCart size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Shopping cart e-commerce,Outline,meaningful,decorative|meaningful|interactive
+47,Commerce,shopping-bag,purchase buy store bag,Phosphor,import { ShoppingBag } from '@phosphor-icons/react',"<ShoppingBag size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Shopping bag purchase,Outline,meaningful,decorative|meaningful|interactive
+48,Commerce,credit-card,payment card checkout stripe,Phosphor,import { CreditCard } from '@phosphor-icons/react',"<CreditCard size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Payment credit card,Outline,interactive,decorative|meaningful|interactive
+49,Commerce,currency-dollar,money price currency cost,Phosphor,import { CurrencyDollar } from '@phosphor-icons/react',"<CurrencyDollar size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Price money currency,Outline,meaningful,decorative|meaningful|interactive
+50,Commerce,tag,label price discount sale,Phosphor,import { Tag } from '@phosphor-icons/react',"<Tag size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Price tag label,Outline,meaningful,decorative|meaningful|interactive
+51,Commerce,gift,present reward bonus offer,Phosphor,import { Gift } from '@phosphor-icons/react',"<Gift size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Gift reward offer,Outline,meaningful,decorative|meaningful|interactive
+52,Commerce,percent,discount sale offer promo,Phosphor,import { Percent } from '@phosphor-icons/react',"<Percent size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Discount percentage sale,Outline,meaningful,decorative|meaningful|interactive
+53,Data,chart-bar,analytics statistics graph metrics,Phosphor,import { ChartBar } from '@phosphor-icons/react',"<ChartBar size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Bar chart analytics,Outline,meaningful,decorative|meaningful|interactive
+54,Data,chart-pie,statistics distribution breakdown,Phosphor,import { ChartPie } from '@phosphor-icons/react',"<ChartPie size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Pie chart distribution,Outline,meaningful,decorative|meaningful|interactive
+55,Data,trend-up,growth increase positive trend,Phosphor,import { TrendUp } from '@phosphor-icons/react',"<TrendUp size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Growth trend positive,Outline,meaningful,decorative|meaningful|interactive
+56,Data,trend-down,decline decrease negative trend,Phosphor,import { TrendDown } from '@phosphor-icons/react',"<TrendDown size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Decline trend negative,Outline,meaningful,decorative|meaningful|interactive
+57,Data,pulse,activity heartbeat monitor live,Phosphor,import { Pulse } from '@phosphor-icons/react',"<Pulse size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Activity monitor pulse,Outline,meaningful,decorative|meaningful|interactive
+58,Data,database,storage server data backend,Phosphor,import { Database } from '@phosphor-icons/react',"<Database size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Database storage,Outline,meaningful,decorative|meaningful|interactive
+59,Files,file,document page paper doc,Phosphor,import { File } from '@phosphor-icons/react',"<File size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",File document,Outline,meaningful,decorative|meaningful|interactive
+60,Files,file-text,document text page article,Phosphor,import { FileText } from '@phosphor-icons/react',"<FileText size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Text document article,Outline,meaningful,decorative|meaningful|interactive
+61,Files,folder,directory organize group files,Phosphor,import { Folder } from '@phosphor-icons/react',"<Folder size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Folder directory,Outline,meaningful,decorative|meaningful|interactive
+62,Files,folder-open,expanded browse files view,Phosphor,import { FolderOpen } from '@phosphor-icons/react',"<FolderOpen size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Open folder browse,Outline,meaningful,decorative|meaningful|interactive
+63,Files,paperclip,attachment attach file link,Phosphor,import { Paperclip } from '@phosphor-icons/react',"<Paperclip size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Attachment paperclip,Outline,meaningful,decorative|meaningful|interactive
+64,Files,link,url hyperlink chain connect,Phosphor,import { Link } from '@phosphor-icons/react',"<Link size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Link URL hyperlink,Outline,meaningful,decorative|meaningful|interactive
+65,Files,clipboard,paste copy buffer notes,Phosphor,import { Clipboard } from '@phosphor-icons/react',"<Clipboard size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Clipboard paste,Outline,meaningful,decorative|meaningful|interactive
+66,Layout,grid-four,tiles gallery layout dashboard,Phosphor,import { GridFour } from '@phosphor-icons/react',"<GridFour size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Grid layout gallery,Outline,meaningful,decorative|meaningful|interactive
+67,Layout,list-bullets,rows table lines items,Phosphor,import { ListBullets } from '@phosphor-icons/react',"<ListBullets size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",List view rows,Outline,meaningful,decorative|meaningful|interactive
+68,Layout,columns,layout split dual sidebar,Phosphor,import { Columns } from '@phosphor-icons/react',"<Columns size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Column layout split,Outline,meaningful,decorative|meaningful|interactive
+69,Layout,arrows-out,fullscreen expand enlarge zoom,Phosphor,import { ArrowsOut } from '@phosphor-icons/react',"<ArrowsOut size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Fullscreen maximize,Outline,meaningful,decorative|meaningful|interactive
+70,Layout,arrows-in,reduce shrink collapse exit,Phosphor,import { ArrowsIn } from '@phosphor-icons/react',"<ArrowsIn size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Minimize reduce,Outline,meaningful,decorative|meaningful|interactive
+71,Layout,sidebar,panel drawer navigation menu,Phosphor,import { Sidebar } from '@phosphor-icons/react',"<Sidebar size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Sidebar panel,Outline,meaningful,decorative|meaningful|interactive
+72,Social,heart,like love favorite wishlist,Phosphor,import { Heart } from '@phosphor-icons/react',"<Heart size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Like favorite love,Outline,meaningful,decorative|meaningful|interactive
+73,Social,star,rating review favorite bookmark,Phosphor,import { Star } from '@phosphor-icons/react',"<Star size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Star rating favorite,Outline,meaningful,decorative|meaningful|interactive
+74,Social,thumbs-up,like approve agree positive,Phosphor,import { ThumbsUp } from '@phosphor-icons/react',"<ThumbsUp size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Like approve thumb,Outline,meaningful,decorative|meaningful|interactive
+75,Social,thumbs-down,dislike disapprove disagree negative,Phosphor,import { ThumbsDown } from '@phosphor-icons/react',"<ThumbsDown size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Dislike disapprove,Outline,meaningful,decorative|meaningful|interactive
+76,Social,bookmark,save later favorite mark,Phosphor,import { Bookmark } from '@phosphor-icons/react',"<Bookmark size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Bookmark save,Outline,meaningful,decorative|meaningful|interactive
+77,Social,flag,report mark important highlight,Phosphor,import { Flag } from '@phosphor-icons/react',"<Flag size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Flag report,Outline,meaningful,decorative|meaningful|interactive
+78,Device,device-mobile,mobile phone device touch,Phosphor,import { DeviceMobile } from '@phosphor-icons/react',"<DeviceMobile size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Mobile smartphone,Outline,meaningful,decorative|meaningful|interactive
+79,Device,device-tablet,ipad device touch screen,Phosphor,import { DeviceTablet } from '@phosphor-icons/react',"<DeviceTablet size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Tablet device,Outline,meaningful,decorative|meaningful|interactive
+80,Device,monitor,desktop screen computer display,Phosphor,import { Monitor } from '@phosphor-icons/react',"<Monitor size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Desktop monitor,Outline,meaningful,decorative|meaningful|interactive
+81,Device,laptop,notebook computer portable device,Phosphor,import { Laptop } from '@phosphor-icons/react',"<Laptop size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Laptop computer,Outline,meaningful,decorative|meaningful|interactive
+82,Device,printer,print document output paper,Phosphor,import { Printer } from '@phosphor-icons/react',"<Printer size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Printer print,Outline,meaningful,decorative|meaningful|interactive
+83,Security,lock,secure password protected private,Phosphor,import { Lock } from '@phosphor-icons/react',"<Lock size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Lock secure,Outline,meaningful,decorative|meaningful|interactive
+84,Security,lock-open,open access unsecure public,Phosphor,import { LockOpen } from '@phosphor-icons/react',"<LockOpen size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Unlock open,Outline,meaningful,decorative|meaningful|interactive
+85,Security,shield,protection security safe guard,Phosphor,import { Shield } from '@phosphor-icons/react',"<Shield size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Shield protection,Outline,meaningful,decorative|meaningful|interactive
+86,Security,key,password access unlock login,Phosphor,import { Key } from '@phosphor-icons/react',"<Key size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Key password,Outline,meaningful,decorative|meaningful|interactive
+87,Security,eye,view show visible password,Phosphor,import { Eye } from '@phosphor-icons/react',"<Eye size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Show password view,Outline,meaningful,decorative|meaningful|interactive
+88,Security,eye-slash,hide invisible password hidden,Phosphor,import { EyeSlash } from '@phosphor-icons/react',"<EyeSlash size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Hide password,Outline,meaningful,decorative|meaningful|interactive
+89,Location,map-pin,location marker place address,Phosphor,import { MapPin } from '@phosphor-icons/react',"<MapPin size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Location pin marker,Outline,meaningful,decorative|meaningful|interactive
+90,Location,map-trifold,map directions navigate geography location,Phosphor,import { MapTrifold } from '@phosphor-icons/react',"<MapTrifold size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Map directions,Outline,meaningful,decorative|meaningful|interactive
+91,Location,compass,compass direction pointer arrow,Phosphor,import { Compass } from '@phosphor-icons/react',"<Compass size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Navigation compass,Outline,meaningful,decorative|meaningful|interactive
+92,Location,globe,world international global web,Phosphor,import { Globe } from '@phosphor-icons/react',"<Globe size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Globe world,Outline,meaningful,decorative|meaningful|interactive
+93,Time,calendar,date schedule event appointment,Phosphor,import { Calendar } from '@phosphor-icons/react',"<Calendar size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Calendar date,Outline,meaningful,decorative|meaningful|interactive
+94,Time,arrows-clockwise,reload sync update refresh,Phosphor,import { ArrowsClockwise } from '@phosphor-icons/react',"<ArrowsClockwise size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Refresh reload,Outline,meaningful,decorative|meaningful|interactive
+95,Time,arrow-counter-clockwise,undo back revert history,Phosphor,import { ArrowCounterClockwise } from '@phosphor-icons/react',"<ArrowCounterClockwise size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Undo revert,Outline,meaningful,decorative|meaningful|interactive
+96,Time,arrow-clockwise,redo forward repeat history,Phosphor,import { ArrowClockwise } from '@phosphor-icons/react',"<ArrowClockwise size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Redo forward,Outline,meaningful,decorative|meaningful|interactive
+97,Development,code,develop programming syntax html,Phosphor,import { Code } from '@phosphor-icons/react',"<Code size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Code development,Outline,meaningful,decorative|meaningful|interactive
+98,Development,terminal,console cli command shell,Phosphor,import { Terminal } from '@phosphor-icons/react',"<Terminal size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Terminal console,Outline,meaningful,decorative|meaningful|interactive
+99,Development,git-branch,version control branch merge,Phosphor,import { GitBranch } from '@phosphor-icons/react',"<GitBranch size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Git branch,Outline,meaningful,decorative|meaningful|interactive
+100,Development,github-logo,repository code open source,Phosphor,import { GithubLogo } from '@phosphor-icons/react',"<GithubLogo size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",GitHub repository,Outline,meaningful,decorative|meaningful|interactive
+101,Style Config,bold-typography-icon-system,"bold typography, editorial, mono label, phosphor, weight regular, minimal, icon+label required, size 20–32",Phosphor (react-native),import { ArrowRight } from 'phosphor-react-native',"<ArrowRight size={20} weight=""regular"" color={colors.accent} />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Bold Typography Mobile style: weight=""regular"". Size 20px for UI controls, 32px for feature anchors. Icons MUST be paired with a Mono-stack text label (JetBrains Mono). Standalone icons only allowed for standard navigation (e.g., Back arrow). Accent color #FF3D00 only.",Outline,meaningful,decorative|meaningful|interactive
+102,Style Config,cyberpunk-icon-system,"cyberpunk, neon, glow, hud, phosphor, weight regular, accent glow, dark, angular, react native",Phosphor (react-native),import { Lightning } from 'phosphor-react-native',"<Lightning size={24} weight=""regular"" color={colors.accent} />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Cyberpunk Mobile HUD style: weight=""regular"", color={colors.accent} (#00FF88 Matrix Green). Wrap every icon in a View with shadowColor: colors.accent / shadowOpacity: 0.6 / shadowRadius: 8 to simulate neon glow. Use borderRadius: 0 on wrapper. Avoid rounded icon containers. Always pair icon with data label in JetBrains Mono.",Outline,meaningful,decorative|meaningful|interactive
+103,Style Config,academia-icon-system,"academia, library, brass, ornate, phosphor, weight thin, muted warm, scholarly, mobile",Phosphor (react-native),import { BookOpen } from 'phosphor-react-native',"<BookOpen size={22} weight=""thin"" color={colors.brass} />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Academia (Scholarly Mobile) style: weight=""thin"" (thin engraved feel), color={colors.brass} (#C9A962). No sharp geometric or tech-inspired icons. Prefer book, scroll, key, quill-type icon metaphors. Wrap in circular View with 1px brass border. Avoid neon or saturated colored icons. All icon-only navigation must have an accessibilityLabel.",Outline,meaningful,decorative|meaningful|interactive
+104,Style Config,web3-bitcoin-icon-system,"web3, bitcoin, defi, crypto, neon orange, holographic, blurview, phosphor, glow, fintech mobile",Phosphor (react-native),import { TrendUp } from 'phosphor-react-native',"<TrendUp size={24} weight=""regular"" color={colors.bitcoinOrange} />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Bitcoin DeFi Mobile style: weight=""regular"", color={colors.bitcoinOrange} (#F7931A). Wrap icons in circular BlurView (intensity: 20) with 1px borderColor: '#F7931A' border (Holographic Node effect). shadowColor: '#F7931A' / shadowOpacity: 0.4 / shadowRadius: 8. Prefer finance/data icons (TrendUp, Wallet, Shield, Layers). All data icons use JetBrains Mono label.",Outline,meaningful,decorative|meaningful|interactive
+105,Guideline,icon-context-accessibility,"decorative icon aria hidden, meaningful icon text alternative, icon button accessible label, accessible name, aria pressed, aria expanded, semantic context, phosphor, heroicons",Phosphor (primary) + Heroicons (fallback),import { Question } from '@phosphor-icons/react'; import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';,"Prefer the most semantically precise Phosphor icon, even if it is outside this curated subset. Use Heroicons only as a consistent fallback. Keep one visual family per surface. Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Contextual icon semantics, icon accessibility, and library fallback rules",Outline,guideline,decorative|meaningful|interactive

package/dist/assets/uiux/data/landing.csv

@@ -0,0 +1,35 @@
+No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization,Pattern ID,Aliases
+1,Hero + Features + CTA,"hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, cta, call-to-action",Hero with headline/image > Value prop > Key features (3-5) > CTA section > Footer,Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover","Deep CTA placement. For CTA label text, verify at least 4.5:1 against the button fill; use 7:1 only when the product explicitly targets AAA normal-text contrast. Keep focus and component boundaries independently visible. Disable hero parallax under reduced motion and render its static final state.",hero-features-cta,
+2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, social-proof-focused, social proof focused, trust, reviews, cta, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state",Hero > Problem statement > Solution overview > Testimonials carousel > CTA,Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in","Social proof before CTA. Use a concise set of verified testimonials with photo, name, and role. CTA after social proof. Provide previous/next and pause controls; stop rotation on focus, hover, and reduced motion; announce slide position. Previous/next buttons and keyboard controls must expose every slide without dragging.",hero-testimonials-cta,Conversion-Optimized + Social Proof|Feature-Rich + Social Proof|Feature-Rich Showcase + Social Proof|Hero-Centric + Social Proof|Minimal & Direct + Social Proof|Social Proof + Conversion|Social Proof + Feature-Rich|Social Proof-Focused|Social Proof-Focused + Conversion|Social Proof-Focused + Feature-Rich|Storytelling + Social Proof|Storytelling-Driven + Social Proof
+3,Product Demo + Features,"demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo",Hero > Product video/mockup (center) > Feature breakdown per section > Comparison (optional) > CTA,Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights","Use an interactive demo only when it explains value better than static media. Provide captions, transcript, visible play/pause controls, and a non-video fallback; do not autoplay under reduced motion. Pause media when offscreen or hidden and keep the final product state available as static content.",product-demo-features,Conversion-Optimized + Demo|Feature-Rich Showcase + Demo|Feature-Rich Showcase + Interactive Demo|Interactive Demo + Feature-Rich|Interactive Demo + Minimal|Interactive Product Demo|Interactive Product Demo + Minimal|Interactive Product Demo + Social Proof|Interactive Product Demo + Storytelling|Minimal & Direct + Demo|Social Proof-Focused + Demo
+4,Minimal Single Column,"minimal, simple, direct, minimal & direct, minimal-direct, single-column, clean",Hero headline > Short description > Benefit bullets (3 max) > CTA > Footer,"Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Verify CTA label text against its button fill at 4.5:1 minimum; use 7:1 only for an explicit AAA normal-text target.,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.,minimal-single-column,Minimal & Direct
+5,Funnel (3-Step Conversion),"funnel, conversion, conversion-optimized, conversion optimized, steps, wizard, onboarding",Hero > Step 1 (problem) > Step 2 (solution) > Step 3 (action) > CTA progression,Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.,funnel-3-step-conversion,Conversion + Feature-Rich|Conversion-Optimized|Conversion-Optimized + Feature-Rich|Feature-Rich + Conversion|Hero-Centric + Conversion|Minimal & Direct + Conversion|Minimal + Conversion
+6,Comparison Table + CTA,"comparison, table, compare, versus, cta",Hero > Problem intro > Comparison table (product vs competitors) > Pricing (optional) > CTA,Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.,comparison-table-cta,
+7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","Hero (benefit headline) > Lead magnet preview (ebook cover, checklist, etc) > Form (minimal fields) > CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Ask only for information necessary to deliver the lead magnet. Preview its value and show submission progress.,lead-magnet-form,
+8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta",Hero (pricing headline) > Price comparison cards > Feature comparison table > FAQ section > Final CTA,Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Highlight the plan that matches the intended audience and show actual annual savings transparently. Use FAQs to address concerns.,pricing-page-cta,
+9,Video-First Hero,"video, hero, media, visual, engaging",Hero with video background > Key features overlay > Benefits section > CTA,Overlay on video (center/bottom) + Bottom section,Use an overlay strong enough for text contrast. Brand accent for CTA. Light text only when the measured contrast passes.,"Video autoplay muted, parallax scroll, text fade-in on scroll",Use video only when it demonstrates value better than static media. Add captions for accessibility. Compress video for performance. Provide captions and a visible pause control; use a static poster when reduced motion is requested. Pause video when offscreen or hidden; the reduced-motion poster must preserve the final message and CTA.,video-first-hero,
+10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive",Intro hook > Chapter 1 (problem) > Chapter 2 (journey) > Chapter 3 (solution) > Climax CTA,End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Keep the narrative understandable without scroll-driven effects. Use progress indicator. Mobile: simplify animations. Keep DOM reading order complete; disable parallax and scroll-scrub under reduced motion. Pause scroll animation when offscreen or hidden and render each chapter in its final readable state under reduced motion.,scroll-triggered-storytelling,Storytelling + Data|Storytelling + Feature-Rich|Storytelling + Hero-Centric|Storytelling-Driven|Storytelling-Driven + Feature-Rich|Storytelling-Driven + Hero|Storytelling-Driven + Hero-Centric
+11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic",Dynamic hero (personalized) > Relevant features > Tailored testimonials > Smart CTA,Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",Validate personalization with consent-aware product analytics. Requires analytics integration. Fallback for new users.,ai-personalization-landing,
+12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify, countdown accessibility, pause animation, reduced motion final state, verified waitlist count",Hero with countdown > Product teaser/preview > Email capture form > Social proof (waitlist count),Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons","Explain early-access benefits without fabricated scarcity. Show a waitlist count only when it is current, verified, and dated. Provide a static launch deadline, pause decorative countdown motion when offscreen/hidden, and render the final readable timer state under reduced motion. Email form and referral actions remain keyboard operable.",waitlist-coming-soon,
+13,Comparison Table Focus,"comparison, table, versus, compare, features",Hero (problem statement) > Comparison matrix (you vs competitors) > Feature deep-dive > Winner CTA,After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. Measure comparison performance with product-specific analytics. Be factual. Include pricing if favorable.,comparison-table-focus,
+14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription",Hero (value proposition) > Pricing cards (3 tiers) > Feature comparison > FAQ > Final CTA,Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Show actual monthly and annual totals and savings transparently. Explain plan differences and address objections in the FAQ.,pricing-focused-landing,
+15,App Store Style Landing,"app, mobile, download, store, install, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state, single pointer buttons",Hero with device mockup > Screenshots carousel > Features with icons > Reviews/ratings > Download CTAs,Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse","Show real screenshots and only current verified ratings. Provide platform-specific CTAs, buttons and keyboard controls in addition to swipe, and pause any auto-rotation. Stop auto-rotation on focus, hover, offscreen/hidden, or reduced motion and render the selected screenshot as the static final state.",app-store-style-landing,
+16,FAQ/Documentation Landing,"faq, documentation, help, support, questions, faq/documentation, knowledge base",Hero with search bar > Popular categories > FAQ accordion > Contact/support CTA,Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.,faq-documentation-landing,FAQ + Minimal|Feature-Rich + Documentation|Minimal + Documentation
+17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation, immersive/interactive experience",Full-screen interactive element > Guided product tour > Key benefits revealed > CTA after completion,After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations","Measure engagement for the specific audience and device mix. Performance trade-off. Provide skip option. Mobile fallback essential. Provide skip, keyboard, reduced-motion, and non-3D fallback paths. Pause animation when offscreen/hidden and preserve the completed final state when reduced motion is enabled.",immersive-interactive-experience,Immersive + Feature-Rich|Immersive + Interactive
+18,Event/Conference Landing,"event, conference, meetup, registration, schedule, hero-centric design, hero-centric, countdown accessibility, pause animation, reduced motion final state",Hero (date/location/countdown) > Speakers grid > Agenda/schedule > Sponsors > Register CTA,Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts. Expose the exact deadline as text; pause decorative countdown motion offscreen/hidden and show a static final state under reduced motion.,event-conference-landing,
+19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, social-proof-focused, stars",Hero (product + aggregate rating) > Rating breakdown > Individual reviews > Buy/CTA,After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.,product-review-ratings-focused,
+20,Community/Forum Landing,"community, forum, social, members, discussion, verified member count, live update accessibility, pause updates, reduced motion final state",Hero (community value prop) > Popular topics/categories > Active members showcase > Join CTA,Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Preview real community value and simplify onboarding. Show member and activity counts only when current, verified, and dated; label activity as live only when backed by an active real-time source. Provide pause/update-frequency controls for moving feeds, stop work offscreen/hidden, and keep a static final state under reduced motion.",community-forum-landing,
+21,Before-After Transformation,"before-after, transformation, results, comparison, accessible drag interaction, drag single pointer alternative, keyboard drag alternative",Hero (problem state) > Transformation slider/comparison > How it works > Results CTA,After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. Measure the outcome with product-specific analytics. Real results. Specific metrics. Guarantee offer. Provide arrow buttons and keyboard steps so dragging is not required. Arrow buttons and keyboard steps expose the same final before/after positions; reduced motion removes reveal animation.,before-after-transformation,
+22,Marketplace / Directory,"marketplace, directory, search, listing, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state, marketplace carousel, keyboard carousel controls",Hero (Search focused) > Categories > Featured Listings > Trust/Safety > CTA (Become a host/seller),Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,"Search autocomplete animation, map hover pins, card carousel","Search is the primary CTA. Reduce friction with useful suggestions. For featured-listing carousels, provide previous/next and play/pause buttons, full keyboard access, and a single-pointer alternative to swiping; stop rotation on focus, hover, offscreen/hidden, or reduced motion and render the selected listing as the static final state.",marketplace-directory,
+23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct, verified subscriber count, dated social proof",Hero (Value Prop + Form) > Recent Issues/Archives > Social Proof (Subscriber count) > About Author,Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,"Text highlight animations, typewriter effect, subtle fade-in","Keep the form to the fields actually required and link to a sample issue. Show a subscriber count only when it is current, verified, and dated; otherwise use qualitative social proof.",newsletter-content-first,
+24,Webinar Registration,"webinar, registration, event, training, live, webinar ticker accessibility, pause ticker, verified seat availability, verified live status, reduced motion final state",Hero (Topic + Timer + Form) > What you'll learn > Speaker Bio > Urgency/Bonuses > Form (again),Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,"Countdown timer, speaker avatar float, urgent ticker","State the event time and timezone in text. Claim limited seats or live status only when current capacity or stream state is verified and timestamped. Provide pause/hide controls for the urgency ticker, stop it offscreen/hidden, keep controls keyboard operable, and render a static final state under reduced motion.",webinar-registration,
+25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state",Hero (Video/Mission) > Solutions by Industry > Solutions by Role > Client Logos > Contact Sales,Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,"Slow video background, logo carousel, tab switching for industries",Path selection (I am a...). Mega menu navigation. Trust signals prominent. Provide pause/stop for video and rotating logos; stop on focus and reduced motion. Logo carousel controls must be keyboard operable; pause moving media offscreen/hidden and render a static final state under reduced motion.,enterprise-gateway,Data-Dense + Drill-Down|Data-Dense + Storytelling|Data-Dense Dashboard
+26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals",Hero (Name/Role) > Project Grid (Masonry) > About/Philosophy > Contact,Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,"Image lazy load reveal, hover overlay info, lightbox view",Visuals first. Filter by category. Fast loading essential.,portfolio-grid,Portfolio + Hero-Centric
+27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven",Intro (Vertical) > The Journey (Horizontal Track) > Detail Reveal > Vertical Footer,Floating Sticky CTA or End of Horizontal Track,Continuous palette transition. Chapter colors. Progress bar #000000.,"Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator",Immersive product discovery. High engagement. Keep navigation visible. Preserve a normal vertical navigation path and disable scroll-jacking under reduced motion. Pause effects when offscreen/hidden and render every chapter in its final vertical reading state under reduced motion.,horizontal-scroll-journey,
+28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase, feature-rich showcase",Hero > Bento Grid (Key Features) > Detail Cards > Tech Specs > CTA,Floating Action Button or Bottom of Grid,Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.,"Hover card scale (1.02), video inside cards, tilt effect, staggered reveal",Scannable value props. High information density without clutter. Mobile stack. Keep cards usable without hover and suppress tilt/stagger/video motion under reduced motion. Pause card media offscreen/hidden and render cards in their final readable state under reduced motion.,bento-grid-showcase,
+29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product, interactive product demo, accessible drag interaction, drag single pointer alternative, keyboard drag alternative",Hero (Configurator) > Feature Highlight (synced) > Price/Specs > Purchase,Inside Configurator UI + Sticky Bottom Bar,Neutral studio background. Product: Realistic materials. UI: Minimal overlay.,"Real-time rendering, material swap animation, camera rotate/zoom, light reflection",Let users inspect product details before purchase. Provide buttons and keyboard controls for rotate/zoom plus a 2D/specification fallback. Named rotate/zoom buttons and keyboard controls replace drag gestures; pause rendering offscreen/hidden and preserve the chosen configuration as the reduced-motion final state.,interactive-3d-configurator,
+30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative",Prompt/Input Hero > Generated Result Preview > How it Works > Value Prop,Input Field (Hero) + 'Try it' Buttons,Adaptive to user input. Dark mode for compute feel. Neon accents.,"Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start. Disable typing, shimmer, and morphing effects when reduced motion is requested. Pause loaders offscreen/hidden and render generated content in its final state under reduced motion.",ai-driven-dynamic-landing,
+31,Feature-Rich Showcase,"feature-rich, feature-rich showcase, features, showcase, product showcase",Hero (value prop) > Feature grid/cards (4-6) > Use cases or benefits > Social proof or logos > CTA,Hero (sticky) + After features + Bottom,Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.,"Feature card hover lift, scroll reveal, icon micro-interactions",Clear feature hierarchy. One key message per card. Strong CTA repetition.,feature-rich-showcase,Feature-Rich + Data|Showcase + Feature-Rich
+32,Hero-Centric Design,"hero-centric, hero-centric design, hero-first, hero above fold",Full-bleed Hero (headline + visual) > Single value prop strip > Key benefit or proof > Primary CTA,Hero dominant (center/bottom) + Sticky nav CTA,Hero: High-impact visual. Minimal text. Verify CTA label text against the button fill at 4.5:1 minimum; use 7:1 only for an explicit AAA normal-text target.,"Hero parallax or video, CTA pulse on scroll, minimal chrome",One primary CTA. Let the hero dominate the initial viewport without hiding the next content cue. Use a static hero and non-pulsing CTA when reduced motion is requested; provide video controls. Pause hero media offscreen/hidden and keep the final hero message and CTA static under reduced motion.,hero-centric-design,Feature-Rich Showcase + Hero-Centric|Hero-Centric + Feature-Rich|Hero-Centric Design + Feature-Rich
+33,Trust & Authority + Conversion,"trust & authority, trust, authority, conversion, credibility, enterprise, carousel accessibility, keyboard accessible carousel, pause auto rotation, reduced motion final state","Hero (mission/credibility) > Proof (logos, certs, stats) > Solution overview > Clear CTA path",Contact Sales / Get Quote (primary) + Nav,Navy/Grey corporate. Trust blue. Accent for CTA only.,"Logo carousel, stat counters, testimonial strip","Security badges. Case studies. Transparent pricing. Low-friction form. Provide pause/stop and stop the logo carousel on focus, hover, and reduced motion. Previous/next controls provide the keyboard equivalent; pause offscreen/hidden and render a static logo set under reduced motion.",trust-authority-conversion,Conversion + Trust|Conversion-Optimized + Trust|Data + Trust|Feature-Rich Showcase + Trust|Hero-Centric + Trust|Social Proof-Focused + Trust|Storytelling + Trust|Trust & Authority|Trust & Authority + Accessible|Trust & Authority + Conversion-Optimized|Trust & Authority + Feature|Trust & Authority + Feature-Rich|Trust & Authority + Minimal|Trust & Authority + Social Proof
+34,Real-Time / Operations Landing,"real-time, real-time monitor, operations, dashboard, telemetry, live data, live ticker accessibility, pause live updates, verified live status, reduced motion final state",Hero (product + live preview or status) > Key metrics/indicators > How it works > CTA (Start trial / Contact),Primary CTA in nav + After metrics,Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.,"Live data ticker, status pulse, minimal decoration","Offer a demo or sandbox and show trust signals. Label telemetry as live only when backed by a current source, with update time and stale state. Provide pause/hide or update-frequency controls for tickers and previews, stop offscreen/hidden work, support keyboard controls, and render a static final snapshot under reduced motion.",real-time-operations-landing,Feature-Rich + Real-Time|Feature-Rich Showcase + Real-Time|Real-Time + Feature-Rich|Real-Time Monitoring|Trust & Authority + Real-Time