Making it look good (and fixing what doesn't)

A working site is not a finished design. Once the pages and navigation worked, I started refining how the content was read.

On this site, the first structure took a few days. I spent the next couple of weeks refining color, type, spacing, and the details that made it feel like mine.

Check Your Design Rules First

Before making changes, remind yourself what you already decided. You created .claude/rules/css.md in the previous chapter. Open it. Those are your standards.

When you want to change something, ask yourself: does this fit the rules, or am I starting fresh?

If you're refining within your existing design system, tell Claude:

Following our design rules in .claude/rules/css.md, make the 
heading text bolder and add more space between sections.

If you're deliberately changing the rules, update the rules file too:

Change the accent color from #ff6b35 to #38bdf8 on all pages.
Then update .claude/rules/css.md to reflect this change.

This keeps your design consistent as you refine.

Colors

Choose exact colors before making more page-level changes, so Claude applies the same system everywhere.

Tell Claude what you're going for:

Update the color scheme across all pages:
- Background: #0f172a (very dark blue)
- Main text: #e2e8f0 (light gray)
- Headings: #ffffff (white)
- Accent/links: #38bdf8 (sky blue)
- Muted text: #94a3b8 (medium gray)

Update .claude/rules/css.md with these colors.

Specific hex codes (those # numbers) give you exact control. If you don't know hex codes, describe the colors and let Claude pick:

I want a dark theme. Navy blue background, not black. Warm white
text, not harsh white. Accent color should be a calm blue.

Claude will choose appropriate hex codes. If they're not quite right, adjust: "The accent blue is too bright, make it softer."

Typography

For a first site, I would choose either one hosted font or the system font stack:

Option 1: Use Google Fonts (free)

Use the Inter font for everything. Load it from Google Fonts.
Headings should be bold, body text regular weight.

Option 2: Use system fonts (no loading required)

Use the system font stack for everything. That means the site uses
whatever font the visitor's computer has. Fast and clean.

Either works. Google Fonts gives you more control over the exact look. System fonts require no font download and use the type already available on the visitor's device.

Specific typography instructions that make a difference:

Update the typography:
- Headings: uppercase, bold, slightly wider letter spacing
- Body text: 18px size, 1.7 line height (space between lines)
- Navigation links: small, uppercase, medium weight

Spacing

When a page feels cramped, I check the spacing before changing the layout. It is often the smaller fix.

Common spacing fixes:

Add more space between sections. Right now they feel too close together.
Each section should have at least 80px of space above and below it.

The navigation feels crowded. Add more space between the links
and more padding around the entire nav bar.

The text in the about section is too close to the edges.
Add more padding on the left and right, especially on mobile.

If spacing does not help, check the hierarchy and copy before rebuilding the layout.

Real Content Polish

Now that the design is taking shape, look at your actual content:

• Is the text too long? Read each page as a visitor looking for one answer. Shorten the parts that delay it, and use bullets only when the content is a real list.
• Is the text too short? A three-word "About" section looks incomplete. Add enough to give visitors a real sense of who you are.
• Does the tone match the design? A playful design with corporate text (or vice versa) feels off.

You can ask Claude to help:

The about page text is too formal. Rewrite it to sound more
conversational and approachable while keeping the same information.

But don't outsource everything. The content that sounds like you is the content you write (or at least heavily edit).

Details That Matter

After the hierarchy, type, color, and spacing work, check the interaction details:

Add hover states to links and buttons:

When I hover over navigation links, they should change to the accent
color with a smooth transition. Same for buttons.

Mark the current page in the navigation:

In the navigation, the link for the current page should look different.
Maybe underlined or in the accent color, so visitors know where they are.

If the site needs contact, legal, or secondary links on every page, put them in a consistent footer:

Add a simple footer at the bottom of every page with my name,
the year, and links to my social profiles.

A favicon is the small icon in the browser tab:

Create a simple favicon. Just my initials in the accent color
on a dark background. Save it as favicon.ico in the root folder.

When to Stop

Stopping is harder than starting. My rule is simple: ship when I would not be embarrassed to share the link.

It does not need to be perfect. It needs to be good enough that I would send the URL without explaining what is still unfinished.

Signs you should stop tweaking and move on:

• You're adjusting the same thing back and forth ("make it bigger, no smaller, no back to bigger")
• Changes are getting smaller (2px adjustments)
• You've been working on the same page for more than an hour
• You start thinking "I should redesign everything from scratch"

So stop and ship it. You can improve it later.

How I Refined This Site

I spent a few days building the first version of this website (including the backend, CMS, and all the infrastructure) and a couple of weeks refining it. I'm still tweaking things on weekends. "Increase the gap between the nav and the hero section by 20px." "Make the footer links slightly brighter." "Reduce the border thickness on cards from 3px to 2px."

Claude can make a CSS change in seconds or minutes. Deciding whether it looks right takes me longer, and I still review the result on different screen sizes.

Next: what to do when something breaks, and how to fix it without going in circles.