Redesigning This Blog (While Writing About It)

A meta-journey through redesigning a blog's layout - avoiding AI design clichés and building something with actual character

This blog needed a refresh. The old design worked fine - it was based on Bear Blog’s minimalist template - but it was boring. Grid of cards, some hover effects, call it a day. Functional, but forgettable.

So I decided to redesign it. And document the process. In this very post. Meta enough for you?

The Problem with AI Design

Here’s the thing: when you ask an AI to design something, you usually get the same aesthetic. Purple gradients. Rounded corners on everything. Excessive shadows. Cards within cards. Buttons that look like they belong in a 2018 Dribbble mockup.

I call it “AI slob” - that generic, overly-polished look that screams “a machine made this with the prompt ‘make it modern’.”

I wanted to avoid that. So the first instruction was clear: make it modern and attractive, but not standard gen-AI slob with purple buttons.

Design Philosophy

Instead of following AI design trends, I looked at what actual modern tech companies are doing:

  • Vercel - clean, editorial, generous whitespace
  • Linear - sharp edges, intentional spacing, monochromatic with strategic accent use
  • Stripe - strong typography hierarchy, content-first

The common thread? Restraint. Not throwing every design trick at the wall. Using white space as a feature, not something to fill. Making typography do the heavy lifting.

What Changed

Blog List Page

Before:

  • Basic 2-column grid
  • Images with rounded corners (because every blog has those)
  • Title and date, that’s it
  • Generic hover effect

After:

  • Clean grid with 1px borders creating visual structure
  • Featured first post spanning full width
  • Tags displayed inline with dates (those #hashtags you see)
  • Post descriptions for context
  • Subtle background color change on hover (no fancy animations needed)
  • Removed the gradient background - just clean white

The inspiration here is editorial - think of how a newspaper or magazine lays out content. The grid lines aren’t decorative; they’re structural. They help your eye scan.

Individual Post Page

Before:

  • Centered title
  • Full-width hero image at top
  • Content in a narrow column
  • Dated look with that horizontal rule

After:

  • Left-aligned header (more natural reading flow)
  • Metadata (date + tags) grouped together
  • Larger, bolder title with tighter letter-spacing
  • Description displayed prominently
  • Better link styling (underlines that intensify on hover)
  • Improved code block borders
  • Cleaner blockquote treatment

Typography

The Atkinson font was already good (came with the Bear Blog template), so I kept it. But I tightened up the hierarchy:

  • Tighter letter-spacing on headings (-0.02em to -0.01em)
  • Smaller, more intentional font sizes
  • Tabular numbers for dates (so they line up nicely)
  • Better line height for body text

Colors

Here’s what I didn’t do: add purple, add gradients, add accent colors everywhere.

Instead:

  • Monochromatic base (black, grays, white)
  • The existing blue accent used sparingly
  • Tags in gray (they’re utility, not decoration)
  • Subtle hover states that don’t demand attention

Technical Implementation

This blog runs on Astro, which made the changes straightforward:

// Blog list is now a grid with 1px gap
.posts-grid {
  display: grid;
  gap: 1px;
  background: rgb(var(--gray-light));
  border: 1px solid rgb(var(--gray-light));
}


// Each post is a white card against that gray
.post-card {
  background: white;
  padding: 2rem;
  // ...
}

The “grid with gaps” technique is clever - the background color shows through as borders. No extra divs needed.

For the individual post page, I moved from centered to left-aligned:

.article-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgb(var(--gray-light));
}

Simple border at the bottom instead of an <hr> element. Cleaner.

The Meta Part

I’m writing this post as the redesign is being implemented. Which means you’re reading it in the new design (assuming it worked).

The irony isn’t lost on me - using AI to help design something while explicitly avoiding “AI design.” But that’s the point: AI is a tool. The quality depends on the constraints you give it and the judgment you apply.

Good design principles are timeless:

  • Clear hierarchy
  • Intentional whitespace
  • Strong typography
  • Restraint

Whether you’re using Figma, code, or an AI - those principles still apply.

What I Learned

  1. Constraints breed creativity - “Don’t make it look like AI designed it” was more useful than any positive direction
  2. Less is often right - Removing the gradient background made everything cleaner
  3. Content is the design - When your typography and spacing are good, you don’t need much else
  4. Grid layouts are underrated - That 1px border grid technique is simple but effective

Try It Yourself

If you’re redesigning your own blog, here’s my advice:

  • Start by removing things, not adding them
  • Look at what you read, not what you see in design showcases
  • Typography first, decoration later (if at all)
  • Use color strategically, not everywhere
  • Test in actual use - read a full post in the new design

And if you’re using AI to help: be specific about what you DON’T want. It’s easier to avoid bad patterns than to describe good ones.

What’s Next

The design isn’t finished - design never is. But it’s better. More intentional. Less generic.

Future improvements I’m considering:

  • Reading progress indicator
  • Better code syntax themes
  • Related posts at the end of articles
  • Dark mode (done right, not just inverting colors)

But those can wait. For now, the blog has character. It doesn’t look like every other AI-generated template.

And that was the goal.

P.S. - Yes, an AI helped write this post too. The difference? Editorial judgment about what to keep, what to cut, and how to say it. Same as any writing.