Design & Assets
Design tools, color helpers, icons and placeholder assets.
Everything I need between "idea" and "themed component": where I design, how I pick color, and the icons and placeholder assets I drop in while building.
Overview
I design before I build — usually in Figma, sometimes straight in Excalidraw when I'm just sketching architecture. Color is where I'm most deliberate: I preview a palette on a real UI before committing it to tokens. For assets, I keep a small set of reliable sources so I'm never blocked hunting for an icon or a placeholder image.
Tools
Figma
Where I design and explore before building, and the source of my design tokens.
tweakcn
Visual theme editor for shadcn/Tailwind — tweak CSS variables live and export a theme.
Excalidraw
Hand-drawn wireframes and architecture sketches when I just need to think on a canvas.
Realtime Colors
Preview a palette on a real UI before committing — catches contrast problems early.
Lucide
My default icon set — the one this very site uses.
svgl
Brand and app SVG logos, ready to drop in.
Tech Stack Icons
Tech and framework logos as clean SVGs for stack sections.
Lorem Picsum
Placeholder images by URL while I'm building out layouts.
My pick
Figma for design, Lucide for icons — no contest, they're baked into how I work and into this project. For color, I lean on Realtime Colors to sanity-check a palette in context, then tweakcn to turn it into shadcn CSS variables I can paste into my token layer (see Color Guidance).