Claude How To - Design System

Visual Identity

Icon Design Concept: Compass with Code Bracket

The Claude How To icon uses a compass with a > code bracket to represent guided navigation through code:

     N (green)
     ▲
     │
W ───>─── E     Compass = Guidance/Direction
     │          > Bracket = Code/Terminal/CLI
     ▼
     S (black)

This creates:

• 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 developer tool aesthetic with minimal palette

---

Color System

Palette

Color	Hex	RGB	Usage
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)

• 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

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: 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

---

Icon Details

Compass Specifications

The compass mark is built from these geometric elements:

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)

Size Progression

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

Logo Sizing

• Minimum: 200px width (for web)
• Recommended: 520px (native size)
• Maximum: Unlimited (vector format)
• Aspect Ratio: ~4.3:1 (width:height)

Icon Sizing

• Minimum: 16px (favicon)
• Recommended: 64-256px (apps, avatars)
• Maximum: Unlimited (vector format)
• Aspect Ratio: 1:1 (square)

---

Spacing & Alignment

Logo Spacing

┌─────────────────────────────────────┐
│                                     │
│        Clear Space Minimum          │
│         (logo height / 2)           │
│                                     │
│    [COMPASS]  Claude                │
│               How-To                │
│                                     │
└─────────────────────────────────────┘

Icon Center Point

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

---

Accessibility

Color Contrast

• All text meets WCAG AA (4.5:1 minimum)
• Green accent is decorative, not informational
• No red-green color dependency

Scalability

• Vector format ensures clarity at any size
• Geometric shapes remain recognizable at 16px
• Progressive detail based on available size

---

Application Examples

Web Header

• Size: 520×120px logo
• File: logos/claude-howto-logo.svg
• Background: White or dark (#0A0A0A)
• Padding: 20px minimum

App Icon

• Size: 256×256px
• File: icons/claude-howto-icon.svg
• 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

Social Media

• Profile: 256×256px icon
• Banner: 520×120px logo (centered)

Documentation

• Chapter Headers: Logo scaled to fit
• Section Icons: 64×64px favicon
• Inline: 32×32px favicon

---

File Format Details

SVG Structure

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

---

Customization

Changing the Accent Color

To create variants with a different accent:

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

svg {
  width: 256px;
  height: 256px;
}

SVGs scale automatically via viewBox — no transforms needed.

---

Version Control

Track design changes in git:

• Version SVG files normally (they're text)
• Tag releases with design changes
• Include DESIGN-SYSTEM.md in commits

---

Last Updated: February 2026 Design System Version: 3.0