Spring Refresh: Goodbye Winter Blues

Out With the Blues

When I first revived my site earlier this year, I went with a dark, techy aesthetic. Slate blues, icy whites, dot grids that glowed like a sci-fi HUD. It looked sharp, but it didn’t feel like me. Every time I opened the page I felt like I was staring into a server room, not a place where small business owners would feel welcome.

Spring hit and I decided: it’s time. Rip it all out. Start fresh with something that actually makes me smile when I look at it.

The New Palette

Gone are the #0d1520 dark backgrounds and #4a7c9b blue accents. In their place:

• Cream (#FDF6EE) — warm, inviting backgrounds that feel like sunlit paper
• Sage green (#5B8C5A) — buttons, links, and accents that say “growth” without screaming it
• Floral pink (#D4899B) — highlights, decorative petals, and my name in the hero section
• Warm amber (#C4943A) — a tertiary accent for the premium GEO Pro tier

The whole thing feels like a garden now instead of a command center.

Courier Prime Everything

I swapped out Space Grotesk and Inter for Courier Prime across the entire site. Every heading, every paragraph, every button — monospace. It gives the whole site this old-school typewriter quality that I genuinely love. It’s opinionated and it’s mine.

The hero even has a typewriter effect now. The name types out character by character when you load the page, with a blinking cursor that fades away when it’s done. It fits the Courier aesthetic perfectly.

Petals and Stems

Two of my favorite additions:

Falling petals. There’s a layer of tiny flower petals that drift down the page constantly — different colors, different shapes, different speeds. They sway back and forth as they fall and fade out at the bottom. It’s pure CSS animation driven by a small script that spawns them at random intervals. They don’t interfere with clicking anything because the whole container is pointer-events: none. And they disappear entirely if you have prefers-reduced-motion turned on.

The StemRule. Every section used to have this line-and-dot divider. I extracted it into a reusable <StemRule /> component and redesigned it as a green stem that grows from left to right, ending in a pink teardrop petal that blooms into place. It’s used in eleven different places across the site now and it ties the whole botanical theme together.

Scroll-Driven Parallax

I added animation-timeline: scroll() to the background elements in every section. The dot grids and radial glows drift at different speeds as you scroll, creating subtle depth without any JavaScript. It’s wrapped in @supports so browsers that don’t support it just see static backgrounds. No harm done.

Other Neat Functional Additions

Two things that aren’t just visual: every blog and challenge post now has a comments section at the bottom themed to match the springtime palette, and there’s a real tagging system with a sticky tag column on each index page that auto-aggregates from post frontmatter and lets you filter by clicking.

What Helped Me Ship

This redesign touched every single component and page on the site. What made it possible to do in a single sitting was leaning on a few AI design skills:

UI/UX Pro Max gave me solid default guidelines — color theory, spacing scales, typography best practices. It’s a good foundation layer.

Claude Code’s Frontend Design from Claude added another layer of design expertise on top of that. It pushed me away from generic AI aesthetics (no more purple-to-blue gradients, no more glassmorphism everywhere) and toward something more intentional.

Impeccable was the real game-changer though. It’s a collection of 20+ design skills that each focus on one specific thing. The ones I used most:

• /colorize helped me think strategically about where to add the amber tertiary color and how to color-code the FAQ groups and blog tags
• /animate audited my existing animations, identified the jarring FAQ instant-toggle as the biggest pain point, and added smooth grid-template-rows expand/collapse plus staggered scroll reveals
• /overdrive pushed the site past conventional limits — the typewriter hero effect and CSS scroll-driven parallax came out of that
• /bolder took the safe, medium-sized design and amplified the hierarchy — the hero name went from large to massive, the portfolio ghost numbers doubled in size, the featured service card now scales up and glows

The combination of these skills let me focus on creative direction while the implementation details got handled systematically. I wasn’t debugging CSS — I was making design decisions.

The Question

I’m curious what frontend skills other folks are using. There’s a growing ecosystem of these things — Stitch skills, design system generators, component builders. If you’ve found something that changed how you ship frontend work, I’d love to hear about it.

The comments are open below.