diff --git a/antora-ui/.stylelintrc b/antora-ui/.stylelintrc
index 344318f3..00f5a0c4 100644
--- a/antora-ui/.stylelintrc
+++ b/antora-ui/.stylelintrc
@@ -3,5 +3,8 @@
   "rules": {
     "comment-empty-line-before": null,
     "no-descending-specificity": null,
+    "value-keyword-case": ["lower", {
+      "ignoreKeywords": ["/^BlinkMacSystemFont$/", "/^Roboto$/", "/^Oxygen-Sans$/", "/^Ubuntu$/", "/^Cantarell$/", "/^Helvetica Neue$/", "/^Consolas$/", "/^Menlo$/", "/^Courier$/"]
+    }]
   }
 }
diff --git a/antora-ui/src/css/base.css b/antora-ui/src/css/base.css
index cb25a92e..d55905ad 100644
--- a/antora-ui/src/css/base.css
+++ b/antora-ui/src/css/base.css
@@ -22,6 +22,7 @@ body {
   color: var(--body-font-color);
   font-family: var(--body-font-family);
   line-height: var(--body-line-height);
+  font-size: inherit;
   margin: 0;
   tab-size: 4;
   word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
diff --git a/antora-ui/src/css/doc.css b/antora-ui/src/css/doc.css
index df5df47d..43283680 100644
--- a/antora-ui/src/css/doc.css
+++ b/antora-ui/src/css/doc.css
@@ -1,6 +1,6 @@
 .doc {
   color: var(--doc-font-color);
-  font-size: var(--doc-font-size);
+  font-family: var(--doc-font-family);
   hyphens: auto;
   line-height: var(--doc-line-height);
   margin: var(--doc-margin);
@@ -25,7 +25,7 @@
 .doc h5,
 .doc h6 {
   color: var(--heading-font-color);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--alt-heading-font-weight);
   hyphens: none;
   line-height: 1.3;
   margin: 1rem 0 0;
@@ -33,7 +33,7 @@
 }
 
 .doc > h1.page:first-child {
-  font-size: calc(36 / var(--rem-base) * 1rem);
+  font-size: var(--doc-heading-font-size);
   margin: 1.5rem 0;
 }
 
@@ -151,7 +151,7 @@
 }
 
 .doc pre {
-  font-size: calc(16 / var(--rem-base) * 1rem);
+  font-size: inherit;
   line-height: 1.5;
   margin: 0;
 }
@@ -219,7 +219,8 @@
 }
 
 .doc table.tableblock {
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  font-size: inherit;
+  border: 0;
 }
 
 .doc .tablecontainer,
@@ -242,6 +243,11 @@
   padding: 0.5rem;
 }
 
