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.
2026-05-05 10:05:16 +02:00 · 2026-02-17 18:27:38 +01:00
parent 3cc098505c
commit 20779dbf79
19 changed files with 713 additions and 826 deletions
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <!-- Favicon: Simplified compass mark at 16x16 -->
+
+  <!-- Compass ring -->
+  <circle cx="8" cy="8" r="7" fill="none" stroke="#000000" stroke-width="1.2"/>
+
+  <!-- North needle (green) -->
+  <polygon points="8,2 6.8,7.5 8,6.5 9.2,7.5" fill="#22C55E"/>
+
+  <!-- South needle (dark) -->
+  <polygon points="8,14 6.8,8.5 8,9.5 9.2,8.5" fill="#000000"/>
+
+  <!-- > bracket simplified -->
+  <polyline points="6.5,5.5 9,8 6.5,10.5" fill="none" stroke="#000000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Center dot -->
+  <circle cx="8" cy="8" r="0.8" fill="#22C55E"/>
+</svg>
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Full Logo: Black monochrome version for light backgrounds -->
+
+  <!-- === MARK === -->
+  <g transform="translate(0, 0)">
+    <!-- Outer compass ring -->
+    <circle cx="60" cy="60" r="52" fill="none" stroke="#000000" stroke-width="3"/>
+
+    <!-- Cardinal tick marks -->
+    <line x1="60" y1="8" x2="60" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="60" y1="102" x2="60" y2="112" stroke="rgba(0,0,0,0.4)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="8" y1="60" x2="18" y2="60" stroke="rgba(0,0,0,0.4)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="102" y1="60" x2="112" y2="60" stroke="rgba(0,0,0,0.4)" stroke-width="2" stroke-linecap="round"/>
+
+    <!-- Intercardinal tick marks -->
+    <line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" stroke-linecap="round"/>
+
+    <!-- Compass needle — north -->
+    <polygon points="60,20 54,58 60,52 66,58" fill="#000000"/>
+
+    <!-- Compass needle — south -->
+    <polygon points="60,100 54,62 60,68 66,62" fill="rgba(0,0,0,0.4)"/>
+
+    <!-- Center > bracket -->
+    <g transform="translate(60, 60)">
+      <polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+
+    <!-- Center dot -->
+    <circle cx="60" cy="60" r="2.5" fill="#000000"/>
+  </g>
+
+  <!-- === WORDMARK === -->
+  <g transform="translate(140, 0)">
+    <!-- "Claude" -->
+    <text x="0" y="62" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="42" font-weight="700" fill="#000000" letter-spacing="-0.5">
+      Claude
+    </text>
+
+    <!-- "How-To" -->
+    <text x="0" y="98" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="32" font-weight="500" fill="rgba(0,0,0,0.5)" letter-spacing="0">
+      How-To
+    </text>
+
+    <!-- Accent line -->
+    <line x1="0" y1="105" x2="126" y2="105" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+
+    <!-- Subtitle -->
+    <text x="195" y="55" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="rgba(0,0,0,0.4)" letter-spacing="1.5">
+      VISUAL GUIDE
+    </text>
+    <text x="195" y="68" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="rgba(0,0,0,0.4)" letter-spacing="1.5">
+      TO CLAUDE CODE
+    </text>
+  </g>
+</svg>
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Full Logo: Mark + Wordmark (horizontal) -->
+
+  <!-- === MARK === -->
+  <g transform="translate(0, 0)">
+    <!-- Outer compass ring -->
+    <circle cx="60" cy="60" r="52" fill="none" stroke="#000000" stroke-width="3"/>
+
+    <!-- Cardinal tick marks -->
+    <line x1="60" y1="8" x2="60" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="60" y1="102" x2="60" y2="112" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+    <line x1="8" y1="60" x2="18" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+    <line x1="102" y1="60" x2="112" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+
+    <!-- Intercardinal tick marks -->
+    <line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+
+    <!-- Compass needle — north (green) -->
+    <polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>
+
+    <!-- Compass needle — south (dark) -->
+    <polygon points="60,100 54,62 60,68 66,62" fill="#000000"/>
+
+    <!-- Center > bracket -->
+    <g transform="translate(60, 60)">
+      <polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+
+    <!-- Center dot -->
+    <circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
+  </g>
+
+  <!-- === WORDMARK === -->
+  <g transform="translate(140, 0)">
+    <!-- "Claude" -->
+    <text x="0" y="62" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="42" font-weight="700" fill="#000000" letter-spacing="-0.5">
+      Claude
+    </text>
+
+    <!-- "How-To" -->
+    <text x="0" y="98" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="32" font-weight="500" fill="#6B7280" letter-spacing="0">
+      How-To
+    </text>
+
+    <!-- Green accent line -->
+    <line x1="0" y1="105" x2="126" y2="105" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
+
+    <!-- Subtitle -->
+    <text x="195" y="55" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="#6B7280" letter-spacing="1.5" text-transform="uppercase">
+      VISUAL GUIDE
+    </text>
+    <text x="195" y="68" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="#6B7280" letter-spacing="1.5">
+      TO CLAUDE CODE
+    </text>
+  </g>
+</svg>
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <!-- App Icon: Square with padding, rounded corners implied by container -->
+
+  <!-- Background -->
+  <rect width="512" height="512" rx="80" fill="#FFFFFF"/>
+
+  <!-- Scaled mark centered with padding -->
+  <g transform="translate(256, 256) scale(3.2)">
+    <!-- Outer compass ring -->
+    <circle cx="0" cy="0" r="52" fill="none" stroke="#000000" stroke-width="3"/>
+
+    <!-- Cardinal tick marks -->
+    <line x1="0" y1="-52" x2="0" y2="-42" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="0" y1="42" x2="0" y2="52" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+    <line x1="-52" y1="0" x2="-42" y2="0" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+    <line x1="42" y1="0" x2="52" y2="0" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+
+    <!-- Intercardinal tick marks -->
+    <line x1="-36.8" y1="-36.8" x2="-29.7" y2="-29.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="29.7" y1="-29.7" x2="36.8" y2="-36.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="-36.8" y1="36.8" x2="-29.7" y2="29.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="29.7" y1="29.7" x2="36.8" y2="36.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+
+    <!-- Compass needle — north (green) -->
+    <polygon points="0,-40 -6,-2 0,-8 6,-2" fill="#22C55E"/>
+
+    <!-- Compass needle — south (dark) -->
+    <polygon points="0,40 -6,2 0,8 6,2" fill="#000000"/>
+
+    <!-- Center > bracket -->
+    <polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+
+    <!-- Center dot -->
+    <circle cx="0" cy="0" r="2.5" fill="#22C55E"/>
+  </g>
+
+  <!-- Subtle border -->
+  <rect width="512" height="512" rx="80" fill="none" stroke="#E5E7EB" stroke-width="1"/>
+</svg>
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Logo Mark: Compass-bracket symbol
+       A compass rose with a code bracket at center, representing
+       "guided path through code" — the essence of Claude How-To -->
+
+  <!-- Outer compass ring -->
+  <circle cx="60" cy="60" r="52" fill="none" stroke="#000000" stroke-width="3"/>
+
+  <!-- Cardinal tick marks -->
+  <line x1="60" y1="8" x2="60" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
+  <line x1="60" y1="102" x2="60" y2="112" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+  <line x1="8" y1="60" x2="18" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+  <line x1="102" y1="60" x2="112" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+
+  <!-- Intercardinal tick marks (smaller) -->
+  <line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+
+  <!-- Compass needle — north (green accent = direction/guidance) -->
+  <polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>
+
+  <!-- Compass needle — south (dark) -->
+  <polygon points="60,100 54,62 60,68 66,62" fill="#000000"/>
+
+  <!-- Center code bracket: > symbol (represents "how-to", next step, terminal prompt) -->
+  <g transform="translate(60, 60)">
+    <polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+
+  <!-- Small dot at center pivot -->
+  <circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
+</svg>
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Full Logo: White version for dark backgrounds -->
+
+  <!-- === MARK === -->
+  <g transform="translate(0, 0)">
+    <!-- Outer compass ring -->
+    <circle cx="60" cy="60" r="52" fill="none" stroke="#FFFFFF" stroke-width="3"/>
+
+    <!-- Cardinal tick marks -->
+    <line x1="60" y1="8" x2="60" y2="18" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="60" y1="102" x2="60" y2="112" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="8" y1="60" x2="18" y2="60" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="102" y1="60" x2="112" y2="60" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
+
+    <!-- Intercardinal tick marks -->
+    <line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+
+    <!-- Compass needle — north (green) -->
+    <polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>
+
+    <!-- Compass needle — south (white) -->
+    <polygon points="60,100 54,62 60,68 66,62" fill="#FFFFFF"/>
+
+    <!-- Center > bracket -->
+    <g transform="translate(60, 60)">
+      <polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+
+    <!-- Center dot -->
+    <circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
+  </g>
+
+  <!-- === WORDMARK === -->
+  <g transform="translate(140, 0)">
+    <!-- "Claude" -->
+    <text x="0" y="62" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="42" font-weight="700" fill="#FFFFFF" letter-spacing="-0.5">
+      Claude
+    </text>
+
+    <!-- "How-To" -->
+    <text x="0" y="98" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="32" font-weight="500" fill="rgba(255,255,255,0.6)" letter-spacing="0">
+      How-To
+    </text>
+
+    <!-- Green accent line -->
+    <line x1="0" y1="105" x2="126" y2="105" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
+
+    <!-- Subtitle -->
+    <text x="195" y="55" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="rgba(255,255,255,0.5)" letter-spacing="1.5">
+      VISUAL GUIDE
+    </text>
+    <text x="195" y="68" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="rgba(255,255,255,0.5)" letter-spacing="1.5">
+      TO CLAUDE CODE
+    </text>
+  </g>
+</svg>
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="340" height="48" viewBox="0 0 340 48" xmlns="http://www.w3.org/2000/svg">
+  <!-- Wordmark: "Claude How-To" -->
+
+  <!-- "Claude" in bold black -->
+  <text x="0" y="35" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="36" font-weight="700" fill="#000000" letter-spacing="-0.5">
+    Claude
+  </text>
+
+  <!-- "How-To" in medium weight with green accent -->
+  <text x="170" y="35" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="36" font-weight="500" fill="#6B7280" letter-spacing="-0.5">
+    How-To
+  </text>
+
+  <!-- Green underline accent on "How-To" -->
+  <line x1="170" y1="42" x2="330" y2="42" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
+</svg>
@@ -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
-<!-- Regular hexagon with flat top -->
-M -26,0          <!-- Left point -->
-L -13,-22.5      <!-- Top-left corner -->
-L 13,-22.5       <!-- Top-right corner -->
-L 26,0           <!-- Right point -->
-L 13,22.5        <!-- Bottom-right corner -->
-L -13,22.5       <!-- Bottom-left corner -->
-Z                <!-- Close path -->
+```
+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
-<filter id="softGlow">
-  <feGaussianBlur stdDeviation="2" result="blur"/>
-  <feFlood flood-color="#10b981" flood-opacity="0.4"/>
-  <feComposite in2="blur" operator="in"/>
-  <feMerge>
-    <feMergeNode/>
-    <feMergeNode in="SourceGraphic"/>
-  </feMerge>
-</filter>
-```
-
-Creates: Soft green glow around elements
-
-### Shadow Effect
-
-```svg
-<filter id="shadow">
-  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
-  <feOffset dx="2" dy="4" result="offsetblur"/>
-  <feComponentTransfer>
-    <feFuncA type="linear" slope="0.3"/>
-  </feComponentTransfer>
-  <feMerge>
-    <feMergeNode/>
-    <feMergeNode in="SourceGraphic"/>
-  </feMerge>
-</filter>
-```
-
-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
- `<defs>` 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
-<stop offset="0%" style="stop-color:#NEW_COLOR"/>
-```
-
-2. Update filter colors:
-```svg
-<feFlood flood-color="#NEW_COLOR" flood-opacity="0.4"/>
-```
-
-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
-<svg transform="scale(2)">
-  <!-- content -->
-</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
@@ -18,7 +18,7 @@ cp resources/favicons/* /path/to/your/website/public/
 <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
 <link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
 <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
-<meta name="theme-color" content="#0d1f0d">
+<meta name="theme-color" content="#000000">
 ```

 ## 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
