diff --git a/preview-src/example.adoc b/preview-src/example.adoc
index c73bb97d..19358807 100644
--- a/preview-src/example.adoc
+++ b/preview-src/example.adoc
@@ -38,8 +38,8 @@ With the privileges from example 1, granted `EXECUTE PROCEDURE *` and denied `EX
 
 With the privileges from example 2, granted `EXECUTE BOOSTED PROCEDURE *` and denied `EXECUTE PROCEDURE myProc`, execution of the `myProc` procedure is not allowed.
 
+[IMPORTANT]
 With the privileges from example 3, granted `EXECUTE BOOSTED PROCEDURE *` and denied `EXECUTE BOOSTED PROCEDURE myProc`, execution of the `myProc` procedure is not allowed.
-
 With the privileges from example 4, granted `EXECUTE PROCEDURE myProc` and `EXECUTE BOOSTED PROCEDURE *` and denied `EXECUTE BOOSTED PROCEDURE myProc`, the `myProc` procedure returns the result `A` and `B`.
 
 For comparison, when only granted `EXECUTE BOOSTED PROCEDURE myProc`, the `myProc` procedure returns the result `A`, `B` and `C`, without needing to be granted the `EXECUTE PROCEDURE myProc` privilege.
diff --git a/src/css/doc.css b/src/css/doc.css
index b8a9d47a..65d8e1aa 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -334,8 +334,9 @@ body {
 
 .doc .admonitionblock {
   margin: 1.5rem 0 1.5rem;
-  /* border-left: 4px solid var(--doc-font-color); */
-  border-radius: 0.25rem;
+  border-radius: 0.5rem;
+  border-style: solid;
+  border-width: 1px;
 }
 
 .doc .admonitionblock p,
@@ -411,19 +412,19 @@ body {
 }
 
 .doc .admonitionblock td.icon i.icon-tip {
-  background-color: var(--tip-border-color);
+  background-color: var(--tip-color);
 }
 
 .doc .admonitionblock td.icon i.icon-important {
-  background-color: var(--important-border-color);
+  background-color: var(--important-color);
 }
 
 .doc .admonitionblock td.icon i.icon-caution {
-  background-color: var(--caution-border-color);
+  background-color: var(--caution-color);
 }
 
 .doc .admonitionblock td.icon i.icon-warning {
-  background-color: var(--warning-border-color);
+  background-color: var(--warning-color);
 }
 
 /* admonition icon contents */
@@ -472,8 +473,7 @@ body {
 
 .doc .admonitionblock.warning {
   background-color: var(--warning-background-color);
-  color: var(--warning-color);
-  /* border-left-color: var(--warning-border-color); */
+  border-color: var(--warning-border-color);
 }
 
 .doc .admonitionblock.warning a.btn {
@@ -481,22 +481,21 @@ body {
 }
 
 .doc .admonitionblock.warning a {
-  color: var(--color-red-500);
+  color: var(--warning-color);
 }
 
 .doc .admonitionblock.caution {
   background-color: var(--caution-background-color);
-  color: var(--caution-color);
-  /* border-left-color: var(--caution-border-color); */
+  border-color: var(--caution-border-color);
 }
 
 .doc .admonitionblock.caution a {
-  color: var(--color-orange-500);
+  color: var(--caution-color);
 }
 
-.doc .admonitionblock.caution a:hover {
+/* .doc .admonitionblock.caution a:hover {
   color: var(--color-orange-400);
-}
+} */
 
 .doc .admonitionblock.caution a.btn {
   background-color: var(--color-orange-600);
@@ -504,17 +503,17 @@ body {
 
 .doc .admonitionblock.tip {
   background-color: var(--tip-background-color);
-  color: var(--tip-color);
-  /* border-left-color: var(--tip-color); */
+  border-color: var(--tip-border-color);
 }
 
 .doc .admonitionblock.tip a {
   color: rgba(var(--colors-baltic-50));
+  color: var(--tip-color);
 }
 
-.doc .admonitionblock.tip a:hover {
+/* .doc .admonitionblock.tip a:hover {
   color: var(--color-blue-500);
-}
+} */
 
 .doc .admonitionblock.tip a.btn {
   background-color: rgba(var(--colors-baltic-50));
@@ -522,17 +521,16 @@ body {
 
 .doc .admonitionblock.note {
   background-color: var(--note-background-color);
-  color: var(--note-color);
-  /* border-left-color: var(--note-border-color); */
+  border-color: var(--note-border-color);
 }
 
 .doc .admonitionblock.note a {
-  color: rgba(var(--colors-neutral-60));
+  color: var(--note-color);
 }
 
-.doc .admonitionblock.note a:hover {
+/* .doc .admonitionblock.note a:hover {
   color: rgba(var(--colors-neutral-50));
-}
+} */
 
 .doc .admonitionblock.note a.btn {
   background-color: rgba(var(--colors-neutral-60));
@@ -540,17 +538,16 @@ body {
 
 .doc .admonitionblock.important {
   background-color: var(--important-background-color);
-  color: var(--important-color);
-  /* border-left-color: var(--important-border-color); */
+  border-color: var(--important-border-color);
 }
 
 .doc .admonitionblock.important a {
   color: var(--important-color);
 }
 
-.doc .admonitionblock.important a:hover {
+/* .doc .admonitionblock.important a:hover {
   color: var(--color-purple-500);
-}
+} */
 
 .doc .admonitionblock.important a.btn {
   background-color: var(--color-purple-600);
@@ -1265,54 +1262,46 @@ body {
 }
 
 .doc .tabbed {
-  padding: 13px 0 0;
+  background: var(--body-background);
+  padding: 0;
   margin: 0 -1rem 1.5rem;
-  background: rgba(var(--colors-neutral-15));
-  border: 1px solid rgba(var(--colors-neutral-20));
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+  border: 1px solid var(--color-docs);
+  border-radius: 8px;
 }
 
 .doc .tabbed-tabs {
   display: flex;
+  flex-direction: row;
   margin: 0 1rem;
   padding: 0;
-  /* background: #edf2f7; */
-  /* border-bottom: 1px solid #e6f8ff; */
+  gap: 1rem;
+  border-bottom: 1px solid rgba(var(--theme-light-palette-neutral-border-weak));
 }
 
 .doc .tabbed-tabs .tabbed-tab {
   display: flex;
   flex-grow: 0;
-  list-style-type: none;
   font-size: 0.7rem;
   font-weight: 600;
-  padding: 0.4rem 0.6rem;
-  margin-right: 0.5rem;
-  background: rgba(var(--colors-neutral-20));
-  border: 1px solid rgba(var(--colors-neutral-20));
-  border-top: 3px solid rgba(var(--colors-neutral-30));
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
   border-bottom: none;
-  cursor: default;
+  cursor: pointer;
+  width: fit-content;
+  position: relative;
+  padding: 1rem;
 }
 
-.doc .tabbed-tabs .tabbed-tab--active {
-  margin-bottom: -1px;
-  background: var(--color-white);
-  color: var(--color-docs);
-  border: 1px solid var(--color-docs);
-  border-top: 3px solid var(--color-docs);
-  border-bottom: none;
+.doc .tabbed-tabs .tabbed-tab span.ndl-tab-underline {
+  height: 3px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-top-left-radius: 9999px;
+  border-top-right-radius: 9999px;
 }
 
-.doc .tabbed-container {
-  padding: 1rem;
-  background: #fff;
-  border: 1px solid var(--color-docs);
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+.doc .tabbed-tabs .tabbed-tab--active span.ndl-tab-underline {
+  background: var(--color-docs);
 }
 
 .doc .tabbed-target {
@@ -1395,8 +1384,11 @@ body {
 }
 
 .exampleblock {
-  margin-top: 0.75rem;
-  border: 1px solid var(--example-border-color);
+  background: var(--body-background);
+  padding: 1rem;
+  margin: 0 -1rem 1.5rem;
+  border: 1px solid var(--color-docs);
+  border-radius: 8px;
 }
 
 .doc .exampleblock > .title,
@@ -1404,14 +1396,11 @@ body {
   padding: 0.5rem 0.75rem;
 }
 
-.doc .exampleblock > .content {
-  border-top: 1px solid var(--example-border-color);
-}
-
 .doc .exampleblock > .title {
   color: var(--example-header-font-color);
-  background: var(--example-header-background);
-  margin-bottom: 0;
+  padding: 0.5rem 0;
+  margin: 0 1rem;
+  border-bottom: 1px solid var(--example-border-color);
 }
 
 .tabbed-container > .exampleblock {
diff --git a/src/css/highlight.css b/src/css/highlight.css
index c3d32463..b1a3c77f 100644
--- a/src/css/highlight.css
+++ b/src/css/highlight.css
@@ -1,14 +1,14 @@
 /*! Adapted from the GitHub style by Vasily Polovnyov <vast@whiteants.net> */
 .hljs-comment,
 .hljs-quote {
-  color: rgba(var(--colors-neutral-50));
+  color: rgba(var(--colors-neutral-60));
   font-style: italic;
 }
 
 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-subst {
-  color: rgba(var(--colors-neutral-50));
+  color: rgba(var(--colors-neutral-60));
   font-weight: var(--monospace-font-weight-bold);
 }
 
@@ -17,18 +17,18 @@
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: rgba(var(--colors-baltic-50));
+  color: rgba(var(--colors-baltic-60));
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: rgba(var(--colors-forest-40));
+  color: rgba(var(--colors-forest-50));
 }
 
 .hljs-title,
 .hljs-section,
 .hljs-selector-id {
-  color: rgba(var(--colors-lavender-50));
+  color: rgba(var(--colors-lavender-60));
   font-weight: var(--monospace-font-weight-bold);
 }
 
@@ -38,24 +38,24 @@
 
 .hljs-type,
 .hljs-class .hljs-title {
-  color: rgba(var(--colors-baltic-50));
+  color: rgba(var(--colors-baltic-60));
   font-weight: var(--monospace-font-weight-bold);
 }
 
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: rgba(var(--colors-lavender-40));
+  color: rgba(var(--colors-lavender-60));
   font-weight: normal;
 }
 
 .hljs-regexp,
 .hljs-link {
-  color: rgba(var(--colors-forest-40));
+  color: rgba(var(--colors-forest-50));
 }
 
 .hljs-operator {
-  color: rgba(var(--colors-neutral-50));
+  color: rgba(var(--colors-neutral-60));
 }
 
 .hljs-symbol,
@@ -65,11 +65,11 @@
 
 .hljs-built_in,
 .hljs-builtin-name {
-  color: rgba(var(--colors-baltic-50));
+  color: rgba(var(--colors-baltic-60));
 }
 
 .hljs-meta {
-  color: rgba(var(--colors-neutral-50));
+  color: rgba(var(--colors-neutral-60));
   /* font-weight: var(--monospace-font-weight-bold); */
 }
 
diff --git a/src/css/vars.css b/src/css/vars.css
index 9264b532..91045c98 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -56,7 +56,7 @@
   --colors-mint-60: #2aada5;
   --colors-mint-70: #116161;
   --colors-mint-default: #55f9e2;
-  --body-font-color: rgba(var(--colors-neutral-60));
+  --body-font-color: rgba(var(--colors-neutral-75));
 
   /* end: design system colors  */
 
@@ -174,7 +174,7 @@
   --body-font-size--desktop: 1em; /* 18px */
   --body-font-size--print: 0.9375em; /* 15px */
   --body-line-height: 1.5;
-  --body-font-color: rgba(var(--colors-neutral-70));
+  --body-font-color: rgba(var(--colors-neutral-75));
   --body-font-family: "Public Sans", "Nunito Sans", "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   --body-font-weight-bold: var(--font-weight-semibold);
   --monospace-font-family: "Roboto Mono", monospace;
@@ -247,27 +247,49 @@
      NB: admonitions are dark text on light background
      to use the same colors on labels, reverse the
      background and color */
-  --featured-color: rgba(var(--colors-hibiscus-70));
-  --featured-border-color: rgba(var(--colors-lavender-50));
-  --featured-background-color: rgba(var(--colors-hibiscus-10));
-  --caution-color: rgba(var(--colors-marigold-70));
-  --caution-border-color: rgba(var(--colors-marigold-50));
-  --caution-background-color: rgba(var(--colors-marigold-10));
-  --important-color: rgba(var(--colors-lavender-70));
-  --important-border-color: rgba(var(--colors-lavender-50));
-  --important-background-color: rgba(var(--colors-lavender-10));
-  --tip-color: rgba(var(--colors-forest-70));
-  --tip-border-color: rgba(var(--colors-forest-40));
-  --tip-background-color: rgba(var(--colors-forest-10));
+
+  /* NOTE */
   --note-color: rgba(var(--theme-light-palette-primary-bg-strong));
+  --note-border-color: rgba(var(--theme-light-palette-primary-border-weak));
   --note-background-color: rgba(var(--theme-light-palette-primary-bg-weak));
+
+  /* TIP */
+  --tip-color: rgba(var(--theme-light-palette-success-bg-strong));
+  --tip-border-color: rgba(var(--theme-light-palette-success-border-weak));
+  --tip-background-color: rgba(var(--theme-light-palette-success-bg-weak));
+
+  /* IMPORTANT */
+  --important-color: rgba(var(--colors-lavender-70));
+  --important-border-color: rgba(var(--colors-lavender-20));
+  --important-background-color: rgba(var(--colors-lavender-10));
+
+  /* CAUTION */
+  --caution-color: rgba(var(--theme-light-palette-warning-bg-strong));
+  --caution-border-color: rgba(var(--theme-light-palette-warning-border-weak));
+  --caution-background-color: rgba(var(--theme-light-palette-warning-bg-weak));
+
+  /* WARNING */
   --warning-color: rgba(var(--theme-light-palette-danger-bg-strong));
-  --warning-border-color: rgba(var(--theme-light-palette-danger-bg-strong));
+  --warning-border-color: rgba(var(--theme-light-palette-danger-border-weak));
   --warning-background-color: rgba(var(--theme-light-palette-danger-bg-weak));
-  --mark-background: rgba(var(--theme-light-palette-primary-bg-weak));
+
+  /* FEATURED */
+  --featured-color: rgba(var(--colors-hibiscus-70));
+  --featured-border-color: rgba(var(--colors-lavender-50));
+  --featured-background-color: rgba(var(--colors-hibiscus-10));
+
+  /* EXAMPLE */
+  --example-color: rgba(var(--theme-light-palette-neutral-bg-strong));
+  --example-border-color: rgba(var(--theme-light-palette-neutral-border-weak));
+  --example-background-color: rgba(var(--theme-light-palette-neutral-bg-weak));
+
+  /* Tables in admonitions */
   --admonition-table-border-color: rgba(var(--colors-neutral-70));
   --admonition-table-header-color: rgba(var(--colors-neutral-20));
 
+  /* misc */
+  --mark-background: rgba(var(--theme-light-palette-primary-bg-weak));
+
   /* success */
   --success-color: rgba(var(--theme-light-palette-success-bg-strong));
   --success-background-color: rgba(var(--theme-light-palette-success-bg-weak));
diff --git a/src/js/08-tabs-block.js b/src/js/08-tabs-block.js
index dadb0dae..ea306b90 100644
--- a/src/js/08-tabs-block.js
+++ b/src/js/08-tabs-block.js
@@ -164,7 +164,7 @@ document.addEventListener('DOMContentLoaded', function () {
       var tabs = elements.map(function (element) {
         var lang = element.getAttribute('data-lang')
         var tabText = casedLang(lang)
-        var tabElement = createElement('li', 'tabbed-tab', [document.createTextNode(tabText)])
+        var tabElement = createElement('div', 'tabbed-tab', [document.createTextNode(tabText)])
 
         element.dataset.title = tabText
         element.dataset.lang = lang
@@ -202,7 +202,13 @@ document.addEventListener('DOMContentLoaded', function () {
         })
       }
 
-      tabbedParent.insertBefore(createElement('ul', 'tabbed-tabs', tabs), tabbedContainer)
+      // insert a span into each tab, after the text content
+      tabs.forEach(function (tab) {
+        var span = createElement('span', 'ndl-tab-underline', [])
+        tab.appendChild(span)
+      })
+
+      tabbedParent.insertBefore(createElement('div', 'tabbed-tabs', tabs), tabbedContainer)
 
       parent.removeChild(originalTab)
     })