valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: simplify logo to suitcase with single brush

Browse Source 
Logo Redesign:
- Simplified from toolbox with 3 tools to clean suitcase with 1 brush
- Purple gradient suitcase with handle and latch detail
- Single colorful brush inside (orange-to-red handle, green-to-cyan bristles)
- Smoother animations with reduced complexity
- Better visual clarity and brand identity

Favicon Update:
- Matching simplified design scaled for 64x64
- Clear icon that works at small sizes
- Consistent with main logo design

Visual Elements:
- Suitcase: Purple (#a855f7) to Indigo (#6366f1) gradient
- Brush handle: Orange (#f59e0b) to Red (#ef4444) gradient
- Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient
- Animated entrance with subtle scale and fade

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-08 19:20:39 +01:00
parent 543338aef2
commit f843ad9923
2 changed files with 88 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/icon.svg
View File

@@ -1,17 +1,38 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="12" fill="url(#gradient)"/>
<path d="M20 28 L20 42 L34 42 L34 28 Z" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 28 Q 27 18, 30 28" stroke="white" stroke-width="3" fill="none" stroke-linecap="round"/>
<line x1="22" y1="34" x2="22" y2="39" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="22" cy="32" r="1.5" fill="white"/>
<line x1="27" y1="34" x2="27" y2="40" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
<path d="M24 34 L 27 32 L 30 34" fill="white" stroke="none"/>
<rect x="31" y="34" width="2" height="6" fill="white" rx="1"/>
<path d="M29 34 L 33 32 L 35 34" fill="white" stroke="none"/>
<!-- Background -->
<rect width="64" height="64" rx="12" fill="url(#bg)"/>
<!-- Suitcase body -->
<rect x="16" y="27" width="32" height="22" rx="2" stroke="url(#suitcase)" stroke-width="2" fill="rgba(139, 92, 246, 0.2)"/>
<!-- Suitcase handle -->
<path d="M 27 27 Q 32 19, 37 27" stroke="url(#suitcase)" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- Suitcase latch -->
<rect x="30" y="26" width="4" height="3" rx="1" fill="url(#suitcase)"/>
<!-- Brush handle -->
<rect x="31" y="32" width="2" height="11" fill="url(#brushHandle)" rx="1"/>
<!-- Brush bristles -->
<path d="M 28 43 L 29 47 L 30 46 L 31 48 L 32 46 L 33 48 L 34 46 L 35 47 L 36 43 Z" fill="url(#brushBristles)"/>
<!-- Gradients -->
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="64" y2="64">
<stop offset="0%" stop-color="#667eea"/>
<stop offset="50%" stop-color="#8b5cf6"/>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1a1a2e"/>
<stop offset="100%" stop-color="#0f0f1a"/>
</linearGradient>
<linearGradient id="suitcase" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#6366f1"/>
</linearGradient>
<linearGradient id="brushHandle" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#f59e0b"/>
<stop offset="100%" stop-color="#ef4444"/>
</linearGradient>
<linearGradient id="brushBristles" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#10b981"/>
<stop offset="100%" stop-color="#06b6d4"/>
</linearGradient>
</defs>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

123
components/Logo.tsx
View File

@@ -11,107 +11,92 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
initial={{ opacity: 0, scale: 0.5, rotate: -180 }}
animate={{ opacity: 1, scale: 1, rotate: 0 }}
transition={{ duration: 1, ease: 'easeOut' }}
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, ease: 'easeOut' }}
>
{/* Toolbox base */}
{/* Suitcase body */}
<motion.rect
x="40"
y="80"
width="120"
height="80"
rx="8"
x="50"
y="85"
width="100"
height="70"
rx="6"
stroke="url(#gradient1)"
strokeWidth="4"
fill="rgba(139, 92, 246, 0.1)"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 1.5, ease: 'easeInOut' }}
strokeWidth="5"
fill="rgba(139, 92, 246, 0.15)"
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 1.2, ease: 'easeInOut' }}
/>
{/* Toolbox handle */}
{/* Suitcase handle */}
<motion.path
d="M 80 80 Q 100 40, 120 80"
d="M 85 85 Q 100 60, 115 85"
stroke="url(#gradient1)"
strokeWidth="4"
strokeWidth="5"
fill="none"
strokeLinecap="round"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 1, delay: 0.2, ease: 'easeInOut' }}
/>
{/* Wrench */}
<motion.g
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.8 }}
>
<path
d="M 70 110 L 70 130"
stroke="url(#gradient2)"
strokeWidth="5"
strokeLinecap="round"
{/* Suitcase latch */}
<motion.rect
x="95"
y="82"
width="10"
height="8"
rx="2"
fill="url(#gradient1)"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.8 }}
/>
<circle cx="70" cy="105" r="6" fill="url(#gradient2)" />
</motion.g>
{/* Pencil */}
{/* Brush handle */}
<motion.g
initial={{ opacity: 0, y: -20 }}
initial={{ opacity: 0, y: -15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1 }}
>
<path
d="M 100 110 L 100 135"
stroke="url(#gradient3)"
strokeWidth="5"
strokeLinecap="round"
/>
<path
d="M 95 110 L 100 105 L 105 110"
fill="url(#gradient3)"
/>
</motion.g>
{/* Brush */}
<motion.g
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1.2 }}
transition={{ duration: 0.8, delay: 1, ease: 'easeOut' }}
>
<rect
x="127"
y="110"
x="97"
y="100"
width="6"
height="20"
fill="url(#gradient4)"
rx="1"
height="35"
fill="url(#brushHandle)"
rx="3"
/>
</motion.g>
{/* Brush bristles */}
<motion.g
initial={{ opacity: 0, scaleY: 0.5 }}
animate={{ opacity: 1, scaleY: 1 }}
transition={{ duration: 0.6, delay: 1.3, ease: 'easeOut' }}
style={{ transformOrigin: '100px 135px' }}
>
<path
d="M 125 110 L 130 105 L 135 110"
fill="url(#gradient4)"
d="M 88 135 L 90 145 L 92 143 L 94 146 L 96 144 L 98 147 L 100 145 L 102 147 L 104 144 L 106 146 L 108 143 L 110 145 L 112 135 Z"
fill="url(#brushBristles)"
/>
</motion.g>
{/* Gradient definitions */}
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#8b5cf6" />
<stop offset="0%" stopColor="#a855f7" />
<stop offset="100%" stopColor="#6366f1" />
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#2dd4bf" />
<stop offset="100%" stopColor="#06b6d4" />
</linearGradient>
<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
<linearGradient id="brushHandle" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#f59e0b" />
<stop offset="100%" stopColor="#ef4444" />
</linearGradient>
<linearGradient id="gradient4" x1="0%" y1="0%" x2="100%" y2="100%">
<linearGradient id="brushBristles" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#10b981" />
<stop offset="100%" stopColor="#14b8a6" />
<stop offset="100%" stopColor="#06b6d4" />
</linearGradient>
</defs>
</motion.svg>