github-code/claude-howto
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design: Redesign logo to compass-bracket mark with minimal palette

Browse Source 
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.
This commit is contained in:
Luong NGUYEN
2026-02-17 18:27:38 +01:00
parent 3cc098505c
commit 20779dbf79
19 changed files with 713 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/QUICK-START.md
View File

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