diff --git a/contributor-docs/CONTRIBUTING.md b/contributor-docs/CONTRIBUTING.md
index 55ac6349fb2..70ad42fb4ef 100644
--- a/contributor-docs/CONTRIBUTING.md
+++ b/contributor-docs/CONTRIBUTING.md
@@ -29,7 +29,7 @@ If you're looking for something to work on, a great place to start is our issues
 
 A common question asked about Primer Components is how to know what should be added to Primer Components and what is best left as a local component in a consuming application. Though there are no hard & fast rules about what can and cannot be added to Primer Components, here are a few things we take into consideration:
 
-- Is the new feature an existing pattern in Primer CSS or related to UI built at GitHub? Primer Components is first and foremost a library for building UI at GitHub - patterns that aren't currently being used in GitHub UI (either on github.com or in a GitHub owned project outside of github.com) probably shouldn't be added to Primer Components. Exceptions to this could be helper components that don't necessarily render UI but help with the development process (like `Flex`, `Grid`, or `Box`).
+- Is the new feature an existing pattern in Primer CSS or related to UI built at GitHub? Primer Components is first and foremost a library for building UI at GitHub - patterns that aren't currently being used in GitHub UI (either on github.com or in a GitHub owned project outside of github.com) probably shouldn't be added to Primer Components. Exceptions to this could be helper components that don't necessarily render UI but help with the development process (like `Box`).
 
 - Does the proposed component get used in more than one or two places across GitHub UI? A component that's only meant to be used in one place and doesn't have potential to be reused in many places probably should exist as a local component. An example of something like this might be a component that renders content specific to a single GitHub product.
 
diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx
index a5a55aa63a6..1a0454b74da 100644
--- a/docs/content/Autocomplete.mdx
+++ b/docs/content/Autocomplete.mdx
@@ -374,7 +374,11 @@ const InOverlayWithCustomScrollContainerRef = () => {
       height="xsmall"
       focusTrapSettings={{initialFocusRef: inputRef}}
       side="inside-top"
-      renderAnchor={props => <ButtonInvisible {...props}>Pick branches</ButtonInvisible>}
+      renderAnchor={props => (
+        <Button variant="invisible" {...props}>
+          Pick branches
+        </Button>
+      )}
     >
       <FormControl>
         <FormControl.Label visuallyHidden>Pick branches</FormControl.Label>
diff --git a/docs/content/Header.mdx b/docs/content/Header.mdx
index c90371efe72..8119373bbbd 100644
--- a/docs/content/Header.mdx
+++ b/docs/content/Header.mdx
@@ -16,7 +16,7 @@ All items directly under the Header component should be a `Header.Item` componen
 <Header>
   <Header.Item>
     <Header.Link href="#" fontSize={2}>
-      <StyledOcticon icon={MarkGithubIcon} size={32} mr={2} />
+      <StyledOcticon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
       <span>GitHub</span>
     </Header.Link>
   </Header.Item>
diff --git a/docs/content/core-concepts.md b/docs/content/core-concepts.md
index 8180a7dc998..2f3f2b8302c 100644
--- a/docs/content/core-concepts.md
+++ b/docs/content/core-concepts.md
@@ -45,7 +45,7 @@ Pattern components are components that are made up of several building block com
 
 - Helper Components
 
-Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components.
+Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. An example of a helper component is `Box`.
 
 ## The `as` prop
 
diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md
index b4a857c30c3..6e2f2da5e49 100644
--- a/docs/content/getting-started.md
+++ b/docs/content/getting-started.md
@@ -18,12 +18,12 @@ You can now import Primer React from the main package module:
 
 ```javascript
 // using import syntax
-import {Box, Flex} from '@primer/react'
+import {Box} from '@primer/react'
 ```
 
 ```javascript
 // using require syntax
-const {Box, Flex} = require('@primer/react')
+const {Box} = require('@primer/react')
 ```
 
 ### Polyfills & Browser Support
@@ -41,13 +41,11 @@ Module bundlers that use ECMAScript modules (ESM) will automatically tree-shake
 ```javascript
 // using import syntax
 import Box from '@primer/react/lib/Box'
-import Flex from '@primer/react/lib/Flex'
 ```
 
 ```javascript
 // using require syntax
 const Box = require('@primer/react/lib/Box')
-const Flex = require('@primer/react/lib/Flex')
 ```
 
 Note that the modules in the `lib` folder are CommonJS-style modules; if you're using ESM and a compatible module bundler, importing files individually from `lib` provides no benefit.
@@ -59,8 +57,8 @@ Primer React ships with a few libraries labeled as peer dependencies. These libr
 Primer React requires the following libraries to be installed along with it:
 
 - `styled-components` at version 4.0.0 or higher
-- `react` at versions 16.8.0 or higher
-- `react-dom` at versions 16.8.0 or higher
+- `react` at versions 17.x or higher
+- `react-dom` at versions 17.x or higher
 
 ## ThemeProvider
 
diff --git a/docs/content/philosophy.md b/docs/content/philosophy.md
index e736ea90373..8cbe6ac77c5 100644
--- a/docs/content/philosophy.md
+++ b/docs/content/philosophy.md
@@ -3,21 +3,21 @@ title: Primer React Philosophy
 ---
 
 ## Presentational Components
- We are focusing primarily on presentational components that help standardize common design patterns. Primer React components don't handle fetching and submitting data to/from APIs. If you would like to handle data in a Primer Component, feel free to create a wrapper around the Primer Component to do so.
+
+We are focusing primarily on presentational components that help standardize common design patterns. Primer React components don't handle fetching and submitting data to/from APIs. If you would like to handle data in a Primer Component, feel free to create a wrapper around the Primer Component to do so.
 
 ## Assume that people will break the rules, provide safe ways for them to do so
-While we aim to standardize design in Primer React, we also provide some flexibility with constraint-based props. We offer system props via [styled-system](https://github.com/styled-system/styled-system) to allow users of the components to make small customizations, such as color and spacing, using values from the theme. Users also have the option to override the theme with a theme of their own.
 
+While we aim to standardize design in Primer React, we also provide additional styling flexibility through the [`sx` prop](/overriding-styles). This enables small customizations to color and spacing, using values from the theme. Users also have the option to override the theme with a theme of their own.
 
 ## Pattern Components vs Helper Components
 
 Our components can roughly be categorized into two different component types:
 
-
 - Pattern Components
 
 Pattern components help us repeat commonly used UI patterns and interactions in order to maintain our brand and provide a great user experience. Some examples of pattern components are `Button`, `Avatar`, or `Label`.
 
 - Helper Components
 
-Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components.
+Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. An example of a helper component is `Box`.
diff --git a/docs/content/system-props.mdx b/docs/content/system-props.mdx
index 42dbb7bf8a3..4c55d9ab583 100644
--- a/docs/content/system-props.mdx
+++ b/docs/content/system-props.mdx
@@ -20,7 +20,7 @@ All Primer React components have access to the `as` prop, provided by [styled-co
 
 For example, if you wanted to add some flex utilities to the `Text` component, you could do:
 
-```jsx live
+```jsx live deprecated
 <Text as={Flex}>Hello!</Text>
 ```
 
diff --git a/docs/content/theming.md b/docs/content/theming.md
index f5466afc3ea..94694d31730 100644
--- a/docs/content/theming.md
+++ b/docs/content/theming.md
@@ -50,7 +50,7 @@ Some components may break if your custom theme does not include all the same key
 
 ## Referencing theme values
 
-You can reference theme values in your application using [system props](/system-props), the [`sx` prop](/overriding-styles), the `themeGet` function, or the `useTheme` hook.
+You can reference theme values in your application using the [`sx` prop](/overriding-styles), the `themeGet` function, or the `useTheme` hook.
 
 <Note variant="warning">
 
diff --git a/src/deprecated/DropdownMenu/DropdownButton.tsx b/src/deprecated/DropdownMenu/DropdownButton.tsx
index fd85b7a26b0..187f7f80a5a 100644
--- a/src/deprecated/DropdownMenu/DropdownButton.tsx
+++ b/src/deprecated/DropdownMenu/DropdownButton.tsx
@@ -5,6 +5,9 @@ import StyledOcticon from '../../StyledOcticon'
 
 export type DropdownButtonProps = ButtonProps
 
+/**
+ * @deprecated Use Button with Octicons instead. See https://primer.style/react/drafts/Button2#appending-an-icon for more details.
+ */
 export const DropdownButton = React.forwardRef<HTMLElement, React.PropsWithChildren<DropdownButtonProps>>(
   ({children, ...props}: React.PropsWithChildren<DropdownButtonProps>, ref): JSX.Element => (
     <Button ref={ref} type="button" {...props}>