Refine static layouts and card primitives

views/getting-started.html

@@ -1,14 +1,18 @@
 <!-- views/getting-started.html -->
-<section class="mb-8">
-  <!-- Light background, shadow, and dark text to override global site color -->
-  <div class="rounded-lg bg-page p-6 text-text-strong shadow-md">
-    <h2 class="mb-4 text-2xl font-bold text-text-strong">Getting Started</h2>
-
-    <!-- .markdown-body references your markdown.css to style headings, paragraphs, etc. -->
-    <div id="markdown-container" class="markdown-body">
-      <p class="text-muted-strong">Loading content...</p>
+<section class="bv-stack" aria-labelledby="gettingStartedHeading">
+  <article class="card p-lg">
+    <div class="bv-stack bv-stack--tight">
+      <h2
+        id="gettingStartedHeading"
+        class="text-2xl font-semibold text-text-strong"
+      >
+        Getting Started
+      </h2>
+      <div id="markdown-container" class="markdown-body">
+        <p class="text-muted-strong">Loading content...</p>
+      </div>
     </div>
-  </div>
+  </article>
 </section>
 
 <script>