@@ -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:
  <link rel="shortcut icon" href="/resources/favicons/favicon-256.svg">

  <!-- PWA manifest reference (if using manifest.json) -->
-  <meta name="theme-color" content="#0d1f0d">
+  <meta name="theme-color" content="#000000">
 </head>
 ```

 ## 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
@@ -1,63 +1,29 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#10b981"/>
-      <stop offset="100%" style="stop-color:#059669"/>
-    </linearGradient>
-    <linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#6ee7b7"/>
-      <stop offset="100%" style="stop-color:#34d399"/>
-    </linearGradient>
-    <filter id="glow">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feFlood flood-color="#10b981" flood-opacity="0.4"/>
-      <feComposite in2="blur" operator="in"/>
-      <feMerge>
-        <feMergeNode/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
+  <!-- Favicon 128x128: High detail compass -->
+  <circle cx="64" cy="64" r="56" fill="none" stroke="#000000" stroke-width="2.5"/>

-  <!-- White background -->
-  <circle cx="64" cy="64" r="64" fill="#ffffff"/>
+  <!-- Cardinal ticks -->
+  <line x1="64" y1="8" x2="64" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
+  <line x1="64" y1="110" x2="64" y2="120" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+  <line x1="8" y1="64" x2="18" y2="64" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+  <line x1="110" y1="64" x2="120" y2="64" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>

-  <!-- Starburst (8 rays for 128px) -->
-  <g transform="translate(64, 64)">
-    <!-- Ray 1 (top) -->
-    <path d="M 0,-48 Q -8,-72 0,-96 Q 8,-72 0,-48" fill="url(#emerald)" opacity="0.95"/>
+  <!-- Intercardinal ticks -->
+  <line x1="24.4" y1="24.4" x2="31.5" y2="31.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="96.5" y1="31.5" x2="103.6" y2="24.4" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="24.4" y1="103.6" x2="31.5" y2="96.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="96.5" y1="96.5" x2="103.6" y2="103.6" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>

-    <!-- Ray 2 (top-right) -->
-    <path d="M 34,-34 Q 40,-60 64,-80 Q 48,-48 34,-34" fill="url(#emerald)" opacity="0.92"/>
+  <!-- North needle (green) -->
+  <polygon points="64,21 58,62 64,56 70,62" fill="#22C55E"/>

-    <!-- Ray 3 (right) -->
-    <path d="M 48,0 Q 72,-16 96,0 Q 72,16 48,0" fill="url(#emerald)" opacity="0.95"/>
+  <!-- South needle (dark) -->
+  <polygon points="64,107 58,66 64,72 70,66" fill="#000000"/>

-    <!-- Ray 4 (bottom-right) -->
-    <path d="M 34,34 Q 48,48 64,80 Q 40,60 34,34" fill="url(#emerald)" opacity="0.92"/>
+  <!-- > bracket -->
+  <polyline points="55,50 71,64 55,78" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>

-    <!-- Ray 5 (bottom) -->
-    <path d="M 0,48 Q -8,72 0,96 Q 8,72 0,48" fill="url(#emerald)" opacity="0.95"/>
-
-    <!-- Ray 6 (bottom-left) -->
-    <path d="M -34,34 Q -48,48 -64,80 Q -40,60 -34,34" fill="url(#emerald)" opacity="0.92"/>
-
-    <!-- Ray 7 (left) -->
-    <path d="M -48,0 Q -72,-16 -96,0 Q -72,16 -48,0" fill="url(#emerald)" opacity="0.95"/>
-
-    <!-- Ray 8 (top-left) -->
-    <path d="M -34,-34 Q -40,-60 -64,-80 Q -48,-48 -34,-34" fill="url(#emerald)" opacity="0.92"/>
-
-    <!-- Center core -->
-    <circle cx="0" cy="0" r="20" fill="#10b981" filter="url(#glow)"/>
-    <circle cx="0" cy="0" r="12" fill="url(#mint)"/>
-
-    <!-- Three inner lines representing guides -->
-    <g opacity="0.7">
-      <rect x="-8" y="-4" width="16" height="2" fill="#0d1f0d" rx="1"/>
-      <rect x="-8" y="1" width="16" height="2" fill="#0d1f0d" rx="1"/>
-      <rect x="-8" y="6" width="16" height="2" fill="#0d1f0d" rx="1"/>
-    </g>
-  </g>
+  <!-- Center dot -->
+  <circle cx="64" cy="64" r="2.5" fill="#22C55E"/>
 </svg>
@@ -1,40 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#10b981"/>
-      <stop offset="100%" style="stop-color:#059669"/>
-    </linearGradient>
-    <linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#6ee7b7"/>
-      <stop offset="100%" style="stop-color:#34d399"/>
-    </linearGradient>
-  </defs>
-
-  <!-- White background -->
-  <circle cx="8" cy="8" r="8" fill="#ffffff"/>
-
-  <!-- Simplified starburst (8 rays for 16px) -->
-  <g transform="translate(8, 8)">
-    <!-- Ray 1 (top) -->
-    <path d="M 0,-6 L 1,-3 L 0,-1.5 L -1,-3 Z" fill="url(#emerald)"/>
-    <!-- Ray 2 (top-right) -->
-    <path d="M 4,-4 L 4.5,-2 L 3,-0.5 L 2,-2 Z" fill="url(#emerald)"/>
-    <!-- Ray 3 (right) -->
-    <path d="M 6,0 L 3,1 L 1.5,0 L 3,-1 Z" fill="url(#emerald)"/>
-    <!-- Ray 4 (bottom-right) -->
-    <path d="M 4,4 L 2,2 L 3,0.5 L 4.5,2 Z" fill="url(#emerald)"/>
-    <!-- Ray 5 (bottom) -->
-    <path d="M 0,6 L -1,3 L 0,1.5 L 1,3 Z" fill="url(#emerald)"/>
-    <!-- Ray 6 (bottom-left) -->
-    <path d="M -4,4 L -2,2 L -3,0.5 L -4.5,2 Z" fill="url(#emerald)"/>
-    <!-- Ray 7 (left) -->
-    <path d="M -6,0 L -3,1 L -1.5,0 L -3,-1 Z" fill="url(#emerald)"/>
-    <!-- Ray 8 (top-left) -->
-    <path d="M -4,-4 L -4.5,-2 L -3,-0.5 L -2,-2 Z" fill="url(#emerald)"/>
-
-    <!-- Center core -->
-    <circle cx="0" cy="0" r="2" fill="#10b981"/>
-    <circle cx="0" cy="0" r="1.2" fill="url(#mint)"/>
-  </g>
+  <!-- Favicon 16x16: Minimal compass -->
+  <circle cx="8" cy="8" r="7" fill="none" stroke="#000000" stroke-width="1.2"/>
+  <polygon points="8,2 6.8,7.5 8,6.5 9.2,7.5" fill="#22C55E"/>
+  <polygon points="8,14 6.8,8.5 8,9.5 9.2,8.5" fill="#000000"/>
+  <polyline points="6.5,5.5 9,8 6.5,10.5" fill="none" stroke="#000000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="8" cy="8" r="0.8" fill="#22C55E"/>
 </svg>
@@ -1,75 +1,29 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#10b981"/>
-      <stop offset="100%" style="stop-color:#059669"/>
-    </linearGradient>
-    <linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#6ee7b7"/>
-      <stop offset="100%" style="stop-color:#34d399"/>
-    </linearGradient>
-    <filter id="glow">
-      <feGaussianBlur stdDeviation="2" result="blur"/>
-      <feFlood flood-color="#10b981" flood-opacity="0.4"/>
-      <feComposite in2="blur" operator="in"/>
-      <feMerge>
-        <feMergeNode/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
+  <!-- Favicon 256x256: Maximum detail compass -->
+  <circle cx="128" cy="128" r="112" fill="none" stroke="#000000" stroke-width="3"/>

-  <!-- White background -->
-  <circle cx="128" cy="128" r="128" fill="#ffffff"/>
+  <!-- Cardinal ticks -->
+  <line x1="128" y1="16" x2="128" y2="36" stroke="#000000" stroke-width="3" stroke-linecap="round"/>
+  <line x1="128" y1="220" x2="128" y2="240" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+  <line x1="16" y1="128" x2="36" y2="128" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+  <line x1="220" y1="128" x2="240" y2="128" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>

-  <!-- Icon: 12-ray starburst -->
-  <g transform="translate(128, 128)">
-    <!-- Ray 1 (top) -->
-    <path d="M 0,-80 Q -10,-64 0,-96 Q 10,-64 0,-80" fill="url(#emeraldGrad)" opacity="0.95"/>
+  <!-- Intercardinal ticks -->
+  <line x1="48.8" y1="48.8" x2="62.9" y2="62.9" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="193.1" y1="62.9" x2="207.2" y2="48.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="48.8" y1="207.2" x2="62.9" y2="193.1" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="193.1" y1="193.1" x2="207.2" y2="207.2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>

-    <!-- Ray 2 (30°) -->
-    <path d="M 26,-16 Q 36,-44 56,-70 Q 46,-40 26,-16" fill="url(#emeraldGrad)" opacity="0.92"/>
+  <!-- North needle (green) -->
+  <polygon points="128,42 116,124 128,112 140,124" fill="#22C55E"/>

-    <!-- Ray 3 (60°) -->
-    <path d="M 44,14 Q 60,30 84,56 Q 56,36 44,14" fill="url(#emeraldGrad)" opacity="0.95"/>
+  <!-- South needle (dark) -->
+  <polygon points="128,214 116,132 128,144 140,132" fill="#000000"/>

-    <!-- Ray 4 (90°, right) -->
-    <path d="M 30,0 Q 64,-10 96,0 Q 64,10 30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
+  <!-- > bracket -->
+  <polyline points="110,100 142,128 110,156" fill="none" stroke="#000000" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>

-    <!-- Ray 5 (120°) -->
-    <path d="M 44,-14 Q 60,-30 84,-56 Q 56,-36 44,-14" fill="url(#emeraldGrad)" opacity="0.92"/>
-
-    <!-- Ray 6 (150°) -->
-    <path d="M 26,16 Q 36,44 56,70 Q 46,40 26,16" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 7 (180°, left) -->
-    <path d="M 0,80 Q -10,64 0,96 Q 10,64 0,80" fill="url(#emeraldGrad)" opacity="0.94"/>
-
-    <!-- Ray 8 (210°) -->
-    <path d="M -26,16 Q -36,44 -56,70 Q -46,40 -26,16" fill="url(#emeraldGrad)" opacity="0.92"/>
-
-    <!-- Ray 9 (240°) -->
-    <path d="M -44,-14 Q -60,-30 -84,-56 Q -56,-36 -44,-14" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 10 (270°) -->
-    <path d="M -30,0 Q -64,-10 -96,0 Q -64,10 -30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
-
-    <!-- Ray 11 (300°) -->
-    <path d="M -44,14 Q -60,30 -84,56 Q -56,36 -44,14" fill="url(#emeraldGrad)" opacity="0.92"/>
-
-    <!-- Ray 12 (330°) -->
-    <path d="M -26,-16 Q -36,-44 -56,-70 Q -46,-40 -26,-16" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Central core -->
-    <circle cx="0" cy="0" r="28" fill="#10b981" filter="url(#glow)"/>
-    <circle cx="0" cy="0" r="20" fill="url(#mintGrad)"/>
-
-    <!-- Three inner lines -->
-    <g opacity="0.7">
-      <rect x="-7" y="-6" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
-      <rect x="-7" y="-0.4" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
-      <rect x="-7" y="5.2" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
-    </g>
-  </g>
+  <!-- Center dot -->
+  <circle cx="128" cy="128" r="4" fill="#22C55E"/>
 </svg>
@@ -1,40 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#10b981"/>
-      <stop offset="100%" style="stop-color:#059669"/>
-    </linearGradient>
-    <linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#6ee7b7"/>
-      <stop offset="100%" style="stop-color:#34d399"/>
-    </linearGradient>
-  </defs>
+  <!-- Favicon 32x32: Compass with tick marks -->
+  <circle cx="16" cy="16" r="14" fill="none" stroke="#000000" stroke-width="1.5"/>

-  <!-- White background -->
-  <circle cx="16" cy="16" r="16" fill="#ffffff"/>
+  <!-- Cardinal ticks -->
+  <line x1="16" y1="2" x2="16" y2="5" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="16" y1="27" x2="16" y2="30" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
+  <line x1="2" y1="16" x2="5" y2="16" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
+  <line x1="27" y1="16" x2="30" y2="16" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>

-  <!-- Starburst (8 rays for 32px) -->
-  <g transform="translate(16, 16)">
-    <!-- Ray 1 (top) -->
-    <path d="M 0,-12 Q -2,-18 0,-24 Q 2,-18 0,-12" fill="url(#emerald)" opacity="0.95"/>
-    <!-- Ray 2 (top-right) -->
-    <path d="M 8,-8 Q 10,-15 16,-20 Q 12,-12 8,-8" fill="url(#emerald)" opacity="0.92"/>
-    <!-- Ray 3 (right) -->
-    <path d="M 12,0 Q 18,-4 24,0 Q 18,4 12,0" fill="url(#emerald)" opacity="0.95"/>
-    <!-- Ray 4 (bottom-right) -->
-    <path d="M 8,8 Q 12,12 16,20 Q 10,15 8,8" fill="url(#emerald)" opacity="0.92"/>
-    <!-- Ray 5 (bottom) -->
-    <path d="M 0,12 Q -2,18 0,24 Q 2,18 0,12" fill="url(#emerald)" opacity="0.95"/>
-    <!-- Ray 6 (bottom-left) -->
-    <path d="M -8,8 Q -12,12 -16,20 Q -10,15 -8,8" fill="url(#emerald)" opacity="0.92"/>
-    <!-- Ray 7 (left) -->
-    <path d="M -12,0 Q -18,-4 -24,0 Q -18,4 -12,0" fill="url(#emerald)" opacity="0.95"/>
-    <!-- Ray 8 (top-left) -->
-    <path d="M -8,-8 Q -10,-15 -16,-20 Q -12,-12 -8,-8" fill="url(#emerald)" opacity="0.92"/>
+  <!-- North needle (green) -->
+  <polygon points="16,5 14.5,15 16,13.5 17.5,15" fill="#22C55E"/>

-    <!-- Center core -->
-    <circle cx="0" cy="0" r="5" fill="#10b981"/>
-    <circle cx="0" cy="0" r="3" fill="url(#mint)"/>
-  </g>
+  <!-- South needle (dark) -->
+  <polygon points="16,27 14.5,17 16,18.5 17.5,17" fill="#000000"/>
+
+  <!-- > bracket -->
+  <polyline points="13.5,12 17.5,16 13.5,20" fill="none" stroke="#000000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Center dot -->
+  <circle cx="16" cy="16" r="1.2" fill="#22C55E"/>
 </svg>
@@ -1,49 +1,29 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#10b981"/>
-      <stop offset="100%" style="stop-color:#059669"/>
-    </linearGradient>
-    <linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#6ee7b7"/>
-      <stop offset="100%" style="stop-color:#34d399"/>
-    </linearGradient>
-    <filter id="glow">
-      <feGaussianBlur stdDeviation="1" result="blur"/>
-      <feFlood flood-color="#10b981" flood-opacity="0.3"/>
-      <feComposite in2="blur" operator="in"/>
-      <feMerge>
-        <feMergeNode/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
+  <!-- Favicon 64x64: Full compass detail -->
+  <circle cx="32" cy="32" r="28" fill="none" stroke="#000000" stroke-width="2"/>

-  <!-- White background -->
-  <circle cx="32" cy="32" r="32" fill="#ffffff"/>
+  <!-- Cardinal ticks -->
+  <line x1="32" y1="4" x2="32" y2="10" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+  <line x1="32" y1="54" x2="32" y2="60" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="4" y1="32" x2="10" y2="32" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="54" y1="32" x2="60" y2="32" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>

-  <!-- Starburst (8 rays for 64px) -->
-  <g transform="translate(32, 32)">
-    <!-- Ray 1 (top) -->
-    <path d="M 0,-24 Q -4,-36 0,-48 Q 4,-36 0,-24" fill="url(#emerald)" opacity="0.95"/>
-    <!-- Ray 2 (top-right) -->
-    <path d="M 17,-17 Q 20,-30 32,-40 Q 24,-24 17,-17" fill="url(#emerald)" opacity="0.92"/>
-    <!-- Ray 3 (right) -->
-    <path d="M 24,0 Q 36,-8 48,0 Q 36,8 24,0" fill="url(#emerald)" opacity="0.95"/>
-    <!-- Ray 4 (bottom-right) -->
-    <path d="M 17,17 Q 24,24 32,40 Q 20,30 17,17" fill="url(#emerald)" opacity="0.92"/>
-    <!-- Ray 5 (bottom) -->
-    <path d="M 0,24 Q -4,36 0,48 Q 4,36 0,24" fill="url(#emerald)" opacity="0.95"/>
-    <!-- Ray 6 (bottom-left) -->
-    <path d="M -17,17 Q -24,24 -32,40 Q -20,30 -17,17" fill="url(#emerald)" opacity="0.92"/>
-    <!-- Ray 7 (left) -->
-    <path d="M -24,0 Q -36,-8 -48,0 Q -36,8 -24,0" fill="url(#emerald)" opacity="0.95"/>
-    <!-- Ray 8 (top-left) -->
-    <path d="M -17,-17 Q -20,-30 -32,-40 Q -24,-24 -17,-17" fill="url(#emerald)" opacity="0.92"/>
+  <!-- Intercardinal ticks -->
+  <line x1="12.2" y1="12.2" x2="16" y2="16" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
+  <line x1="48" y1="16" x2="51.8" y2="12.2" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
+  <line x1="12.2" y1="51.8" x2="16" y2="48" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>
+  <line x1="48" y1="48" x2="51.8" y2="51.8" stroke="#6B7280" stroke-width="1" stroke-linecap="round"/>

-    <!-- Center core -->
-    <circle cx="0" cy="0" r="10" fill="#10b981" filter="url(#glow)"/>
-    <circle cx="0" cy="0" r="6" fill="url(#mint)"/>
-  </g>
+  <!-- North needle (green) -->
+  <polygon points="32,11 29,31 32,28 35,31" fill="#22C55E"/>
+
+  <!-- South needle (dark) -->
+  <polygon points="32,53 29,33 32,36 35,33" fill="#000000"/>
+
+  <!-- > bracket -->
+  <polyline points="27,24 35,32 27,40" fill="none" stroke="#000000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Center dot -->
+  <circle cx="32" cy="32" r="1.8" fill="#22C55E"/>
 </svg>
@@ -1,80 +1,37 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#10b981"/>
-      <stop offset="100%" style="stop-color:#059669"/>
-    </linearGradient>
-    <linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#6ee7b7"/>
-      <stop offset="100%" style="stop-color:#34d399"/>
-    </linearGradient>
-    <linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0d1f0d"/>
-      <stop offset="100%" style="stop-color:#051515"/>
-    </linearGradient>
-    <filter id="glowDark">
-      <feGaussianBlur stdDeviation="3" result="blur"/>
-      <feFlood flood-color="#10b981" flood-opacity="0.5"/>
-      <feComposite in2="blur" operator="in"/>
-      <feMerge>
-        <feMergeNode/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
+  <!-- Claude How-To Icon — Dark mode (256x256) -->

  <!-- Dark background -->
-  <circle cx="128" cy="128" r="128" fill="url(#bgDark)"/>
+  <circle cx="128" cy="128" r="128" fill="#0A0A0A"/>

-  <!-- Icon: Rounded starburst dark mode -->
-  <g transform="translate(128, 128)">
-    <!-- Central core with glow -->
-    <circle cx="0" cy="0" r="28" fill="#10b981" filter="url(#glowDark)"/>
-    <circle cx="0" cy="0" r="20" fill="url(#mintGrad)"/>
+  <!-- Compass mark centered -->
+  <g transform="translate(128, 128) scale(1.9)">
+    <!-- Outer compass ring -->
+    <circle cx="0" cy="0" r="52" fill="none" stroke="#FFFFFF" stroke-width="3"/>

-    <!-- 12 rays -->
-    <!-- Ray 1 (top) -->
-    <path d="M 0,-30 Q -10,-64 0,-96 Q 10,-64 0,-30" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
+    <!-- Cardinal tick marks -->
+    <line x1="0" y1="-52" x2="0" y2="-42" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="0" y1="42" x2="0" y2="52" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="-52" y1="0" x2="-42" y2="0" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="42" y1="0" x2="52" y2="0" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>

-    <!-- Ray 2 (30°) -->
-    <path d="M 26,-16 Q 36,-44 56,-70 Q 46,-40 26,-16" fill="url(#emeraldGrad)" opacity="0.95"/>
+    <!-- Intercardinal tick marks -->
+    <line x1="-36.8" y1="-36.8" x2="-29.7" y2="-29.7" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="29.7" y1="-29.7" x2="36.8" y2="-36.8" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="-36.8" y1="36.8" x2="-29.7" y2="29.7" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="29.7" y1="29.7" x2="36.8" y2="36.8" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>

-    <!-- Ray 3 (60°) -->
-    <path d="M 44,14 Q 60,30 84,56 Q 56,36 44,14" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
+    <!-- Compass needle — north (green) -->
+    <polygon points="0,-40 -6,-2 0,-8 6,-2" fill="#22C55E"/>

-    <!-- Ray 4 (90°, right) -->
-    <path d="M 30,0 Q 64,-10 96,0 Q 64,10 30,0" fill="url(#emeraldGrad)" opacity="0.98"/>
+    <!-- Compass needle — south (white) -->
+    <polygon points="0,40 -6,2 0,8 6,2" fill="#FFFFFF"/>

-    <!-- Ray 5 (120°) -->
-    <path d="M 44,-14 Q 60,-30 84,-56 Q 56,-36 44,-14" fill="url(#emeraldGrad)" opacity="0.95"/>
+    <!-- Center > bracket -->
+    <polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>

-    <!-- Ray 6 (150°) -->
-    <path d="M 26,16 Q 36,44 56,70 Q 46,40 26,16" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
-
-    <!-- Ray 7 (180°, left) -->
-    <path d="M 0,30 Q -10,64 0,96 Q 10,64 0,30" fill="url(#emeraldGrad)" opacity="0.98"/>
-
-    <!-- Ray 8 (210°) -->
-    <path d="M -26,16 Q -36,44 -56,70 Q -46,40 -26,16" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 9 (240°) -->
-    <path d="M -44,-14 Q -60,-30 -84,-56 Q -56,-36 -44,-14" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
-
-    <!-- Ray 10 (270°) -->
-    <path d="M -30,0 Q -64,-10 -96,0 Q -64,10 -30,0" fill="url(#emeraldGrad)" opacity="0.98"/>
-
-    <!-- Ray 11 (300°) -->
-    <path d="M -44,14 Q -60,30 -84,56 Q -56,36 -44,14" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 12 (330°) -->
-    <path d="M -26,-16 Q -36,-44 -56,-70 Q -46,-40 -26,-16" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
-
-    <!-- Inner detail lines -->
-    <g opacity="0.8">
-      <rect x="-7" y="-6" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
-      <rect x="-7" y="-0.4" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
-      <rect x="-7" y="5.2" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
-    </g>
+    <!-- Center dot -->
+    <circle cx="0" cy="0" r="2.5" fill="#22C55E"/>
  </g>
 </svg>
@@ -1,76 +1,37 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#10b981"/>
-      <stop offset="100%" style="stop-color:#059669"/>
-    </linearGradient>
-    <linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#6ee7b7"/>
-      <stop offset="100%" style="stop-color:#34d399"/>
-    </linearGradient>
-    <filter id="glow">
-      <feGaussianBlur stdDeviation="2" result="blur"/>
-      <feFlood flood-color="#10b981" flood-opacity="0.3"/>
-      <feComposite in2="blur" operator="in"/>
-      <feMerge>
-        <feMergeNode/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
+  <!-- Claude How-To Icon — Light mode (256x256) -->

  <!-- White background -->
-  <circle cx="128" cy="128" r="128" fill="#ffffff"/>
+  <circle cx="128" cy="128" r="128" fill="#FFFFFF"/>

-  <!-- Icon: Rounded starburst -->
-  <g transform="translate(128, 128)">
-    <!-- Central core -->
-    <circle cx="0" cy="0" r="28" fill="#10b981" filter="url(#glow)"/>
-    <circle cx="0" cy="0" r="20" fill="url(#mintGrad)"/>
+  <!-- Compass mark centered -->
+  <g transform="translate(128, 128) scale(1.9)">
+    <!-- Outer compass ring -->
+    <circle cx="0" cy="0" r="52" fill="none" stroke="#000000" stroke-width="3"/>

-    <!-- 12 rays - scaled up for 256px -->
-    <!-- Ray 1 (top) -->
-    <path d="M 0,-30 Q -10,-64 0,-96 Q 10,-64 0,-30" fill="url(#emeraldGrad)" opacity="0.95"/>
+    <!-- Cardinal tick marks -->
+    <line x1="0" y1="-52" x2="0" y2="-42" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="0" y1="42" x2="0" y2="52" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+    <line x1="-52" y1="0" x2="-42" y2="0" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+    <line x1="42" y1="0" x2="52" y2="0" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>

-    <!-- Ray 2 (30°) -->
-    <path d="M 26,-16 Q 36,-44 56,-70 Q 46,-40 26,-16" fill="url(#emeraldGrad)" opacity="0.92"/>
+    <!-- Intercardinal tick marks -->
+    <line x1="-36.8" y1="-36.8" x2="-29.7" y2="-29.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="29.7" y1="-29.7" x2="36.8" y2="-36.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="-36.8" y1="36.8" x2="-29.7" y2="29.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="29.7" y1="29.7" x2="36.8" y2="36.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>

-    <!-- Ray 3 (60°) -->
-    <path d="M 44,14 Q 60,30 84,56 Q 56,36 44,14" fill="url(#emeraldGrad)" opacity="0.95"/>
+    <!-- Compass needle — north (green) -->
+    <polygon points="0,-40 -6,-2 0,-8 6,-2" fill="#22C55E"/>

-    <!-- Ray 4 (90°, right) -->
-    <path d="M 30,0 Q 64,-10 96,0 Q 64,10 30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
+    <!-- Compass needle — south (dark) -->
+    <polygon points="0,40 -6,2 0,8 6,2" fill="#000000"/>

-    <!-- Ray 5 (120°) -->
-    <path d="M 44,-14 Q 60,-30 84,-56 Q 56,-36 44,-14" fill="url(#emeraldGrad)" opacity="0.92"/>
+    <!-- Center > bracket -->
+    <polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>

-    <!-- Ray 6 (150°) -->
-    <path d="M 26,16 Q 36,44 56,70 Q 46,40 26,16" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 7 (180°, left) -->
-    <path d="M 0,30 Q -10,64 0,96 Q 10,64 0,30" fill="url(#emeraldGrad)" opacity="0.94"/>
-
-    <!-- Ray 8 (210°) -->
-    <path d="M -26,16 Q -36,44 -56,70 Q -46,40 -26,16" fill="url(#emeraldGrad)" opacity="0.92"/>
-
-    <!-- Ray 9 (240°) -->
-    <path d="M -44,-14 Q -60,-30 -84,-56 Q -56,-36 -44,-14" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 10 (270°) -->
-    <path d="M -30,0 Q -64,-10 -96,0 Q -64,10 -30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
-
-    <!-- Ray 11 (300°) -->
-    <path d="M -44,14 Q -60,30 -84,56 Q -56,36 -44,14" fill="url(#emeraldGrad)" opacity="0.92"/>
-
-    <!-- Ray 12 (330°) -->
-    <path d="M -26,-16 Q -36,-44 -56,-70 Q -46,-40 -26,-16" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Inner detail lines -->
-    <g opacity="0.7">
-      <rect x="-7" y="-6" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
-      <rect x="-7" y="-0.4" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
-      <rect x="-7" y="5.2" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
-    </g>
+    <!-- Center dot -->
+    <circle cx="0" cy="0" r="2.5" fill="#22C55E"/>
  </g>
 </svg>
@@ -1,126 +1,63 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <!-- Emerald gradient -->
-    <linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#10b981"/>
-      <stop offset="100%" style="stop-color:#059669"/>
-    </linearGradient>
+<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Claude How-To Logo — Dark background version -->

-    <!-- Mint gradient -->
-    <linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#6ee7b7"/>
-      <stop offset="100%" style="stop-color:#34d399"/>
-    </linearGradient>
+  <!-- Dark background -->
+  <rect width="520" height="120" fill="#0A0A0A"/>

-    <!-- Text gradient dark -->
-    <linearGradient id="textDark" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#d1fae5"/>
-      <stop offset="100%" style="stop-color:#a7f3d0"/>
-    </linearGradient>
+  <!-- === MARK === -->
+  <g transform="translate(0, 0)">
+    <!-- Outer compass ring -->
+    <circle cx="60" cy="60" r="52" fill="none" stroke="#FFFFFF" stroke-width="3"/>

-    <!-- Dark background -->
-    <linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0d1f0d"/>
-      <stop offset="50%" style="stop-color:#132813"/>
-      <stop offset="100%" style="stop-color:#0a1a0a"/>
-    </linearGradient>
+    <!-- Cardinal tick marks -->
+    <line x1="60" y1="8" x2="60" y2="18" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="60" y1="102" x2="60" y2="112" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="8" y1="60" x2="18" y2="60" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>
+    <line x1="102" y1="60" x2="112" y2="60" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round"/>

-    <!-- Glow filter dark -->
-    <filter id="glowDark" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="3" result="blur"/>
-      <feFlood flood-color="#10b981" flood-opacity="0.5"/>
-      <feComposite in2="blur" operator="in"/>
-      <feMerge>
-        <feMergeNode/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
+    <!-- Intercardinal tick marks -->
+    <line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>

-  <!-- Dark gradient background -->
-  <rect width="800" height="200" fill="url(#bgDark)"/>
+    <!-- Compass needle — north (green = direction/guidance) -->
+    <polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>

-  <!-- Subtle grid overlay -->
-  <g opacity="0.02">
-    <line x1="0" y1="50" x2="800" y2="50" stroke="#10b981" stroke-width="1"/>
-    <line x1="0" y1="100" x2="800" y2="100" stroke="#10b981" stroke-width="1"/>
-    <line x1="0" y1="150" x2="800" y2="150" stroke="#10b981" stroke-width="1"/>
-  </g>
+    <!-- Compass needle — south (white) -->
+    <polygon points="60,100 54,62 60,68 66,62" fill="#FFFFFF"/>

-  <!-- Icon: Claude-inspired rounded starburst -->
-  <g transform="translate(70, 100)">
-    <!-- Central circle with glow -->
-    <circle cx="0" cy="0" r="14" fill="#10b981" filter="url(#glowDark)"/>
-    <circle cx="0" cy="0" r="10" fill="url(#mintGrad)"/>
-
-    <!-- 12 rounded rays -->
-    <!-- Ray 1 (top, 0°) -->
-    <path d="M 0,-15 Q -5,-32 0,-48 Q 5,-32 0,-15" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
-
-    <!-- Ray 2 (30°) -->
-    <path d="M 13,-8 Q 18,-22 28,-35 Q 23,-20 13,-8" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 3 (60°) -->
-    <path d="M 22,7 Q 30,15 42,28 Q 28,18 22,7" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
-
-    <!-- Ray 4 (90°, right) -->
-    <path d="M 15,0 Q 32,-5 48,0 Q 32,5 15,0" fill="url(#emeraldGrad)" opacity="0.98"/>
-
-    <!-- Ray 5 (120°) -->
-    <path d="M 22,-7 Q 30,-15 42,-28 Q 28,-18 22,-7" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 6 (150°) -->
-    <path d="M 13,8 Q 18,22 28,35 Q 23,20 13,8" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
-
-    <!-- Ray 7 (180°, left) -->
-    <path d="M 0,15 Q -5,32 0,48 Q 5,32 0,15" fill="url(#emeraldGrad)" opacity="0.98"/>
-
-    <!-- Ray 8 (210°) -->
-    <path d="M -13,8 Q -18,22 -28,35 Q -23,20 -13,8" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 9 (240°) -->
-    <path d="M -22,-7 Q -30,-15 -42,-28 Q -28,-18 -22,-7" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
-
-    <!-- Ray 10 (270°, bottom-left) -->
-    <path d="M -15,0 Q -32,-5 -48,0 Q -32,5 -15,0" fill="url(#emeraldGrad)" opacity="0.98"/>
-
-    <!-- Ray 11 (300°) -->
-    <path d="M -22,7 Q -30,15 -42,28 Q -28,18 -22,7" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 12 (330°) -->
-    <path d="M -13,-8 Q -18,-22 -28,-35 Q -23,-20 -13,-8" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
-
-    <!-- Inner detail lines -->
-    <g opacity="0.8">
-      <rect x="-3.5" y="-3" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
-      <rect x="-3.5" y="-0.2" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
-      <rect x="-3.5" y="2.6" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
+    <!-- Center > bracket -->
+    <g transform="translate(60, 60)">
+      <polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
+
+    <!-- Center dot -->
+    <circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
  </g>

-  <!-- Text: "Claude" -->
-  <text x="160" y="98" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="58" font-weight="600" fill="url(#textDark)" letter-spacing="-1">
-    Claude
-  </text>
+  <!-- === WORDMARK === -->
+  <g transform="translate(140, 0)">
+    <!-- "Claude" -->
+    <text x="0" y="62" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="42" font-weight="700" fill="#FFFFFF" letter-spacing="-0.5">
+      Claude
+    </text>

-  <!-- Text: "How-To" -->
-  <text x="160" y="138" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="44" font-weight="400" fill="#6ee7b7" letter-spacing="0.5">
-    How-To
-  </text>
+    <!-- "How-To" -->
+    <text x="0" y="98" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="32" font-weight="500" fill="rgba(255,255,255,0.6)" letter-spacing="0">
+      How-To
+    </text>

-  <!-- Subtitle -->
-  <text x="520" y="75" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="12" fill="#6ee7b7" letter-spacing="0.5" font-weight="500" opacity="0.85">
-    VISUAL GUIDE TO CLAUDE CODE
-  </text>
+    <!-- Green accent line -->
+    <line x1="0" y1="105" x2="126" y2="105" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>

-  <!-- Accent line with glow -->
-  <line x1="160" y1="153" x2="400" y2="153" stroke="url(#emeraldGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
-
-  <!-- Three dots -->
-  <g fill="#6ee7b7" opacity="0.8">
-    <circle cx="420" cy="158" r="2.5"/>
-    <circle cx="435" cy="158" r="2.5"/>
-    <circle cx="450" cy="158" r="2.5"/>
+    <!-- Subtitle -->
+    <text x="195" y="55" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="rgba(255,255,255,0.5)" letter-spacing="1.5">
+      VISUAL GUIDE
+    </text>
+    <text x="195" y="68" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="rgba(255,255,255,0.5)" letter-spacing="1.5">
+      TO CLAUDE CODE
+    </text>
  </g>
 </svg>
@@ -1,106 +1,63 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <!-- Emerald gradient -->
-    <linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#10b981"/>
-      <stop offset="100%" style="stop-color:#059669"/>
-    </linearGradient>
-
-    <!-- Text gradient light -->
-    <linearGradient id="textLight" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#0d1f0d"/>
-      <stop offset="100%" style="stop-color:#047857"/>
-    </linearGradient>
-
-    <!-- Glow filter -->
-    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="2" result="blur"/>
-      <feFlood flood-color="#10b981" flood-opacity="0.3"/>
-      <feComposite in2="blur" operator="in"/>
-      <feMerge>
-        <feMergeNode/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
+<svg width="520" height="120" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Claude How-To Logo — Light background version -->

  <!-- White background -->
-  <rect width="800" height="200" fill="#ffffff"/>
+  <rect width="520" height="120" fill="#FFFFFF"/>

-  <!-- Icon: Claude-inspired rounded starburst with guide elements -->
-  <g transform="translate(70, 100)">
-    <!-- Central circle -->
-    <circle cx="0" cy="0" r="14" fill="#10b981" filter="url(#glow)"/>
-    <circle cx="0" cy="0" r="10" fill="#6ee7b7" opacity="0.9"/>
+  <!-- === MARK === -->
+  <g transform="translate(0, 0)">
+    <!-- Outer compass ring -->
+    <circle cx="60" cy="60" r="52" fill="none" stroke="#000000" stroke-width="3"/>

-    <!-- 12 rounded rays (inspired by Claude's organic design) -->
-    <!-- Ray 1 (top, 0°) -->
-    <path d="M 0,-15 Q -5,-32 0,-48 Q 5,-32 0,-15" fill="url(#emeraldGrad)" opacity="0.95"/>
+    <!-- Cardinal tick marks -->
+    <line x1="60" y1="8" x2="60" y2="18" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="60" y1="102" x2="60" y2="112" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+    <line x1="8" y1="60" x2="18" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>
+    <line x1="102" y1="60" x2="112" y2="60" stroke="#6B7280" stroke-width="2" stroke-linecap="round"/>

-    <!-- Ray 2 (30°) -->
-    <path d="M 13,-8 Q 18,-22 28,-35 Q 23,-20 13,-8" fill="url(#emeraldGrad)" opacity="0.92"/>
+    <!-- Intercardinal tick marks -->
+    <line x1="23.2" y1="23.2" x2="30.3" y2="30.3" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="30.3" x2="96.8" y2="23.2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="23.2" y1="96.8" x2="30.3" y2="89.7" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="89.7" y1="89.7" x2="96.8" y2="96.8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round"/>

-    <!-- Ray 3 (60°) -->
-    <path d="M 22,7 Q 30,15 42,28 Q 28,18 22,7" fill="url(#emeraldGrad)" opacity="0.95"/>
+    <!-- Compass needle — north (green = direction/guidance) -->
+    <polygon points="60,20 54,58 60,52 66,58" fill="#22C55E"/>

-    <!-- Ray 4 (90°, right) -->
-    <path d="M 15,0 Q 32,-5 48,0 Q 32,5 15,0" fill="url(#emeraldGrad)" opacity="0.94"/>
+    <!-- Compass needle — south (dark) -->
+    <polygon points="60,100 54,62 60,68 66,62" fill="#000000"/>

-    <!-- Ray 5 (120°) -->
-    <path d="M 22,-7 Q 30,-15 42,-28 Q 28,-18 22,-7" fill="url(#emeraldGrad)" opacity="0.92"/>
-
-    <!-- Ray 6 (150°) -->
-    <path d="M 13,8 Q 18,22 28,35 Q 23,20 13,8" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 7 (180°, left) -->
-    <path d="M 0,15 Q -5,32 0,48 Q 5,32 0,15" fill="url(#emeraldGrad)" opacity="0.94"/>
-
-    <!-- Ray 8 (210°) -->
-    <path d="M -13,8 Q -18,22 -28,35 Q -23,20 -13,8" fill="url(#emeraldGrad)" opacity="0.92"/>
-
-    <!-- Ray 9 (240°) -->
-    <path d="M -22,-7 Q -30,-15 -42,-28 Q -28,-18 -22,-7" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Ray 10 (270°, bottom-left) -->
-    <path d="M -15,0 Q -32,-5 -48,0 Q -32,5 -15,0" fill="url(#emeraldGrad)" opacity="0.94"/>
-
-    <!-- Ray 11 (300°) -->
-    <path d="M -22,7 Q -30,15 -42,28 Q -28,18 -22,7" fill="url(#emeraldGrad)" opacity="0.92"/>
-
-    <!-- Ray 12 (330°) -->
-    <path d="M -13,-8 Q -18,-22 -28,-35 Q -23,-20 -13,-8" fill="url(#emeraldGrad)" opacity="0.95"/>
-
-    <!-- Inner detail lines in core (representing guide/examples) -->
-    <g opacity="0.7">
-      <rect x="-3.5" y="-3" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
-      <rect x="-3.5" y="-0.2" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
-      <rect x="-3.5" y="2.6" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
+    <!-- Center > bracket (code/terminal prompt) -->
+    <g transform="translate(60, 60)">
+      <polyline points="-8,-10 4,0 -8,10" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
+
+    <!-- Center dot -->
+    <circle cx="60" cy="60" r="2.5" fill="#22C55E"/>
  </g>

-  <!-- Text: "Claude" -->
-  <text x="160" y="98" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="58" font-weight="600" fill="#0d1f0d" letter-spacing="-1">
-    Claude
-  </text>
+  <!-- === WORDMARK === -->
+  <g transform="translate(140, 0)">
+    <!-- "Claude" -->
+    <text x="0" y="62" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="42" font-weight="700" fill="#000000" letter-spacing="-0.5">
+      Claude
+    </text>

-  <!-- Text: "How-To" -->
-  <text x="160" y="138" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="44" font-weight="400" fill="#10b981" letter-spacing="0.5">
-    How-To
-  </text>
+    <!-- "How-To" -->
+    <text x="0" y="98" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="32" font-weight="500" fill="#6B7280" letter-spacing="0">
+      How-To
+    </text>

-  <!-- Subtitle -->
-  <text x="520" y="75" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="12" fill="#6b7280" letter-spacing="0.5" font-weight="500">
-    VISUAL GUIDE TO CLAUDE CODE
-  </text>
+    <!-- Green accent line -->
+    <line x1="0" y1="105" x2="126" y2="105" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>

-  <!-- Accent line -->
-  <line x1="160" y1="153" x2="400" y2="153" stroke="url(#emeraldGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
-
-  <!-- Three dots representing progression/examples -->
-  <g fill="#10b981" opacity="0.75">
-    <circle cx="420" cy="158" r="2.5"/>
-    <circle cx="435" cy="158" r="2.5"/>
-    <circle cx="450" cy="158" r="2.5"/>
+    <!-- Subtitle -->
+    <text x="195" y="55" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="#6B7280" letter-spacing="1.5">
+      VISUAL GUIDE
+    </text>
+    <text x="195" y="68" font-family="'Inter', 'SF Pro Display', '-apple-system', 'Segoe UI', sans-serif" font-size="10" font-weight="500" fill="#6B7280" letter-spacing="1.5">
+      TO CLAUDE CODE
+    </text>
  </g>
 </svg>