diff --git a/apps/docs/content/components/Box/react.mdx b/apps/docs/content/components/Box/react.mdx
index b2ced7a26..7fd284414 100644
--- a/apps/docs/content/components/Box/react.mdx
+++ b/apps/docs/content/components/Box/react.mdx
@@ -3,7 +3,7 @@ title: Box
 status: Experimental
 a11yReviewed: false
 source: https://github.com/primer/brand/blob/main/packages/react/src/Box/Box.tsx
-storybook: '/brand/storybook/?path=/story/components-box--default'
+storybook: '/brand/storybook/?path=/story/components-box--playground'
 description: Use a box to simplify the process of applying one-off styles to an element
 ---
 
diff --git a/packages/react/src/Accordion/Accordion.examples.stories.tsx b/packages/react/src/Accordion/Accordion.examples.stories.tsx
new file mode 100644
index 000000000..c695810ab
--- /dev/null
+++ b/packages/react/src/Accordion/Accordion.examples.stories.tsx
@@ -0,0 +1,68 @@
+import {Meta} from '@storybook/react'
+import React from 'react'
+import {Accordion} from '.'
+import {UnorderedList} from '../'
+
+export default {
+  title: 'Components/Accordion/Examples',
+  component: Accordion,
+} as Meta<typeof Accordion>
+
+export const Composition = () => (
+  <>
+    <Accordion>
+      <Accordion.Heading>What&apos;s included in the GitHub for Startups offer?</Accordion.Heading>
+      <Accordion.Content>
+        <p>
+          All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
+          off year two. Learn more about the features and capabilities of GitHub Enterprise{' '}
+          <a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
+            here
+          </a>
+          .
+        </p>
+      </Accordion.Content>
+    </Accordion>
+    <Accordion>
+      <Accordion.Heading>Who is eligible to apply?</Accordion.Heading>
+      <Accordion.Content>
+        <p>Startups who meet the following criteria are eligible to apply for the program:</p>
+        <UnorderedList>
+          <UnorderedList.Item>Must be associated with a current GitHub for Startups partner.</UnorderedList.Item>
+          <UnorderedList.Item>Self-funded or funded (Seed-Series A)</UnorderedList.Item>
+          <UnorderedList.Item>Not a current GitHub Enterprise customer</UnorderedList.Item>
+          <UnorderedList.Item>Must not have previously received credits for GitHub Enterprise</UnorderedList.Item>
+        </UnorderedList>
+      </Accordion.Content>
+    </Accordion>
+    <Accordion>
+      <Accordion.Heading>What if my startup is not eligible? Are there other resources for me?</Accordion.Heading>
+      <Accordion.Content>
+        <p>
+          If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
+          feel to sign up for a trial{' '}
+          <a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
+            here
+          </a>
+          .
+        </p>
+      </Accordion.Content>
+    </Accordion>
+    <Accordion>
+      <Accordion.Heading>How can my organization become a GitHub for Startups partner?</Accordion.Heading>
+      <Accordion.Content>
+        <p>
+          Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
+          program.
+        </p>
+        <p>
+          {' '}
+          <a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
+            Apply here
+          </a>
+          .
+        </p>
+      </Accordion.Content>
+    </Accordion>
+  </>
+)
diff --git a/packages/react/src/Accordion/Accordion.stories.tsx b/packages/react/src/Accordion/Accordion.stories.tsx
index bf615006f..90e73f012 100644
--- a/packages/react/src/Accordion/Accordion.stories.tsx
+++ b/packages/react/src/Accordion/Accordion.stories.tsx
@@ -1,7 +1,6 @@
 import {Meta} from '@storybook/react'
 import React from 'react'
 import {Accordion} from '.'
