🍋 Drizzlelemons

Why We Redesigned Drizzlelemons: A Warmer, Flatter, Faster Experience

April 2026

If you have visited Drizzlelemons recently, you might have noticed things look a little different. We just shipped a full visual redesign across the entire app — and we are pretty happy with how it turned out.

This post walks through what changed, why we changed it, and the design thinking behind the decisions. If you are building your own product and thinking about a visual refresh, hopefully there is something useful here.

What Was Wrong With the Old Design?

Nothing was broken, exactly. But the old light mode had a few things that felt dated:

  • A pink-to-purple gradient blob floated behind the entire page. It was a popular design trend a couple of years ago, but it added visual noise without adding meaning.
  • Pure white backgrounds with cool grey accents felt sterile. There was no warmth or personality to the palette.
  • Gradient buttons everywhere. The "Top Up" button, pricing CTAs, and referral page all used yellow-to-orange gradients with heavy shadows. It looked busy.
  • The hero was cluttered. It had a two-column layout with app screenshots, animated badges, feature descriptions, and multiple staggered fade-in animations. The input field — the single most important element — had to compete for attention.

None of these were terrible on their own. But together, they added up to a design that felt like it was trying too hard. We wanted something that felt more confident.

The Inspiration

Two sites caught our eye as references for the direction we wanted to go: Revnu and Sparkles. Both share a design language we admired:

  • Warm, off-white or cream backgrounds instead of pure white
  • Flat design with borders instead of heavy shadows
  • Confident, minimal layouts that let the content breathe
  • Typography doing the heavy lifting, not gradients or effects

The common thread? Restraint. Both sites look premium because they say less, not more.

What Changed: Light Mode

The light mode got the biggest overhaul. Here is the breakdown:

Colour palette

We shifted the entire palette from cool neutrals to warm sand and cream tones. The background moved from pure white to a soft warm cream. Cards now sit on a slightly warmer white, giving them gentle separation from the page. Borders, inputs, and muted text all picked up the same warm undertone.

The primary yellow (our lemon brand colour) stayed, but we softened it slightly so it sits more naturally against the warmer background. The border radius also got a bump from 0.3rem to 0.5rem for softer corners throughout.

Goodbye, gradient blob

The floating pink-to-purple gradient blob that lived behind the layout is gone. It was purely decorative and added a wash of colour that competed with actual content. Removing it immediately made the whole app feel cleaner and more intentional.

Flat buttons and cards

Every gradient button has been replaced with a flat, solid-colour primary button. Cards across the upgrade, referral, and pricing pages swapped heavy box shadows for simple borders. The result is a quieter, more cohesive interface that lets the content come forward.

What Changed: Dark Mode

Dark mode got the same treatment. The old dark palette used cold greys with no warmth, and many components had hardcoded colour overrides that bypassed our design tokens entirely.

We rewrote the dark mode palette to use warm dark browns instead of cold greys. Cards now have a visible distinction from the background (previously they were the same colour). And we replaced every hardcoded dark:bg-gray-800 and dark:text-white class with semantic design tokens — meaning both modes are now controlled from a single set of CSS variables. Consistent, maintainable, and warm in both directions.

The New Hero: Less Is More

The hero page got the most dramatic change. The old version had:

  • A two-column layout with stacked app screenshots
  • A long description paragraph
  • Animated feature bullet points that faded in one by one
  • Product Hunt and Uneed badges
  • A loading spinner on the convert button during hydration

The new hero is a single centred column. A bold headline, a one-line subline, an input field, a button, and three tiny feature hints underneath. That is it.

We think of it as "Google homepage confidence" — the input field is clearly the star. Everything else is a whisper, not a shout. You land on the page, you know exactly what to do, and there is nothing fighting for your attention.

The details that matter

  • The headline went from a small, muted subtitle to a bold 2xl/3xl heading. "Paste a recipe URL. Get just the recipe." — direct, confident, no wasted words.
  • The subline adds the value prop in one breath: "Skip the ads, popups, and life stories."
  • The input field has a stronger border (previously it was almost invisible against the background) and a subtle card-coloured fill that makes it pop without being aggressive.
  • Feature hints sit below the button as tiny, muted-text items: "Scale servings | Convert units | Any recipe site." Scannable, shows depth, takes up almost no space.
  • No loading flash. The old Suspense fallback showed a disabled button with a spinning lemon icon during hydration. The new fallback looks identical to the ready state — static input and button — so there is no perceptible loading state on page load.

Design Principles We Followed

A few principles guided the redesign. We think they are worth sharing for anyone considering a similar refresh:

  1. Warmth over sterility. Cold whites and greys are technically neutral, but they feel clinical. A small amount of warmth (cream backgrounds, sandy borders) makes the whole experience feel more inviting without sacrificing professionalism.
  2. Borders over shadows. Shadows imply depth and layering. Borders imply structure and clarity. For a utility-focused tool like Drizzlelemons, we want clarity.
  3. Design tokens over hardcoded colours. If you are using a component library with dark mode, invest the time to wire everything through CSS variables. Hardcoded dark: overrides are a maintenance nightmare and they drift from your intended palette over time.
  4. The action is the hero. On a tool like ours, the input field is the product. Everything on the landing page should support it, not compete with it.
  5. Fast perceived load. A loading skeleton that looks different from the final state draws attention to itself. A loading skeleton that looks identical to the final state is invisible. We chose invisible.

What is Next

This redesign covered the landing page, hero, header, footer, pricing, upgrade, and referral pages. The recipe view and recipes list already use design tokens heavily, so they picked up the new palette automatically. There are a few more corners of the app we want to polish — the blog page styling, some of the alternative comparison pages — but the foundation is now solid.

If you have not tried the new look yet, head to drizzlelemons.com and paste a recipe URL. It should feel faster, warmer, and a lot more focused than before.