diff --git a/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs
index 8066b55cfa..a4414b3293 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs
+++ b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs
@@ -2,7 +2,7 @@
   <div class="flex h-24 p-6 overflow-x-auto space-x-12">
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Status</div>
       <div class="flex items-center">
         <Peerings::Badge @peering={{@peering}} />
@@ -10,14 +10,15 @@
     </div>
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Latest heartbeat</div>
       <div class="flex items-center">
         {{#if @peering.LastHeartbeat}}
           {{#let (smart-date-format @peering.LastHeartbeat) as |smartDate|}}
             <FlightIcon
               @name="activity"
-              class="mr-0.5 text-hds-foreground-faint fill-current"
+              @color="var(--token-color-foreground-faint)"
+              class="mr-0.5"
             />
             {{#if smartDate.isNearDate}}
               <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
@@ -32,7 +33,7 @@
     </div>
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foregrouny-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Latest receipt</div>
       <div class="flex items-center">
         {{#if @peering.LastReceive}}
@@ -50,7 +51,7 @@
     </div>
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Latest send</div>
       <div class="flex items-center">
         {{#if @peering.LastSend}}
diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs
index 10af30503c..86a020f994 100644
--- a/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs
+++ b/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs
@@ -53,10 +53,12 @@
                     @items={{search.data.items}}
                     as |service index|
                   >
-                    <li class="px-3 h-12 border-b border-hds-border-primary">
+                    <li
+                      class="px-3 h-12 hds-border-primary border-t-0 border-l-0 border-r-0"
+                    >
                       <a
                         data-test-service-name
-                        class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"
+                        class="hds-typography-display-300 hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"
                         href={{href-to
                           "dc.services.show.index"
                           service.Name
diff --git a/ui/packages/consul-ui/app/styles/tailwind.scss b/ui/packages/consul-ui/app/styles/tailwind.scss
index b5c61c9567..71a73a8262 100644
--- a/ui/packages/consul-ui/app/styles/tailwind.scss
+++ b/ui/packages/consul-ui/app/styles/tailwind.scss
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .consul-surface-nav {
+    background: var(--token-color-palette-neutral-700);
+  }
+}
diff --git a/ui/packages/consul-ui/docs/hds.mdx b/ui/packages/consul-ui/docs/hds.mdx
index 5e67bc7633..c9efb4ea12 100644
--- a/ui/packages/consul-ui/docs/hds.mdx
+++ b/ui/packages/consul-ui/docs/hds.mdx
@@ -4,50 +4,50 @@ title: Hashicorp Design System
 
 # Hashicorp Design System
 
-The application integrates setup that make it possible to use the [Hashicorp Design System (HDS)](https://github.com/hashicorp/design-system) in the application.
+The application integrates setup that make it possible to use the [Hashicorp Design System (HDS)](https://github.com/hashicorp/design-system) in the application. The application also
+bundles [TailwindCSS](https://tailwindcss.com/) to follow a utility-based CSS approach that mixes well with HDS utility classes. Tailwind is expected to be used
+as a supplement to HDS's utility classes, and should mainly be used for layouting.
 
 ## Design Tokens
 
-HDS ships a set of [design tokens](https://design-system-components-hashicorp.vercel.app/foundations/tokens), which are implemented as CSS custom properties.
-To make it easy to work with these design tokens without having to work with verbose CSS properties all over the place, we have setup a [TailwindCSS](https://tailwindcss.com/)-configuration that makes the color tokens
-available via functional [utility classes](https://tailwindcss.com/docs/customizing-colors).
-
 ### Colors
 
-You can work with any color from the HDS by prefixing colors with the `hds-`-prefix. The `hds-`-prefix makes it easy to see what classes are auto-generated from HDS. When we wanted to color a header tag with the `consul-brand`-color we could do it like this for example:
+To make sure we follow HDS-guidelines, we disabled Tailwind's color utilities completely. Instead of relying on Tailwind for colors, you should be working with the colors from HashiCorp-Design-System and follow the [guidance in the docs](https://design-system-components-hashicorp.vercel.app/foundations/colors) on how to use them:
 
 ```hbs preview-template
-<h2 class="text-hds-consul-brand">
+<h2 class='hds-foreground-strong'>
   HDS is awesome
 </h2>
 ```
 
-Regular tailwindCss colors aren't available. You can only use colors defined in HDS with this pattern.
+Regular TailwindCSS colors aren't available.
 
 ```hbs preview-template
-<h2 class="text-red-400">
+<h2 class='text-red-400'>
   TailwindCSS colors won't work
 </h2>
 ```
 
-### Other tokens
+### HDS core styles
 
-Other tokens than colors are available via the provided `hds`-[helper-classes](https://design-system-components-hashicorp.vercel.app/foundations/typography) made available via `@hashicorp/design-system-tokens`.
+HDS core styles are available via the provided `hds`-[utility-classes](https://design-system-components-hashicorp.vercel.app/foundations/typography) made available via `@hashicorp/design-system-tokens`.
 
-You for example would work with HDS' typography tokens in this way:
+You for example would work with HDS' typography styles in this way:
 
 ```hbs preview-template
-<p class="hds-typography-display-400">
+<p class='hds-typography-display-400'>
   A paragraph styled via HDS.
 </p>
 ```
 
+Because HDS provides utility classes for core styles, you should not be using Tailwind classes to customize core styles like typography.
+
 ### Combining HDS and Tailwind
 
-Because we are working with a customized tailwind configuration it is easy to combine HDS design tokens with regular tailwind utility classes:
+Tailwind is used as a supplement to what HDS provides. You will be using Tailwind for layouting and other utility functionality that isn't provided by HDS.
 
 ```hbs preview-template
-<button type="button" class="text-hds-consul-brand underline transform scale-100 transition ease-in-out hover:text-hds-consul-foreground hover:scale-125">
+<button type='button' class='underline transform scale-100 transition ease-in-out hover:scale-125'>
   Hover me
 </button>
 ```
@@ -57,46 +57,58 @@ Because we are working with a customized tailwind configuration it is easy to co
 All components from Hashicorp Design System are available for you to use. Here's an example that shows how to implement a navigation bar with HDS and Tailwind in combination.
 
 ```hbs preview-template
-<nav class="h-16 w-full bg-hds-foreground-strong flex items-center justify-between px-4 hds-font-weight-medium">
-  <ul class="flex items-center">
+<nav
+  class='h-16 w-full consul-surface-nav flex items-center justify-between px-4 hds-font-weight-medium'
+>
+  <ul class='flex items-center'>
     <li>
       {{! should probably be a context-switcher }}
       <FlightIcon
-        @name="menu"
-        class="fill-current cursor-pointer text-hds-neutral-200"
+        @name='menu'
+        @color='var(--token-color-foreground-high-contrast)'
+        class='cursor-pointer'
       />
     </li>
     <li>
-      <FlightIcon
-        @name="consul"
-        class="fill-current ml-4 h-8 w-8 text-hds-consul-brand"
-      />
+      <FlightIcon @name='consul' class='ml-4 h-8 w-8' @color='var(--token-color-consul-brand)' />
     </li>
   </ul>
-  <ul class="flex items-center">
+  <ul class='flex items-center space-x-2'>
     <li>
       <Hds::Dropdown as |dd|>
-        <dd.ToggleButton
-          @text="Help"
-          @color="secondary"
-          class="text-hds-neutral-300"
-        />
-        <dd.Title @text="Consul HDS" />
-        <dd.Interactive @text="Documentation" @icon="docs-link" />
-        <dd.Interactive @text="HashiCorp Learn" @icon="learn-link" />
+        <dd.ToggleButton @text='Help' />
+        <dd.Title @text='Consul HDS' />
+        <dd.Interactive @text='Documentation' @icon='docs-link' />
+        <dd.Interactive @text='HashiCorp Learn' @icon='learn-link' />
         <dd.Separator />
-        <dd.Interactive @text="Provide Feedback" @icon="github" />
+        <dd.Interactive @text='Provide Feedback' @icon='github' />
       </Hds::Dropdown>
     </li>
     <li>
-      <Hds::Button
-        @text="Settings"
-        @color="tertiary"
-        @icon="settings"
-        @iconPosition="trailing"
-        class="text-hds-neutral-300"
+      <Hds::Link::Standalone
+        @href='https://hashicorp.com'
+        @icon='settings'
+        @iconPosition='trailing'
+        @size='medium'
+        @text='Settings'
       />
     </li>
   </ul>
 </nav>
 ```
+
+Please notice the custom `consul-surface-nav`-utility class. This class has been created because at the moment of writing,
+there wasn't a `hds-surface-` that matched what we needed for this navigation header. If you run into situations like
+that, you can add a `consul-`-utility class to the `utilities`-layer in `tailwind.scss`.
+
+```css
+// consul-ui/app/styles/tailwind.scss
+@layer utilities {
+  .consul-surface-nav {
+    background: var(--token-color-palette-neutral-700);
+  }
+  // ...
+}
+```
+
+This should only be used as a last resort and you should stick to `hds-`-utilities whenever possible.
diff --git a/ui/packages/consul-ui/tailwind.config.js b/ui/packages/consul-ui/tailwind.config.js
index 69ae42f3e4..1b9f46ec4c 100644
--- a/ui/packages/consul-ui/tailwind.config.js
+++ b/ui/packages/consul-ui/tailwind.config.js
@@ -1,44 +1,9 @@
-/**
- * A function that parses the `tokens.css`-file from `@hashicorp/design-system-tokens`
- * and creates a map out of it that can be used to build up a color configuration
- * in `tailwind.config.js`.
- *
- * @param {string} tokensPath - The path to `tokens.css` from `@hashicorp/design-system-tokens`
- * @returns { { [string]: string } } An object that contains color names as keys and color values as values.
- */
-function colorMapFromTokens(tokensPath) {
-  const css = require('css');
-  const path = require('path');
-  const fs = require('fs');
-
-  const hdsTokensPath = path.join(__dirname, tokensPath);
-
-  const tokensFile = fs.readFileSync(hdsTokensPath, {
-    encoding: 'utf8',
-    flag: 'r',
-  });
-
-  const ast = css.parse(tokensFile);
-  const rootVars = ast.stylesheet.rules.filter((r) => r.type !== 'comment')[0];
-
-  // filter out all colors and then create a map out of them
-  const vars = rootVars.declarations.filter((d) => d.type !== 'comment');
-  const colorPropertyNameCleanupRegex = /^--token-color-(palette-)?/;
-  const colors = vars.filter((d) => d.property.match(/^--token-color-/));
-
-  return colors.reduce((acc, d) => {
-    acc[d.property.replace(colorPropertyNameCleanupRegex, 'hds-')] = d.value;
-    return acc;
-  }, {});
-}
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['../**/*.{html.js,hbs,mdx}'],
   theme: {
-    colors: colorMapFromTokens(
-      '../../node_modules/@hashicorp/design-system-tokens/dist/products/css/tokens.css'
-    ),
+    // disable all color utilities - we want to use HDS instead
+    colors: {},
     extend: {},
   },
   plugins: [],