diff --git a/src/scss/typography.scss b/src/scss/typography.scss
index 2db9285b60c33c58c15507b4f974c2d0513187ce..f4ddbc24d2b4bf9dc27ee2ec7f8eb5da88b09ce6 100644
--- a/src/scss/typography.scss
+++ b/src/scss/typography.scss
@@ -20,6 +20,25 @@ caption {
   @apply gl-text-subtle;
 }
 
+code {
+  @apply gl-py-1 gl-px-2 gl-text-strong gl-bg-strong gl-rounded-base gl-break-words;
+  font-size: 87.5%;
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    @apply gl-text-inherit;
+  }
+}
+
+pre {
+  @apply gl-block gl-text-strong;
+  font-size: 87.5%;
+
+  code {
+    @apply gl-bg-transparent gl-p-0 gl-text-size-reset gl-text-inherit gl-break-normal;
+  }
+}
+
 kbd {
   @apply gl-inline-block gl-text-default gl-bg-subtle gl-border gl-border-b-strong gl-leading-1;
   font-size: 87.5%;
diff --git a/src/tokens/tokens_story.vue b/src/tokens/tokens_story.vue
index 0e58f4200599a71ca2f37bf57b7cd58e8fd976a7..c5e5e4bd96d540c6acb1622f151ed022932484b5 100644
--- a/src/tokens/tokens_story.vue
+++ b/src/tokens/tokens_story.vue
@@ -59,14 +59,14 @@ export default {
         :class="getClasses(token.$value)"
         :style="getStyle(token.$value)"
       >
-        <code v-gl-tooltip :title="token.comment" class="gl-text-inherit">
+        <code v-gl-tooltip :title="token.comment" class="gl-bg-transparent gl-p-0 gl-text-inherit">
           {{ getTokenName(token) }}
         </code>
         <div class="gl-flex gl-items-center gl-gap-3">
           <gl-badge v-if="token.deprecated" v-gl-tooltip :title="token.comment" variant="danger">
             Deprecated
           </gl-badge>
-          <code class="gl-text-inherit">{{ token.$value }}</code>
+          <code class="gl-bg-transparent gl-p-0 gl-text-inherit">{{ token.$value }}</code>
           <gl-color-contrast
             v-if="isHex(token.$value)"
             :foreground="token.$value"
diff --git a/src/tokens/tokens_table.vue b/src/tokens/tokens_table.vue
index a15fed3455173fd77148314ca0fb074c6b1c329d..bafeda98d851ebf964025aafe9cd0b07574d6909 100644
--- a/src/tokens/tokens_table.vue
+++ b/src/tokens/tokens_table.vue
@@ -265,7 +265,7 @@ export default {
       stacked="sm"
     >
       <template #cell(description)="{ item: { name, deprecated, description } }">
-        <code class="gl-text-base gl-text-strong">
+        <code class="gl-bg-transparent gl-p-0 gl-text-base">
           {{ name }}
           <gl-button
             v-gl-tooltip
@@ -288,7 +288,7 @@ export default {
             class="gl-h-5 gl-w-5 gl-rounded-base"
             :style="{ 'background-color': value }"
           ></div>
-          <code class="gl-min-w-0 gl-text-base gl-text-strong">{{ valueLabel }}</code>
+          <code class="gl-min-w-0 gl-bg-transparent gl-p-0 gl-text-base">{{ valueLabel }}</code>
         </div>
       </template>
     </gl-table>
diff --git a/src/tokens/tokens_tailwind_table.vue b/src/tokens/tokens_tailwind_table.vue
index d3626e5ed794afd322a74fd1094d0d695dbac890..a48bd0e7cff68b9d5acad2706eea900831f05841 100644
--- a/src/tokens/tokens_tailwind_table.vue
+++ b/src/tokens/tokens_tailwind_table.vue
@@ -271,7 +271,7 @@ export default {
 
         <ul class="!gl-m-0 gl-flex gl-list-none gl-flex-col !gl-p-0">
           <li>
-            <code class="gl-text-base gl-text-strong">
+            <code class="gl-bg-transparent gl-p-0 gl-text-base">
               <span class="gl-inline-block gl-w-12">Tailwind:</span> {{ className }}
               <gl-button
                 v-gl-tooltip
@@ -285,7 +285,7 @@ export default {
             </code>
           </li>
           <li>
-            <code class="gl-text-base gl-text-strong">
+            <code class="gl-bg-transparent gl-p-0 gl-text-base">
               <span class="gl-inline-block gl-w-12">Figma:</span> {{ figmaName }}
               <gl-button
                 v-gl-tooltip
@@ -299,7 +299,7 @@ export default {
             </code>
           </li>
           <li>
-            <code class="gl-text-base gl-text-strong">
+            <code class="gl-bg-transparent gl-p-0 gl-text-base">
               <span class="gl-inline-block gl-w-12">CSS:</span> {{ cssName }}
               <gl-button
                 v-gl-tooltip
@@ -313,7 +313,7 @@ export default {
             </code>
           </li>
           <li>
-            <code class="gl-text-base gl-text-strong">
+            <code class="gl-bg-transparent gl-p-0 gl-text-base">
               <span class="gl-inline-block gl-w-12">SCSS:</span> {{ scssName }}
               <gl-button
                 v-gl-tooltip
@@ -335,7 +335,7 @@ export default {
             class="gl-border gl-h-5 gl-w-5 gl-rounded-base"
             :style="{ 'background-color': cssValue }"
           ></div>
-          <code class="gl-min-w-0 gl-text-base gl-text-strong">{{ valueLabel }}</code>
+          <code class="gl-min-w-0 gl-bg-transparent gl-p-0 gl-text-base">{{ valueLabel }}</code>
         </div>
       </template>
       <template #cell(value_dark)="{ item: { type, darkValueLabel, cssValue } }">
@@ -345,7 +345,7 @@ export default {
             class="gl-dark-scope gl-border gl-h-5 gl-w-5 gl-rounded-base"
             :style="{ 'background-color': cssValue }"
           ></div>
-          <code class="gl-min-w-0 gl-text-base gl-text-strong">{{ darkValueLabel }}</code>
+          <code class="gl-min-w-0 gl-bg-transparent gl-p-0 gl-text-base">{{ darkValueLabel }}</code>
         </div>
       </template>
     </gl-table>
diff --git a/src/vendor/bootstrap/scss/_code.scss b/src/vendor/bootstrap/scss/_code.scss
index 8876251f2b99a59f72a2587da53f8e766845f564..4a0ff0787a0f97f25b363d0a6b385f132a9a5a24 100644
--- a/src/vendor/bootstrap/scss/_code.scss
+++ b/src/vendor/bootstrap/scss/_code.scss
@@ -1,29 +1,3 @@
-// Inline code
-code {
-  @include font-size($code-font-size);
-  color: $code-color;
-  word-wrap: break-word;
-
-  // Streamline the style when inside anchors to avoid broken underline and more
-  a > & {
-    color: inherit;
-  }
-}
-
-// Blocks of code
-pre {
-  display: block;
-  @include font-size($code-font-size);
-  color: $pre-color;
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    @include font-size(inherit);
-    color: inherit;
-    word-break: normal;
-  }
-}
-
 // Enable scrollable blocks of code
 .pre-scrollable {
   max-height: $pre-scrollable-max-height;
diff --git a/src/vendor/bootstrap/scss/_variables.scss b/src/vendor/bootstrap/scss/_variables.scss
index bca5f56ac8d67f3e0300d38ac885807052f4b57f..714357f60c13980effdb8907bc49465d5f14023a 100644
--- a/src/vendor/bootstrap/scss/_variables.scss
+++ b/src/vendor/bootstrap/scss/_variables.scss
@@ -1124,11 +1124,6 @@ $close-text-shadow:                 0 1px 0 $white !default;
 
 
 // Code
-
-$code-font-size:                    87.5% !default;
-$code-color:                        $pink !default;
-
-$pre-color:                         $gray-900 !default;
 $pre-scrollable-max-height:         340px !default;
 
 
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-accordion-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-accordion-default-1-snap.png
index 79b4d760e5613e69ad4364f50d9033404f771237..f6f805d5f7300422644ec5fec1b595f35f1af279 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-accordion-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-accordion-default-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-fields-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-fields-default-1-snap.png
index 52e2966ac2147f142b2533fb418392f54b4d4a39..d969f3ae0b6e6061a429dcf826ae3617d8356e9a 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-fields-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-fields-default-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-regions-empty-state-slotted-description-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-regions-empty-state-slotted-description-1-snap.png
index d3cc2e9f8955688a44f28a1ab861bb35620b1c2c..90d36fc384092194650ecd1cbd3d95c5369f1e8f 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-regions-empty-state-slotted-description-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-regions-empty-state-slotted-description-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png
index 46f9be026fc261515e7fd1e8117d5c442bf46d61..b97329f325ec2464d37c71f92c6a3e11b20f180e 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png differ