diff --git a/_sass/spec/base.scss b/_sass/spec/base.scss
index f7df5e0d..5fbde206 100644
--- a/_sass/spec/base.scss
+++ b/_sass/spec/base.scss
@@ -499,6 +499,12 @@ li.task-list-item .task-list-item-checkbox {
  */
 
 $CALLOUT_VARIANTS: (
+  'neutral': (
+    'bg': #f6f8fa,
+    'border': #e1e4e8,
+    'color': inherit,
+    'icon': '',
+  ),
   'info': (
     'bg': #dbedff,
     'border': rgba(4, 66, 137, 0.2),
@@ -529,6 +535,21 @@ $CALLOUT_VARIANTS: (
   ),
 );
 
+@mixin calloutVariantProps($variant, $props) {
+  background-color: var(
+    --primer-spec-callout-#{$variant}-bg-color,
+    map-get($props, 'bg')
+  );
+  border-color: var(
+    --primer-spec-callout-#{$variant}-border-color,
+    map-get($props, 'border')
+  );
+  color: var(
+    --primer-spec-callout-#{$variant}-text-color,
+    map-get($props, 'color')
+  );
+}
+
 .primer-spec-callout {
   position: relative;
   padding: 20px 16px;
@@ -536,20 +557,15 @@ $CALLOUT_VARIANTS: (
   border-width: 1px;
   border-radius: 6px;
 
+  // By default, use the neutral callout styles
+  @include calloutVariantProps(
+    'neutral',
+    map-get($CALLOUT_VARIANTS, 'neutral')
+  );
+
   @each $variant, $props in $CALLOUT_VARIANTS {
     &.#{$variant} {
-      background-color: var(
-        --primer-spec-callout-#{$variant}-bg-color,
-        map-get($props, 'bg')
-      );
-      border-color: var(
-        --primer-spec-callout-#{$variant}-border-color,
-        map-get($props, 'border')
-      );
-      color: var(
-        --primer-spec-callout-#{$variant}-text-color,
-        map-get($props, 'color')
-      );
+      @include calloutVariantProps($variant, $props);
     }
   }
 }
diff --git a/demo/callouts.md b/demo/callouts.md
index 42b44806..8a854c9b 100644
--- a/demo/callouts.md
+++ b/demo/callouts.md
@@ -34,8 +34,9 @@ int main() {
 </div>
 ```
 
-Primer Spec offers four variants of callouts:
+Primer Spec offers five variants of callouts:
 
+- `neutral`
 - `info`
 - `warning`
 - `danger`
@@ -43,6 +44,22 @@ Primer Spec offers four variants of callouts:
 
 See below for examples of each of these callouts.
 
+### `neutral`
+
+<div class="primer-spec-callout" markdown="1">
+_**Pro tip:** Use this to create a simple note box. It's weaker than `info`, but offers stronger emphasis than main body text._
+</div>
+
+<details markdown="1">
+  <summary><code>neutral</code> source</summary>
+  
+  ```markdown
+<div class="primer-spec-callout" markdown="1">
+  _**Pro tip:** Use this to create a simple note box. It's weaker than `info`, but offers stronger emphasis than main body text._
+</div>
+  ```
+</details>
+
 ### `info`
 
 <div class="primer-spec-callout info" markdown="1">
diff --git a/src_js/subthemes/Subtheme.ts b/src_js/subthemes/Subtheme.ts
index ef1ac0e5..f0648281 100644
--- a/src_js/subthemes/Subtheme.ts
+++ b/src_js/subthemes/Subtheme.ts
@@ -44,6 +44,9 @@ export const SUBTHEME_VARS = [
   '--main-blockquote-text-border',
   '--main-header-border-bottom-color',
 
+  '--primer-spec-callout-neutral-bg-color',
+  '--primer-spec-callout-neutral-text-color',
+  '--primer-spec-callout-neutral-border-color',
   '--primer-spec-callout-info-bg-color',
   '--primer-spec-callout-info-text-color',
   '--primer-spec-callout-info-border-color',
diff --git a/src_js/subthemes/definitions/common_dark_theme_colors.ts b/src_js/subthemes/definitions/common_dark_theme_colors.ts
index 83ff8491..eda55b17 100644
--- a/src_js/subthemes/definitions/common_dark_theme_colors.ts
+++ b/src_js/subthemes/definitions/common_dark_theme_colors.ts
@@ -19,6 +19,9 @@ export default {
   '--main-blockquote-text-border': '#3b434b',
   '--main-header-border-bottom-color': BORDER_LINE_COLOR,
 
+  '--primer-spec-callout-neutral-bg-color': 'rgba(22, 27, 34, 0.8)',
+  '--primer-spec-callout-neutral-text-color': MAIN_TEXT_COLOR,
+  '--primer-spec-callout-neutral-border-color': 'rgb(48, 54, 61)',
   '--primer-spec-callout-info-bg-color': 'rgba(56, 139, 253, 0.1)',
   '--primer-spec-callout-info-text-color': '#79c0ff',
   '--primer-spec-callout-info-border-color': 'rgba(56, 139, 253, 0.4)',
diff --git a/src_js/subthemes/definitions/xcode_civic.theme.ts b/src_js/subthemes/definitions/xcode_civic.theme.ts
index 082d6a53..dab114af 100644
--- a/src_js/subthemes/definitions/xcode_civic.theme.ts
+++ b/src_js/subthemes/definitions/xcode_civic.theme.ts
@@ -41,6 +41,7 @@ const xcode_dark_theme_vars: SubthemeDefinitionType = {
     '--tt-border-radius': '3px',
     '--main-header-border-bottom-color': BORDER_LINE_COLOR,
 
+    '--primer-spec-callout-neutral-text-color': 'black',
     '--primer-spec-callout-info-text-color': 'black',
     '--primer-spec-callout-warning-text-color': 'black',
     '--primer-spec-callout-danger-text-color': 'black',