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

74
resources/favicons/favicon-128.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

43
resources/favicons/favicon-16.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 567 B

86
resources/favicons/favicon-256.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

51
resources/favicons/favicon-32.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

66
resources/favicons/favicon-64.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB