diff --git a/lib/og.js b/lib/og.js
index d1bcdbb..0ae5a4b 100644
--- a/lib/og.js
+++ b/lib/og.js
@@ -26,7 +26,7 @@ const WIDTH = 1200;
 const HEIGHT = 630;
 
 // Card design version — bump to force full regeneration
-const DESIGN_VERSION = 2;
+const DESIGN_VERSION = 3;
 
 const COLORS = {
   bg: "#ffffff",
@@ -208,9 +208,6 @@ function buildCard(title, description, dateStr, postType, siteName) {
   const avatar = loadAvatar();
   const formattedDate = formatDate(dateStr);
 
-  // Bottom metadata: "Note · Mar 10, 2026"
-  const metaParts = [postType, formattedDate].filter(Boolean).join(" \u00b7 ");
-
   return {
     type: "div",
     props: {
@@ -222,14 +219,27 @@ function buildCard(title, description, dateStr, postType, siteName) {
         backgroundColor: COLORS.bg,
       },
       children: [
-        // Main content area
+        // Top accent bar
+        {
+          type: "div",
+          props: {
+            style: {
+              width: "100%",
+              height: "6px",
+              backgroundColor: COLORS.bar,
+              flexShrink: 0,
+            },
+          },
+        },
+        // Main content — vertically centered
         {
           type: "div",
           props: {
             style: {
               display: "flex",
               flex: 1,
-              padding: "60px 60px 0 60px",
+              padding: "0 64px",
+              alignItems: "center",
             },
             children: [
               // Left: text content
@@ -240,21 +250,58 @@ function buildCard(title, description, dateStr, postType, siteName) {
                     display: "flex",
                     flexDirection: "column",
                     flex: 1,
-                    gap: "20px",
+                    gap: "16px",
                     overflow: "hidden",
-                    paddingRight: avatar ? "40px" : "0",
+                    paddingRight: avatar ? "48px" : "0",
                   },
                   children: [
+                    // Post type badge + date inline
+                    {
+                      type: "div",
+                      props: {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "12px",
+                          color: COLORS.meta,
+                          fontSize: "18px",
+                          fontWeight: 400,
+                          fontFamily: "Inter",
+                        },
+                        children: [
+                          {
+                            type: "span",
+                            props: {
+                              style: {
+                                backgroundColor: COLORS.badge,
+                                color: COLORS.badgeText,
+                                fontSize: "14px",
+                                fontWeight: 700,
+                                fontFamily: "Inter",
+                                padding: "4px 12px",
+                                borderRadius: "999px",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.05em",
+                              },
+                              children: postType,
+                            },
+                          },
+                          formattedDate
+                            ? { type: "span", props: { children: formattedDate } }
+                            : null,
+                        ].filter(Boolean),
+                      },
+                    },
                     // Title
                     {
                       type: "div",
                       props: {
                         style: {
                           color: COLORS.title,
-                          fontSize: "42px",
+                          fontSize: "48px",
                           fontWeight: 700,
                           fontFamily: "Inter",
-                          lineHeight: 1.25,
+                          lineHeight: 1.2,
                           overflow: "hidden",
                         },
                         children: truncate(title, 120),
@@ -267,7 +314,7 @@ function buildCard(title, description, dateStr, postType, siteName) {
                           props: {
                             style: {
                               color: COLORS.description,
-                              fontSize: "24px",
+                              fontSize: "22px",
                               fontWeight: 400,
                               fontFamily: "Inter",
                               lineHeight: 1.4,
@@ -288,17 +335,16 @@ function buildCard(title, description, dateStr, postType, siteName) {
                       style: {
                         display: "flex",
                         flexShrink: 0,
-                        alignItems: "flex-start",
                       },
                       children: [
                         {
                           type: "img",
                           props: {
                             src: avatar,
-                            width: 120,
-                            height: 120,
+                            width: 128,
+                            height: 128,
                             style: {
-                              borderRadius: "12px",
+                              borderRadius: "16px",
                               border: `2px solid ${COLORS.border}`,
                             },
                           },
@@ -310,37 +356,23 @@ function buildCard(title, description, dateStr, postType, siteName) {
             ].filter(Boolean),
           },
         },
-        // Bottom metadata row
+        // Footer: site name
         {
           type: "div",
           props: {
             style: {
               display: "flex",
-              justifyContent: "space-between",
+              justifyContent: "flex-end",
               alignItems: "center",
-              padding: "0 60px 40px 60px",
+              padding: "0 64px 32px 64px",
             },
             children: [
-              // Left: post type · date
               {
                 type: "div",
                 props: {
                   style: {
-                    color: COLORS.meta,
-                    fontSize: "20px",
-                    fontWeight: 400,
-                    fontFamily: "Inter",
-                  },
-                  children: metaParts,
-                },
-              },
-              // Right: site name
-              {
-                type: "div",
-                props: {
-                  style: {
-                    color: COLORS.meta,
-                    fontSize: "20px",
+                    color: "#8b949e",
+                    fontSize: "18px",
                     fontWeight: 400,
                     fontFamily: "Inter",
                   },
@@ -350,18 +382,6 @@ function buildCard(title, description, dateStr, postType, siteName) {
             ],
           },
         },
-        // Bottom accent bar
-        {
-          type: "div",
-          props: {
-            style: {
-              width: "100%",
-              height: "6px",
-              backgroundColor: COLORS.bar,
-              flexShrink: 0,
-            },
-          },
-        },
       ],
     },
   };