@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="none"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Dollar Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M 13.091417,10.854545 V 4.6363636 A 8.4,8.4 0 0 1 15.927781,5.7818182 1.2,1.2 0 0 0 17.61869,5.4 0.98181818,0.98181818 0 0 0 17.400508,3.8181818 9.3272727,9.3272727 0 0 0 13.091417,2.2909091 v -1.2 a 1.0909091,1.0909091 0 0 0 -2.181818,0 v 1.0909091 c -3.4363628,0.2727273 -5.8909088,2.4 -5.8909088,5.2909091 v 0 c 0,3.2727277 2.345455,4.5818177 5.8909088,5.4545457 v 6.490909 a 9.1090909,9.1090909 0 0 1 -3.9818178,-1.690909 1.0909091,1.0909091 0 0 0 -1.636364,0.218182 c -0.545454,0.70909 -0.490909,1.254545 0.05455,1.636363 a 10.8,10.8 0 0 0 5.5636358,2.127273 v 1.2 a 1.0909091,1.0909091 0 0 0 2.181818,0 v -1.145455 c 3.545455,-0.272727 6,-2.4 6,-5.454545 v 0 c 0,-2.836364 -1.8,-4.472727 -6,-5.454546 z M 7.6368722,7.3636364 v 0 c 0,-1.5272728 1.309091,-2.6181819 3.2727268,-2.7818182 V 10.363636 C 8.1823262,9.6 7.6368722,8.672727 7.6368722,7.3636364 Z m 8.8363638,9.1636366 c 0,1.581818 -1.363637,2.727272 -3.381819,2.945454 v -6 c 2.781819,0.763637 3.381819,1.690909 3.381819,3 z"
+  ></path>
+</svg>
@@ -11,9 +11,9 @@ featured: true
 
 *[ADR]: Architecture Decision Record
 
-You've inherited a system with a README that was last updated three years ago. The architecture diagrams reference services that no longer exist. The wiki has seventeen conflicting pages about deployment, and no one's sure which ones are current. The original architects left two reorganizations ago.
+You've inherited a system with a `README` that was last updated three years ago. The architecture diagrams reference services that no longer exist. The wiki has seventeen conflicting pages about deployment, and no one's sure which ones are current. The original architects left two reorganizations ago.
 
-Here's the uncomfortable truth: outdated documentation isn't just unhelpful — it's actively harmful. When a new team member reads that architecture diagram and forms a mental model of how the system works, they're building on outdated assumptions that will take months to unlearn. When an on-call engineer follows a runbook during an incident, they might make things worse by following steps that no longer apply.
+<Highlighter>Here's the uncomfortable truth: outdated documentation isn't just unhelpful — it's actively harmful.</Highlighter> When a new team member reads that architecture diagram and forms a mental model of how the system works, they're building on outdated assumptions that will take months to unlearn. When an on-call engineer follows a runbook during an incident, they might make things worse by following steps that no longer apply.
 
 But there's good news. The codebase itself contains more reliable documentation than any wiki page ever will. Git history records what changed, when, and often why. Tests that pass demonstrate working behavior that prose documentation might get wrong. And the engineers who've kept the system alive hold knowledge that's never been written down.
 
@@ -161,56 +161,99 @@ This knowledge has an expiration date: when the person leaves. Extracting it req
 For __architectural knowledge__:
 
 <List
-  variant="check-icons-list"
+  variant="three-column-icon-list"
+  size={7}
+  classes={{
+    text: "italic font-semibold",
+  }}
   items={[
     {
       text: '"What happens when a user places an order?"',
+      icon: "paper-and-pen",
+      color: "info",
+      bgColor: "info-inverse",
     },
     {
       text: '"What breaks if the payment service goes down?"',
+      icon: "dollar",
+      color: "warning",
+      bgColor: "warning-inverse",
     },
     {
       text: '"What\'s the scariest part of this codebase to change?"',
+      icon: "git",
+      color: "danger",
+      bgColor: "danger-inverse",
     },
   ]}
 />
 
 For __operational knowledge__:
 
 <List
-  variant="check-icons-list"
+  variant="three-column-icon-list"
+  size={7}
+  classes={{
+    text: "italic font-semibold",
+  }}
   items={[
     {
       text: '"What pages you most often at night?"',
+      icon: "on-call",
+      color: "secondary",
+      bgColor: "blue-100",
     },
     {
       text: '"What manual steps do deployments require?"',
+      icon: "wrench",
+      color: "success",
+      bgColor: "success-inverse",
     },
     {
       text: '"Where do you look first when API responses slow down?"',
+      icon: "api",
+      color: "primary-offset",
+      bgColor: "gray-200",
     },
   ]}
 />
 
 For __business rules encoded in code__:
 
 <List
-  variant="check-icons-list"
+  variant="three-column-icon-list"
+  size={7}
+  classes={{
+    text: "italic font-semibold",
+  }}
   items={[
     {
       text: '"What business rules live in code but not in any document?"',
+      icon: "gear",
+      color: "accent",
+      bgColor: "purple-100",
     },
     {
       text: '"What edge cases have special handling?"',
+      icon: "external",
+      color: "orange-700",
+      bgColor: "orange-100",
     },
     {
       text: '"What compliance requirements shaped this code?"',
+      icon: "shield",
+      color: "success",
+      bgColor: "green-100",
     },
   ]}
 />
 
 <Table
-  variant="vertical-column-delineation-table"
+  variant="minimal-borders-table"
+  fullWidth={false}
+  classes={{
+    figure: "mt-18 mb-6",
+  }}
   content={{
     thead: {
       th: ['Interview Focus', 'Best Participants', 'Knowledge Domain'],
@@ -250,7 +293,10 @@ Capture tribal knowledge __before__ someone announces they're leaving. By the ti
 With git history mined, tests written, and interviews conducted, the question becomes: what do you document first? You can't cover everything, and you shouldn't try. Focus on three categories:
 
 <List
-  variant="check-icons-list"
+  variant="chevron-list"
+  classes={{
+    wrapper: "sm:ml-6 sm:mr-12 mb-6",
+  }}
   items={[
     {
       lead: 'The dangerous parts',