Now that I get my backend API services in place, it's time to design a frontend! Just describe the mood to AI, right? I did, and it looked... fine. But it didn't feel right. It didn't match the soul of why I was building it.

So, instead of looking at font pairing blogs for three hours, I sat down and told Gemini the personal story and frustration behind the app.

Outdated Garden Styles

I explained that as a busy professional, I felt completely alienated by the gardening world. Every time I looked up gardening advice on YouTube or blogs to fix up my yard, I was met with slow acoustic country music, rambling lectures full of jargons, and an aesthetic that felt like a grandmother giving advice.

It felt old fashioned, inefficient, and totally out of touch with how my peers and I live. For example:

❌ Old fashion garden style

We don't want a chaotic cottagecore wildflower patch that takes six hours a week to prune. Our design references are the sleek tech offices we work in, the boutique hotels we visit, or the trendy cafes with clean gravel, square lawns, structural plants, and warm outdoor lighting. We just want a beautiful, low-maintenance outdoor lounge where we can turn on some music, host a weekend barbecue, and have drinks with friends on a summer evening.

✔ Modern outdoor courtyard

I told Gemini: “I built a tool that takes a messy yard and instantly visualizes that clean, hotel-grade hosting space. Help me pick a font system that talks to these busy professionals, not their grandmothers.”

10 Seconds to the Right Font...!

Main title font "Fraunces"

Subtitle and body text "Inter"

Tailwind Changes

1. Load Fraunces from Fontshare in global.css

@import url("https://api.fontshare.com/v2/css?f[]=fraunces@500,600,700&display=swap");

1. Register a Tailwind font family in global.css

  --font-inter: var(--font-inter-family), ui-sans-serif, system-ui, sans-serif;
  --font-fraunces: "Fraunces", ui-serif, Georgia, serif

1. Apply it on the page title (page.tsx)

            <h1 className="font-fraunces text-5xl leading-[0.95] font-semibold tracking-tight text-[#1f321d] sm:text-6xl">
              GardenViz
            </h1>
            <p className="font-inter mt-2 text-lg font-medium tracking-tight text-[#3a4f35] sm:text-xl">
              Garden Design Visualizer for Busy Homeowners
            </p>

The result

I think it looks quite good! :)

AI as a Collaborator

By treating the AI as a creative collaborator and feeding it the context of a real human frustration rather than just a technical prompt, I got a design system that feels incredibly intentional.