mirror of
https://github.com/luongnv89/claude-howto.git
synced 2026-07-11 23:26:32 +02:00
Luong NGUYEN
58e586f09b
- 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.
243 lines
11 KiB
Plaintext
243 lines
11 KiB
Plaintext
╔═══════════════════════════════════════════════════════════════════════════╗
|
||
║ 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! 🚀
|
||
|