From 20779dbf79fe1fc14e333e31c10e0ee4686773a7 Mon Sep 17 00:00:00 2001 From: Luong NGUYEN Date: Tue, 17 Feb 2026 18:27:38 +0100 Subject: [PATCH] design: Redesign logo to compass-bracket mark with minimal palette Replace the emerald starburst design (V2.0) with a new compass + code bracket (>) symbol (V3.0) using Black/White/Gray base with Bright Green (#22C55E) accent. Update all SVG assets (logos, icons, favicons) and design documentation to reflect the new brand identity. --- assets/logo/favicon.svg | 19 ++ assets/logo/logo-black.svg | 60 +++++ assets/logo/logo-full.svg | 60 +++++ assets/logo/logo-icon.svg | 40 +++ assets/logo/logo-mark.svg | 35 +++ assets/logo/logo-white.svg | 60 +++++ assets/logo/logo-wordmark.svg | 17 ++ resources/DESIGN-SYSTEM.md | 275 +++++++-------------- resources/QUICK-START.md | 29 +-- resources/README.md | 154 +++++++----- resources/favicons/favicon-128.svg | 74 ++---- resources/favicons/favicon-16.svg | 43 +--- resources/favicons/favicon-256.svg | 86 ++----- resources/favicons/favicon-32.svg | 51 ++-- resources/favicons/favicon-64.svg | 66 ++--- resources/icons/claude-howto-icon-dark.svg | 91 ++----- resources/icons/claude-howto-icon.svg | 87 ++----- resources/logos/claude-howto-logo-dark.svg | 157 ++++-------- resources/logos/claude-howto-logo.svg | 135 ++++------ 19 files changed, 713 insertions(+), 826 deletions(-) create mode 100644 assets/logo/favicon.svg create mode 100644 assets/logo/logo-black.svg create mode 100644 assets/logo/logo-full.svg create mode 100644 assets/logo/logo-icon.svg create mode 100644 assets/logo/logo-mark.svg create mode 100644 assets/logo/logo-white.svg create mode 100644 assets/logo/logo-wordmark.svg diff --git a/assets/logo/favicon.svg b/assets/logo/favicon.svg new file mode 100644 index 0000000..e54f1b0 --- /dev/null +++ b/assets/logo/favicon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/logo/logo-black.svg b/assets/logo/logo-black.svg new file mode 100644 index 0000000..7f45d84 --- /dev/null +++ b/assets/logo/logo-black.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Claude + + + + + How-To + + + + + + + + VISUAL GUIDE + + + TO CLAUDE CODE + + + diff --git a/assets/logo/logo-full.svg b/assets/logo/logo-full.svg new file mode 100644 index 0000000..e473ac6 --- /dev/null +++ b/assets/logo/logo-full.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Claude + + + + + How-To + + + + + + + + VISUAL GUIDE + + + TO CLAUDE CODE + + + diff --git a/assets/logo/logo-icon.svg b/assets/logo/logo-icon.svg new file mode 100644 index 0000000..57fc38e --- /dev/null +++ b/assets/logo/logo-icon.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/logo/logo-mark.svg b/assets/logo/logo-mark.svg new file mode 100644 index 0000000..a58c35b --- /dev/null +++ b/assets/logo/logo-mark.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/logo/logo-white.svg b/assets/logo/logo-white.svg new file mode 100644 index 0000000..d861d00 --- /dev/null +++ b/assets/logo/logo-white.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Claude + + + + + How-To + + + + + + + + VISUAL GUIDE + + + TO CLAUDE CODE + + + diff --git a/assets/logo/logo-wordmark.svg b/assets/logo/logo-wordmark.svg new file mode 100644 index 0000000..e353c9a --- /dev/null +++ b/assets/logo/logo-wordmark.svg @@ -0,0 +1,17 @@ + + + + + + + Claude + + + + + How-To + + + + + diff --git a/resources/DESIGN-SYSTEM.md b/resources/DESIGN-SYSTEM.md index 3756262..29aa791 100644 --- a/resources/DESIGN-SYSTEM.md +++ b/resources/DESIGN-SYSTEM.md @@ -2,26 +2,25 @@ ## Visual Identity -### Icon Design Concept: Ascending Progression +### Icon Design Concept: Compass with Code Bracket -The Claude How To icon uses **three ascending hexagons** to represent the learning journey: +The Claude How To icon uses a **compass with a `>` code bracket** to represent guided navigation through code: ``` - 🔷 Level 7-10 (MINT) - Advanced Features - - 🔶 Level 4-6 (EMERALD) - Intermediate Skills - -🔹 Level 1-3 (DARK EMERALD) -Beginner Fundamentals + N (green) + ▲ + │ +W ───>─── E Compass = Guidance/Direction + │ > Bracket = Code/Terminal/CLI + ▼ + S (black) ``` This creates: -- **Visual Clarity**: Immediate recognition of progression -- **Symbolic Meaning**: Upward movement = growth & learning +- **Visual Clarity**: Immediately communicates "code navigation guide" +- **Symbolic Meaning**: Compass = finding your way; `>` = code/terminal - **Scalability**: Works at any size from 16px to 512px -- **Brand Alignment**: Matches the tech-forward CLI aesthetic +- **Brand Alignment**: Matches the developer tool aesthetic with minimal palette --- @@ -31,156 +30,94 @@ This creates: | Color | Hex | RGB | Usage | |-------|-----|-----|-------| -| Deep Forest (BG) | `#0d1f0d` | 13, 31, 13 | Backgrounds, containers | -| Emerald (Primary) | `#10b981` | 16, 185, 129 | Main accents, buttons | -| Dark Emerald | `#059669` | 5, 150, 105 | Secondary accents, borders | -| Forest | `#047857` | 4, 120, 87 | Tertiary, deep accents | -| Mint (Highlight) | `#6ee7b7` | 110, 231, 183 | Highlights, focus states | -| Light Mint | `#34d399` | 52, 211, 153 | Secondary highlights | +| Black (Primary) | `#000000` | 0, 0, 0 | Main strokes, text, south needle | +| White (Background) | `#FFFFFF` | 255, 255, 255 | Light backgrounds | +| Gray (Secondary) | `#6B7280` | 107, 114, 128 | Minor tick marks, secondary text | +| Bright Green (Accent) | `#22C55E` | 34, 197, 94 | North needle, center dot, accent lines | +| Near Black (Dark BG) | `#0A0A0A` | 10, 10, 10 | Dark mode backgrounds | ### Contrast Ratios (WCAG) -- Emerald on Dark Forest: **8.2:1** ✅ AAA -- Mint on Dark Forest: **9.1:1** ✅ AAA -- All colors maintain AA compliance on dark backgrounds +- Black on White: **21:1** AAA +- Gray on White: **4.6:1** AA +- Green on White: **3.2:1** (decorative only, not for text) +- White on Dark: **19.5:1** AAA ---- +### Accent Color Rule -## Gradient System - -### Primary Gradients - -**Emerald Gradient** (left→right, top→bottom): -- Start: `#10b981` (bright emerald) -- End: `#047857` (dark forest green) -- Usage: Icon backgrounds, primary elements - -**Mint Gradient** (top→bottom): -- Start: `#6ee7b7` (bright mint) -- End: `#34d399` (darker mint) -- Usage: Highlights, accent elements - -**Dark Emerald Gradient** (left→right, top→bottom): -- Start: `#059669` (dark emerald) -- End: `#064e3b` (forest green) -- Usage: Secondary elements, depth +**Bright Green (#22C55E) is reserved for highlights only:** +- Compass north needle +- Center dot +- Accent underlines/borders +- Never as a background color +- Never for body text --- ## Typography ### Logo Font -- **Family**: JetBrains Mono, SF Mono, Fira Code (monospace) -- **Weight**: 700 (bold) for "Claude-", 400 (regular) for "Howto" -- **Style**: Modern, tech-forward -- **Usage**: Logo wordmark, code examples +- **Family**: Inter, SF Pro Display, -apple-system, Segoe UI, sans-serif +- **"Claude"**: 42px, weight 700 (bold), Black +- **"How-To"**: 32px, weight 500 (medium), Gray (#6B7280) +- **Subtitle**: 10px, weight 500, Gray, letter-spacing 1.5px, uppercase ### Interface Font - **Family**: Inter, SF Pro, system fonts (sans-serif) - **Weight**: 400-600 - **Style**: Clean, readable -- **Usage**: UI text, descriptions --- ## Icon Details -### Hexagon Specifications +### Compass Specifications -All three hexagons follow the same geometry pattern: +The compass mark is built from these geometric elements: -```svg - -M -26,0 -L -13,-22.5 -L 13,-22.5 -L 26,0 -L 13,22.5 -L -13,22.5 -Z +``` +Element | Stroke/Fill | Color +--------------------|----------------|------------------ +Outer ring | 3px stroke | Black / White (dark mode) +North tick | 2.5px stroke | Black / White (dark mode) +Other cardinal ticks| 2px stroke | Gray / White 50% (dark mode) +Intercardinal ticks | 1.5px stroke | Gray / White 40% (dark mode) +North needle | filled polygon | #22C55E (always green) +South needle | filled polygon | Black / White (dark mode) +> bracket | 3px stroke | Black / White (dark mode) +Center dot | filled circle | #22C55E (always green) ``` -**Hexagon Sizes**: -- Bottom (Beginner): 26 unit radius -- Middle (Intermediate): 32 unit radius -- Top (Advanced): 26 unit radius +### Size Progression -### Visual Elements - -1. **Strokes**: 1.5-2.5px width depending on size -2. **Glows**: Soft emerald/mint blur for depth -3. **Connecting Lines**: Dashed lines showing progression -4. **Center Dot**: Accent element at center point -5. **Outer Rings**: Subtle circular guides +``` +16px → Ring + needles + chevron only (minimal) +32px → Adds cardinal tick marks +64px → Adds intercardinal tick marks +128px → Full detail, all elements crisp +256px → Maximum detail, thick strokes +``` --- ## Sizing Guidelines -### Favicon Hierarchy - -``` -16px → Minimal geometry, browser tab -32px → Two hexagons visible -64px → All three hexagons clear -128px → Full detail with glows -256px → Complete with all effects -``` - ### Logo Sizing -- **Minimum**: 100px width (for web) -- **Recommended**: 400-800px (high quality) +- **Minimum**: 200px width (for web) +- **Recommended**: 520px (native size) - **Maximum**: Unlimited (vector format) -- **Aspect Ratio**: 4:1 (width:height) +- **Aspect Ratio**: ~4.3:1 (width:height) ### Icon Sizing -- **Minimum**: 32px (small thumbnails) +- **Minimum**: 16px (favicon) - **Recommended**: 64-256px (apps, avatars) - **Maximum**: Unlimited (vector format) - **Aspect Ratio**: 1:1 (square) --- -## Effects & Filters - -### Glow Effect - -```svg - - - - - - - - - -``` - -Creates: Soft green glow around elements - -### Shadow Effect - -```svg - - - - - - - - - - - -``` - -Creates: Subtle drop shadow for depth - ---- - ## Spacing & Alignment ### Logo Spacing @@ -189,18 +126,19 @@ Creates: Subtle drop shadow for depth ┌─────────────────────────────────────┐ │ │ │ Clear Space Minimum │ -│ (logo width / 4) │ +│ (logo height / 2) │ │ │ -│ [LOGO] │ +│ [COMPASS] Claude │ +│ How-To │ │ │ └─────────────────────────────────────┘ ``` ### Icon Center Point -All icons center at (128, 128) for 256px canvas: -- Allows proper scaling and transformation -- Centers vertically and horizontally +All icons center at the midpoint of their canvas: +- 128×128 for 256px canvas +- 64×64 for 128px canvas - Maintains alignment with other UI elements --- @@ -208,49 +146,42 @@ All icons center at (128, 128) for 256px canvas: ## Accessibility ### Color Contrast -- All foreground/background combinations meet WCAG AAA +- All text meets WCAG AA (4.5:1 minimum) +- Green accent is decorative, not informational - No red-green color dependency -- Works for color-blind users ### Scalability - Vector format ensures clarity at any size - Geometric shapes remain recognizable at 16px -- Maintains proportions when scaled - -### Animation Safe -- SVG can be animated if needed -- Static by default for performance -- Use CSS/JS for interactive states +- Progressive detail based on available size --- ## Application Examples ### Web Header -- Size: 800×200px +- Size: 520×120px logo - File: `logos/claude-howto-logo.svg` -- Background: Transparent or dark +- Background: White or dark (#0A0A0A) - Padding: 20px minimum ### App Icon -- Size: 256×256px or larger +- Size: 256×256px - File: `icons/claude-howto-icon.svg` -- Background: Dark or transparent +- Background: White or dark - Use: App shortcuts, avatars ### Browser Favicon - Size: 32px (primary), 16px (fallback) - File: `favicons/favicon-32.svg` - Format: SVG for crisp display -- Use: Browser tabs, bookmarks ### Social Media - Profile: 256×256px icon -- Banner: 800×200px logo (centered) -- Story/Post: Icon at 1080×1080px +- Banner: 520×120px logo (centered) ### Documentation -- Chapter Headers: 400×100px logo +- Chapter Headers: Logo scaled to fit - Section Icons: 64×64px favicon - Inline: 32×32px favicon @@ -260,78 +191,54 @@ All icons center at (128, 128) for 256px canvas: ### SVG Structure -All SVG files include: -- XML declaration -- `` section with gradients and filters -- ViewBox attribute for responsiveness -- Named gradients for reuse -- Readable code structure - -### Optimization - -Files are optimized but readable: -- Maintains whitespace for clarity -- Includes comments where helpful -- Gradients named for easy reference -- Filters documented in code +All SVG files are flat design: +- No gradients (solid colors only) +- No filter effects (no blur, glow, or shadow) +- Clean stroke and fill geometry +- ViewBox for responsive scaling +- Readable, commented code ### Cross-Browser Compatibility -- ✅ Chrome/Edge: Full support -- ✅ Firefox: Full support -- ✅ Safari: Full support -- ✅ iOS Safari: Full support -- ✅ All modern browsers: Full support +- Chrome/Edge: Full support +- Firefox: Full support +- Safari: Full support +- iOS Safari: Full support +- All modern browsers: Full support --- ## Customization -### Changing Colors +### Changing the Accent Color -To create variants with different colors: +To create variants with a different accent: -1. Replace gradient stop colors: -```svg - -``` - -2. Update filter colors: -```svg - -``` - -3. Keep contrast ratios above 4.5:1 for accessibility +1. Replace all instances of `#22C55E` with your accent color +2. Ensure contrast ratio stays above 3:1 for decorative elements +3. Keep black/white/gray structure unchanged ### Scaling -To scale any icon: ```css svg { width: 256px; height: 256px; - transform: scale(1.5); } ``` -Or in SVG: -```svg - - - -``` +SVGs scale automatically via viewBox — no transforms needed. --- ## Version Control Track design changes in git: -- Use `.gitkeep` in empty directories - Version SVG files normally (they're text) - Tag releases with design changes - Include DESIGN-SYSTEM.md in commits --- -**Last Updated**: January 2026 -**Design System Version**: 1.0 +**Last Updated**: February 2026 +**Design System Version**: 3.0 diff --git a/resources/QUICK-START.md b/resources/QUICK-START.md index 567897c..281c5df 100644 --- a/resources/QUICK-START.md +++ b/resources/QUICK-START.md @@ -18,7 +18,7 @@ cp resources/favicons/* /path/to/your/website/public/ - + ``` ## Use in Markdown/Documentation @@ -35,7 +35,7 @@ cp resources/favicons/* /path/to/your/website/public/ | Purpose | Size | File | |---------|------|------| -| Website header | 800×200 | `logos/claude-howto-logo.svg` | +| Website header | 520×120 | `logos/claude-howto-logo.svg` | | App icon | 256×256 | `icons/claude-howto-icon.svg` | | Browser tab | 32×32 | `favicons/favicon-32.svg` | | Mobile home screen | 128×128 | `favicons/favicon-128.svg` | @@ -46,28 +46,29 @@ cp resources/favicons/* /path/to/your/website/public/ ```css /* Use these in your CSS */ ---color-bg-dark: #0d1f0d; ---color-emerald: #10b981; ---color-emerald-dark: #059669; ---color-emerald-forest: #047857; ---color-mint: #6ee7b7; ---color-mint-light: #34d399; +--color-primary: #000000; +--color-secondary: #6B7280; +--color-accent: #22C55E; +--color-bg-light: #FFFFFF; +--color-bg-dark: #0A0A0A; ``` ## Icon Design Meaning -**Ascending Hexagons Represent**: -- 🟢 Bottom (Dark Emerald) = Beginner (Levels 1-3) -- 🟢 Middle (Bright Emerald) = Intermediate (Levels 4-6) -- 🟢 Top (Mint) = Advanced (Levels 7-10) +**Compass with Code Bracket**: +- Compass ring = Navigation, structured learning path +- Green north needle = Direction, progress, guidance +- Black south needle = Grounding, solid foundation +- `>` bracket = Terminal prompt, code, CLI context +- Tick marks = Precision, structured steps -This symbolizes the learning progression from basics to mastery. +This symbolizes "finding your way through code with clear guidance." ## What to Use Where ### Website - **Header**: Logo (`logos/claude-howto-logo.svg`) -- **Favicon**: 32-bit (`favicons/favicon-32.svg`) +- **Favicon**: 32px (`favicons/favicon-32.svg`) - **Social preview**: Icon (`icons/claude-howto-icon.svg`) ### GitHub diff --git a/resources/README.md b/resources/README.md index 86de252..ef19bfd 100644 --- a/resources/README.md +++ b/resources/README.md @@ -5,15 +5,15 @@ # Claude How To - Brand Assets -Complete collection of logos, icons, and favicons for the Claude How To project. All assets use the new V2.0 design: a 12-ray organic starburst inspired by Claude's official logo, with emerald green color and educational symbolism. +Complete collection of logos, icons, and favicons for the Claude How To project. All assets use the V3.0 design: a compass with code bracket (`>`) symbol, representing guided navigation through code — using a Black/White/Gray palette with Bright Green (#22C55E) accent. ## Directory Structure ``` resources/ ├── logos/ -│ ├── claude-howto-logo.svg # Main logo - Light mode (800×200px) -│ └── claude-howto-logo-dark.svg # Main logo - Dark mode (800×200px) +│ ├── claude-howto-logo.svg # Main logo - Light mode (520×120px) +│ └── claude-howto-logo-dark.svg # Main logo - Dark mode (520×120px) ├── icons/ │ ├── claude-howto-icon.svg # App icon - Light mode (256×256px) │ └── claude-howto-icon-dark.svg # App icon - Dark mode (256×256px) @@ -25,16 +25,28 @@ resources/ └── favicon-256.svg # Favicon - 256×256px ``` +Additional assets in `assets/logo/`: +``` +assets/logo/ +├── logo-full.svg # Mark + wordmark (horizontal) +├── logo-mark.svg # Compass symbol only (120×120px) +├── logo-wordmark.svg # Text only +├── logo-icon.svg # App icon (512×512, rounded) +├── favicon.svg # 16×16 optimized +├── logo-white.svg # White version for dark backgrounds +└── logo-black.svg # Black monochrome version +``` + ## Assets Overview -### Design Concept (V2.0) +### Design Concept (V3.0) -**12-Ray Organic Starburst** inspired by Claude's official logo: -- **12 Rays** = Knowledge radiating outward -- **Emerald Gradient** = Primary green color (#10b981 → #059669) -- **Mint Core** = Learning value provided -- **Three Inner Lines** = Guides, examples, documentation -- **Claude-Aligned** = Matches official Claude logo pattern +**Compass with Code Bracket** — guidance meets code: +- **Compass Ring** = Navigation, finding your way +- **North Needle (Green)** = Direction, progress on the learning path +- **South Needle (Black)** = Grounding, solid foundation +- **`>` Bracket** = Terminal prompt, code, CLI context +- **Tick Marks** = Precision, structured learning ### Logos @@ -43,15 +55,15 @@ resources/ - `logos/claude-howto-logo-dark.svg` (Dark mode) **Specifications**: -- **Size**: 800×200 px +- **Size**: 520×120 px - **Purpose**: Main header/branding logo with wordmark - **Usage**: - Website headers - - Marketing materials - README badges + - Marketing materials - Print materials - **Format**: SVG (fully scalable) -- **Modes**: Light (white background) & Dark (forest background) +- **Modes**: Light (white background) & Dark (#0A0A0A background) ### Icons @@ -68,14 +80,14 @@ resources/ - Social media thumbnails - Documentation headers - **Format**: SVG (fully scalable) -- **Modes**: Light (white background) & Dark (with glow effect) +- **Modes**: Light (white background) & Dark (#0A0A0A background) **Design Elements**: -- 12-ray organic starburst (Claude-inspired) -- Emerald green gradient rays -- Mint gradient core (represents guide hub) -- Three inner lines (symbolize guides/examples/docs) -- Glow effects in dark mode +- Compass ring with cardinal and intercardinal tick marks +- Green north needle (direction/guidance) +- Black south needle (foundation) +- `>` code bracket at center (terminal/CLI) +- Green center dot accent ### Favicons @@ -90,8 +102,9 @@ Optimized versions at multiple sizes for web use: | `favicon-256.svg` | 256×256 px | 4x | Modern browsers, PWA icons | **Optimization Notes**: -- Smaller sizes (16-32px) use simplified geometry -- Larger sizes (64-256px) include additional details +- 16px: Minimal geometry — ring, needles, chevron only +- 32px: Adds cardinal tick marks +- 64px+: Full detail with intercardinal ticks - All maintain visual consistency with main icon - SVG format ensures crisp display at any size @@ -129,54 +142,63 @@ Optimized versions at multiple sizes for web use: - + ``` ## Color Palette ### Primary Colors -- **Deep Forest**: `#0d1f0d` (Background) -- **Emerald**: `#10b981` (Primary accent) -- **Dark Emerald**: `#059669` (Secondary) -- **Forest**: `#047857` (Tertiary) +- **Black**: `#000000` (Primary text, strokes, south needle) +- **White**: `#FFFFFF` (Light backgrounds) +- **Gray**: `#6B7280` (Secondary text, minor tick marks) -### Accent Colors -- **Mint**: `#6ee7b7` (Highlight) -- **Light Mint**: `#34d399` (Secondary highlight) +### Accent Color +- **Bright Green**: `#22C55E` (North needle, center dot, accent lines — highlights only, never as background) + +### Dark Mode +- **Background**: `#0A0A0A` (Near-black) + +### CSS Variables +```css +--color-primary: #000000; +--color-secondary: #6B7280; +--color-accent: #22C55E; +--color-bg-light: #FFFFFF; +--color-bg-dark: #0A0A0A; +``` + +### Tailwind Config +```js +colors: { + brand: { + primary: '#000000', + secondary: '#6B7280', + accent: '#22C55E', + } +} +``` ### Usage Guidelines -- Use emerald for primary interactions and accents -- Use mint for highlights and emphasis -- Deep forest for backgrounds -- Maintain sufficient contrast for accessibility +- Use black for primary text and structural elements +- Use gray for secondary/supporting elements +- Use green **only** for highlights — needle, dots, accent lines +- Never use green as a background color +- Maintain WCAG AA contrast (4.5:1 minimum) ## Design Guidelines ### Logo Usage -✅ **Do**: -- Use on dark backgrounds -- Scale proportionally (maintain 4:1 aspect ratio) -- Include clear space around logo -- Use in color as shown - -❌ **Don't**: -- Change colors or gradients -- Stretch or distort proportions -- Use on light backgrounds without modification -- Apply effects that obscure the design +- Use on white or dark (#0A0A0A) backgrounds +- Scale proportionally +- Include clear space around logo (minimum: logo height / 2) +- Use provided light/dark variants for appropriate backgrounds ### Icon Usage -✅ **Do**: - Use at standard sizes: 16, 32, 64, 128, 256px -- Maintain the ascending progression concept +- Maintain the compass proportions - Scale proportionally -❌ **Don't**: -- Rotate or flip the icon -- Change the color scheme -- Use small sizes where details are lost - ### Favicon Usage - Use appropriate size for context - 16-32px: Browser tabs, bookmarks @@ -185,11 +207,11 @@ Optimized versions at multiple sizes for web use: ## SVG Optimization -All SVG files include: -- Gradient definitions for smooth color transitions -- Filter effects for depth and glow -- Optimized stroke widths -- Responsive design patterns +All SVG files are flat design with no gradients or filters: +- Clean stroke-based geometry +- No embedded rasters +- Optimized paths +- Responsive viewBox For web optimization: ```bash @@ -219,24 +241,26 @@ inkscape -D -z --file=favicon-256.svg --export-png=favicon-256.png ## Accessibility -- All icons include clear geometric shapes -- High contrast color ratios (WCAG AA compliant) -- Scalable vector format works at any size -- No text in icons (text added separately if needed) +- High contrast color ratios (WCAG AA compliant — 4.5:1 minimum) +- Clean geometric shapes recognizable at all sizes +- Scalable vector format +- No text in icons (text added separately in wordmark) +- No red-green color dependency for meaning ## Attribution -These assets are part of the Claude How To project and use Anthropic's Claude color palette and design language. +These assets are part of the Claude How To project. **License**: MIT (see project LICENSE file) ## Version History -- **v2.0** (January 2026): Claude-inspired 12-ray starburst design with dark/light mode variants +- **v3.0** (February 2026): Compass-bracket design with Black/White/Gray + Green accent palette +- **v2.0** (January 2026): Claude-inspired 12-ray starburst design with emerald palette - **v1.0** (January 2026): Original hexagon-based progression icon design --- -**Last Updated**: January 2026 -**Current Version**: 2.0 (Claude-Inspired Starburst) -**All Assets**: Production-ready SVG, fully scalable, WCAG AAA accessible +**Last Updated**: February 2026 +**Current Version**: 3.0 (Compass-Bracket) +**All Assets**: Production-ready SVG, fully scalable, WCAG AA accessible diff --git a/resources/favicons/favicon-128.svg b/resources/favicons/favicon-128.svg index 1fc9931..9137697 100644 --- a/resources/favicons/favicon-128.svg +++ b/resources/favicons/favicon-128.svg @@ -1,63 +1,29 @@ - - - - - - - - - - - - - - - - - - - + + - - + + + + + - - - - + + + + + - - + + - - + + - - + + - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/resources/favicons/favicon-16.svg b/resources/favicons/favicon-16.svg index 5aa701f..7897460 100644 --- a/resources/favicons/favicon-16.svg +++ b/resources/favicons/favicon-16.svg @@ -1,40 +1,9 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + diff --git a/resources/favicons/favicon-256.svg b/resources/favicons/favicon-256.svg index 80a3493..c6d1f28 100644 --- a/resources/favicons/favicon-256.svg +++ b/resources/favicons/favicon-256.svg @@ -1,75 +1,29 @@ - - - - - - - - - - - - - - - - - - - + + - - + + + + + - - - - + + + + + - - + + - - + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/resources/favicons/favicon-32.svg b/resources/favicons/favicon-32.svg index bea5bd6..96d5b57 100644 --- a/resources/favicons/favicon-32.svg +++ b/resources/favicons/favicon-32.svg @@ -1,40 +1,23 @@ - - - - - - - - - - + + - - + + + + + - - - - - - - - - - - - - - - - - - + + - - - - + + + + + + + + diff --git a/resources/favicons/favicon-64.svg b/resources/favicons/favicon-64.svg index ec1b32b..332bc5b 100644 --- a/resources/favicons/favicon-64.svg +++ b/resources/favicons/favicon-64.svg @@ -1,49 +1,29 @@ - - - - - - - - - - - - - - - - - - - + + - - + + + + + - - - - - - - - - - - - - - - - - - + + + + + - - - - + + + + + + + + + + + diff --git a/resources/icons/claude-howto-icon-dark.svg b/resources/icons/claude-howto-icon-dark.svg index 9e628be..bdff3e9 100644 --- a/resources/icons/claude-howto-icon-dark.svg +++ b/resources/icons/claude-howto-icon-dark.svg @@ -1,80 +1,37 @@ - - - - - - - - - - - - - - - - - - - - - - - + - + - - - - - + + + + - - - + + + + + - - + + + + + - - + + - - + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/resources/icons/claude-howto-icon.svg b/resources/icons/claude-howto-icon.svg index 7632c85..4a314f0 100644 --- a/resources/icons/claude-howto-icon.svg +++ b/resources/icons/claude-howto-icon.svg @@ -1,76 +1,37 @@ - - - - - - - - - - - - - - - - - - - + - + - - - - - + + + + - - - + + + + + - - + + + + + - - + + - - + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/resources/logos/claude-howto-logo-dark.svg b/resources/logos/claude-howto-logo-dark.svg index a1d87fc..35e9b9b 100644 --- a/resources/logos/claude-howto-logo-dark.svg +++ b/resources/logos/claude-howto-logo-dark.svg @@ -1,126 +1,63 @@ - - - - - - - + + - - - - - + + - - - - - + + + + - - - - - - + + + + + - - - - - - - - - - - + + + + + - - + + - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - Claude - + + + + + Claude + - - - How-To - + + + How-To + - - - VISUAL GUIDE TO CLAUDE CODE - + + - - - - - - - - + + + VISUAL GUIDE + + + TO CLAUDE CODE + diff --git a/resources/logos/claude-howto-logo.svg b/resources/logos/claude-howto-logo.svg index ae22e38..847c4da 100644 --- a/resources/logos/claude-howto-logo.svg +++ b/resources/logos/claude-howto-logo.svg @@ -1,106 +1,63 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + - + - - - - - + + + + - - - + + + + + - - + + + + + - - + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - Claude - + + + + + Claude + - - - How-To - + + + How-To + - - - VISUAL GUIDE TO CLAUDE CODE - + + - - - - - - - - + + + VISUAL GUIDE + + + TO CLAUDE CODE +