+.doc table.tableblock tr th {
+  background-color: var(--color-smoke-70);
+  border: 1px solid var(--color-gray-15);
+}
+
 .doc table.tableblock,
 .doc table.tableblock > * > tr > * {
   border: 0 solid var(--table-border-color);
@@ -261,11 +267,11 @@
 
 .doc table.grid-all > thead th,
 .doc table.grid-rows > thead th {
-  border-bottom-width: 2.5px;
+  border-bottom-width: 1px;
 }
 
 .doc table.frame-all {
-  border-width: 1px;
+  border-width: 0;
 }
 
 .doc table.frame-ends {
@@ -333,11 +339,14 @@
 
 .doc .admonitionblock {
   margin: 1.4rem 0 0;
+  padding: 1rem;
+  background: var(--admonition-background);
+  border: var(--admonition-border);
 }
 
 .doc .admonitionblock p,
 .doc .admonitionblock td.content {
-  font-size: calc(16 / var(--rem-base) * 1rem);
+  font-size: inherit;
 }
 
 .doc .admonitionblock td.content > :not(.title):first-child,
@@ -346,7 +355,7 @@
 }
 
 .doc .admonitionblock pre {
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  font-size: inherit;
 }
 
 .doc .admonitionblock > table {
@@ -355,56 +364,57 @@
   width: 100%;
 }
 
+.doc .admonitionblock > table tr {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+
 .doc .admonitionblock td.content {
-  padding: 1rem 1rem 0.75rem;
-  background: var(--admonition-background);
+  padding: 0 1.7rem;
   width: 100%;
   word-wrap: anywhere;
 }
 
 .doc .admonitionblock .icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  font-size: calc(15 / var(--rem-base) * 1rem);
-  padding: 0 0.5rem;
-  height: 1.25rem;
+  font-size: inherit;
+  padding: 0 0 0 1.25rem;
   line-height: 1;
   font-weight: var(--admonition-label-font-weight);
-  text-transform: uppercase;
-  border-radius: 0.45rem;
-  transform: translate(-0.5rem, -50%);
+  color: var(--color-black) !important;
+  min-height: 1.25rem;
 }
 
 .doc .admonitionblock.caution .icon {
-  background-color: var(--caution-color);
   color: var(--caution-on-color);
+  background: no-repeat url("../img/caution.svg");
 }
 
 .doc .admonitionblock.important .icon {
-  background-color: var(--important-color);
   color: var(--important-on-color);
+  background: no-repeat url("../img/important.svg");
 }
 
 .doc .admonitionblock.note .icon {
-  background-color: var(--note-color);
   color: var(--note-on-color);
+  background: no-repeat url("../img/note.svg");
 }
 
 .doc .admonitionblock.tip .icon {
-  background-color: var(--tip-color);
   color: var(--tip-on-color);
+  background: no-repeat url("../img/tip.svg");
 }
 
 .doc .admonitionblock.warning .icon {
-  background-color: var(--warning-color);
   color: var(--warning-on-color);
+  background: no-repeat url("../img/warning.svg");
 }
 
 .doc .admonitionblock .icon i {
   display: inline-flex;
   align-items: center;
   height: 100%;
+  padding: 0 0.35rem;
 }
 
 .doc .admonitionblock .icon i::after {
@@ -459,18 +469,18 @@
 
 .doc .quoteblock,
 .doc .verseblock {
-  background: var(--quote-background);
-  border-left: 5px solid var(--quote-border-color);
+  background: var(--color-smoke-10);
+  border-left: 3px solid var(--quote-border-color);
   color: var(--quote-font-color);
 }
 
 .doc .quoteblock {
-  padding: 0.25rem 2rem 1.25rem;
+  padding: 0.25rem 1.5rem 1.25rem;
 }
 
 .doc .quoteblock .attribution {
   color: var(--quote-attribution-font-color);
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  font-size: inherit;
   margin-top: 0.75rem;
 }
 
@@ -487,7 +497,7 @@
 }
 
 .doc .verseblock {
-  font-size: 1.15em;
+  font-size: inherit;
   padding: 1rem 2rem;
 }
 
@@ -624,12 +634,12 @@
 .doc .videoblock .title,
 .doc .tableblock caption {
   color: var(--caption-font-color);
-  font-size: calc(16 / var(--rem-base) * 1rem);
+  font-size: inherit;
   font-style: var(--caption-font-style);
   font-weight: var(--caption-font-weight);
   hyphens: none;
   letter-spacing: 0.01em;
-  padding-bottom: 0.075rem;
+  padding-bottom: 0.35rem;
 }
 
 .doc .tableblock caption {
@@ -706,8 +716,8 @@
 .doc .exampleblock > .content,
 .doc details.result > .content {
   background: var(--example-background);
-  border: 0.25rem solid var(--example-border-color);
-  border-radius: 0.5rem;
+  border: 0.125rem solid var(--example-border-color);
+  border-radius: 0;
   padding: 0.75rem;
 }
 
@@ -750,11 +760,12 @@
 .doc pre.highlight code,
 .doc .listingblock pre:not(.highlight),
 .doc .literalblock pre {
-  background: var(--pre-background);
-  box-shadow: inset 0 0 1.75px var(--pre-border-color);
+  background: none;
+  border: 1px solid var(--color-gray-15);
   display: block;
   overflow-x: auto;
-  padding: 0.875em;
+  padding: 0.685em;
+  font-size: inherit;
 }
 
 .doc .listingblock > .content {
diff --git a/antora-ui/src/css/toolbar.css b/antora-ui/src/css/toolbar.css
index fec07de6..7f384888 100644
--- a/antora-ui/src/css/toolbar.css
+++ b/antora-ui/src/css/toolbar.css
@@ -9,6 +9,7 @@
   justify-content: flex-start;
   position: sticky;
   top: var(--navbar-height);
+  z-index: var(--z-index-toolbar);
 }
 
 .toolbar a {
diff --git a/antora-ui/src/css/vars.css b/antora-ui/src/css/vars.css
index aac80540..42e6952b 100644
--- a/antora-ui/src/css/vars.css
+++ b/antora-ui/src/css/vars.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');
-
 :root {
   /* colors */
   --color-white: #fff;
@@ -9,6 +7,7 @@
   --color-smoke-70: #f0f0f0;
   --color-smoke-90: #eaf0f3;
   --color-gray-10: #c1c1c1;
+  --color-gray-15: #dcdcdc;
   --color-gray-30: #9c9c9c;
   --color-gray-40: #8e8e8e;
   --color-gray-50: #808080;
@@ -20,15 +19,14 @@
   --color-jet-80: rgb(49 74 87);
   --color-black: #000;
   /* fonts */
-  --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
-  --body-font-size: 1.0625em; /* 17px */
-  --body-font-size--desktop: 1.125em; /* 18px */
-  --body-font-size--print: 0.9375em; /* 15px */
-  --body-line-height: 1.15;
+  --rem-base: 16; /* used to compute rem value from desired pixel value (e.g., calc(16 / var(--rem-base) * 1rem) = 16px) */
+  --body-font-size: 0.83333rem; /* 13.33px */
+  --body-font-size--desktop: 1rem; /* 16px */
+  --body-font-size--print: 0.9375rem; /* 15px */
   --body-font-color: var(--color-jet-70);
-  --body-font-family: "Cairo", sans-serif;
-  --body-font-weight-bold: 500;
-  --monospace-font-family: "Roboto Mono", monospace;
+  --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --body-font-weight-bold: 600;
+  --monospace-font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   --monospace-font-weight-bold: 500;
   /* base */
   --body-background: var(--color-white);
@@ -75,13 +73,15 @@
   --warning-color: #e18114;
   --warning-on-color: var(--color-white);
   /* doc */
-  --doc-font-color: var(--color-jet-50);
-  --doc-font-size: inherit;
-  --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
-  --doc-line-height: 1.6;
+  --doc-heading-font-size: 1.375rem;
+  --doc-font-family: var(--body-font-family);
+  --doc-font-color: var(--color-black);
+  --doc-font-size: var(--body-font-size);
+  --doc-font-size--desktop: var(--body-font-size);
+  --doc-line-height: 1.15;
   --doc-margin: 0 auto;
   --doc-margin--desktop: 0 2rem;
-  --heading-font-color: var(--color-jet-80);
+  --heading-font-color: var(--color-black);
   --heading-font-weight: normal;
   --alt-heading-font-weight: var(--body-font-weight-bold);
   --section-divider-color: var(--panel-border-color);
@@ -91,7 +91,8 @@
   --abstract-background: var(--color-smoke-70);
   --abstract-font-color: var(--color-jet-20);
   --abstract-border-color: var(--panel-border-color);
-  --admonition-background: var(--panel-background);
+  --admonition-background: var(--color-white);
+  --admonition-border: 1px solid var(--color-gray-15);
   --admonition-label-font-weight: var(--body-font-weight-bold);
   --caption-font-color: var(--color-gray-70);
   --caption-font-style: italic;
@@ -103,14 +104,14 @@
   --kbd-background: var(--panel-background);
   --kbd-border-color: var(--color-gray-10);
   --pre-background: var(--panel-background);
-  --pre-border-color: var(--panel-border-color);
+  --pre-border-color: var(--color-gray-50);
   --pre-annotation-font-color: var(--color-gray-50);
   --quote-background: var(--panel-background);
   --quote-border-color: var(--color-gray-70);
   --quote-font-color: var(--color-gray-70);
   --quote-attribution-font-color: var(--color-gray-40);
   --sidebar-background: var(--color-smoke-90);
-  --table-border-color: var(--panel-border-color);
+  --table-border-color: var(--color-gray-15);
   --table-stripe-background: var(--panel-background);
   --table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%);
   /* toc */
diff --git a/antora-ui/src/img/caution.svg b/antora-ui/src/img/caution.svg
new file mode 100644
index 00000000..3e628fca
--- /dev/null
+++ b/antora-ui/src/img/caution.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M15.8 12.526 9.483.88A1.668 1.668 0 0 0 8.8.2a1.693 1.693 0 0 0-2.284.68L.2 12.526A1.678 1.678 0 0 0 1.686 15h12.628a1.7 1.7 0 0 0 1.308-.615 1.67 1.67 0 0 0 .178-1.859ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-3.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4Z" fill="#FF9100"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/antora-ui/src/img/important.svg b/antora-ui/src/img/important.svg
new file mode 100644
index 00000000..5ebbe4ae
--- /dev/null
+++ b/antora-ui/src/img/important.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M7.75 0A7.749 7.749 0 0 0 0 7.75a7.749 7.749 0 0 0 7.75 7.75 7.749 7.749 0 0 0 7.75-7.75A7.749 7.749 0 0 0 7.75 0Z" fill="#EED202"/><path d="M9.488 11.3c0 .827-.673 1.5-1.5 1.5-.828 0-1.5-.673-1.5-1.5s.672-1.5 1.5-1.5c.827 0 1.5.673 1.5 1.5ZM6.66 3.672l.255 5.1a.45.45 0 0 0 .45.428h1.243a.45.45 0 0 0 .45-.428l.255-5.1a.45.45 0 0 0-.45-.472H7.111a.45.45 0 0 0-.45.472Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/antora-ui/src/img/note.svg b/antora-ui/src/img/note.svg
new file mode 100644
index 00000000..3db6d783
--- /dev/null
+++ b/antora-ui/src/img/note.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.75 2A1.75 1.75 0 0 0 0 3.75v8.5A1.75 1.75 0 0 0 1.75 14h12.5A1.75 1.75 0 0 0 16 12.25v-8.5A1.75 1.75 0 0 0 14.25 2H1.75Z" fill="#217EE7"/><path d="M2.258 5.244a.81.81 0 0 0-.258.59.81.81 0 0 0 .258.589.91.91 0 0 0 .624.244h8.236a.91.91 0 0 0 .624-.244.81.81 0 0 0 .258-.59.81.81 0 0 0-.258-.589.91.91 0 0 0-.624-.244H2.882a.91.91 0 0 0-.624.244ZM7.588 8.333H2.882a.91.91 0 0 0-.624.244.81.81 0 0 0-.258.59.81.81 0 0 0 .258.589.91.91 0 0 0 .624.244h4.706a.91.91 0 0 0 .624-.244.81.81 0 0 0 .259-.59.81.81 0 0 0-.259-.589.91.91 0 0 0-.624-.244Z" fill="#fff"/><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25v-8.5Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75Z" fill="#217EE7"/></svg>
diff --git a/antora-ui/src/img/tip.svg b/antora-ui/src/img/tip.svg
new file mode 100644
index 00000000..b8510760
--- /dev/null
+++ b/antora-ui/src/img/tip.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 14c0 .333.267.667.667.667h2.666c.4 0 .667-.334.667-.667v-.667H6V14ZM8 1.333A4.638 4.638 0 0 0 3.333 6c0 1.6.8 3 2 3.8v1.533c0 .334.267.667.667.667h4c.4 0 .667-.333.667-.667V9.8c1.2-.867 2-2.267 2-3.8 0-2.6-2.067-4.667-4.667-4.667Z" fill="#5CB85C"/></svg>
\ No newline at end of file
diff --git a/antora-ui/src/img/warning.svg b/antora-ui/src/img/warning.svg
new file mode 100644
index 00000000..cf3f211c
--- /dev/null
+++ b/antora-ui/src/img/warning.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M1 4.862 5 1h6l4 3.862v5.793L10.5 15h-5L1 10.655V4.862Z" fill="#FF5252"/><path d="M8.53 4.22a.75.75 0 0 0-1.28.53v3.5a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.22-.53ZM7.293 11.707a1 1 0 1 0 1.414-1.414 1 1 0 0 0-1.414 1.414Z" fill="#fff"/><path d="m15 5-4-4H5L1 5v6l4 4h6l4-4V5Z" stroke="#FF5252"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file