diff --git a/change/@ni-nimble-components-4335e721-003a-45f5-82fb-8602f6bc2932.json b/change/@ni-nimble-components-4335e721-003a-45f5-82fb-8602f6bc2932.json
new file mode 100644
index 0000000000..103441e022
--- /dev/null
+++ b/change/@ni-nimble-components-4335e721-003a-45f5-82fb-8602f6bc2932.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "Banner spec",
+ "packageName": "@ni/nimble-components",
+ "email": "7282195+m-akinc@users.noreply.github.com",
+ "dependentChangeType": "none"
+}
diff --git a/packages/nimble-components/src/banner/specs/README.md b/packages/nimble-components/src/banner/specs/README.md
new file mode 100644
index 0000000000..6449028bce
--- /dev/null
+++ b/packages/nimble-components/src/banner/specs/README.md
@@ -0,0 +1,198 @@
+# Banner
+
+## Overview
+
+The banner is a component used to display a persistent notification to a user.
+
+### Background
+
+[Design specification](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/29c405f7-08ea-48b6-973f-546970b9dbab/)
+
+[GitHub issue](https://github.com/ni/nimble/issues/305)
+
+### Non-goals
+
+- Arbitrary HTML content
+- A container component that would enforce design constraints on multiple banners displayed together
+- Limiting length of displayed text and/or truncating text with ellipsis
+
+### Features
+
+- Optionally dismissable
+- Optional link or button (only 1) to perform an action/navigation
+- Distinct designs for banners of severity Error, Warning, Info, or Default
+
+### Risks and Challenges
+
+None
+
+### Prior Art/Examples
+
+Refer to examples in the "Some examples of screenshots" section of the [GitHub issue](https://github.com/ni/nimble/issues/305).
+
+---
+
+## Design
+
+The banner is a standalone component that spans the width of its containing element, presenting, from left to right, an icon (dependent on Error/Warning/Info type), an optional title, an optional plaintext message, an optional action button or link, and an optional close control. The banner is intended to display short messages (recommended three lines or fewer) that communicate some persistent state or condition.
+
+In this initial implementation, we will not limit the height of the banner. It will grow to fit the text that it is given.
+
+When the user presses the dismiss button, we will hide the banner (`display:none`) and fire a `toggle` event.
+
+### API
+
+_The key elements of the component's public API surface:_
+
+- _Component Name_: `nimble-banner`
+- _Props/Attrs_:
+ - `open` - whether the banner is visible or not
+ - `prevent-dismiss` - set to hide the dismiss button (attr name taken from Nimble dialog)
+ - `severity` - one of `error`, `warning`, `info`, or undefined (default)
+ - `title-hidden` - set to hide the title text, which should always be provided for a11y reasons
+ - `dismiss-button-label` - a localized label to give the dismiss button (for a11y purposes)
+- _Methods_
+- _Events_
+ - `toggle` - fired when the banner is closed or opened. Event has `newState` and `oldState`.
+- _Slots_
+ - `title` - for the title/header text
+ - (default) - for the primary message text
+ - `action` - for the action button/link
+- _CSS Classes and CSS Custom Properties that affect the component_
+
+We only formally support spans of text in the `title` and default slots, but we will not explicitly prevent other HTML from being slotted there. The `action` slot only supports a single `nimble-button` or `nimble-anchor`, but again, we will not do anything to enforce this.
+
+### Examples
+
+```html
+
+ License Expiring
+ Your license will expire at the end of the month. To renew, go to
+ ni.com/renew.
+ Renew my license
+
+```
+
+```html
+
+ Authentication Failed
+ Could not authenticate. Please re-enter your credentials from Settings.
+ Open Settings
+
+```
+
+```html
+
+ Demo mode message
+ You are operating in demo mode. Some features will not be available.
+
+```
+
+### Anatomy
+
+
+```html
+
+ ${when(x => x.severity === 'error', html`
+ `)}
+ ${when(x => x.severity === 'warning', html`
+ `)}
+ ${when(x => x.severity === 'info', html`
+ `)}
+
+
+ ${when(x => !x.titleHidden, html`
+ `)}
+
+
+
+
+
+ ${when(x => !x.preventDismiss), html`
+
+
+ ${x => x.dismissButtonLabel}
+ ` )}
+
+