-import {UnorderedList} from '../'
 
 export default {
   title: 'Components/Accordion',
@@ -18,61 +17,62 @@ export const Default = () => (
   </Accordion>
 )
 
-export const Composition = () => (
-  <>
-    <Accordion>
-      <Accordion.Heading>What&apos;s included in the GitHub for Startups offer?</Accordion.Heading>
-      <Accordion.Content>
-        <p>
-          All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
-          off year two. Learn more about the features and capabilities of GitHub Enterprise{' '}
-          <a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
-            here
-          </a>
-          .
-        </p>
-      </Accordion.Content>
-    </Accordion>
-    <Accordion>
-      <Accordion.Heading>Who is eligible to apply?</Accordion.Heading>
-      <Accordion.Content>
-        <p>Startups who meet the following criteria are eligible to apply for the program:</p>
-        <UnorderedList>
-          <UnorderedList.Item>Must be associated with a current GitHub for Startups partner.</UnorderedList.Item>
-          <UnorderedList.Item>Self-funded or funded (Seed-Series A)</UnorderedList.Item>
-          <UnorderedList.Item>Not a current GitHub Enterprise customer</UnorderedList.Item>
-          <UnorderedList.Item>Must not have previously received credits for GitHub Enterprise</UnorderedList.Item>
-        </UnorderedList>
-      </Accordion.Content>
-    </Accordion>
-    <Accordion>
-      <Accordion.Heading>What if my startup is not eligible? Are there other resources for me?</Accordion.Heading>
-      <Accordion.Content>
-        <p>
-          If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
-          feel to sign up for a trial{' '}
-          <a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
-            here
-          </a>
-          .
-        </p>
-      </Accordion.Content>
-    </Accordion>
-    <Accordion>
-      <Accordion.Heading>How can my organization become a GitHub for Startups partner?</Accordion.Heading>
-      <Accordion.Content>
-        <p>
-          Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
-          program.
-        </p>
-        <p>
-          {' '}
-          <a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
-            Apply here
-          </a>
-          .
-        </p>
-      </Accordion.Content>
-    </Accordion>
-  </>
+export const Playground = args => (
+  <Accordion variant={args.variant}>
+    <Accordion.Heading reversedToggles={args.reversedToggles}>{args.heading}</Accordion.Heading>
+    <Accordion.Content>{args.content}</Accordion.Content>
+  </Accordion>
 )
+Playground.argTypes = {
+  variant: {
+    name: 'variant',
+    control: {
+      type: 'radio',
+    },
+    options: ['default', 'emphasis'],
+  },
+  heading: {
+    name: 'text',
+    control: {
+      type: 'text',
+    },
+    table: {
+      category: 'Accordion.Heading',
+    },
+  },
+  reversedToggles: {
+    name: 'reversedToggles',
+    control: {
+      type: 'boolean',
+    },
+    table: {
+      category: 'Accordion.Heading',
+    },
+  },
+  headingAs: {
+    name: 'as',
+    control: {
+      type: 'inline-radio',
+    },
+    options: ['h2', 'h3', 'h4', 'h5', 'h6'],
+    table: {
+      category: 'Accordion.Heading',
+    },
+  },
+  content: {
+    name: 'text',
+    control: {
+      type: 'text',
+    },
+    table: {
+      category: 'Accordion.Content',
+    },
+  },
+}
+Playground.args = {
+  variant: 'default',
+  heading: 'Heading',
+  reversedToggles: false,
+  headingAs: 'h4',
+  content: 'Content',
+}
diff --git a/packages/react/src/ActionMenu/ActionMenu.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.stories.tsx
index fdc0dbe6a..f8f272b3f 100644
--- a/packages/react/src/ActionMenu/ActionMenu.stories.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.stories.tsx
@@ -1,4 +1,4 @@
-import {Meta, StoryFn} from '@storybook/react'
+import {Meta} from '@storybook/react'
 import React from 'react'
 import {ActionMenu} from './ActionMenu'
 
@@ -7,8 +7,8 @@ export default {
   component: ActionMenu,
 } as Meta<typeof ActionMenu>
 
-const Template: StoryFn<typeof ActionMenu> = args => (
-  <ActionMenu {...args} onSelect={newValue => alert(newValue)}>
+export const Default = () => (
+  <ActionMenu onSelect={newValue => alert(newValue)}>
     <ActionMenu.Button>Open menu</ActionMenu.Button>
     <ActionMenu.Overlay aria-label="Actions">
       <ActionMenu.Item value="Copy link pressed" selected>
@@ -20,4 +20,45 @@ const Template: StoryFn<typeof ActionMenu> = args => (
   </ActionMenu>
 )
 
-export const Default = Template.bind({})
+export const Playground = args => (
+  <ActionMenu {...args} onSelect={newValue => alert(newValue)}>
+    <ActionMenu.Button>{args.buttonText}</ActionMenu.Button>
+    <ActionMenu.Overlay aria-label="Actions">
+      {args.items.map(item => (
+        <ActionMenu.Item key={item.value} {...item} />
+      ))}
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)
+Playground.argTypes = {
+  buttonText: {
+    name: 'text',
+    control: {type: 'text'},
+    table: {
+      category: 'ActionMenu.Button',
+    },
+  },
+  items: {
+    name: 'Menu items',
+    control: {type: 'object'},
+    table: {
+      category: 'Story customization',
+    },
+  },
+}
+Playground.args = {
+  selectionVariant: 'none',
+  size: 'medium',
+  disabled: false,
+  menuAlignment: 'start',
+  menuSide: 'outside-bottom',
+  buttonText: 'Open menu',
+  items: [
+    {value: 'Copy link pressed', children: 'Copy link', selected: true, disabled: false},
+    {value: 'Quote reply pressed', children: 'Quote reply', selected: false, disabled: false},
+    {value: 'Edit comment pressed', children: 'Edit comment', selected: false, disabled: false},
+  ],
+}
+Playground.parameters = {
+  controls: {include: ['Menu items', 'text', ...Object.keys(Playground.args)]},
+}
diff --git a/packages/react/src/AnchorNav/AnchorNav.stories.tsx b/packages/react/src/AnchorNav/AnchorNav.stories.tsx
index 6733149ba..6c26b9184 100644
--- a/packages/react/src/AnchorNav/AnchorNav.stories.tsx
+++ b/packages/react/src/AnchorNav/AnchorNav.stories.tsx
@@ -14,66 +14,20 @@ export default {
   parameters: {
     layout: 'fullscreen',
   },
-  args: {
-    enableDefaultBgColor: true,
-    data: {
-      ['GitHub vs Jenkins']: 'githubvsjenkins',
-      ['GitHub vs GitLab']: 'githubvsgitlab',
-      ['GitHub vs CircleCI']: 'githubvscircleci',
-      ['GitHub vs BitBucket']: 'githubvsvsbitbucket',
-      ['GitHub vs TravisCI']: 'githubvsvstravis',
-    },
-    sectionHeight: 1000,
-    offset: 100,
-  },
-  argTypes: {
-    data: {
-      name: 'Data',
-      description: 'Test data',
-      control: {
-        type: 'object',
-      },
-      table: {
-        category: 'Story customization',
-      },
-    },
-    sectionHeight: {
-      name: 'Section height',
-      description: 'Section height',
-      control: {
-        type: 'number',
-      },
-      table: {
-        category: 'Story customization',
-      },
-    },
-    offset: {
-      name: 'Offset',
-      description: 'Offset from the top of the page',
-      control: {
-        type: 'number',
-      },
-      table: {
-        category: 'Story customization',
-      },
-    },
-  },
 } as Meta<typeof AnchorNav>
 
-export const Default = ({data, ...args}: {data: MockData}) => {
-  return (
-    <AnchorNav {...args}>
-      <AnchorNav.Link href="#section">Section one</AnchorNav.Link>
-      <AnchorNav.Link href="#section">Section two</AnchorNav.Link>
-      <AnchorNav.Link href="#section">Section three</AnchorNav.Link>
-      <AnchorNav.Link href="#section">Section four</AnchorNav.Link>
-      <AnchorNav.Link href="#section">Section five</AnchorNav.Link>
-      <AnchorNav.Action href="#">Sign up</AnchorNav.Action>
-    </AnchorNav>
-  )
-}
+export const Default = () => (
+  <AnchorNav>
+    <AnchorNav.Link href="#section">Section one</AnchorNav.Link>
+    <AnchorNav.Link href="#section">Section two</AnchorNav.Link>
+    <AnchorNav.Link href="#section">Section three</AnchorNav.Link>
+    <AnchorNav.Link href="#section">Section four</AnchorNav.Link>
+    <AnchorNav.Link href="#section">Section five</AnchorNav.Link>
+    <AnchorNav.Action href="#">Sign up</AnchorNav.Action>
+  </AnchorNav>
+)
 
-export const Playground = ({data, ...args}: {data: MockData; offset: number; sectionHeight: number}) => {
+export const Playground = ({data, sectionHeight, actionText, secondaryAction, secondaryActionText, ...args}) => {
   return (
     <div style={{backgroundColor: 'var(--base-color-scale-red-0)'}}>
       <RedlineBackground height={args.offset}>
@@ -87,12 +41,13 @@ export const Playground = ({data, ...args}: {data: MockData; offset: number; sec
         </Stack>
       </RedlineBackground>
       <AnchorNav {...args}>
-        {Object.entries(data).map(([key, value]) => (
+        {Object.entries(data as MockData).map(([key, value]) => (
           <AnchorNav.Link href={value} key={value}>
             {key}
           </AnchorNav.Link>
         ))}
-        <AnchorNav.Action href="#">Sign up</AnchorNav.Action>
+        <AnchorNav.Action href="#">{actionText}</AnchorNav.Action>
+        {secondaryAction && <AnchorNav.SecondaryAction href="#">{secondaryActionText}</AnchorNav.SecondaryAction>}
       </AnchorNav>
       {/**
        *  The following markup is provided for demonstration purposes only.
@@ -105,7 +60,7 @@ export const Playground = ({data, ...args}: {data: MockData; offset: number; sec
         style={{marginBottom: '100px'}}
         padding="none"
       >
-        {Object.entries(data).map(([key, value]) => (
+        {Object.entries(data as MockData).map(([key, value]) => (
           <RedlineBackground key={value}>
             <Stack
               key={value}
@@ -113,7 +68,7 @@ export const Playground = ({data, ...args}: {data: MockData; offset: number; sec
               direction="vertical"
               alignItems="flex-start"
               style={{
-                padding: `${args.sectionHeight / 2}px var(--base-size-24)`,
+                padding: `${sectionHeight / 2}px var(--base-size-24)`,
               }}
             >
               <Heading>{key}</Heading>
@@ -128,3 +83,72 @@ export const Playground = ({data, ...args}: {data: MockData; offset: number; sec
     </div>
   )
 }
+Playground.argTypes = {
+  actionText: {
+    name: 'text',
+    control: {type: 'text'},
+    table: {
+      category: 'AnchorNav.Action',
+    },
+  },
+  secondaryAction: {
+    name: 'visible',
+    control: {type: 'boolean'},
+    table: {
+      category: 'AnchorNav.SecondaryAction',
+    },
+  },
+  secondaryActionText: {
+    name: 'text',
+    control: {type: 'text'},
+    table: {
+      category: 'AnchorNav.SecondaryAction',
+    },
+  },
+  data: {
+    name: 'Data',
+    description: 'Test data',
+    control: {
+      type: 'object',
+    },
+    table: {
+      category: 'Story customization',
+    },
+  },
+  sectionHeight: {
+    name: 'Section height',
+    description: 'Section height',
+    control: {
+      type: 'number',
+    },
+    table: {
+      category: 'Story customization',
+    },
+  },
+  offset: {
+    name: 'Offset',
+    description: 'Offset from the top of the page',
+    control: {
+      type: 'number',
+    },
+    table: {
+      category: 'Story customization',
+    },
+  },
+}
+Playground.args = {
+  hideUntilSticky: false,
+  enableDefaultBgColor: false,
+  actionText: 'Sign up',
+  secondaryAction: false,
+  secondaryActionText: 'Learn more',
+  data: {
+    ['GitHub vs Jenkins']: 'githubvsjenkins',
+    ['GitHub vs GitLab']: 'githubvsgitlab',
+    ['GitHub vs CircleCI']: 'githubvscircleci',
+    ['GitHub vs BitBucket']: 'githubvsvsbitbucket',
+    ['GitHub vs TravisCI']: 'githubvsvstravis',
+  },
+  sectionHeight: 1000,
+  offset: 100,
+}
diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx
index ad241a0b6..284c0af80 100644
--- a/packages/react/src/Avatar/Avatar.stories.tsx
+++ b/packages/react/src/Avatar/Avatar.stories.tsx
@@ -7,46 +7,65 @@ import placeholderAvatar from '../fixtures/images/avatar-mona.png'
 export default {
   title: 'Components/Avatar',
   component: Avatar,
-  args: {
-    size: AvatarSizes[1],
-    shape: 'circle',
-    src: placeholderAvatar,
-    alt: 'A random avatar picture',
-  },
-  argTypes: {
-    size: {
-      description: 'The size of the Avatar',
-      control: {
-        type: 'radio',
-        options: AvatarSizes,
-      },
+} as Meta<typeof Avatar>
+
+export const Default = () => (
+  <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="A random avatar picture" />
+)
+
+export const Playground: StoryFn<typeof Avatar> = args => <Avatar {...args} />
+Playground.argTypes = {
+  shape: {
+    description: 'The shape of the Avatar',
+    options: AvatarShapes,
+    control: {
+      type: 'radio',
     },
-    shape: {
-      description: 'The shape of the Avatar',
-      control: {
-        type: 'radio',
-        options: AvatarShapes,
-      },
+  },
+  src: {
+    description: 'The url of the image to display',
+    type: {name: 'string', required: true},
+    control: {
+      type: 'text',
     },
-    src: {
-      description: 'The url of the image to display',
-      type: {name: 'string', required: true},
-      control: {
-        type: 'text',
-      },
+  },
+  alt: {
+    description: 'The alt text for the image',
+    type: {name: 'string', required: true},
+    control: {
+      type: 'text',
     },
-    alt: {
-      description: 'The alt text for the image',
-      type: {name: 'string', required: true},
-      control: {
-        type: 'text',
-      },
+  },
+  size: {
+    description: 'The size of the Avatar',
+    options: AvatarSizes,
+    control: {
+      type: 'radio',
     },
   },
-} as Meta<typeof Avatar>
+}
+Playground.args = {
+  shape: 'circle',
+  src: placeholderAvatar,
+  alt: 'A random avatar picture',
+  size: AvatarSizes[1],
+}
 
-export const Playground: StoryFn<typeof Avatar> = args => <Avatar {...args} />
-
-export const Default = () => (
-  <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" alt="A random avatar picture" />
-)
+export const Playground2: StoryFn<typeof Avatar> = args => <Avatar {...args} />
+Playground2.argTypes = {
+  ...Playground.argTypes,
+  size: {
+    control: {
+      type: 'object',
+    },
+  },
+}
+Playground2.args = {
+  ...Playground.args,
+  size: {
+    narrow: AvatarSizes[1],
+    regular: AvatarSizes[2],
+    wide: AvatarSizes[3],
+  },
+}
+Playground2.storyName = 'Playground (responsive)'
diff --git a/packages/react/src/Box/Box.stories.tsx b/packages/react/src/Box/Box.stories.tsx
index 0425382b8..90be4958e 100644
--- a/packages/react/src/Box/Box.stories.tsx
+++ b/packages/react/src/Box/Box.stories.tsx
@@ -1,7 +1,14 @@
 import React from 'react'
 
 import {Meta, StoryFn} from '@storybook/react'
-import {Box} from './Box'
+import {
+  Box,
+  BoxBackgroundColors,
+  BoxBorderColorOptions,
+  BoxBorderRadiusOptions,
+  BoxBorderWidthOptions,
+  BoxSpacingValues,
+} from './Box'
 import {Text} from '../'
 
 export default {
@@ -9,10 +16,67 @@ export default {
   component: Box,
 } as Meta<typeof Box>
 
-const Template: StoryFn<typeof Box> = args => (
-  <Box {...args}>
+export const Default = () => (
+  <Box>
     <Text>Default Box</Text>
   </Box>
 )
 
-export const Default = Template.bind({})
+export const Playground: StoryFn<typeof Box> = args => (
+  <Box {...args}>
+    <Text>Default Box</Text>
+  </Box>
+)
+Playground.args = {
+  padding: 'normal',
+  margin: 'normal',
+  backgroundColor: 'inset',
+  borderRadius: 'medium',
+  borderWidth: 'thin',
+  borderColor: 'default',
+  borderStyle: 'solid',
+}
+Playground.argTypes = {
+  padding: {
+    options: BoxSpacingValues,
+    control: {
+      type: 'select',
+    },
+  },
+  margin: {
+    options: BoxSpacingValues,
+    control: {
+      type: 'select',
+    },
+  },
+  backgroundColor: {
+    options: BoxBackgroundColors,
+    control: {
+      type: 'inline-radio',
+    },
+  },
+  borderRadius: {
+    options: BoxBorderRadiusOptions,
+    control: {
+      type: 'inline-radio',
+    },
+  },
+  borderWidth: {
+    options: BoxBorderWidthOptions,
+    control: {
+      type: 'inline-radio',
+    },
+  },
+  borderColor: {
+    options: BoxBorderColorOptions,
+    control: {
+      type: 'inline-radio',
+    },
+  },
+  borderStyle: {
+    options: ['none', 'solid'],
+    control: {
+      type: 'inline-radio',
+    },
+  },
+}