Refining Design: Colors, Fonts, Spacing | Claude Code Guide

Your website works. All the pages exist. Navigation connects them. Content is real (or at least realistic). It looks... okay. Now we make it look good. This is the fun part. It's also where most of the time goes. Building the structure is maybe 20% of the work. Refining the design is the other 80%. Colors, fonts, spacing, little details that make the difference between "a website" and "my website." ## 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: ```text 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: ```text 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 Colors set the mood. If you haven't settled on exact colors yet, now's the time. Tell Claude what you're going for: ```text 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: ```text 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 Fonts change how professional your site feels. Two good options: **Option 1: Use Google Fonts (free)** ```text 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)** ```text 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 are faster and always look native to the user's device. Specific typography instructions that make a difference: ```text 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 Spacing is the invisible hero of design. The difference between "this looks cramped" and "this looks clean" is usually just more space between things. Common spacing fixes: ```text 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. ``` ```text The navigation feels crowded. Add more space between the links and more padding around the entire nav bar. ``` ```text The text in the about section is too close to the edges. Add more padding on the left and right, especially on mobile. ``` When in doubt, add more space. It's almost always the right move. ## Real Content Polish Now that the design is taking shape, look at your actual content: - **Is the text too long?** People scan websites, they don't read them. Shorten paragraphs. Use bullet points. - **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: ```text 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 Once the big things are right, small details elevate the design: **Hover effects on links and buttons:** ```text When I hover over navigation links, they should change to the accent color with a smooth transition. Same for buttons. ``` **Active page indicator:** ```text 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. ``` **Footer:** ```text Add a simple footer at the bottom of every page with my name, the year, and links to my social profiles. ``` **Favicon (the small icon in the browser tab):** ```text 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 This is the hardest question. You could tweak forever. When is it done? Here's my rule: **ship it when you wouldn't be embarrassed to share the link.** It doesn't have to be perfect. It has to be good enough that when someone asks "do you have a website?" you feel fine sending the URL. You'll keep improving it after launch. Version one is never the final version. 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" Stop. Ship. Improve 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." Execution can take anywhere from seconds to minutes. The decisions take me longer. But that's the job: deciding what looks right. Claude handles the execution instantly. The bottleneck is always taste, never typing. Your first version won't be your best version. That's fine. Get it out there, then improve it one session at a time. > Next up: saving your work and putting it on the internet. Your website deserves an audience.

Making It Look Good (And Fixing What Doesn't)

Check Your Design Rules First

Sign In to Unlock

Check Your Email