diff --git a/ui/src/App.css b/ui/src/App.css
index a65be2b..d9b8eb8 100644
--- a/ui/src/App.css
+++ b/ui/src/App.css
@@ -191,6 +191,15 @@ a.hot-pink {
   overflow-x: auto;
 }
 
+.blog-list-title {
+  font-size: 1.4rem;
+}
+
+.blog-date {
+  font-size: 85%;
+  opacity: 0.6;
+}
+
 .site-footer {
   margin-top: 3rem;
   padding: 1rem 0;
diff --git a/ui/src/pages/BlogIndexPage.tsx b/ui/src/pages/BlogIndexPage.tsx
index 873c9c4..142cb9a 100644
--- a/ui/src/pages/BlogIndexPage.tsx
+++ b/ui/src/pages/BlogIndexPage.tsx
@@ -23,10 +23,10 @@ export function BlogIndexPage() {
         {posts.length === 0 && <p>nothing here yet.</p>}
         {posts.map((post) => (
           <article key={post.slug} className="mb-4">
-            <h3 className="mb-1">
+            <h3 className="blog-list-title mb-1">
               <Link to={`/blog/${post.slug}`}>{post.title}</Link>
             </h3>
-            <p className="text-muted mb-1" style={{ fontSize: '85%' }}>
+            <p className="blog-date mb-1">
               {formatDate(post.published_at)}
             </p>
             {post.excerpt && <p className="mb-0">{post.excerpt}</p>}
diff --git a/ui/src/pages/BlogPostPage.tsx b/ui/src/pages/BlogPostPage.tsx
index 5db260a..8c44b9b 100644
--- a/ui/src/pages/BlogPostPage.tsx
+++ b/ui/src/pages/BlogPostPage.tsx
@@ -37,7 +37,7 @@ export function BlogPostPage() {
           <Link to="/blog">← blog</Link>
         </p>
         <h2 className="mb-1">{post.title}</h2>
-        <p className="text-muted" style={{ fontSize: '85%' }}>
+        <p className="blog-date">
           {formatDate(post.published_at)}
         </p>
         <div className="blog-post">