ui-ux-consultant-cli 1.0.0-beta.1

package/assets/ui-ux-consultant/references/catalog/colors.md

@@ -0,0 +1,91 @@
+# Color Palettes Catalog
+
+## When to read this
+Use when the user needs a color palette recommendation, brand colors, or theme colors for a UI.
+
+---
+
+## Professional / Corporate
+
+| Palette | Primary | Secondary | Accent | Best for |
+|---|---|---|---|---|
+| **Classic Navy** | `#1B2A4A` | `#2E4A7A` | `#4A90D9` | Finance, law, insurance, enterprise SaaS |
+| **Executive Gray** | `#2C3E50` | `#566573` | `#1ABC9C` | Consulting, analytics dashboards, B2B tools |
+| **Trust Blue** | `#0D47A1` | `#1565C0` | `#FF6F00` | Banking, healthcare admin, government portals |
+| **Slate Pro** | `#37474F` | `#546E7A` | `#00ACC1` | Tech startups, productivity apps, developer tools |
+| **Corporate Indigo** | `#283593` | `#3949AB` | `#F57C00` | HR platforms, enterprise portals, CRM |
+| **Midnight Steel** | `#1C1C2E` | `#2A2A45` | `#5C6BC0` | Cybersecurity, data platforms, dark-mode SaaS |
+| **Deep Teal** | `#004D40` | `#00695C` | `#FFAB40` | Sustainability reports, fintech, impact dashboards |
+
+---
+
+## Creative / Vibrant
+
+| Palette | Primary | Secondary | Accent | Best for |
+|---|---|---|---|---|
+| **Electric Violet** | `#6200EA` | `#7C4DFF` | `#00E5FF` | Gaming, entertainment, creative tools |
+| **Coral Pop** | `#FF5252` | `#FF8A80` | `#FFD740` | Food delivery, lifestyle apps, social platforms |
+| **Tropical Punch** | `#FF6D00` | `#FF9100` | `#00E676` | Sports, fitness, youth-focused brands |
+| **Neon Gradient** | `#F72585` | `#7209B7` | `#4CC9F0` | Music, nightlife, Gen-Z products |
+| **Sunset Duo** | `#FF416C` | `#FF4B2B` | `#FFC837` | Travel, adventure, photography apps |
+| **Vivid Teal** | `#00BFA5` | `#1DE9B6` | `#FF6E40` | Health tech, wellness, meditation apps |
+| **Playful Rainbow** | `#FF6B6B` | `#4ECDC4` | `#FFE66D` | EdTech for kids, onboarding, fun dashboards |
+
+---
+
+## Dark / Moody
+
+| Palette | Primary | Secondary | Accent | Best for |
+|---|---|---|---|---|
+| **Obsidian** | `#0A0A0A` | `#1A1A2E` | `#E94560` | Gaming UI, dark SaaS, hacker aesthetic |
+| **Charcoal Noir** | `#121212` | `#1E1E1E` | `#BB86FC` | Material dark apps, music players, code editors |
+| **Deep Space** | `#0B0C10` | `#1F2833` | `#66FCF1` | Sci-fi, data visualization, dev dashboards |
+| **Gothic Plum** | `#1A0025` | `#2D0036` | `#CE93D8` | Fashion, luxury, editorial design |
+| **Midnight Ocean** | `#001529` | `#002766` | `#177DDC` | Dark-mode enterprise, analytics platforms |
+| **Volcanic Ash** | `#1B1B1B` | `#2E2E2E` | `#FF5722` | Creative agencies, portfolio sites, bold brands |
+
+---
+
+## Pastel / Soft
+
+| Palette | Primary | Secondary | Accent | Best for |
+|---|---|---|---|---|
+| **Cotton Candy** | `#FFB3C6` | `#FFC8DD` | `#A2D2FF` | Beauty, wellness, baby products |
+| **Morning Mist** | `#B5EAD7` | `#C7CEEA` | `#FFDAC1` | Mental health apps, journaling, calm UIs |
+| **Lavender Dream** | `#D8B4FE` | `#E9D5FF` | `#FDE68A` | Spa, meditation, soft onboarding flows |
+| **Peach Bloom** | `#FFCBA4` | `#FFE0CC` | `#A8DADC` | Food blogs, recipes, lifestyle brands |
+| **Sky Pastel** | `#BAE1FF` | `#D4F1F9` | `#FFDFBA` | Children's apps, light dashboards, education |
+| **Blush & Mint** | `#FFC2D1` | `#B5EAD7` | `#FDFFB6` | Wedding apps, event planning, soft e-commerce |
+
+---
+
+## Earthy / Natural
+
+| Palette | Primary | Secondary | Accent | Best for |
+|---|---|---|---|---|
+| **Forest Grove** | `#2D6A4F` | `#40916C` | `#D9BF77` | Eco brands, sustainability, outdoor gear |
+| **Warm Terracotta** | `#8B4513` | `#C1440E` | `#F4A460` | Artisan goods, food brands, ceramics |
+| **Desert Sand** | `#C19A6B` | `#D4A76A` | `#6B4226` | Travel, wellness retreats, bohemian brands |
+| **Olive & Stone** | `#6B7257` | `#8B8D6A` | `#D4C5A9` | Architecture, interior design, nature brands |
+| **Earth & Sky** | `#5C4033` | `#795548` | `#4CAF50` | Farming, organic products, land management |
+| **Rust & Sage** | `#B5451B` | `#7D9B76` | `#F2D06B` | Handmade goods, Etsy-style shops, craft brands |
+
+---
+
+## Monochrome
+
+| Palette | Primary | Secondary | Accent | Best for |
+|---|---|---|---|---|
+| **Pure Black & White** | `#000000` | `#FFFFFF` | `#F5F5F5` | Minimalist portfolios, print-first design |
+| **Warm Gray Scale** | `#212121` | `#757575` | `#BDBDBD` | Editorial, content-heavy apps, news |
+| **Cool Slate Mono** | `#1E293B` | `#64748B` | `#CBD5E1` | Developer tools, API docs, admin panels |
+| **Ivory & Ink** | `#F8F4E3` | `#3D2B1F` | `#9C8B6E` | Publishing, reading apps, newsletters |
+| **Silver Chrome** | `#E0E0E0` | `#9E9E9E` | `#424242` | Industrial, hardware, automotive UIs |
+
+---
+
+## Notes
+- Accent color is always used sparingly (CTAs, highlights, badges).
+- For dark mode, swap primary/secondary lightness but keep accent hue.
+- Accessibility: always verify contrast ratios — aim for WCAG AA (4.5:1 text, 3:1 UI).
+- Tools: [Coolors](https://coolors.co), [Realtime Colors](https://realtimecolors.com), [Oklch Picker](https://oklch.com).

package/assets/ui-ux-consultant/references/catalog/fonts.md

@@ -0,0 +1,363 @@
+# Font Pairings Catalog
+
+## When to read this
+Use when the user needs typography recommendations, font pairings, or heading/body font combinations.
+
+---
+
+## Corporate / Professional
+
+### 1. Inter + Inter
+- **Heading:** Inter (700–900)
+- **Body:** Inter (400)
+- **Personality:** clean, neutral, systematic
+- **Best for:** SaaS dashboards, admin panels, enterprise tools
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
+  ```
+
+### 2. Plus Jakarta Sans + Inter
+- **Heading:** Plus Jakarta Sans (700–800)
+- **Body:** Inter (400)
+- **Personality:** modern professional, friendly authority
+- **Best for:** B2B SaaS, startup landing pages, product sites
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">
+  ```
+
+### 3. Sora + DM Sans
+- **Heading:** Sora (700–800)
+- **Body:** DM Sans (400)
+- **Personality:** tech-forward, contemporary corporate
+- **Best for:** fintech, developer tools, productivity apps
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
+  ```
+
+### 4. Space Grotesk + Space Grotesk
+- **Heading:** Space Grotesk (700)
+- **Body:** Space Grotesk (400)
+- **Personality:** confident, slightly quirky professional
+- **Best for:** design tools, creative agencies with corporate clients
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
+  ```
+
+### 5. IBM Plex Sans + IBM Plex Sans
+- **Heading:** IBM Plex Sans (600–700)
+- **Body:** IBM Plex Sans (400)
+- **Personality:** utilitarian, trustworthy, structured
+- **Best for:** enterprise software, data-heavy dashboards, government/public sector
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+  ```
+
+### 6. Figtree + Figtree
+- **Heading:** Figtree (700–800)
+- **Body:** Figtree (400–500)
+- **Personality:** warm professional, approachable authority
+- **Best for:** HR platforms, healthcare SaaS, education tech
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;700;800&display=swap" rel="stylesheet">
+  ```
+
+---
+
+## Editorial / Luxury
+
+### 7. Playfair Display + Lato
+- **Heading:** Playfair Display (700–900)
+- **Body:** Lato (400)
+- **Personality:** classic editorial luxury, timeless elegance
+- **Best for:** fashion brands, lifestyle magazines, premium e-commerce
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Lato:wght@400;300&display=swap" rel="stylesheet">
+  ```
+
+### 8. Cormorant Garamond + Jost
+- **Heading:** Cormorant Garamond (600–700)
+- **Body:** Jost (300–400)
+- **Personality:** refined luxury, high fashion, understated prestige
+- **Best for:** luxury goods, jewellery, bespoke services, boutique hotels
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Jost:wght@300;400&display=swap" rel="stylesheet">
+  ```
+
+### 9. Bodoni Moda + Source Sans 3
+- **Heading:** Bodoni Moda (700–800)
+- **Body:** Source Sans 3 (400)
+- **Personality:** high-contrast editorial drama, couture energy
+- **Best for:** fashion editorials, beauty brands, art galleries
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700;800&family=Source+Sans+3:wght@400;300&display=swap" rel="stylesheet">
+  ```
+
+### 10. Libre Baskerville + Libre Franklin
+- **Heading:** Libre Baskerville (700)
+- **Body:** Libre Franklin (400)
+- **Personality:** editorial authority, newspaper heritage
+- **Best for:** journalism, publishing, long-form content sites
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Libre+Franklin:wght@400;500&display=swap" rel="stylesheet">
+  ```
+
+### 11. DM Serif Display + DM Sans
+- **Heading:** DM Serif Display (400)
+- **Body:** DM Sans (400)
+- **Personality:** contemporary editorial, elegant but accessible
+- **Best for:** media brands, newsletters, premium blogs
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
+  ```
+
+### 12. Spectral + Karla
+- **Heading:** Spectral (700–800)
+- **Body:** Karla (400)
+- **Personality:** literary luxury, rich and readable
+- **Best for:** book publishing, editorial platforms, premium subscriptions
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Spectral:wght@700;800&family=Karla:wght@400;500&display=swap" rel="stylesheet">
+  ```
+
+---
+
+## Minimal / Modernist
+
+### 13. Outfit + Outfit
+- **Heading:** Outfit (700–800)
+- **Body:** Outfit (400)
+- **Personality:** geometric minimalism, clean modernity
+- **Best for:** portfolio sites, design studios, minimal SaaS
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&display=swap" rel="stylesheet">
+  ```
+
+### 14. Manrope + Manrope
+- **Heading:** Manrope (700–800)
+- **Body:** Manrope (400–500)
+- **Personality:** precise, optical-calibrated minimal
+- **Best for:** mobile apps, data products, clean web apps
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
+  ```
+
+### 15. Urbanist + Urbanist
+- **Heading:** Urbanist (700–900)
+- **Body:** Urbanist (400)
+- **Personality:** geometric, airy, ultra-modern
+- **Best for:** architecture firms, real estate, minimal e-commerce
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600;700;900&display=swap" rel="stylesheet">
+  ```
+
+### 16. Raleway + Nunito Sans
+- **Heading:** Raleway (700–800)
+- **Body:** Nunito Sans (400)
+- **Personality:** elegant minimal, soft geometric
+- **Best for:** wellness brands, creative portfolios, lifestyle apps
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700;800&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
+  ```
+
+### 17. Josefin Sans + Josefin Slab
+- **Heading:** Josefin Sans (700)
+- **Body:** Josefin Slab (400)
+- **Personality:** 1920s geometric modernism, art deco echo
+- **Best for:** boutique retail, event branding, retro-modern products
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Josefin+Slab:wght@400&display=swap" rel="stylesheet">
+  ```
+
+---
+
+## Playful / Friendly
+
+### 18. Nunito + Nunito
+- **Heading:** Nunito (800–900)
+- **Body:** Nunito (400–600)
+- **Personality:** rounded, bubbly, approachable
+- **Best for:** kids apps, consumer apps, food delivery, games
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
+  ```
+
+### 19. Quicksand + Open Sans
+- **Heading:** Quicksand (700)
+- **Body:** Open Sans (400)
+- **Personality:** light, friendly, optimistic
+- **Best for:** health & wellness, e-learning, consumer productivity
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&family=Open+Sans:wght@400;500&display=swap" rel="stylesheet">
+  ```
+
+### 20. Baloo 2 + Hind
+- **Heading:** Baloo 2 (700–800)
+- **Body:** Hind (400)
+- **Personality:** expressive, energetic, casual fun
+- **Best for:** gaming, social apps, entertainment platforms
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Hind:wght@400;500&display=swap" rel="stylesheet">
+  ```
+
+### 21. Poppins + Poppins
+- **Heading:** Poppins (700–800)
+- **Body:** Poppins (400)
+- **Personality:** cheerful, geometric, universally pleasing
+- **Best for:** startups, mobile apps, e-commerce, social platforms
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
+  ```
+
+### 22. Fredoka + Nunito
+- **Heading:** Fredoka (600–700)
+- **Body:** Nunito (400)
+- **Personality:** playful, rounded, youthful energy
+- **Best for:** children's education, toy brands, casual games
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Nunito:wght@400;600&display=swap" rel="stylesheet">
+  ```
+
+---
+
+## Technical / Developer
+
+### 23. JetBrains Mono + Inter
+- **Heading:** JetBrains Mono (700)
+- **Body:** Inter (400)
+- **Personality:** developer-native, precise, code-forward
+- **Best for:** dev tools, documentation sites, API products
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
+  ```
+
+### 24. Fira Code + Fira Sans
+- **Heading:** Fira Sans (700–800)
+- **Body:** Fira Sans (400) / Fira Code for code blocks
+- **Personality:** Mozilla open-source heritage, technical clarity
+- **Best for:** open source projects, developer blogs, CLI documentation
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700;800&family=Fira+Code:wght@400&display=swap" rel="stylesheet">
+  ```
+
+### 25. Space Mono + Space Grotesk
+- **Heading:** Space Grotesk (700)
+- **Body:** Space Grotesk (400) / Space Mono for code
+- **Personality:** space-age tech, retro-futurism
+- **Best for:** crypto, web3, cybersecurity, dev-oriented startups
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@400&display=swap" rel="stylesheet">
+  ```
+
+---
+
+## Creative / Agency
+
+### 26. Clash Display + Cabinet Grotesk
+- **Heading:** Clash Display (700)
+- **Body:** Cabinet Grotesk (400)
+- **Personality:** bold creative, design-forward, agency prestige
+- **Best for:** creative agencies, portfolio studios, award sites
+- **Note:** Available via FontShare (free) — not Google Fonts
+  ```html
+  <link href="https://api.fontshare.com/v2/css?f[]=clash-display@700&f[]=cabinet-grotesk@400,500&display=swap" rel="stylesheet">
+  ```
+
+### 27. Bebas Neue + Lato
+- **Heading:** Bebas Neue (400 — display caps)
+- **Body:** Lato (400)
+- **Personality:** bold, athletic, high impact
+- **Best for:** sports brands, fitness apps, streetwear, event promotion
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:wght@400;300&display=swap" rel="stylesheet">
+  ```
+
+### 28. Anton + Roboto
+- **Heading:** Anton (400 — display caps)
+- **Body:** Roboto (400)
+- **Personality:** punchy, magazine-editorial, attention-grabbing
+- **Best for:** news sites, event marketing, high-energy consumer brands
+- **Google Fonts:**
+  ```html
+  <link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@400;300&display=swap" rel="stylesheet">
+  ```
+
+---
+
+## System / No-Download Fallbacks
+
+### 29. System UI Stack (Corporate Neutral)
+- **Heading:** `-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` (700)
+- **Body:** same stack (400)
+- **Personality:** invisible, native-feel, zero-latency
+- **Best for:** performance-critical apps, internal tools, native-adjacent web apps
+- **CSS:**
+  ```css
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
+  ```
+
+### 30. Georgia + System UI (Readable Editorial)
+- **Heading:** `Georgia, "Times New Roman", serif` (700)
+- **Body:** `-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` (400)
+- **Personality:** editorial authority with modern body legibility
+- **Best for:** long-form reading, news, documentation with personality
+- **CSS:**
+  ```css
+  h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
+  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+  ```
+
+### 31. Menlo/Consolas + System UI (Developer)
+- **Heading:** System UI sans-serif (700)
+- **Body:** System UI sans-serif (400) / `Menlo, Consolas, "Courier New", monospace` for code
+- **Personality:** zero-dependency dev-native
+- **Best for:** CLI docs, README renderers, GitHub-style pages
+- **CSS:**
+  ```css
+  code, pre { font-family: Menlo, Consolas, "Courier New", monospace; }
+  ```
+
+---
+
+## Quick-Reference Matrix
+
+| Pairing | Mood | Industry |
+|---|---|---|
+| Plus Jakarta Sans + Inter | Modern professional | B2B SaaS |
+| Cormorant Garamond + Jost | Refined luxury | Jewellery, hotels |
+| Playfair Display + Lato | Classic editorial | Fashion, lifestyle |
+| Poppins + Poppins | Cheerful geometric | Consumer apps |
+| Space Grotesk + Space Grotesk | Quirky confident | Design tools |
+| Nunito + Nunito | Bubbly friendly | Kids, games |
+| Urbanist + Urbanist | Airy ultra-modern | Architecture, real estate |
+| IBM Plex Sans | Utilitarian trust | Enterprise, gov |
+| JetBrains Mono + Inter | Developer-native | Dev tools, docs |
+| Bebas Neue + Lato | Athletic bold | Sports, fitness |
+| Clash Display + Cabinet Grotesk | Agency prestige | Creative studios |
+| DM Serif Display + DM Sans | Contemporary editorial | Media, newsletters |
+| System UI stack | Invisible native | Internal tools |