How My Site Accidentally Became a Notion Clone

How It Happened

I looked at my site today and realized: this is literally a Notion page. The typography, the layout, the spacing, the metadata header. It's identical.

Design convergence is real. Build sensible markdown primitives and you end up looking exactly like Notion. No lawsuit intended.

I asked Claude to build a content header component - something to display post metadata (title, date, author, tags). No reference images. Just "make it look good."

Claude made this:

• Large title at the top
• Subtle date/author below
• Tags as small badges
• Generous spacing

I looked at it and thought: "This looks exactly like a Notion page header."

Then I realized everything else did too.

The Three Tweaks

To complete the transformation, I made exactly three changes:

• Tightened side margins - Notion pages have narrow side margins on wide screens. Mine were too generous.
• Added top margin - Content starts further down the page.
• Adjusted bottom margin - More breathing room at the end of posts.

That was it. Three margin tweaks and suddenly: Notion clone.

Why This Happened

Notion isn't magic. It's just a polished markdown editor.

When you build sensible primitives for markdown - headings, paragraphs, lists, inline code, code blocks - you naturally converge on similar design decisions:

• Headings need hierarchy (size, weight, spacing)
• Paragraphs need line-height for readability
• Lists need subtle indentation
• Inline code needs background contrast
• Code blocks need syntax highlighting

These aren't Notion-specific decisions. They're just good typography.

Notion executed them well. So when I built primitives with the same constraints ("make markdown readable"), I ended up in the same place.

The Inline Code Reveal

The final piece was inline code styling. I changed mine to match Notion's:

• contrasty color
• Subtle border
• Small padding
• Monospace font

Example: const notion = true;

That pushed it over the edge. Now every inline code reference looks exactly like Notion's.

Design Convergence

This is a case study in design convergence: given the same constraints (readable markdown) and goals (clean, minimal interface), different designers arrive at similar solutions.

It's not copying. It's discovering the same local maximum in design space.

Notion didn't invent:

• Large titles
• Metadata below headings
• Gray inline code backgrounds
• Clean sans-serif typography

They just executed them well together. When you optimize for the same things (readability, minimalism, markdown support), you get similar results.

Why I'm Not Changing It

Should I deliberately diverge to look "different"? No.

Because this works. It's readable. It's clean. The primitives are solid.

Making it look different just to avoid resemblance would be bad design. I'd be optimizing for novelty instead of usability.

Plus, if my blog looks like Notion, that means it looks polished. Notion spent years refining their content presentation. If I accidentally matched it with primitives and good constraints, that's a win.

The Lesson

Good design constraints lead to similar outcomes. Build sensible primitives for your domain (markdown content, in my case) and you'll naturally converge on patterns that "just work."

You don't need to copy competitors. You just need to solve the same problems well.

So yes, my blog looks like Notion. Not because I copied it, but because we both optimized for readable markdown with clean typography.

Design convergence is real. And honestly? I'm okay with it.

(Notion, if you're reading this: love your product!)