Homepage Glow-Up Guide

_{Day 171/100}

Hey—It's Tim. 

I’m muttering at pixels like they’re interns who missed a deadline.

Penfriend’s world is about the explode in the next few weeks.
We have so much coming in the next update

New features
New scorecards
New editor

Yet the current site barely tells 20 % of the story. So I’m rebuilding the whole thing. A facelift for Penny.

If you still think your website, blog, or product page isn’t content marketing? We can’t be friends.

While scrubbing decades of CSS sin, I collected a grip of micro-fixes that make any page feel “VC-funded” in minutes. Zero dev sprints. Zero design PhDs. Steal them:

1. Ship a One-Page Brand Bible

Throw your hex codes, two-font combo, logo variants, and approved image vibe into a single doc (Notion, Figma, Google Doc - whatever you’ll actually open).

Paste the link in Slack.

From now on, every teammate builds in the same visual language - no rogue pastels sneaking into screenshots.

If you already have this, go and update it.

2. Evict the Default Typeface

Your CMS ships with Arial on Ambien. Swap in a free Google Font pair that has opinions - Inter + Playfair,
Space Grotesk + Lora,
literally anything with ligatures.

Why do you think we have Milk and Honey for Penfriend? It looks amazing…..

The deepdive into fonts and whitespace.

3. Plant a Footer Easter Egg

Power users reach the bottom.

Reward them.

Slip in a hidden discount code, a meme GIF, or a “secret” resources link. You just turned a dead-end into a dopamine dispenser (and a brand-story people screenshot).

4. Slim Down Hero Images

Open Squoosh.app → drag photo → export as WebP at 75 % quality.

Same look, 70 % lighter.

Google’s Core Web Vitals chill out, pages feel snappier, and your bounce rate does the reverse moonwalk.

5. Give Text Room to Breathe

I have a full guide on why whitespace is scientifically proven to make it easier for people to read your content. And the blog design behind it.

But, for those of you with things to do…
Here’s the TL:DR

Set your article wrapper to max-width: 65ch and bump line-height: 1.6.

Readers glide instead of gasping.

Bonus: add scroll-margin-top: 8rem to headings so anchored links don’t hide under sticky navs.

More design tips?
My core 3 design rules as a self taught web-designer.

I sweated over this pixel pep-talk—pass it to one marketer who’s still rocking Times New Roman and 300 KB JPEGs.

Hit forward or screen-grab it into the team chat. S

haring = caring = cleaner internet.

✌️ Tim "CSS Surgeon" Hanson
CMO @Penfriend.ai

Same brain, different platforms: X, Threads, LinkedIn.

P.S. You wanna make sure you me to talk about something in the newsletter?
Slide “I’ve got a wild one” somewhere in your reply.
It’s our secret handshake - do that, and your idea jumps straight to the front of my queue.
No algorithm, just favor trading between friends.

If it’s not wild though….

Penfriend.ai
Made by content marketers. Used by better ones.