diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/atom.css b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/atom.css
index 2d5975b1b3f8..d2fc20b27416 100644
--- a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/atom.css
+++ b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/atom.css
@@ -5,15 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-* {
-  color: #0d1137;
-}
-
 main {
   flex: 1 0 auto;
   width: 100%;
-  margin: 4rem auto;
-  padding: 1.5 rem;
+  margin: 2rem auto;
   max-width: 800px;
   /* stylelint-disable-next-line font-family-name-quotes */
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell;
@@ -21,32 +16,14 @@ main {
 
 .info {
   display: block;
-  margin: 3rem 0;
-  padding: 2rem 3rem;
+  margin: 2rem 0;
+  padding: 1.6rem 2.4rem;
   border: 1px solid dodgerblue;
   border-left-width: 0.5rem;
   border-radius: 0.4rem;
   background-color: #edf5ff;
 }
 
-.rss-icon {
-  height: 3.8rem;
-  width: 3.8rem;
-  margin-right: 1rem;
-}
-
-.flex {
-  display: flex;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.pb-7 {
-  padding-bottom: 3rem;
-}
-
 a {
   color: #005aff;
   text-decoration: none;
@@ -54,23 +31,45 @@ a {
 
 h1 {
   text-wrap: balance;
-  font-size: 3.8rem;
-  line-height: 1;
+  font-size: 3.4rem;
   font-weight: 800;
-  margin-bottom: 4rem;
+  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+h1 .rss-icon {
+  height: 3.2rem;
+  width: 3.2rem;
+  margin-right: 1rem;
 }
 
 h2 {
-  font-size: 3rem;
-  line-height: 1.2;
+  font-size: 2.2rem;
   font-weight: 700;
-  margin-bottom: 3rem;
+  margin-bottom: 0.2rem;
 }
 
-h2:not(:first-child) {
-  margin-top: 5.8rem;
+h3 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: 0.1rem;
+}
+
+.blog-description {
+  font-size: 1.4rem;
+  margin-bottom: 0.6rem;
 }
 
-.italic {
+.blog-post-date {
+  font-size: 1rem;
+  line-height: 1.4rem;
   font-style: italic;
+  color: #797b7e;
+}
+
+.blog-post-description {
+  font-size: 1rem;
+  line-height: 1.4rem;
+  color: #434349;
 }
diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/atom.xsl b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/atom.xsl
index 2bd08fbd8de6..271895cf7775 100644
--- a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/atom.xsl
+++ b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/atom.xsl
@@ -3,7 +3,6 @@
   version="3.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:atom="http://www.w3.org/2005/Atom">
-
   <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes" />
 
   <xsl:template match="/">
@@ -18,11 +17,12 @@
         <main>
           <div class="description">
             <div class="info">
-              <strong>This is an Atom feed</strong>. Subscribe by copying the URL from the address
-              bar into your newsreader. Visit <a
-                href="https://aboutfeeds.com/">About Feeds</a> to
-              learn more and get started. It’s free. </div>
-            <h1 class="flex items-start">
+              <strong>This is an Atom feed</strong>. Subscribe by copying the URL
+              from the address bar into your newsreader. Visit
+              <a href="https://aboutfeeds.com/">About Feeds</a> to learn more
+              and get started. It’s free.
+            </div>
+            <h1>
               <div class="rss-icon">
                 <svg
                   version="1.1"
@@ -31,56 +31,55 @@
                   xmlns:xlink="http://www.w3.org/1999/xlink"
                   viewBox="0 0 455.731 455.731"
                   xml:space="preserve">
-                <g>
-                <rect
+                  <g>
+                    <rect
                       x="0"
                       y="0"
-                      style="fill:#F78422;"
+                      style="fill: #f78422"
                       width="455.731"
                       height="455.731"
                     />
-                <g>
-                <path
-                        style="fill:#FFFFFF;"
+                    <g>
+                      <path
+                        style="fill: #ffffff"
                         d="M296.208,159.16C234.445,97.397,152.266,63.382,64.81,63.382v64.348
                 c70.268,0,136.288,27.321,185.898,76.931c49.609,49.61,76.931,115.63,76.931,185.898h64.348
                 C391.986,303.103,357.971,220.923,296.208,159.16z"
                       />
-                <path
-                        style="fill:#FFFFFF;"
+                      <path
+                        style="fill: #ffffff"
                         d="M64.143,172.273v64.348c84.881,0,153.938,69.056,153.938,153.939h64.348
                 C282.429,270.196,184.507,172.273,64.143,172.273z"
                       />
-                <circle
-                        style="fill:#FFFFFF;"
+                      <circle
+                        style="fill: #ffffff"
                         cx="109.833"
                         cy="346.26"
                         r="46.088"
                       />
-                </g>
-                </g>
+                    </g>
+                  </g>
                 </svg>
               </div>
-              Atom Feed Preview </h1>
-            <h2>
               <xsl:value-of select="atom:feed/atom:title" />
-            </h2>
-            <p>Description: <xsl:value-of
-                select="atom:feed/atom:subtitle"
-              /></p>
+            </h1>
+            <p class="blog-description">
+              <xsl:value-of select="atom:feed/atom:subtitle" />
+            </p>
           </div>
           <h2>Recent Posts</h2>
-          <div class="postsList">
+          <div class="blog-posts">
             <xsl:for-each select="atom:feed/atom:entry">
-              <div class="pb-7">
-                <a href="{atom:link[@rel='alternate']/@href}">
-                  <xsl:value-of select="atom:title" />
-                </a>
-                <div class="text-2 text-offset"> Published on <xsl:value-of
-                    select="substring(atom:updated, 0, 17)"
+              <div class="blog-post">
+                <h3><a href="{atom:link[@rel='alternate']/@href}"><xsl:value-of
+                      select="atom:title"
+                    /></a></h3>
+                <div class="blog-post-date">
+                  Published on <xsl:value-of
+                    select="substring(atom:updated,0,11)"
                   />
                 </div>
-                <div class="text-2 text-offset italic">
+                <div class="blog-post-description">
                   <xsl:value-of select="atom:summary" />
                 </div>
               </div>
@@ -90,5 +89,4 @@
       </body>
     </html>
   </xsl:template>
-
 </xsl:stylesheet>
diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/rss.css b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/rss.css
index 17d483670f0d..d2fc20b27416 100644
--- a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/rss.css
+++ b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/rss.css
@@ -8,8 +8,7 @@
 main {
   flex: 1 0 auto;
   width: 100%;
-  margin: 4rem auto;
-  padding: 1.5 rem;
+  margin: 2rem auto;
   max-width: 800px;
   /* stylelint-disable-next-line font-family-name-quotes */
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell;
@@ -17,32 +16,14 @@ main {
 
 .info {
   display: block;
-  margin: 3rem 0;
-  padding: 2rem 3rem;
+  margin: 2rem 0;
+  padding: 1.6rem 2.4rem;
   border: 1px solid dodgerblue;
   border-left-width: 0.5rem;
   border-radius: 0.4rem;
   background-color: #edf5ff;
 }
 
-.rss-icon {
-  height: 3.8rem;
-  width: 3.8rem;
-  margin-right: 1rem;
-}
-
-.flex {
-  display: flex;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.pb-7 {
-  padding-bottom: 3rem;
-}
-
 a {
   color: #005aff;
   text-decoration: none;
@@ -50,23 +31,45 @@ a {
 
 h1 {
   text-wrap: balance;
-  font-size: 3.8rem;
-  line-height: 1;
+  font-size: 3.4rem;
   font-weight: 800;
-  margin-bottom: 4rem;
+  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+h1 .rss-icon {
+  height: 3.2rem;
+  width: 3.2rem;
+  margin-right: 1rem;
 }
 
 h2 {
-  font-size: 3rem;
-  line-height: 1.2;
+  font-size: 2.2rem;
   font-weight: 700;
-  margin-bottom: 3rem;
+  margin-bottom: 0.2rem;
 }
 
-h2:not(:first-child) {
-  margin-top: 5.8rem;
+h3 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: 0.1rem;
 }
 
-.italic {
+.blog-description {
+  font-size: 1.4rem;
+  margin-bottom: 0.6rem;
+}
+
+.blog-post-date {
+  font-size: 1rem;
+  line-height: 1.4rem;
   font-style: italic;
+  color: #797b7e;
+}
+
+.blog-post-description {
+  font-size: 1rem;
+  line-height: 1.4rem;
+  color: #434349;
 }
diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/rss.xsl b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/rss.xsl
index e060e1519d3f..e9695b298468 100644
--- a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/rss.xsl
+++ b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/build-snap/blog/rss.xsl
@@ -3,7 +3,6 @@
   version="3.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:atom="http://www.w3.org/2005/Atom">
-
   <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes" />
 
   <xsl:template match="/">
@@ -16,11 +15,12 @@
         <main>
           <div class="description">
             <div class="info">
-              <strong>This is an RSS feed</strong>. Subscribe by copying the URL from the address
-              bar into your newsreader. Visit <a
-                href="https://aboutfeeds.com/">About Feeds</a> to
-              learn more and get started. It’s free. </div>
-            <h1 class="flex items-start">
+              <strong>This is an RSS feed</strong>. Subscribe by copying the URL
+              from the address bar into your newsreader. Visit
+              <a href="https://aboutfeeds.com/">About Feeds</a> to learn more
+              and get started. It’s free.
+            </div>
+            <h1>
               <div class="rss-icon">
                 <svg
                   version="1.1"
@@ -29,56 +29,51 @@
                   xmlns:xlink="http://www.w3.org/1999/xlink"
                   viewBox="0 0 455.731 455.731"
                   xml:space="preserve">
-                <g>
-                <rect
+                  <g>
+                    <rect
                       x="0"
                       y="0"
-                      style="fill:#F78422;"
+                      style="fill: #f78422"
                       width="455.731"
                       height="455.731"
                     />
-                <g>
-                <path
-                        style="fill:#FFFFFF;"
+                    <g>
+                      <path
+                        style="fill: #ffffff"
                         d="M296.208,159.16C234.445,97.397,152.266,63.382,64.81,63.382v64.348
                 c70.268,0,136.288,27.321,185.898,76.931c49.609,49.61,76.931,115.63,76.931,185.898h64.348
                 C391.986,303.103,357.971,220.923,296.208,159.16z"
                       />
-                <path
-                        style="fill:#FFFFFF;"
+                      <path
+                        style="fill: #ffffff"
                         d="M64.143,172.273v64.348c84.881,0,153.938,69.056,153.938,153.939h64.348
                 C282.429,270.196,184.507,172.273,64.143,172.273z"
                       />
-                <circle
-                        style="fill:#FFFFFF;"
+                      <circle
+                        style="fill: #ffffff"
                         cx="109.833"
                         cy="346.26"
                         r="46.088"
                       />
-                </g>
-                </g>
+                    </g>
+                  </g>
                 </svg>
               </div>
-              RSS Feed Preview </h1>
-            <h2>
               <xsl:value-of select="rss/channel/title" />
-            </h2>
-            <p>Description: <xsl:value-of
-                select="rss/channel/description"
-              /></p>
+            </h1>
+            <p class="blog-description">
+              <xsl:value-of select="rss/channel/description" />
+            </p>
           </div>
           <h2>Recent Posts</h2>
-          <div class="postsList">
+          <div class="blog-posts">
             <xsl:for-each select="rss/channel/item">
-              <div class="pb-7">
-                <a href="{link}">
-                  <xsl:value-of select="title" />
-                </a>
-                <div class="text-2 text-offset"> Published on <xsl:value-of
-                    select="substring(pubDate,0,17)"
-                  />
+              <div class="blog-post">
+                <h3><a href="{link}"><xsl:value-of select="title" /></a></h3>
+                <div class="blog-post-date">
+                  Published on <xsl:value-of select="substring(pubDate,0,17)" />
                 </div>
-                <div class="text-2 text-offset italic">
+                <div class="blog-post-description">
                   <xsl:value-of select="description" />
                 </div>
               </div>
@@ -88,5 +83,4 @@
       </body>
     </html>
   </xsl:template>
-
 </xsl:stylesheet>