Module 4

Customizing the Design

~10 min listen · Written guide below

Your homepage exists. It looks decent. Now we're going to make it look yours. This module is all about telling Claude Code exactly what to change — colors, fonts, images, layout — until the site matches your vision.

Colors

Colors set the whole mood of your site. You can be specific with hex codes:

Change the primary color to navy blue (#1B2A4A) and the accent color to coral (#FF6B6B). Keep the background white and use dark gray (#333) for body text.

Or just describe the vibe:

Make the color scheme feel like a luxury hotel — dark, elegant, with gold accents.

Claude understands vibes. Use that.

Tip: Stick to 3–4 colors max. A primary color, an accent color, a background color, and a text color. More than that and things start looking messy.

Fonts

Fonts make a bigger difference than most people think. A site with great fonts looks professional. A site with default fonts looks like a school project.

Use the font Playfair Display for all headings and Inter for body text. Import them from Google Fonts.

Some font combinations that work well:

Don't know what to pick? Just tell Claude to choose something that fits the vibe. It'll pick something good.

Images

Real photos of your business, your products, your team — they make all the difference.

First, create an images folder:

mkdir images

Drag your photos into that folder, then tell Claude:

Use images/hero.jpg as the background image for the hero section. Make it cover the full section with a dark overlay so the white text is readable on top of it.

Tip on image sizes: Hero images should be around 1920px wide, under 500KB. Product images around 800px wide, under 200KB. Use squoosh.app to resize for free.

If you don't have photos yet, use placeholders:

Use placeholder images from picsum.photos for now. Use a food-related Unsplash image for the hero section.

Layout Changes

Layout is how things are arranged on the page. You don't need technical terms:

Make the services section a 3-column grid instead of a single-column list.
Put the about section text on the left and the image on the right, side by side. On mobile, stack them vertically.

Describe how you want things arranged. Claude handles the how.

Spacing and Sizing

These small tweaks make a big difference in how polished your site feels:

Add more padding to each section — at least 80px top and bottom. The content feels too cramped right now.
Make the main headline bigger — around 56px on desktop, 36px on mobile.

Tip: When in doubt, add more white space. Generous spacing between sections makes a site look more professional.

Mobile Responsiveness

More than half of web traffic is mobile now. Your site needs to look good on phones.

Make sure the navigation collapses to a hamburger menu on mobile screens.
On mobile, the 3-column grid should become a single column.

How to check mobile: Right-click the page, click "Inspect," and toggle the device toolbar (the phone/tablet icon) to simulate different screen sizes.

Dark Mode (Bonus)

One prompt and you've got a dark mode toggle:

Add a dark mode toggle button in the top-right corner of the navigation. When clicked, switch to a dark background with light text. Remember the user's preference using localStorage.

Common Design Prompts Cheat Sheet

Copy and modify these for your own site:

Make the hero section full-screen height with a background image, dark overlay, and centered white text.
Style all buttons with rounded corners, a solid background color, white text, and a subtle hover effect.
Add a subtle box shadow to all cards and a slight lift effect on hover.
Make the navigation bar sticky so it stays at the top when scrolling.
Add smooth scrolling when clicking navigation links.
Add subtle fade-in animations as sections come into view when scrolling.
Create a simple SVG favicon using the first letter of the business name.

When to Stop Tweaking

Here's something I wish someone told me earlier: good enough is good enough.

If a regular person would look at your site and say "that looks professional," you're done. Get it to 90%. Ship it. You can always come back and tweak later — that's the beauty of this setup. It takes 30 seconds to make a change and push it live.

Now let's add more pages to your site.