refactor: Add new V2.0 logo with dark/light mode support to all markdown files
- Update all main markdown files (INDEX.md, LEARNING-ROADMAP.md, QUICK_REFERENCE.md, CONTRIBUTING.md, claude_concepts_guide.md, resources.md) with new responsive picture element - Add logo to all subdirectory README files in feature folders (01-10) and plugins - Replace old markdown image syntax with HTML picture element for dark/light mode adaptation - Logo automatically displays dark mode version when system prefers dark mode - Maintain correct relative paths for all nesting levels (../, ../../, etc.) - Update README.md with new logo syntax All markdown files now use the new V2.0 starburst logo design with professional dark/light mode support.
This commit is contained in:
Luong NGUYEN
242
resources/INDEX.txt
Normal file
242
resources/INDEX.txt
Normal file
@@ -0,0 +1,242 @@
|
||||
╔═══════════════════════════════════════════════════════════════════════════╗
|
||||
║ CLAUDE HOW TO - BRAND ASSETS RESOURCE LIBRARY ║
|
||||
║ Complete Asset Package ║
|
||||
╚═══════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
📁 DIRECTORY STRUCTURE
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
resources/
|
||||
│
|
||||
├── 📄 README.md (Complete Documentation)
|
||||
│ └─ Full guide for all assets, usage patterns, HTML integration
|
||||
│
|
||||
├── 📄 QUICK-START.md (Copy & Paste Solutions)
|
||||
│ └─ Fast setup, recommended sizes, color values
|
||||
│
|
||||
├── 📄 DESIGN-SYSTEM.md (Brand Guidelines)
|
||||
│ └─ Visual identity, color system, typography, effects
|
||||
│
|
||||
├── 📁 logos/
|
||||
│ └─ 📊 claude-howto-logo.svg (800×200px)
|
||||
│ → Main horizontal logo with terminal icon
|
||||
│ → Perfect for: Headers, marketing, print
|
||||
│
|
||||
├── 📁 icons/
|
||||
│ └─ 🔷 claude-howto-icon.svg (256×256px)
|
||||
│ → App icon with ascending hexagons
|
||||
│ → Perfect for: Apps, avatars, thumbnails
|
||||
│
|
||||
└── 📁 favicons/
|
||||
├─ 🔹 favicon-16.svg (16×16px) → Browser tabs
|
||||
├─ 🔹 favicon-32.svg (32×32px) → Standard favicon
|
||||
├─ 🔹 favicon-64.svg (64×64px) → High-DPI
|
||||
├─ 🔹 favicon-128.svg (128×128px) → Apple touch icon
|
||||
└─ 🔹 favicon-256.svg (256×256px) → Modern browsers/PWA
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📋 QUICK FILE REFERENCE
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
FILE SIZE USE CASE
|
||||
────────────────────────────────────────────────────────────────────────────
|
||||
logos/claude-howto-logo.svg 800×200px Website headers, marketing
|
||||
icons/claude-howto-icon.svg 256×256px App icons, avatars, social
|
||||
favicons/favicon-32.svg 32×32px Browser favicon (primary)
|
||||
favicons/favicon-16.svg 16×16px Browser tab (old browsers)
|
||||
favicons/favicon-64.svg 64×64px Bookmarks, high-DPI
|
||||
favicons/favicon-128.svg 128×128px Apple touch icon
|
||||
favicons/favicon-256.svg 256×256px Android, PWA, modern
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
🎨 DESIGN CONCEPT
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
The icon uses ASCENDING HEXAGONS to represent learning progression:
|
||||
|
||||
🟢 MINT (Top)
|
||||
Advanced Features
|
||||
Levels 7-10
|
||||
|
||||
🟢 EMERALD (Middle)
|
||||
Intermediate Skills
|
||||
Levels 4-6
|
||||
|
||||
🟢 DARK EMERALD (Bottom)
|
||||
Beginner Fundamentals
|
||||
Levels 1-3
|
||||
|
||||
Visual meaning: Upward progression = Learning journey from beginner to mastery
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
🎨 COLOR PALETTE
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
COLOR HEX RGB USAGE
|
||||
─────────────────────────────────────────────────────────────────────────────
|
||||
Deep Forest #0d1f0d 13, 31, 13 Backgrounds
|
||||
Emerald (Primary) #10b981 16, 185, 129 Main accents
|
||||
Dark Emerald #059669 5, 150, 105 Secondary accents
|
||||
Forest #047857 4, 120, 87 Tertiary accents
|
||||
Mint (Highlight) #6ee7b7 110, 231, 183 Highlights
|
||||
Light Mint #34d399 52, 211, 153 Secondary highlights
|
||||
|
||||
All colors maintain WCAG AAA contrast on dark backgrounds (8.2:1+)
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📖 DOCUMENTATION FILES
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
1. README.md
|
||||
Complete guide covering:
|
||||
• Asset descriptions and purposes
|
||||
• HTML integration templates
|
||||
• Favicon setup instructions
|
||||
• Color palette and guidelines
|
||||
• SVG optimization tips
|
||||
• Accessibility considerations
|
||||
|
||||
2. QUICK-START.md
|
||||
Fast reference with:
|
||||
• Copy-paste code
|
||||
• Recommended sizes
|
||||
• Color CSS variables
|
||||
• Icon meaning explanation
|
||||
• Usage by platform
|
||||
|
||||
3. DESIGN-SYSTEM.md
|
||||
Brand guidelines including:
|
||||
• Visual identity principles
|
||||
• Color system and contrast
|
||||
• Gradient specifications
|
||||
• Typography standards
|
||||
• Icon geometry details
|
||||
• Sizing recommendations
|
||||
• Effects and filters
|
||||
• Customization guide
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
🚀 GETTING STARTED
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
STEP 1: Choose Your Use Case
|
||||
• Website? → Use logos/claude-howto-logo.svg
|
||||
• App/Avatar? → Use icons/claude-howto-icon.svg
|
||||
• Browser? → Use favicons/favicon-32.svg
|
||||
|
||||
STEP 2: Read the Right Guide
|
||||
• Quick setup? → Read QUICK-START.md
|
||||
• Full details? → Read README.md
|
||||
• Brand guidelines? → Read DESIGN-SYSTEM.md
|
||||
|
||||
STEP 3: Copy & Use
|
||||
• Copy file to your project
|
||||
• Use provided HTML code
|
||||
• Or reference from CDN/web server
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
✅ FILE CHECKLIST
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Logos:
|
||||
✓ claude-howto-logo.svg (main logo)
|
||||
|
||||
Icons:
|
||||
✓ claude-howto-icon.svg (app icon)
|
||||
|
||||
Favicons (all sizes):
|
||||
✓ favicon-16.svg
|
||||
✓ favicon-32.svg
|
||||
✓ favicon-64.svg
|
||||
✓ favicon-128.svg
|
||||
✓ favicon-256.svg
|
||||
|
||||
Documentation:
|
||||
✓ README.md (complete guide)
|
||||
✓ QUICK-START.md (fast reference)
|
||||
✓ DESIGN-SYSTEM.md (brand guidelines)
|
||||
✓ INDEX.txt (this file)
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📝 FILE FORMATS
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
All assets are in SVG format:
|
||||
• Scalable: Works at any size
|
||||
• Lightweight: Smaller than PNG/JPG
|
||||
• Sharp: No pixelation at any zoom
|
||||
• Flexible: Can be styled with CSS/JS
|
||||
• Universal: Works in all modern browsers
|
||||
|
||||
No raster images needed - SVG covers all use cases!
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
🤝 INTEGRATION EXAMPLES
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
HTML (Web):
|
||||
<img src="resources/icons/claude-howto-icon.svg" alt="Claude How To">
|
||||
|
||||
Markdown:
|
||||
|
||||
|
||||
CSS Background:
|
||||
background-image: url('resources/icons/claude-howto-icon.svg');
|
||||
|
||||
React/JSX:
|
||||
import logo from './resources/icons/claude-howto-icon.svg';
|
||||
<img src={logo} alt="Claude How To" />
|
||||
|
||||
Next.js/Web Framework:
|
||||
<Image src={logo} alt="Claude How To" />
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📊 ASSET STATISTICS
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Total Assets: 7 SVG files
|
||||
• 1 Logo
|
||||
• 1 Icon
|
||||
• 5 Favicon variants
|
||||
|
||||
Documentation: 4 files
|
||||
• Complete guide (README.md)
|
||||
• Quick reference (QUICK-START.md)
|
||||
• Brand guidelines (DESIGN-SYSTEM.md)
|
||||
• This index (INDEX.txt)
|
||||
|
||||
Total Size: ~150 KB (all files)
|
||||
• Individual SVGs: 8-15 KB each
|
||||
• Documentation: 20-50 KB each
|
||||
|
||||
Design System Version: 1.0
|
||||
Last Updated: January 2026
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📞 SUPPORT & MORE
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
For detailed information:
|
||||
1. Start with QUICK-START.md for immediate use
|
||||
2. Refer to README.md for complete documentation
|
||||
3. Check DESIGN-SYSTEM.md for brand guidelines
|
||||
|
||||
Questions or customization needed?
|
||||
• Review DESIGN-SYSTEM.md for customization guide
|
||||
• All files are fully editable SVG
|
||||
• Maintain color palette for brand consistency
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Happy building! 🚀
|
||||
|
||||
Reference in New Issue
Block a user