diff --git a/app/not-found.tsx b/app/not-found.tsx
index 82ada3f..9a30f90 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -7,7 +7,7 @@ export default function NotFound() {
     <main className="min-h-screen flex items-center justify-center px-6">
       <div className="text-center">
         <p className="font-mono text-sm text-ink-soft mb-4">404</p>
-        <h1 className="font-sans text-4xl font-bold tracking-tight text-ink mb-4">Page not found</h1>
+        <h1 className="heading-xl text-ink mt-0 mb-4">Page not found</h1>
         <p className="text-ink-soft mb-8">The page you{`'`}re looking for doesn{`'`}t exist.</p>
         <Link href="/" className="inline-block rounded-lg bg-ink px-6 py-3 text-sm font-medium text-canvas hover:opacity-80 transition-opacity">
           Go home
diff --git a/app/page.tsx b/app/page.tsx
index 43b1494..0965063 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,7 +17,7 @@ export default async function HomePage() {
         </p>
       </header>
       <section>
-        <h2 className="font-sans text-2xl font-semibold tracking-tight text-ink mb-8">
+        <h2 className="heading-md text-ink mb-8">
           Latest Posts
         </h2>
         <PostList posts={posts} />
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 11f0f63..12e7bfa 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -18,7 +18,7 @@ export function Header() {
       className="sticky top-0 z-50 bg-canvas/80 backdrop-blur-sm border-b border-border"
     >
       <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
-        <Link href="/" className="font-sans text-xl font-extrabold tracking-tight text-ink hover:text-accent transition-colors">
+        <Link href="/" className="heading-sm text-ink hover:text-accent transition-colors">
           blog
         </Link>
         <div className="flex items-center gap-8">
diff --git a/mdx-components.tsx b/mdx-components.tsx
index 984294a..1aa87e0 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -19,6 +19,15 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
         {props.children}
       </h3>
     ),
+    h4: ({ children, ...props }) => (
+      <h4 className="heading-sm text-ink mt-8 mb-3" {...props}>{children}</h4>
+    ),
+    h5: ({ children, ...props }) => (
+      <h5 className="text-base font-semibold text-ink mt-6 mb-2" {...props}>{children}</h5>
+    ),
+    h6: ({ children, ...props }) => (
+      <h6 className="text-sm font-medium uppercase tracking-wider text-ink-soft mt-6 mb-2" {...props}>{children}</h6>
+    ),
     p: ({ children }) => (
       <p className="leading-7 [&:not(:first-child)]:mt-6 text-ink">
         {children}