@tinkcarlos/skillora 0.2.0

package/.claude/skills/frontend-design/references/color-palettes-full.md

@@ -0,0 +1,657 @@
+# Complete Color Palettes Reference
+
+95 curated color palettes organized by industry and mood.
+
+## How to Use
+
+Each palette follows the **60-30-10 rule**:
+- **Primary (60%)**: Main background or dominant color
+- **Secondary (30%)**: Supporting elements, cards, sections
+- **Accent (10%)**: CTAs, highlights, important elements
+- **Background**: Overall page background
+- **Text**: Primary text color
+
+---
+
+## SaaS & Technology (15 palettes)
+
+### 1. Modern SaaS Blue
+```css
+--primary: #3B82F6;      /* Blue */
+--secondary: #1E40AF;    /* Dark Blue */
+--accent: #F59E0B;       /* Amber */
+--background: #F8FAFC;   /* Light Gray */
+--text: #1E293B;         /* Slate */
+```
+
+### 2. Purple Tech
+```css
+--primary: #8B5CF6;      /* Violet */
+--secondary: #6366F1;    /* Indigo */
+--accent: #10B981;       /* Emerald */
+--background: #0F172A;   /* Dark Slate */
+--text: #F8FAFC;         /* White */
+```
+
+### 3. Startup Gradient
+```css
+--primary: #EC4899;      /* Pink */
+--secondary: #8B5CF6;    /* Purple */
+--accent: #06B6D4;       /* Cyan */
+--background: #FFFFFF;   /* White */
+--text: #18181B;         /* Zinc */
+```
+
+### 4. Dev Tools Dark
+```css
+--primary: #22D3EE;      /* Cyan */
+--secondary: #A78BFA;    /* Purple */
+--accent: #34D399;       /* Green */
+--background: #18181B;   /* Zinc */
+--text: #E4E4E7;         /* Light Gray */
+```
+
+### 5. Enterprise Blue
+```css
+--primary: #0284C7;      /* Sky */
+--secondary: #0369A1;    /* Dark Sky */
+--accent: #F97316;       /* Orange */
+--background: #F0F9FF;   /* Light Sky */
+--text: #0C4A6E;         /* Dark Cyan */
+```
+
+### 6. AI/ML Futuristic
+```css
+--primary: #06B6D4;      /* Cyan */
+--secondary: #8B5CF6;    /* Violet */
+--accent: #F43F5E;       /* Rose */
+--background: #020617;   /* Near Black */
+--text: #E2E8F0;         /* Light Slate */
+```
+
+### 7. Green Tech Eco
+```css
+--primary: #10B981;      /* Emerald */
+--secondary: #059669;    /* Green */
+--accent: #3B82F6;       /* Blue */
+--background: #ECFDF5;   /* Light Green */
+--text: #064E3B;         /* Dark Green */
+```
+
+### 8. Warm Tech
+```css
+--primary: #F97316;      /* Orange */
+--secondary: #EA580C;    /* Dark Orange */
+--accent: #0EA5E9;       /* Sky Blue */
+--background: #FFFBEB;   /* Amber Light */
+--text: #431407;         /* Brown */
+```
+
+### 9. Minimalist Tech
+```css
+--primary: #18181B;      /* Zinc */
+--secondary: #3F3F46;    /* Dark Zinc */
+--accent: #3B82F6;       /* Blue */
+--background: #FAFAFA;   /* Neutral */
+--text: #27272A;         /* Zinc */
+```
+
+### 10. Neon Cyberpunk
+```css
+--primary: #00FF00;      /* Neon Green */
+--secondary: #FF00FF;    /* Magenta */
+--accent: #00FFFF;       /* Cyan */
+--background: #0A0A0A;   /* Black */
+--text: #FFFFFF;         /* White */
+```
+
+### 11-15. Additional Tech Palettes
+```css
+/* 11. Ocean Tech */
+--primary: #0077B6; --secondary: #00B4D8; --accent: #90E0EF; --background: #CAF0F8; --text: #03045E;
+
+/* 12. Sunset Tech */
+--primary: #FF6B6B; --secondary: #4ECDC4; --accent: #FFE66D; --background: #2C3E50; --text: #FFFFFF;
+
+/* 13. Monochrome Tech */
+--primary: #2D3436; --secondary: #636E72; --accent: #00CEC9; --background: #DFE6E9; --text: #2D3436;
+
+/* 14. Berry Tech */
+--primary: #6C5CE7; --secondary: #A29BFE; --accent: #FD79A8; --background: #2D3436; --text: #FFFFFF;
+
+/* 15. Mint Tech */
+--primary: #00B894; --secondary: #55EFC4; --accent: #0984E3; --background: #FFFFFF; --text: #2D3436;
+```
+
+---
+
+## Healthcare & Wellness (10 palettes)
+
+### 16. Medical Trust
+```css
+--primary: #0EA5E9;      /* Sky Blue */
+--secondary: #14B8A6;    /* Teal */
+--accent: #F97316;       /* Orange */
+--background: #F0FDF4;   /* Mint */
+--text: #134E4A;         /* Dark Teal */
+```
+
+### 17. Calm Wellness
+```css
+--primary: #5EEAD4;      /* Teal */
+--secondary: #A7F3D0;    /* Green */
+--accent: #FB923C;       /* Orange */
+--background: #FFFFFF;   /* White */
+--text: #115E59;         /* Dark Teal */
+```
+
+### 18. Pharmacy Blue
+```css
+--primary: #2563EB;      /* Blue */
+--secondary: #60A5FA;    /* Light Blue */
+--accent: #16A34A;       /* Green */
+--background: #EFF6FF;   /* Blue Light */
+--text: #1E3A8A;         /* Dark Blue */
+```
+
+### 19. Mental Health Calm
+```css
+--primary: #A78BFA;      /* Purple */
+--secondary: #C4B5FD;    /* Light Purple */
+--accent: #F9A8D4;       /* Pink */
+--background: #FAF5FF;   /* Purple Light */
+--text: #4C1D95;         /* Dark Purple */
+```
+
+### 20. Fitness Energy
+```css
+--primary: #EF4444;      /* Red */
+--secondary: #F97316;    /* Orange */
+--accent: #22C55E;       /* Green */
+--background: #18181B;   /* Dark */
+--text: #FFFFFF;         /* White */
+```
+
+### 21-25. Additional Healthcare
+```css
+/* 21. Dental Clean */
+--primary: #06B6D4; --secondary: #67E8F9; --accent: #84CC16; --background: #FFFFFF; --text: #0E7490;
+
+/* 22. Pediatric Friendly */
+--primary: #F472B6; --secondary: #A855F7; --accent: #FACC15; --background: #FDF4FF; --text: #86198F;
+
+/* 23. Senior Care */
+--primary: #0369A1; --secondary: #7DD3FC; --accent: #F59E0B; --background: #F8FAFC; --text: #0C4A6E;
+
+/* 24. Natural Remedy */
+--primary: #65A30D; --secondary: #BEF264; --accent: #CA8A04; --background: #FEFCE8; --text: #365314;
+
+/* 25. Spa Relaxation */
+--primary: #99F6E4; --secondary: #5EEAD4; --accent: #E879F9; --background: #F0FDFA; --text: #134E4A;
+```
+
+---
+
+## Finance & Banking (10 palettes)
+
+### 26. Traditional Bank
+```css
+--primary: #1E3A5F;      /* Navy */
+--secondary: #059669;    /* Emerald */
+--accent: #EAB308;       /* Gold */
+--background: #FAFAFA;   /* Neutral */
+--text: #1F2937;         /* Gray */
+```
+
+### 27. Modern Fintech
+```css
+--primary: #6366F1;      /* Indigo */
+--secondary: #10B981;    /* Green */
+--accent: #F59E0B;       /* Amber */
+--background: #FFFFFF;   /* White */
+--text: #1E293B;         /* Slate */
+```
+
+### 28. Crypto Dark
+```css
+--primary: #F7931A;      /* Bitcoin Orange */
+--secondary: #627EEA;    /* Ethereum Blue */
+--accent: #00D395;       /* Green */
+--background: #0D1421;   /* Dark Blue */
+--text: #FFFFFF;         /* White */
+```
+
+### 29. Investment Premium
+```css
+--primary: #1C1917;      /* Stone Dark */
+--secondary: #78716C;    /* Stone */
+--accent: #CA8A04;       /* Yellow */
+--background: #FAFAF9;   /* Stone Light */
+--text: #1C1917;         /* Stone Dark */
+```
+
+### 30. Insurance Trust
+```css
+--primary: #1D4ED8;      /* Blue */
+--secondary: #3B82F6;    /* Light Blue */
+--accent: #22C55E;       /* Green */
+--background: #F8FAFC;   /* Slate Light */
+--text: #1E40AF;         /* Dark Blue */
+```
+
+### 31-35. Additional Finance
+```css
+/* 31. Wealth Management */
+--primary: #0F172A; --secondary: #334155; --accent: #D4AF37; --background: #F8FAFC; --text: #0F172A;
+
+/* 32. Budget App */
+--primary: #16A34A; --secondary: #4ADE80; --accent: #EF4444; --background: #FFFFFF; --text: #14532D;
+
+/* 33. Trading Platform */
+--primary: #059669; --secondary: #EF4444; --accent: #3B82F6; --background: #111827; --text: #F9FAFB;
+
+/* 34. Tax/Accounting */
+--primary: #0369A1; --secondary: #64748B; --accent: #16A34A; --background: #F1F5F9; --text: #0F172A;
+
+/* 35. Payments */
+--primary: #4F46E5; --secondary: #818CF8; --accent: #10B981; --background: #FFFFFF; --text: #312E81;
+```
+
+---
+
+## E-commerce & Retail (10 palettes)
+
+### 36. Classic E-commerce
+```css
+--primary: #DC2626;      /* Red */
+--secondary: #000000;    /* Black */
+--accent: #FBBF24;       /* Yellow */
+--background: #FFFFFF;   /* White */
+--text: #171717;         /* Neutral */
+```
+
+### 37. Fashion Luxury
+```css
+--primary: #000000;      /* Black */
+--secondary: #FFFFFF;    /* White */
+--accent: #B8860B;       /* Gold */
+--background: #FAFAFA;   /* Light */
+--text: #171717;         /* Dark */
+```
+
+### 38. Organic/Natural
+```css
+--primary: #65A30D;      /* Lime */
+--secondary: #A3E635;    /* Light Lime */
+--accent: #CA8A04;       /* Amber */
+--background: #FEFCE8;   /* Yellow Light */
+--text: #365314;         /* Dark Green */
+```
+
+### 39. Electronics Tech
+```css
+--primary: #3B82F6;      /* Blue */
+--secondary: #1E293B;    /* Slate */
+--accent: #F97316;       /* Orange */
+--background: #F8FAFC;   /* Light */
+--text: #0F172A;         /* Dark */
+```
+
+### 40. Kids/Toys
+```css
+--primary: #EF4444;      /* Red */
+--secondary: #3B82F6;    /* Blue */
+--accent: #FACC15;       /* Yellow */
+--background: #FFFFFF;   /* White */
+--text: #1F2937;         /* Gray */
+```
+
+### 41-45. Additional E-commerce
+```css
+/* 41. Beauty/Cosmetics */
+--primary: #DB2777; --secondary: #F472B6; --accent: #D4AF37; --background: #FDF2F8; --text: #831843;
+
+/* 42. Sports */
+--primary: #EF4444; --secondary: #1F2937; --accent: #22C55E; --background: #FFFFFF; --text: #111827;
+
+/* 43. Home Decor */
+--primary: #78716C; --secondary: #D6D3D1; --accent: #92400E; --background: #FAFAF9; --text: #1C1917;
+
+/* 44. Grocery */
+--primary: #16A34A; --secondary: #F97316; --accent: #EAB308; --background: #FFFFFF; --text: #14532D;
+
+/* 45. Jewelry */
+--primary: #1C1917; --secondary: #D4AF37; --accent: #E11D48; --background: #FFFBEB; --text: #1C1917;
+```
+
+---
+
+## Creative & Portfolio (10 palettes)
+
+### 46. Bold Creative
+```css
+--primary: #EC4899;      /* Pink */
+--secondary: #8B5CF6;    /* Violet */
+--accent: #06B6D4;       /* Cyan */
+--background: #18181B;   /* Dark */
+--text: #FAFAFA;         /* White */
+```
+
+### 47. Minimalist Portfolio
+```css
+--primary: #18181B;      /* Black */
+--secondary: #71717A;    /* Gray */
+--accent: #EF4444;       /* Red */
+--background: #FFFFFF;   /* White */
+--text: #18181B;         /* Black */
+```
+
+### 48. Warm Creative
+```css
+--primary: #F97316;      /* Orange */
+--secondary: #FBBF24;    /* Amber */
+--accent: #7C3AED;       /* Purple */
+--background: #FFFBEB;   /* Warm White */
+--text: #431407;         /* Brown */
+```
+
+### 49. Cool Artistic
+```css
+--primary: #06B6D4;      /* Cyan */
+--secondary: #3B82F6;    /* Blue */
+--accent: #F43F5E;       /* Rose */
+--background: #0F172A;   /* Dark */
+--text: #E2E8F0;         /* Light */
+```
+
+### 50. Photography Focus
+```css
+--primary: #000000;      /* Black */
+--secondary: #262626;    /* Neutral Dark */
+--accent: #FFFFFF;       /* White */
+--background: #171717;   /* Dark */
+--text: #E5E5E5;         /* Light Gray */
+```
+
+### 51-55. Additional Creative
+```css
+/* 51. Illustration */
+--primary: #F472B6; --secondary: #FBBF24; --accent: #22D3EE; --background: #FFFFFF; --text: #1F2937;
+
+/* 52. 3D/Motion */
+--primary: #8B5CF6; --secondary: #3B82F6; --accent: #10B981; --background: #0A0A0A; --text: #FFFFFF;
+
+/* 53. Typography Focus */
+--primary: #1C1917; --secondary: #A8A29E; --accent: #DC2626; --background: #FAF9F6; --text: #1C1917;
+
+/* 54. Brutalist Art */
+--primary: #FACC15; --secondary: #000000; --accent: #EF4444; --background: #FFFFFF; --text: #000000;
+
+/* 55. Vintage Creative */
+--primary: #92400E; --secondary: #D97706; --accent: #0D9488; --background: #FEF3C7; --text: #78350F;
+```
+
+---
+
+## Food & Restaurant (10 palettes)
+
+### 56. Classic Restaurant
+```css
+--primary: #B91C1C;      /* Burgundy */
+--secondary: #78350F;    /* Brown */
+--accent: #F59E0B;       /* Gold */
+--background: #FFFBEB;   /* Cream */
+--text: #1C1917;         /* Dark */
+```
+
+### 57. Modern Cafe
+```css
+--primary: #78350F;      /* Coffee */
+--secondary: #A3A3A3;    /* Gray */
+--accent: #22C55E;       /* Green */
+--background: #FAFAF9;   /* Warm White */
+--text: #292524;         /* Brown */
+```
+
+### 58. Fresh Healthy
+```css
+--primary: #16A34A;      /* Green */
+--secondary: #F97316;    /* Orange */
+--accent: #FACC15;       /* Yellow */
+--background: #FFFFFF;   /* White */
+--text: #14532D;         /* Dark Green */
+```
+
+### 59. Asian Cuisine
+```css
+--primary: #DC2626;      /* Red */
+--secondary: #000000;    /* Black */
+--accent: #EAB308;       /* Gold */
+--background: #FEF2F2;   /* Red Light */
+--text: #7F1D1D;         /* Dark Red */
+```
+
+### 60. Italian
+```css
+--primary: #16A34A;      /* Green */
+--secondary: #DC2626;    /* Red */
+--accent: #FFFFFF;       /* White */
+--background: #FEFCE8;   /* Cream */
+--text: #14532D;         /* Dark Green */
+```
+
+### 61-65. Additional Food
+```css
+/* 61. Bakery */
+--primary: #D97706; --secondary: #FDE68A; --accent: #92400E; --background: #FFFBEB; --text: #78350F;
+
+/* 62. Sushi */
+--primary: #1E3A8A; --secondary: #FFFFFF; --accent: #DC2626; --background: #F8FAFC; --text: #1E3A8A;
+
+/* 63. BBQ/Grill */
+--primary: #B91C1C; --secondary: #1C1917; --accent: #F97316; --background: #292524; --text: #FEF2F2;
+
+/* 64. Ice Cream */
+--primary: #EC4899; --secondary: #A5F3FC; --accent: #FDE047; --background: #FFFFFF; --text: #831843;
+
+/* 65. Wine Bar */
+--primary: #7F1D1D; --secondary: #44403C; --accent: #D4AF37; --background: #1C1917; --text: #FEF2F2;
+```
+
+---
+
+## Education & Learning (10 palettes)
+
+### 66. Academic Blue
+```css
+--primary: #2563EB;      /* Blue */
+--secondary: #7C3AED;    /* Purple */
+--accent: #F97316;       /* Orange */
+--background: #EFF6FF;   /* Sky */
+--text: #1E40AF;         /* Dark Blue */
+```
+
+### 67. Kids Learning
+```css
+--primary: #F97316;      /* Orange */
+--secondary: #3B82F6;    /* Blue */
+--accent: #22C55E;       /* Green */
+--background: #FFFBEB;   /* Warm */
+--text: #1F2937;         /* Gray */
+```
+
+### 68. Online Course
+```css
+--primary: #8B5CF6;      /* Purple */
+--secondary: #06B6D4;    /* Cyan */
+--accent: #F59E0B;       /* Amber */
+--background: #FFFFFF;   /* White */
+--text: #1E293B;         /* Slate */
+```
+
+### 69-75. Additional Education
+```css
+/* 69. University */
+--primary: #1E3A8A; --secondary: #FBBF24; --accent: #DC2626; --background: #F8FAFC; --text: #1E3A8A;
+
+/* 70. Language Learning */
+--primary: #059669; --secondary: #F59E0B; --accent: #EC4899; --background: #FFFFFF; --text: #064E3B;
+
+/* 71. STEM */
+--primary: #0EA5E9; --secondary: #10B981; --accent: #F97316; --background: #F0F9FF; --text: #0369A1;
+
+/* 72. Art Education */
+--primary: #EC4899; --secondary: #8B5CF6; --accent: #FACC15; --background: #FFFFFF; --text: #831843;
+
+/* 73. Music School */
+--primary: #7C3AED; --secondary: #1F2937; --accent: #F59E0B; --background: #FAF5FF; --text: #4C1D95;
+
+/* 74. Test Prep */
+--primary: #16A34A; --secondary: #3B82F6; --accent: #EF4444; --background: #FFFFFF; --text: #14532D;
+
+/* 75. Corporate Training */
+--primary: #0369A1; --secondary: #64748B; --accent: #F97316; --background: #F8FAFC; --text: #0C4A6E;
+```
+
+---
+
+## Travel & Hospitality (10 palettes)
+
+### 76. Travel Adventure
+```css
+--primary: #0EA5E9;      /* Sky */
+--secondary: #F97316;    /* Orange */
+--accent: #22C55E;       /* Green */
+--background: #FFFFFF;   /* White */
+--text: #0C4A6E;         /* Dark Blue */
+```
+
+### 77. Luxury Hotel
+```css
+--primary: #1C1917;      /* Black */
+--secondary: #D4AF37;    /* Gold */
+--accent: #FFFFFF;       /* White */
+--background: #FAFAF9;   /* Cream */
+--text: #1C1917;         /* Black */
+```
+
+### 78. Beach Resort
+```css
+--primary: #06B6D4;      /* Cyan */
+--secondary: #FBBF24;    /* Yellow */
+--accent: #F43F5E;       /* Rose */
+--background: #ECFEFF;   /* Cyan Light */
+--text: #155E75;         /* Dark Cyan */
+```
+
+### 79-85. Additional Travel
+```css
+/* 79. Mountain/Ski */
+--primary: #1E3A8A; --secondary: #FFFFFF; --accent: #DC2626; --background: #EFF6FF; --text: #1E3A8A;
+
+/* 80. Safari */
+--primary: #92400E; --secondary: #65A30D; --accent: #DC2626; --background: #FEF3C7; --text: #78350F;
+
+/* 81. City Guide */
+--primary: #374151; --secondary: #9CA3AF; --accent: #EF4444; --background: #FFFFFF; --text: #111827;
+
+/* 82. Cruise */
+--primary: #0369A1; --secondary: #FFFFFF; --accent: #D4AF37; --background: #F0F9FF; --text: #0C4A6E;
+
+/* 83. Backpacker */
+--primary: #16A34A; --secondary: #F97316; --accent: #EAB308; --background: #FFFFFF; --text: #14532D;
+
+/* 84. Airline */
+--primary: #1E40AF; --secondary: #3B82F6; --accent: #F59E0B; --background: #FFFFFF; --text: #1E3A8A;
+
+/* 85. Vacation Rental */
+--primary: #F43F5E; --secondary: #14B8A6; --accent: #F59E0B; --background: #FFFFFF; --text: #1F2937;
+```
+
+---
+
+## Gaming & Entertainment (10 palettes)
+
+### 86. Gaming Dark
+```css
+--primary: #7C3AED;      /* Purple */
+--secondary: #06B6D4;    /* Cyan */
+--accent: #EF4444;       /* Red */
+--background: #0F172A;   /* Slate Dark */
+--text: #F8FAFC;         /* White */
+```
+
+### 87. Esports
+```css
+--primary: #EF4444;      /* Red */
+--secondary: #1F2937;    /* Gray */
+--accent: #22D3EE;       /* Cyan */
+--background: #030712;   /* Black */
+--text: #FFFFFF;         /* White */
+```
+
+### 88. Streaming
+```css
+--primary: #9146FF;      /* Twitch Purple */
+--secondary: #1F1F23;    /* Dark */
+--accent: #00FF00;       /* Green */
+--background: #0E0E10;   /* Black */
+--text: #EFEFF1;         /* Light */
+```
+
+### 89-95. Additional Gaming/Entertainment
+```css
+/* 89. Mobile Gaming */
+--primary: #F97316; --secondary: #7C3AED; --accent: #22C55E; --background: #1F2937; --text: #FFFFFF;
+
+/* 90. Podcast */
+--primary: #1DB954; --secondary: #191414; --accent: #FFFFFF; --background: #121212; --text: #FFFFFF;
+
+/* 91. Live Events */
+--primary: #EC4899; --secondary: #F59E0B; --accent: #06B6D4; --background: #0A0A0A; --text: #FFFFFF;
+
+/* 92. Sports App */
+--primary: #EF4444; --secondary: #1E3A8A; --accent: #FACC15; --background: #FFFFFF; --text: #111827;
+
+/* 93. Music Streaming */
+--primary: #1DB954; --secondary: #FFFFFF; --accent: #000000; --background: #121212; --text: #FFFFFF;
+
+/* 94. Video Platform */
+--primary: #FF0000; --secondary: #FFFFFF; --accent: #000000; --background: #0F0F0F; --text: #FFFFFF;
+
+/* 95. News/Media */
+--primary: #DC2626; --secondary: #1F2937; --accent: #FBBF24; --background: #FFFFFF; --text: #111827;
+```
+
+---
+
+## CSS Variable Template
+
+```css
+:root {
+  /* Primary palette */
+  --color-primary: #3B82F6;
+  --color-secondary: #1E40AF;
+  --color-accent: #F59E0B;
+  
+  /* Background & Surface */
+  --color-background: #F8FAFC;
+  --color-surface: #FFFFFF;
+  --color-surface-elevated: #FFFFFF;
+  
+  /* Text */
+  --color-text-primary: #1E293B;
+  --color-text-secondary: #64748B;
+  --color-text-muted: #94A3B8;
+  
+  /* Status colors */
+  --color-success: #22C55E;
+  --color-warning: #F59E0B;
+  --color-error: #EF4444;
+  --color-info: #0EA5E9;
+  
+  /* Borders & Dividers */
+  --color-border: #E2E8F0;
+  --color-divider: #F1F5F9;
+}
+```