diff --git a/content/components/blankslate.mdx b/content/components/blankslate.mdx
new file mode 100644
index 000000000..bbc215a6d
--- /dev/null
+++ b/content/components/blankslate.mdx
@@ -0,0 +1,271 @@
+---
+title: Blankslate
+status: Beta
+---
+
+import {Grid, Flex, Box, Button, ButtonOutline, Heading, Label, LabelGroup, Link} from '@primer/components'
+
+
+ A Blankslate is a placeholder for areas where no data or content is present. It is primarily used for feature onboarding and/or as an empty state calling for a user to populate the current view by performing a specific action.
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Anatomy
+
+An action list can be composed of:
+
+- Action list items
+- Item dividers
+- Section headers (subtle or filled styles)
+- Section dividers (subtle or filled styles)
+
+
+
+
+
+## Options
+
+
+
+
+
+
+
+
+ Sizes
+ Action list items support three different sizes: small, medium, and large. The small size is the default and most common option. Medium sizes work well for relaxed local navigation, while large sizes can support items that need more breathing room.
+ Sizes only grow vertically. This behavior keeps the content aligned among items, and retains horizontal space for density.
+ On touch devices, the large size is used at all times to ensure usability when tapping.
+ Be cautious when mixing different sizes in the same list to avoid inconsistency.
+
+
+
+
+
+
Use leading visuals to represent system sections, features, or options.
+
+
+
+
Use leading visuals in important menu items.
+
+
+
+
Use leading visuals to represent content types.
+
+
+
+
+ Leading visual
+ Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area.
+ When listing system sections, features, or options, use leading visuals to improve the items' scannability. In user-generated objects, they can help to indicate the item's content type and status.
+ Depending on the context, displaying a leading visual may not be necessary. For example, a list of branches in a select panel may not need repeated icons if the surrounding UI provides enough hints about its content type.
+
+
+
+
+
+
A right arrow as a trailing visual indicates there are more options to choose after selecting an item.
+
+
+
+
Trailing text with custom styling to indicate diff change.
+
+
+
+
+ Trailing visual and trailing text
+ Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does.
+ Note these side visuals don't have dedicated interaction targets.
+
+
+Use an [`arrow-right`](https://primer.style/octicons/arrow-right-16) octicon in menus to indicate the action will open more options, such as in a nested context. Use a [`pencil`](https://primer.style/octicons/pencil-16) octicon to indicate the item is going to be edited after clicking it.
+
+
+ Custom trailing elements are supported, such as counters, labels, and other custom visuals that may help identify the item.
+ When using a trailing text for displaying keyboard shortcuts, always confirm the characters match with the user's operating system. For example, to indicate a bold action in a Markdown toolbar, use "Ctrl+B" on Linux and Windows, and "⌘B" on Mac. See reference for Mac keyboard glyphs.
+
+
+
+
+
+
Single-selection with block description using item dividers for increased visibility.
+
+
+ Item dividers
+ Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present.
+ When considering whether to use item dividers, make sure they truly make the presented information easier to parse, instead of only increasing visual clutter.
+ When using item dividers, increasing the action list item size may also help with legibility.
+
+
+
+
+
+
+
+ Selection states
+
+
+Action list items can be selected. Single selections are represented with a [`check`](https://primer.style/octicons/check-16) octicon, while multiple selections are represented with a checkbox component. These selection visuals are always placed at the beginning of the item.
+
+
+ When listing selectable items alongside non-selectable items in a menu, use dividers to differentiate between the item types.
+ Don't mix different types of selections in the same list.
+
+
+
+
+
+
+
+ Danger items
+ An action list item can have a special "danger" style, to be used in cases that require extra attention from the user.
+ For destructive or irremediable actions, show a confirmation dialog for extra friction. If the action is not destructive, present the user a way to undo the action instead of asking for confirmation. Never use a warning when you mean undo.
+ Place danger items at the end of the list.
+
+
+
+## Accessibility considerations
+- All text must have a a contrast ratio equal to or greater than 4.5:1
+- Visuals used should have a contrast ratio equal to or greater than 3:1
+- The heading should be concise and informative
+- The action link(s) must be descriptive, using language that informs the user where they will be taken, for example “Create SSH key” and “Learn more about SSH keys”.
+
+
+
+### In overlays
+
+
+
+
+
+
+
+
+ Action menu
+
+
+Action menus are used for disambiguation, navigation, or to display secondary options. They appear when users interact with buttons, actions, or other controls.
+
+[Primer React implementation](https://primer.style/react/ActionMenu)
+
+
+
+
+
+
+
+
+
+ Dropdown menu
+
+
+Dropdown menus are used for making a single selection among a small list of options. The list is usually predefined with system values, but in some cases it can include user-provided data when those are known not to grow into too many items.
+
+[Primer React implementation](https://primer.style/react/DropdownMenu)
+
+
+
+
+
+
+
+
+
+ Select panel
+
+
+Select panels allow manipulating long lists of options, with filtering and other advanced interactions. They can be used for single or multi-selection.
+
+[Primer React implementation](https://primer.style/react/SelectPanel)
+
+
+
+
diff --git a/content/ui-patterns/empty-states.mdx b/content/ui-patterns/empty-states.mdx
deleted file mode 100644
index 335ecacdf..000000000
--- a/content/ui-patterns/empty-states.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Empty states
----
-
-import {Flex, Box, Text, BorderBox} from '@primer/components'
-
-Empty states are used to fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature. These guidelines demonstrate best practices for using the Blankslate component and designing empty states. If you're looking for guidelines on implementation, please refer to [Primer CSS](https://primer.style/css/components/blankslate).
-
-## The Blankslate component
-The Blankslate is made up of several elements that work together to inform the user about a feature and how to proceed forward. Below are the different elements of the component and how to modify them.
-
-
-
-### Graphic
-The graphic can bring delight, preview an interface element, or represent the goal of the feature. Graphics should be placed intentionally and with thought about the intention of the content. Graphics also differ in meaning and appeal to the user, which is why the Blankslate component has multiple variations. These variations are outlined later on this page.
-
-### Primary Text
-Use primary text to explain the purpose of the empty state, help users feel comfortable to engage with the content, or begin a feature flow. Primary text should sound welcoming, human, and convey the intention of the feature.
-
-### Secondary text
-This optional text is used to inform the user about the feature in more detail. Secondary text should be brief and non-redundant if possible. From the text, users should be able to understand the general purpose of the feature and how it may help them accomplish a goal.
-
-### Primary action
-Blankslates can and are encouraged to use one primary action. This button should lead to a feature or component creation flow. Button copy should be kept brief and descriptive. If a button requires further specification, consider adding an Octicon.
-
-### Secondary action
-Secondary actions are optional and are represented by a text link located below the primary action button. A secondary action is used to direct a user to additional content about the feature. This might look like "[Learn more about X](#)" or "[Check out the guide on X](#)" or simply "[Learn more](#)".
-
-### Border
-The border is invisible by default, but can be added to help define the structure of the Blankslate component when needed. This can be particularly helpful in page layouts where the Blankslate is not the only content on the screen. For implementation, check out the [Primer CSS Blankslate component](https://primer.style/css/components/blankslate#add-border).
-
-## Variations
-Empty states have multiple variations that can be used in different contexts.
-
-### GitHub marketing icons
-[GitHub marketing icons](https://ghicons.github.com/) can be used to represent the feature where the Blankslate is found. Blankslates should default to using a GitHub marketing icon for graphic elements.
-
-
-
-### Code block
-Blankslates that use a list of steps or offer instructions in the format of code to get started with a feature can insert a `code` block. This is the case for getting started with packages in GitHub:
-
-
-
-## Content and copy
-Empty states should explain features _in addition_ to conveying intention. In the example below, the primary text is used to provide a welcome invitation to creating a positive community while the secondary text supports this intent by informing the user on how to do this by providing a code of conduct.
-
-
-
-## First time user experiences
-For first time user experiences, use illustration Blankslates to playfully engage the user and introduce the Octocat as a symbol of GitHub. Primary text should welcome the user to the platform and feature. Secondary text should seek to educate the user, but at a simpler, less-technical level.
-
-
diff --git a/content/ui-patterns/feature-onboarding.mdx b/content/ui-patterns/feature-onboarding.mdx
index 1129aeb36..42e697083 100644
--- a/content/ui-patterns/feature-onboarding.mdx
+++ b/content/ui-patterns/feature-onboarding.mdx
@@ -263,11 +263,11 @@ Use inline banners in a page with multiple steps or actions.
-->
-### Empty states
+### Blankslates
-Use empty states as an integrated way to onboard users to new features. Read more about [empty states](/ui-patterns/empty-states).
+Use blankslates as an integrated way to onboard users to new features. Read more about [blankslates](/components/blankslate).
-**In-product marketing empty state**
+**In-product marketing blankslate**
For special occasions, a first time experience may be more unique than the typical blank state. Take a more branded approach to engage and guide the user through complex experiences. Be aware of how the experience will change once the first-time UI is no longer there.
diff --git a/content/ui-patterns/index.mdx b/content/ui-patterns/index.mdx
index b48b068bd..bfb8fa6d8 100644
--- a/content/ui-patterns/index.mdx
+++ b/content/ui-patterns/index.mdx
@@ -15,13 +15,13 @@ import {Grid, Flex, Box, Link, Text, Label} from '@primer/components'
Buttons are a fundamental building block of the GitHub UI. These guidelines summarize how to use buttons across the product.
-
+
{/* */}
- Empty states
- Empty states are used to fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature. These guidelines demonstrate best practices for using the blankslate component and designing empty states.
+ Blankslate
+ Blankslate are used to fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature. These guidelines demonstrate best practices for using the blankslate component and designing empty states.
+
+
+
+
+## Options
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
*/}