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

design: finalize logo and update Pastel to palette icon

Browse Source 
Logo Updates:
- Using authentic Lucide brush and wrench icons
- Wrench vertical, brush horizontal (90° rotation)
- Aligned bottom edges for visual balance
- Scaled up to 5x for better visibility
- Removed center dot for cleaner look

Pastel Icon:
- Changed from paintbrush to proper palette icon
- Palette with thumb hole and color dots
- Better represents color manipulation tool

Visual improvements:
- Clean, professional crossed tools design
- Proper alignment and spacing
- Large, visible icons at all sizes
- Consistent with Lucide icon library

🤖 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-09 16:08:28 +01:00
parent a37b0e5b08
commit 5d549ed32c
3 changed files with 19 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/icon.svg
View File

@@ -2,8 +2,8 @@
<!-- Background -->
<rect width="64" height="64" rx="12" fill="url(#bg)"/>
<!-- Wrench (Lucide) - rotated 45 degrees -->
<g transform="translate(32, 32) rotate(45) scale(1.8) translate(-12, -12)">
<!-- Wrench (Lucide) - vertical -->
<g transform="translate(32, 32) rotate(0) scale(2.4) translate(-12, -12)">
<path
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
stroke="url(#wrench)"
@@ -15,10 +15,10 @@
/>
</g>
<!-- Brush (Lucide) - rotated -45 degrees -->
<g transform="translate(32, 32) rotate(-45) scale(1.8) translate(-12, -12)">
<!-- Brush (Lucide) - horizontal flipped -->
<g transform="translate(32, 31) rotate(90) scale(2.4) translate(-12, -12)">
<path
d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"
d="m11 10l3 3m-7.5 8A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"
stroke="url(#brush)"
stroke-width="1.5"
stroke-linecap="round"
@@ -27,19 +27,16 @@
vector-effect="non-scaling-stroke"
/>
<path
d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"
d="M9.969 17.031L21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"
stroke="url(#brush)"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="url(#brushFill)"
fill="none"
vector-effect="non-scaling-stroke"
/>
</g>
<!-- Center circle -->
<circle cx="32" cy="32" r="3" fill="url(#center)"/>
<!-- Gradients -->
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
@@ -54,13 +51,5 @@
<stop offset="0%" stop-color="#f59e0b"/>
<stop offset="100%" stop-color="#ec4899"/>
</linearGradient>
<linearGradient id="brushFill" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#10b981" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#06b6d4" stop-opacity="0.3"/>
</linearGradient>
<linearGradient id="center" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#06b6d4"/>
</linearGradient>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

33
components/Logo.tsx
View File

@@ -15,9 +15,9 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
{/* Wrench (Lucide) - rotated 45 degrees, bottom-left to top-right */}
{/* Wrench (Lucide) - vertical */}
<motion.g
transform="translate(100, 100) rotate(45) translate(-12, -12)"
transform="translate(100, 100) rotate(0) scale(5) translate(-12, -12)"
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 1.2, ease: 'easeInOut' }}
@@ -33,15 +33,15 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
/>
</motion.g>
{/* Brush (Lucide) - rotated -45 degrees, top-left to bottom-right */}
{/* Brush (Lucide) - horizontal flipped */}
<motion.g
transform="translate(100, 100) rotate(-45) translate(-12, -12)"
transform="translate(100, 97) rotate(90) scale(5) translate(-12, -12)"
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
>
<motion.path
d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"
d="m11 10l3 3m-7.5 8A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"
stroke="url(#brushGradient)"
strokeWidth="1.5"
strokeLinecap="round"
@@ -50,27 +50,16 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
vectorEffect="non-scaling-stroke"
/>
<motion.path
d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"
d="M9.969 17.031L21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"
stroke="url(#brushGradient)"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="url(#brushFill)"
fill="none"
vectorEffect="non-scaling-stroke"
/>
</motion.g>
{/* Center circle */}
<motion.circle
cx="100"
cy="100"
r="8"
fill="url(#centerGradient)"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.5, delay: 0.8, type: 'spring', stiffness: 200 }}
/>
{/* Gradient definitions */}
<defs>
<linearGradient id="wrenchGradient" x1="0%" y1="0%" x2="100%" y2="100%">
@@ -81,14 +70,6 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
<stop offset="0%" stopColor="#f59e0b" />
<stop offset="100%" stopColor="#ec4899" />
</linearGradient>
<linearGradient id="brushFill" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#10b981" stopOpacity="0.3" />
<stop offset="100%" stopColor="#06b6d4" stopOpacity="0.3" />
</linearGradient>
<linearGradient id="centerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#a855f7" />
<stop offset="100%" stopColor="#06b6d4" />
</linearGradient>
</defs>
</motion.svg>
);

9
components/ToolsGrid.tsx
View File

@@ -26,10 +26,11 @@ const tools = [
badges: ['Open Source', 'WCAG', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" />
<circle cx="15" cy="8.5" r="1.5" fill="currentColor" />
<circle cx="8.5" cy="15" r="1.5" fill="currentColor" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
<circle cx="6.5" cy="11.5" r="1" fill="currentColor" />
<circle cx="9.5" cy="7.5" r="1" fill="currentColor" />
<circle cx="14.5" cy="7.5" r="1" fill="currentColor" />
<circle cx="17.5" cy="11.5" r="1" fill="currentColor" />
</svg>
),
},