diff --git a/.storybook/constants.ts b/.storybook/constants.ts
index ac927d54ce123..71dc10f42560a 100644
--- a/.storybook/constants.ts
+++ b/.storybook/constants.ts
@@ -1,4 +1,4 @@
-import { Open_Sans } from 'next/font/google';
+import { Open_Sans, IBM_Plex_Mono } from 'next/font/google';
 
 // This defines "execution" modes that Chromatic will run on the each Storybook Story
 // This allows us to test each Story with different parameters
@@ -38,3 +38,12 @@ export const OPEN_SANS_FONT = Open_Sans({
   subsets: ['latin'],
   variable: '--font-open-sans',
 });
+
+// This configures the Next.js Font for IBM Plex Mono
+// We then export a variable and class name to be used
+// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
+export const IBM_PLEX_MONO_FONT = IBM_Plex_Mono({
+  weight: ['600'],
+  subsets: ['latin'],
+  variable: '--font-ibm-plex-mono',
+});
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 204a1046eb0cc..8d889a5c87fd4 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,7 +2,12 @@ import NextImage from 'next/image';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import { SiteProvider } from '../providers/siteProvider';
 import { LocaleProvider } from '../providers/localeProvider';
-import { OPEN_SANS_FONT, STORYBOOK_MODES, STORYBOOK_SIZES } from './constants';
+import {
+  OPEN_SANS_FONT,
+  IBM_PLEX_MONO_FONT,
+  STORYBOOK_MODES,
+  STORYBOOK_SIZES,
+} from './constants';
 import type { Preview, ReactRenderer } from '@storybook/react';
 
 import '../styles/new/index.css';
@@ -20,7 +25,9 @@ const preview: Preview = {
     Story => (
       <SiteProvider>
         <LocaleProvider>
-          <div className={`${OPEN_SANS_FONT.variable}`}>
+          <div
+            className={`${OPEN_SANS_FONT.variable} ${IBM_PLEX_MONO_FONT.variable}`}
+          >
             <Story />
           </div>
         </LocaleProvider>
diff --git a/components/__design__/text.stories.tsx b/components/__design__/text.stories.tsx
index 8c5765eb917a0..7d531dc45ba7d 100644
--- a/components/__design__/text.stories.tsx
+++ b/components/__design__/text.stories.tsx
@@ -21,4 +21,12 @@ export const Anchor: StoryObj = {
   ),
 };
 
+export const InlineCode: StoryObj = {
+  render: () => (
+    <div>
+      This is an example of <code>inline code block</code>
+    </div>
+  ),
+};
+
 export default { title: 'Design System' } as MetaObj;
diff --git a/styles/new/base.css b/styles/new/base.css
index 09a724cc36378..ab647aba0f71f 100644
--- a/styles/new/base.css
+++ b/styles/new/base.css
@@ -4,3 +4,15 @@ a:visited {
   @apply text-green-600
    dark:text-green-400;
 }
+
+code {
+  @apply rounded-[4px]
+    bg-neutral-100
+    px-[4px]
+    font-ibm-plex-mono
+    text-base
+    font-semibold
+    text-neutral-900
+    dark:bg-neutral-900
+    dark:text-white;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index cd9de43d93864..0807fd5231d11 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -111,6 +111,7 @@ export default {
     },
     fontFamily: {
       'open-sans': ['var(--font-open-sans)'],
+      'ibm-plex-mono': ['var(--font-ibm-plex-mono)'],
     },
     extend: {
       boxShadow: {