Session 7 · 2 hours · Part 2 of 2

Polish Your Website

Tonight you become the editor.

By the end of tonight

Real brand colors and typography — no more defaults
Mobile layout that works on your actual phone
Real photos in the right places
Copy tuned to each persona
A site you'd actually link to from an ad

Drafts are fast.
Polish is where it lives.

Most of your Claude Code time, forever, looks like tonight. That's not a bug — it's where the skill is. And the skill is taste, not code.

You drive. Claude writes.

Last week was the wow moment. Tonight you stop being amazed at the website and start owning it.

Colors. Fonts. Copy. Photos. All your call. Ryan just nudges.

First — brand colors

Pick a palette.

Earthy

Deep blue

Black + gold

Forest

Four directions. Or describe your own. Then we tell Claude.

Demo · applying a palette

Paste this — fill in your hexes

I want my whole site to use this color palette:

- Primary background: [DARK HEX]
- Secondary background (cards, callouts): [SLIGHTLY LIGHTER HEX]
- Primary text: [LIGHT HEX]
- Muted text: [MEDIUM GREY HEX]
- Accent color (CTAs, links, highlights): [BRAND ACCENT HEX]
- Accent hover: [SLIGHTLY DIFFERENT HEX]

Apply the new palette to styles.css and every page. Don't change layout or typography — just colors. Make sure every link, button, and headline uses the right colors and stays readable.

Refresh. Walk every page. If the accent's too loud: "The accent is too saturated — soften it. The bundle page callout should pop more."

Now — typography

Two fonts. Don't overthink it.

Fraunces + Inter

Serif headline, clean body. Has character.

Bricolage Grotesque + Inter

Modern grotesque, warm. Less stiff than Helvetica.

DM Serif Display + Inter

High-contrast serif. Reads premium.

Paste this — fill in your two fonts

Switch the site's fonts to Google Fonts:

- Headlines: [PICK]
- Body: [PICK]

Load the fonts from Google Fonts. Apply them in styles.css. Headlines should feel a little tighter than the default. Body should be ~17px on desktop, comfortable reading.

Mobile pass

Pull up the site on your phone.

Nav fits / hamburger menu on small screens
Hero under 70% of screen height
Form inputs ≥ 16px (no auto-zoom)
Buttons big enough to tap (44×44 minimum)
No horizontal scrolling

Paste this — add your own broken items

Mobile fixes:
1. On phones, collapse the nav into a hamburger menu (3-line icon top-right). Tap to open.
2. Phone number in the nav should still show on phone, smaller font, right side.
3. Hero on phone should be max ~60% of screen height — don't take the whole screen.
4. Form inputs on phone should be at least 16px font (no auto-zoom).
5. [your other items]

Refresh on your phone after each change.

Real photos

Phone photos beat stock photos.

Use:

Finished roof at sunset
You + your truck on a real job
Crew working
House with new roof + panels visible

Avoid:

Stock "blue sky over panels"
Anything from a competitor's site
Random "successful business person" stock

Demo · dropping in real photos

Paste this — fill in your filenames

There's a new photos/ folder in this project. Use the images in there:

- Hero image on index.html — replace the placeholder gray block with [filename]
- About page "the crew" section — use [filename]
- Bundle page visual — [filename]
- Roofing page section divider — [filename]
- Solar page — [filename]

Make sure images are responsive (max-width 100%). Use relative file paths so it works when we deploy.

First: drop 4–6 phone photos into Desktop\website\photos\.

The part that beats your competitors

Persona-tuned copy.

Every competitor talks to "homeowners." Your site talks to the specific person on the page.

Match pages to personas

Home

Bundle persona (your sweet spot), hooks for the others

Roofing

Storm-damage + planned-replacement personas

Solar

Solar-curious — skeptical, ROI-driven

Bundle

Bundle persona. The math + "one crew, one window."

About

Trust play for everyone, esp. storm-damage anxiety

Contact

Low-friction. Leave mostly alone if it works.

Demo · rewriting the bundle page

Paste this — start with the bundle page

Here's my "Roof + Solar Bundle" persona:

[PASTE BUNDLE PERSONA]

Rewrite bundle.html's copy so it reads like it was written for THIS person specifically. Their state of mind, their concerns, their decision-making style. Don't change the page structure — just the copy. Keep it the same length or shorter.

Specifically:
- The headline should hook *them*
- The "math" section should answer their specific money question
- The "who this is for" section should describe them
- The CTA should remove their specific objection

Refresh. Read together. Iterate once. Then repeat for: roofing (storm-damage + planned-replacement) · solar (solar-curious, ROI-driven) · home (bundle persona + hooks for the rest) · about (trust play) · contact (low-friction — leave it if it works).

Final polish round

Read every page out loud.

List what still feels off. Paste all the fixes as one prompt. One iteration. Done.

You're not amazed at the website anymore.
You own it.

That shift — from "wow, Claude made this" to "I made this with Claude" — is the whole game.

Three things tonight

1. Polish is the skill

Drafts are fast. Iteration is where the work — and the value — lives.

2. Show, don't tell

Screenshot anything you can't describe. Paste it. Fix it.

3. Persona-tuned wins

Every competitor writes generic copy. Yours doesn't.

Before next week

Show it to someone new.

Not anyone you've already shown. Watch them use it. Note what they click first. Decide: custom domain (~$10/year) or default .pages.dev URL?

Next session — graduation

Session 8 — Live URL + Capstone.

We put it on the internet. Wire the contact form to actually email you when someone submits. Walk through everything you've built. Map the AI landscape. You leave a builder.

Bring: your laptop. Your phone. Your domain decision.