You've done the hard part. You know what your homepage says. Now let's make it look like you mean it.
This lesson has three jobs:
By the end you'll have a functioning site header and footer — and every visual decision documented so you're not second-guessing colors and fonts on every page you build from here.
Watch the video above before continuing. The screen recording walks through all of this inside Squarespace.
Design consistency is the skill. The decisions themselves are simple.
Pick a primary color, an accent color, and a neutral. Your primary is the dominant brand color — the one that shows up in your header and dominant sections. Your accent makes things pop — buttons, links, highlights. Your neutral is your background and body text color.
Every color decision for every page you build runs through those three. When something feels off visually, it's almost always a consistency problem.
Same rule applies to fonts. One heading font, one body font. Body text at 16px minimum — no exceptions. If someone's reading on a phone in bad light, it has to hold up.
Download the Design 101 Cheat Sheet at the bottom of this lesson. Fill it in as you build. It's your record of every decision — fonts, colors, logo file locations, favicon status. Every page you build from here pulls from the same standard.
Your nav has two jobs: tell people where to go, and get out of the way.
Five items maximum in your primary navigation. Plain language only — About, Services, Contact, Content. No clever labels. No one is clicking "Our Journey."
The order matters. About, Services, Contact, Content Hub. Visitors expect that sequence. Don't fight it.
Your nav CTA button is a separate element and it gets one job: the single action you want them to take. Book a call. Send a message. Buy the thing. One button. Active copy. "Book a Call" does more work than "Get In Touch."
Check your mobile nav before you move on. Every item should be tappable. Nothing should overflow or stack weird. More than half your visitors are on their phones.
Nobody thinks about the footer until something goes wrong. Build it right once and leave it.
Five things belong in every footer: your business name, a contact email, a link to your Privacy Policy, a link to your Terms of Use, and your social links if you use them. That's the minimum.
The legal pages are non-negotiable. Privacy Policy and Terms of Use protect you and tell visitors how their data gets handled. If you don't have them yet, build them before you launch.
Social links in the footer: only include platforms you actually post on. A dead Instagram link is worse than no link.
Build your nav and footer today. Then open the Design 101 Cheat Sheet and fill in every field — hex codes, font names, logo file locations, favicon status. Don't leave blanks.
Every page you build from here should look like it came from the same place. Pick your three colors, set your two fonts, and hold the line.