diff --git a/sandbox/grommet-app/src/components/ContentPane/index.jsx b/sandbox/grommet-app/src/components/ContentPane/index.jsx
index f423c15eb..21824ba79 100644
--- a/sandbox/grommet-app/src/components/ContentPane/index.jsx
+++ b/sandbox/grommet-app/src/components/ContentPane/index.jsx
@@ -55,10 +55,4 @@ ContentPane.propTypes = {
   ]),
 };
 
-ContentPane.defaultProps = {
-  actions: undefined,
-  contain: undefined,
-  skeleton: undefined,
-};
-
 export default ContentPane;
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/components/Compare.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/components/Compare.jsx
new file mode 100644
index 000000000..e6bfe0ffb
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/components/Compare.jsx
@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Grommet, Stack, ThemeContext } from 'grommet';
+import { hpe } from 'grommet-theme-hpe';
+import { current as hpeCurrent } from '../../../themes/theme';
+import { ModeContext } from './ModeContext';
+
+export const Compare = ({ children, ...rest }) => {
+  const { mode, direction } = React.useContext(ModeContext);
+  const theme = useContext(ThemeContext);
+
+  if (direction === 'row') {
+    return (
+      <Box direction="row" gap="medium">
+        <Grommet
+          theme={hpe}
+          themeMode={theme.dark ? 'dark' : 'light'}
+          background="background-front"
+        >
+          <Box align="start">{children}</Box>
+        </Grommet>
+        <Grommet
+          theme={hpeCurrent}
+          themeMode={theme.dark ? 'dark' : 'light'}
+          background="background-front"
+        >
+          <Box align="start">{children}</Box>
+        </Grommet>
+      </Box>
+    );
+  }
+
+  return (
+    <Stack {...rest}>
+      <ThemeContext.Extend value={hpe}>
+        <Box
+          align="start"
+          style={
+            // eslint-disable-next-line no-nested-ternary
+            mode === 'Compare diffs'
+              ? { opacity: 0.5, filter: 'invert(1)', color: 'green' }
+              : mode === 'next'
+              ? { visibility: 'hidden' }
+              : {}
+          }
+        >
+          {children}
+        </Box>
+      </ThemeContext.Extend>
+
+      <ThemeContext.Extend value={hpeCurrent}>
+        <Box
+          align="start"
+          style={mode === 'v5' ? { visibility: 'hidden' } : {}}
+        >
+          {children}
+        </Box>
+      </ThemeContext.Extend>
+    </Stack>
+  );
+};
+
+Compare.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.element,
+  ]),
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/components/ModeContext.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/components/ModeContext.jsx
new file mode 100644
index 000000000..6f5f8014d
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/components/ModeContext.jsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const ModeContext = React.createContext({});
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/components/StyleInProgress.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/components/StyleInProgress.jsx
new file mode 100644
index 000000000..1fb647dd5
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/components/StyleInProgress.jsx
@@ -0,0 +1,9 @@
+import { Notification } from 'grommet';
+
+export const StyleInProgress = () => (
+  <Notification
+    status="warning"
+    message="This component style is still being refined."
+    margin={{ bottom: 'medium' }}
+  />
+);
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/components/TabContent.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/components/TabContent.jsx
new file mode 100644
index 000000000..c72d79d01
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/components/TabContent.jsx
@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import { Box } from 'grommet';
+
+export const TabContent = ({ children }) => {
+  return (
+    <Box gap="medium" pad={{ vertical: 'small' }} align="start">
+      {children}
+    </Box>
+  );
+};
+
+TabContent.propTypes = {
+  children: PropTypes.node.isRequired,
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/components/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/components/index.js
new file mode 100644
index 000000000..a21ff1336
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/components/index.js
@@ -0,0 +1,4 @@
+export * from './Compare';
+export * from './ModeContext';
+export * from './StyleInProgress';
+export * from './TabContent';
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Accordions.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Accordions.jsx
new file mode 100644
index 000000000..26650fe89
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Accordions.jsx
@@ -0,0 +1,16 @@
+import { Accordion, AccordionPanel } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const Accordions = () => {
+  return (
+    <ContentPane>
+      <Compare guidingChild="last">
+        <Accordion>
+          <AccordionPanel label="Panel 1">hi</AccordionPanel>
+          <AccordionPanel label="Panel 2">hi</AccordionPanel>
+        </Accordion>
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Buttons.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Buttons.jsx
new file mode 100644
index 000000000..df2bf50c4
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Buttons.jsx
@@ -0,0 +1,46 @@
+import { Box, Button } from 'grommet';
+import { User } from 'grommet-icons';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components/Compare';
+
+const kinds = ['default', 'toolbar', 'secondary', 'primary'];
+const states = ['enabled', 'active', 'disabled'];
+const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+
+export const Buttons = () => {
+  return (
+    <ContentPane>
+      <Box gap="small">
+        {kinds.map(kind =>
+          sizes.map(size =>
+            states.map(state => (
+              <Compare key={`${kind}${size}${state}`}>
+                <Button
+                  label={`${kind} ${size} ${state}`}
+                  size={size}
+                  kind={kind}
+                  active={state === 'active'}
+                  disabled={state === 'disabled'}
+                />
+              </Compare>
+            )),
+          ),
+        )}
+      </Box>
+      <Box gap="small">
+        <Compare>
+          <Button secondary icon={<User />} size="small" />
+        </Compare>
+        <Compare>
+          <Button secondary icon={<User />} />
+        </Compare>
+        <Compare>
+          <Button secondary icon={<User />} size="large" />
+        </Compare>
+        <Compare>
+          <Button secondary icon={<User />} size="xlarge" />
+        </Compare>
+      </Box>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Menus.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Menus.jsx
new file mode 100644
index 000000000..2d1ef6881
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Menus.jsx
@@ -0,0 +1,29 @@
+import { Menu } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components/Compare';
+
+export const Menus = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <Menu
+          label="Menu"
+          items={[
+            [{ label: 'Item 1' }, { label: 'Item 2' }],
+            [{ label: 'Delete' }],
+          ]}
+        />
+      </Compare>
+      <Compare>
+        <Menu
+          label="Menu"
+          kind="toolbar"
+          items={[
+            [{ label: 'Item 1' }, { label: 'Item 2' }],
+            [{ label: 'Delete' }],
+          ]}
+        />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Paginations.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Paginations.jsx
new file mode 100644
index 000000000..53da0c8e4
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Paginations.jsx
@@ -0,0 +1,16 @@
+import { Pagination } from 'grommet';
+import { Compare } from '../../components/Compare';
+import ContentPane from '../../../../components/ContentPane';
+
+export const Paginations = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <Pagination numberItems={100} size="small" />
+      </Compare>
+      <Compare>
+        <Pagination numberItems={100} />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Tabs.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Tabs.jsx
new file mode 100644
index 000000000..e11410f64
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Tabs.jsx
@@ -0,0 +1,20 @@
+import { Tab, Tabs } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+const TabsCompare = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <Tabs>
+          <Tab title="Tab 1" active />
+          <Tab title="Tab 2" />
+          <Tab title="Tab 3 (disabled)" disabled />
+          <Tab title="Tab 4" />
+        </Tabs>
+      </Compare>
+    </ContentPane>
+  );
+};
+
+export { TabsCompare as Tabs };
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/ToggleGroups.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/ToggleGroups.jsx
new file mode 100644
index 000000000..6895d11f0
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/ToggleGroups.jsx
@@ -0,0 +1,36 @@
+import { Box, ToggleGroup } from 'grommet';
+import { List, MapLocation, Table } from 'grommet-icons';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components/Compare';
+
+export const ToggleGroups = () => {
+  return (
+    <ContentPane>
+      <Box gap="small">
+        <Compare>
+          <ToggleGroup
+            a11yTitle="Choose view"
+            options={[
+              {
+                icon: <List a11yTitle="List view" />,
+                value: 'list',
+                tip: 'List',
+              },
+              {
+                icon: <Table a11yTitle="Map view" />,
+                value: 'table',
+                tip: 'Table',
+              },
+              {
+                icon: <MapLocation a11yTitle="Map view" />,
+                value: 'map',
+                tip: 'Map',
+              },
+            ]}
+            defaultValue="list"
+          />
+        </Compare>
+      </Box>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/index.js
new file mode 100644
index 000000000..16e6de1c7
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/index.js
@@ -0,0 +1,6 @@
+export * from './Accordions';
+export * from './Buttons';
+export * from './Menus';
+export * from './Paginations';
+export * from './Tabs';
+export * from './ToggleGroups';
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/CheckboxGroups.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/CheckboxGroups.jsx
new file mode 100644
index 000000000..17d689036
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/CheckboxGroups.jsx
@@ -0,0 +1,28 @@
+import { CheckBoxGroup, FormField } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const CheckboxGroups = () => {
+  return (
+    <ContentPane>
+      <Compare guidingChild="last">
+        <CheckBoxGroup
+          options={[
+            { label: 'Option 1' },
+            { label: 'Option 2' },
+            { label: 'Option 3', disabled: true },
+          ]}
+          value={['Option 2']}
+        />
+      </Compare>
+      <Compare>
+        <FormField label="Label">
+          <CheckBoxGroup
+            options={['Option 1', 'Option 2', 'Option 3']}
+            value={['Option 2']}
+          />
+        </FormField>
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Checkboxes.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Checkboxes.jsx
new file mode 100644
index 000000000..65fb0abb8
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Checkboxes.jsx
@@ -0,0 +1,23 @@
+import { CheckBox, FormField } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const Checkboxes = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <CheckBox label="Checkbox label" />
+      </Compare>
+      <Compare guidingChild="last">
+        <FormField label="Label">
+          <CheckBox label="Checkbox label" />
+        </FormField>
+      </Compare>
+      <Compare guidingChild="last">
+        <FormField label="Label" error="There is an error.">
+          <CheckBox label="Checkbox label" />
+        </FormField>
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/DateInputs.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/DateInputs.jsx
new file mode 100644
index 000000000..de1928ce9
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/DateInputs.jsx
@@ -0,0 +1,20 @@
+import { DateInput } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const DateInputs = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <DateInput
+          format="mm/dd/yyyy-mm/dd/yyyy"
+          inline
+          value={[
+            new Date().toISOString(),
+            new Date(+new Date() + 86400000 * 9).toISOString(),
+          ]}
+        />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/FileInputs.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/FileInputs.jsx
new file mode 100644
index 000000000..ba91146fc
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/FileInputs.jsx
@@ -0,0 +1,13 @@
+import { FileInput } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const FileInputs = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <FileInput />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/RadioButtonGroups.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/RadioButtonGroups.jsx
new file mode 100644
index 000000000..7152d290e
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/RadioButtonGroups.jsx
@@ -0,0 +1,27 @@
+import { FormField, RadioButtonGroup } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare, StyleInProgress } from '../../components';
+
+export const RadioButtonGroups = () => {
+  return (
+    <ContentPane>
+      <StyleInProgress />
+      <Compare guidingChild="last">
+        <RadioButtonGroup
+          options={['Option 1', 'Option 2', 'Option 3']}
+          value="Option 2"
+          name="radio-group"
+        />
+      </Compare>
+      <Compare>
+        <FormField label="Label">
+          <RadioButtonGroup
+            options={['Option 1', 'Option 2', 'Option 3']}
+            value="Option 2"
+            name="radio-group-form"
+          />
+        </FormField>
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/RangeInputs.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/RangeInputs.jsx
new file mode 100644
index 000000000..e51bb231a
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/RangeInputs.jsx
@@ -0,0 +1,13 @@
+import { RangeInput } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const RangeInputs = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <RangeInput value={60} />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/SelectMultiples.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/SelectMultiples.jsx
new file mode 100644
index 000000000..8cc7f54df
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/SelectMultiples.jsx
@@ -0,0 +1,17 @@
+import { SelectMultiple } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const SelectMultiples = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <SelectMultiple
+          options={['Option 1', 'Option 2', 'Option 3']}
+          value={['Option 1', 'Option 2']}
+          showSelectedInline
+        />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Selects.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Selects.jsx
new file mode 100644
index 000000000..e2b6da604
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Selects.jsx
@@ -0,0 +1,16 @@
+import { Select } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const Selects = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <Select
+          options={['Option 1', 'Option 2', 'Option 3']}
+          placeholder="Select option"
+        />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/StarRatings.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/StarRatings.jsx
new file mode 100644
index 000000000..b5efc8f30
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/StarRatings.jsx
@@ -0,0 +1,13 @@
+import { StarRating } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const StarRatings = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <StarRating name="rating" value={2} />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Switches.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Switches.jsx
new file mode 100644
index 000000000..1ed76eea8
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Switches.jsx
@@ -0,0 +1,16 @@
+import { CheckBox } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare, StyleInProgress } from '../../components';
+
+export const Switches = () => {
+  return (
+    <ContentPane>
+      <StyleInProgress />
+      <Compare>
+        <CheckBox label="Switch label" toggle />
+        <CheckBox label="Switch label" toggle checked />
+        <CheckBox label="Switch label" toggle disabled />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/TextAreas.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/TextAreas.jsx
new file mode 100644
index 000000000..57ab641e7
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/TextAreas.jsx
@@ -0,0 +1,13 @@
+import { TextArea } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const TextAreas = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <TextArea placeholder="Type something" />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/TextInputs.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/TextInputs.jsx
new file mode 100644
index 000000000..681e82567
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/TextInputs.jsx
@@ -0,0 +1,24 @@
+import { FormField, TextInput } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const TextInputs = () => {
+  return (
+    <ContentPane>
+      <Compare guidingChild="last">
+        <FormField
+          label="Label"
+          help="Here is help text"
+          info="Here is info text"
+        >
+          <TextInput value="Value" />
+        </FormField>
+      </Compare>
+      <Compare guidingChild="last">
+        <FormField label="Disabled input" disabled>
+          <TextInput value="Value" disabled />
+        </FormField>
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/ThumbsRatings.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/ThumbsRatings.jsx
new file mode 100644
index 000000000..1cb86d127
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/ThumbsRatings.jsx
@@ -0,0 +1,13 @@
+import { ThumbsRating } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const ThumbsRatings = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <ThumbsRating name="like-dislike" value="like" />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/index.js
new file mode 100644
index 000000000..733147467
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/index.js
@@ -0,0 +1,13 @@
+export * from './Checkboxes';
+export * from './CheckboxGroups';
+export * from './DateInputs';
+export * from './FileInputs';
+export * from './RadioButtonGroups';
+export * from './RangeInputs';
+export * from './Selects';
+export * from './SelectMultiples';
+export * from './StarRatings';
+export * from './Switches';
+export * from './TextAreas';
+export * from './TextInputs';
+export * from './ThumbsRatings';
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/ContentSizes.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/ContentSizes.jsx
new file mode 100644
index 000000000..bef209180
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/ContentSizes.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { Box, Text } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const ContentSizes = ({ theme }) => {
+  return (
+    <ContentPane overflow={{ horizontal: 'auto' }}>
+      <Box gap="small">
+        {Object.keys(theme.global.size).map(
+          size =>
+            size !== 'responsiveBreakpoint' && (
+              <Compare key={size}>
+                <Box>
+                  <Box
+                    background={{
+                      color: 'blue',
+                      opacity: 'medium',
+                    }}
+                    width={size}
+                    height={size}
+                    flex={false}
+                  />
+                  <Text size="small">{size}</Text>
+                </Box>
+              </Compare>
+            ),
+        )}
+      </Box>
+    </ContentPane>
+  );
+};
+
+ContentSizes.propTypes = {
+  theme: PropTypes.object,
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/PageHeaders.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/PageHeaders.jsx
new file mode 100644
index 000000000..42a308b04
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/PageHeaders.jsx
@@ -0,0 +1,16 @@
+import { PageHeader } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const PageHeaders = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <PageHeader
+          title="Page title"
+          subtitle="Here is a subtitle for the page."
+        />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/Spacing.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/Spacing.jsx
new file mode 100644
index 000000000..b6ef755a8
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/Spacing.jsx
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import { Box, Text } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const Spacing = ({ theme }) => {
+  return (
+    <ContentPane>
+      <Box gap="small">
+        {Object.keys(theme.global.edgeSize).map(
+          size =>
+            size !== 'responsiveBreakpoint' && (
+              <Compare key={size}>
+                <Box>
+                  <Box
+                    alignSelf="start"
+                    background={{
+                      color: 'red',
+                      opacity: 'medium',
+                    }}
+                    pad={{ left: size }}
+                    height="xxsmall"
+                    flex={false}
+                  />
+                  <Text size="small">{size}</Text>
+                </Box>
+              </Compare>
+            ),
+        )}
+      </Box>
+    </ContentPane>
+  );
+};
+
+Spacing.propTypes = {
+  theme: PropTypes.object,
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/index.js
new file mode 100644
index 000000000..1e54c06bc
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Layouts/index.js
@@ -0,0 +1,3 @@
+export * from './ContentSizes';
+export * from './PageHeaders';
+export * from './Spacing';
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Anchors.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Anchors.jsx
new file mode 100644
index 000000000..346345847
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Anchors.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { Anchor, Box } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const Anchors = ({ textSizes }) => {
+  return (
+    <ContentPane>
+      <Box gap="small">
+        {textSizes.map(size => (
+          <Compare key={size}>
+            <Anchor size={size} key={size}>
+              Anchor {size}
+            </Anchor>
+          </Compare>
+        ))}
+      </Box>
+    </ContentPane>
+  );
+};
+
+Anchors.propTypes = {
+  textSizes: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Headings.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Headings.jsx
new file mode 100644
index 000000000..952f0e834
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Headings.jsx
@@ -0,0 +1,33 @@
+import { Box, Heading } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+
+export const Headings = () => {
+  return (
+    <ContentPane>
+      <Box gap="medium">
+        {HEADING_LEVELS.map(level => (
+          <Box gap="small" key={level}>
+            {/* Heading sizes are not relevant to product teams because our guidance
+                  discourages use of them. */}
+            {/* {['small', 'medium', 'large', 'xlarge'].map(size => ( */}
+            <Compare guidingChild="last">
+              <Heading
+                // size={size}
+                key={`${level}`}
+                level={level}
+                margin="none"
+                style={{ color: 'inherit' }}
+              >
+                Heading {level}
+              </Heading>
+            </Compare>
+            {/* ))} */}
+          </Box>
+        ))}
+      </Box>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Paragraphs.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Paragraphs.jsx
new file mode 100644
index 000000000..7ff539bee
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Paragraphs.jsx
@@ -0,0 +1,22 @@
+import { Box, Paragraph } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+const PARAGRAPH_SIZES = ['small', 'medium', 'large', 'xlarge', 'xxlarge'];
+
+export const Paragraphs = () => {
+  return (
+    <ContentPane>
+      <Box gap="small">
+        {PARAGRAPH_SIZES.map(size => (
+          <Compare key={size}>
+            <Paragraph size={size} key={size} margin="none">
+              Paragraph {size} with some extra text so we can see how it is when
+              it wraps
+            </Paragraph>
+          </Compare>
+        ))}
+      </Box>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Tags.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Tags.jsx
new file mode 100644
index 000000000..39ff7a527
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Tags.jsx
@@ -0,0 +1,16 @@
+import { Box, Tag } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const Tags = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <Box align="start" gap="small">
+          <Tag value="Value" name="Name" />
+          <Tag value="Value" name="Name" onRemove={() => {}} />
+        </Box>
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Texts.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Texts.jsx
new file mode 100644
index 000000000..f59973714
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/Texts.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { Box, Text } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components/Compare';
+
+export const Texts = ({ textSizes }) => {
+  return (
+    <ContentPane>
+      <Box gap="small">
+        {textSizes.map(size => (
+          <Compare guidingChild="last" key={size}>
+            <Text size={size} key={size}>
+              Text {size}
+            </Text>
+          </Compare>
+        ))}
+      </Box>
+    </ContentPane>
+  );
+};
+
+Texts.propTypes = {
+  textSizes: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/index.js
new file mode 100644
index 000000000..3c0d5f733
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Type/index.js
@@ -0,0 +1,5 @@
+export * from './Anchors';
+export * from './Headings';
+export * from './Paragraphs';
+export * from './Tags';
+export * from './Texts';
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/DataTables.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/DataTables.jsx
new file mode 100644
index 000000000..46053bd4d
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/DataTables.jsx
@@ -0,0 +1,52 @@
+import { DataTable } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const DataTables = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <DataTable
+          onSelect={() => {}}
+          select={['4352351']}
+          columns={[
+            {
+              property: 'id',
+              header: 'ID',
+            },
+            {
+              property: 'firstName',
+              header: 'First name',
+            },
+            {
+              property: 'lastName',
+              header: 'Last name',
+              units: 'GB',
+            },
+          ]}
+          data={[
+            {
+              id: '2341234',
+              firstName: 'Taylor',
+              lastName: 'Seamans',
+            },
+            {
+              id: '4352351',
+              firstName: 'Oliver',
+              lastName: 'Plunkett',
+            },
+            {
+              id: '6439201',
+              firstName: 'Joelle',
+              lastName: 'Gregory',
+            },
+          ]}
+          sort={{
+            property: 'firstName',
+            direction: 'asc',
+          }}
+        />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Icons.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Icons.jsx
new file mode 100644
index 000000000..9e09261cc
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Icons.jsx
@@ -0,0 +1,25 @@
+import ContentPane from '../../../../components/ContentPane';
+import { Box } from 'grommet';
+import { User } from 'grommet-icons';
+import { Compare } from '../../components';
+
+export const Icons = () => {
+  return (
+    <ContentPane>
+      <Box gap="small">
+        <Compare>
+          <User size="small" />
+        </Compare>
+        <Compare>
+          <User />
+        </Compare>
+        <Compare>
+          <User size="large" />
+        </Compare>
+        <Compare>
+          <User size="xlarge" />
+        </Compare>
+      </Box>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Meters.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Meters.jsx
new file mode 100644
index 000000000..3aa1da218
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Meters.jsx
@@ -0,0 +1,35 @@
+import { Meter } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const Meters = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <Meter
+          type="circle"
+          values={[
+            {
+              value: 40,
+            },
+            {
+              value: 30,
+            },
+            {
+              value: 10,
+            },
+            {
+              value: 10,
+            },
+            {
+              value: 10,
+            },
+          ]}
+          max={100}
+          size="small"
+          thickness="medium"
+        />
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/NameValueLists.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/NameValueLists.jsx
new file mode 100644
index 000000000..ed4a8d5df
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/NameValueLists.jsx
@@ -0,0 +1,16 @@
+import { NameValueList, NameValuePair } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const NameValueLists = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <NameValueList>
+          <NameValuePair name="City">San Francisco</NameValuePair>
+          <NameValuePair name="State">California</NameValuePair>
+        </NameValueList>
+      </Compare>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Notifications.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Notifications.jsx
new file mode 100644
index 000000000..e21f54517
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Notifications.jsx
@@ -0,0 +1,51 @@
+import { Box, Notification } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const Notifications = () => {
+  return (
+    <ContentPane>
+      <Box gap="medium">
+        <Compare>
+          <Notification
+            status="critical"
+            message="this is a message"
+            title="this is a title"
+          />
+        </Compare>
+        <Compare>
+          <Notification
+            status="warning"
+            message="this is a message"
+            title="this is a title"
+            onClose={() => {}}
+          />
+        </Compare>
+        <Compare>
+          <Notification
+            status="normal"
+            message="this is a message"
+            title="this is a title"
+            onClose={() => {}}
+          />
+        </Compare>
+        <Compare>
+          <Notification
+            status="info"
+            message="this is a message"
+            title="this is a title"
+            onClose={() => {}}
+          />
+        </Compare>
+        <Compare>
+          <Notification
+            status="unknown"
+            message="this is a message"
+            title="this is a title"
+            onClose={() => {}}
+          />
+        </Compare>
+      </Box>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Spinners.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Spinners.jsx
new file mode 100644
index 000000000..72d7ffa63
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/Spinners.jsx
@@ -0,0 +1,24 @@
+import { Box, Spinner } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const Spinners = () => {
+  return (
+    <ContentPane>
+      <Box gap="medium">
+        <Compare>
+          <Spinner size="xsmall" />
+        </Compare>
+        <Compare>
+          <Spinner size="small" />
+        </Compare>
+        <Compare>
+          <Spinner size="medium" />
+        </Compare>
+        <Compare>
+          <Spinner size="large" />
+        </Compare>
+      </Box>
+    </ContentPane>
+  );
+};
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/index.js
new file mode 100644
index 000000000..ba2029b18
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/Visualizations/index.js
@@ -0,0 +1,6 @@
+export * from './DataTables';
+export * from './Icons';
+export * from './Meters';
+export * from './NameValueLists';
+export * from './Notifications';
+export * from './Spinners';
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/content/index.js b/sandbox/grommet-app/src/pages/sticker-sheet/content/index.js
new file mode 100644
index 000000000..644d8a1d3
--- /dev/null
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/content/index.js
@@ -0,0 +1,5 @@
+export * from './Controls';
+export * from './Inputs';
+export * from './Layouts';
+export * from './Type';
+export * from './Visualizations';
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx
index f98f2d451..963a573f7 100644
--- a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx
+++ b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx
@@ -1,60 +1,59 @@
 /* eslint-disable react/jsx-key */
-import React, { useContext, useMemo } from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import {
   Anchor,
   Box,
-  Button,
   CheckBox,
-  RangeInput,
-  Menu,
   Grommet,
   Page,
-  Heading,
-  Tab,
   PageContent,
   PageHeader,
-  Text,
-  Stack,
   ThemeContext,
-  Paragraph,
-  Accordion,
-  AccordionPanel,
-  Notification,
-  DateInput,
-  Pagination,
-  Spinner,
-  Tag,
   Select,
   FormField,
-  CheckBoxGroup,
-  RadioButtonGroup,
-  TextInput,
-  SelectMultiple,
+  Tab,
   Tabs,
-  TextArea,
-  NameValueList,
-  NameValuePair,
-  FileInput,
-  StarRating,
-  ThumbsRating,
-  DataTable,
-  Meter,
-  ToggleGroup,
 } from 'grommet';
-import { User, Table, List, MapLocation, Previous } from 'grommet-icons';
+import { Previous } from 'grommet-icons';
 import { hpe } from 'grommet-theme-hpe';
 import { current as hpeCurrent } from '../../themes/theme';
-import ContentPane from '../../components/ContentPane';
-
-const StyleInProgress = () => (
-  <Notification
-    status="warning"
-    message="This component style is still being refined."
-    margin={{ bottom: 'medium' }}
-  />
-);
+import { ModeContext, TabContent } from './components';
+import {
+  Accordions,
+  Anchors,
+  Buttons,
+  Checkboxes,
+  CheckboxGroups,
+  ContentSizes,
+  DataTables,
+  DateInputs,
+  FileInputs,
+  Headings,
+  Icons,
+  Menus,
+  Meters,
+  NameValueLists,
+  Notifications,
+  PageHeaders,
+  Paginations,
+  Paragraphs,
+  RadioButtonGroups,
+  RangeInputs,
+  SelectMultiples,
+  Selects,
+  Spacing,
+  Spinners,
+  StarRatings,
+  Switches,
+  Tabs as TabsContent,
+  Tags,
+  TextAreas,
+  TextInputs,
+  Texts,
+  ThumbsRatings,
+  ToggleGroups,
+} from './content';
 
 const textSizes = [
   'xsmall',
@@ -69,78 +68,12 @@ const textSizes = [
   '6xl',
 ];
 
-const kinds = ['default', 'toolbar', 'secondary', 'primary'];
-const states = ['enabled', 'active', 'disabled'];
-const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
-
-const ModeContext = React.createContext({});
-
-const Compare = ({ children, ...rest }) => {
-  const { mode, direction } = React.useContext(ModeContext);
-  const theme = useContext(ThemeContext);
-
-  if (direction === 'row') {
-    return (
-      <Box direction="row" gap="medium">
-        <Grommet
-          theme={hpe}
-          themeMode={theme.dark ? 'dark' : 'light'}
-          background="background-front"
-        >
-          <Box align="start">{children}</Box>
-        </Grommet>
-        <Grommet
-          theme={hpeCurrent}
-          themeMode={theme.dark ? 'dark' : 'light'}
-          background="background-front"
-        >
-          <Box align="start">{children}</Box>
-        </Grommet>
-      </Box>
-    );
-  }
-
-  return (
-    <Stack {...rest}>
-      <ThemeContext.Extend value={hpe}>
-        <Box
-          align="start"
-          style={
-            // eslint-disable-next-line no-nested-ternary
-            mode === 'Compare diffs'
-              ? { opacity: 0.5, filter: 'invert(1)', color: 'green' }
-              : mode === 'next'
-              ? { visibility: 'hidden' }
-              : {}
-          }
-        >
-          {children}
-        </Box>
-      </ThemeContext.Extend>
-
-      <ThemeContext.Extend value={hpeCurrent}>
-        <Box
-          align="start"
-          style={mode === 'v5' ? { visibility: 'hidden' } : {}}
-        >
-          {children}
-        </Box>
-      </ThemeContext.Extend>
-    </Stack>
-  );
-};
-
-Compare.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.array,
-    PropTypes.element,
-  ]),
-};
-
 const StickerSheet = () => {
   const [mode, setMode] = React.useState('Compare diffs');
   const [direction, setDirection] = React.useState('row');
+  const [activeIndex, setActiveIndex] = React.useState(
+    Number.parseInt(sessionStorage.getItem('activeIndex'), 10) || 0,
+  );
   const theme = useContext(ThemeContext);
   const contextValue = useMemo(() => {
     return {
@@ -148,6 +81,11 @@ const StickerSheet = () => {
       direction,
     };
   }, [mode, direction]);
+
+  useEffect(() => {
+    sessionStorage.setItem('activeIndex', activeIndex);
+  }, [activeIndex]);
+
   return (
     <Grommet
       theme={hpe}
@@ -165,7 +103,6 @@ const StickerSheet = () => {
                 <Anchor as={Link} to="/" label="Home" icon={<Previous />} />
               }
               actions={
-                // eslint-disable-next-line max-len
                 <Box direction="row" gap="xsmall">
                   <FormField label="Layout">
                     <CheckBox
@@ -194,188 +131,66 @@ const StickerSheet = () => {
               }
               width="100%"
             />
-            <ContentPane>
-              <Box gap="small">
-                {textSizes.map(size => (
-                  <Compare key={size}>
-                    <Anchor size={size} key={size}>
-                      Anchor {size}
-                    </Anchor>
-                  </Compare>
-                ))}
-              </Box>
-            </ContentPane>
-            <ContentPane>
-              <Box gap="small">
-                {textSizes.map(size => (
-                  <Compare guidingChild="last" key={size}>
-                    <Text size={size} key={size}>
-                      Text {size}
-                    </Text>
-                  </Compare>
-                ))}
-              </Box>
-            </ContentPane>
-            <ContentPane>
-              <Box gap="small">
-                {['small', 'medium', 'large', 'xlarge', 'xxlarge'].map(size => (
-                  <Compare key={size}>
-                    <Paragraph size={size} key={size} margin="none">
-                      Paragraph {size} with some extra text so we can see how it
-                      is when it wraps
-                    </Paragraph>
-                  </Compare>
-                ))}
-              </Box>
-            </ContentPane>
-            <ContentPane>
-              <Box gap="medium">
-                {[1, 2, 3, 4, 5, 6].map(level => (
-                  <Box gap="small" key={level}>
-                    {/* Heading sizes are not relevant to product teams because our guidance
-                  discourages use of them. */}
-                    {/* {['small', 'medium', 'large', 'xlarge'].map(size => ( */}
-                    <Compare guidingChild="last">
-                      <Heading
-                        // size={size}
-                        key={`${level}`}
-                        level={level}
-                        margin="none"
-                        style={{ color: 'inherit' }}
-                      >
-                        Heading {level}
-                      </Heading>
-                    </Compare>
-                    {/* ))} */}
-                  </Box>
-                ))}
-              </Box>
-            </ContentPane>
-            <ContentPane>
-              <Box gap="small">
-                {kinds.map(kind =>
-                  sizes.map(size =>
-                    states.map(state => (
-                      <Compare key={`${kind}${size}${state}`}>
-                        <Button
-                          label={`${kind} ${size} ${state}`}
-                          size={size}
-                          kind={kind}
-                          active={state === 'active'}
-                          disabled={state === 'disabled'}
-                        />
-                      </Compare>
-                    )),
-                  ),
-                )}
-              </Box>
-              <Box gap="small">
-                <Compare>
-                  <Button secondary icon={<User />} size="small" />
-                </Compare>
-                <Compare>
-                  <Button secondary icon={<User />} />
-                </Compare>
-                <Compare>
-                  <Button secondary icon={<User />} size="large" />
-                </Compare>
-                <Compare>
-                  <Button secondary icon={<User />} size="xlarge" />
-                </Compare>
-              </Box>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <Menu
-                  label="Menu"
-                  items={[
-                    [{ label: 'Item 1' }, { label: 'Item 2' }],
-                    [{ label: 'Delete' }],
-                  ]}
-                />
-              </Compare>
-              <Compare>
-                <Menu
-                  label="Menu"
-                  kind="toolbar"
-                  items={[
-                    [{ label: 'Item 1' }, { label: 'Item 2' }],
-                    [{ label: 'Delete' }],
-                  ]}
-                />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Box gap="small">
-                <Compare>
-                  <ToggleGroup
-                    a11yTitle="Choose view"
-                    options={[
-                      {
-                        icon: <List a11yTitle="List view" />,
-                        value: 'list',
-                        tip: 'List',
-                      },
-                      {
-                        icon: <Table a11yTitle="Map view" />,
-                        value: 'table',
-                        tip: 'Table',
-                      },
-                      {
-                        icon: <MapLocation a11yTitle="Map view" />,
-                        value: 'map',
-                        tip: 'Map',
-                      },
-                    ]}
-                    defaultValue="list"
-                  />
-                </Compare>
-              </Box>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <Pagination numberItems={100} size="small" />
-              </Compare>
-              <Compare>
-                <Pagination numberItems={100} />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <Tabs>
-                  <Tab title="Tab 1" active />
-                  <Tab title="Tab 2" />
-                  <Tab title="Tab 3 (disabled)" disabled />
-                  <Tab title="Tab 4" />
-                </Tabs>
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare guidingChild="last">
-                <Accordion>
-                  <AccordionPanel label="Panel 1">hi</AccordionPanel>
-                  <AccordionPanel label="Panel 2">hi</AccordionPanel>
-                </Accordion>
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Box gap="small">
-                <Compare>
-                  <User size="small" />
-                </Compare>
-                <Compare>
-                  <User />
-                </Compare>
-                <Compare>
-                  <User size="large" />
-                </Compare>
-                <Compare>
-                  <User size="xlarge" />
-                </Compare>
-              </Box>
-            </ContentPane>
+            <Tabs
+              activeIndex={activeIndex}
+              onActive={index => setActiveIndex(index)}
+              alignControls="start"
+            >
+              <Tab title="Type">
+                <TabContent>
+                  <Anchors textSizes={textSizes} />
+                  <Texts textSizes={textSizes} />
+                  <Paragraphs />
+                  <Headings />
+                  <Tags />
+                </TabContent>
+              </Tab>
+              <Tab title="Controls">
+                <TabContent>
+                  <Buttons />
+                  <Menus />
+                  <ToggleGroups />
+                  <Paginations />
+                  <TabsContent />
+                  <Accordions />
+                </TabContent>
+              </Tab>
+              <Tab title="Inputs">
+                <TabContent>
+                  <Checkboxes />
+                  <Switches />
+                  <CheckboxGroups />
+                  <RadioButtonGroups />
+                  <StarRatings />
+                  <ThumbsRatings />
+                  <TextInputs />
+                  <DateInputs />
+                  <TextAreas />
+                  <Selects />
+                  <SelectMultiples />
+                  <FileInputs />
+                  <RangeInputs />
+                </TabContent>
+              </Tab>
+              <Tab title="Visualizations">
+                <TabContent>
+                  <Icons />
+                  <Spinners />
+                  <NameValueLists />
+                  <Notifications />
+                  <DataTables />
+                  <Meters />
+                </TabContent>
+              </Tab>
+              <Tab title="Layout">
+                <TabContent>
+                  <PageHeaders />
+                  <Spacing theme={hpeCurrent} />
+                  <ContentSizes theme={hpeCurrent} />
+                </TabContent>
+              </Tab>
 
-            {/* <Box>
+              {/* <Box>
           <Avatar background="blue!" size="small">
             <Text weight={500}>TS</Text>
           </Avatar>
@@ -386,328 +201,7 @@ const StickerSheet = () => {
             <Text weight={500}>TS</Text>
           </Avatar>
         </Box> */}
-            <ContentPane>
-              <Compare>
-                <CheckBox label="Checkbox label" />
-              </Compare>
-              <Compare guidingChild="last">
-                <FormField label="Label">
-                  <CheckBox label="Checkbox label" />
-                </FormField>
-              </Compare>
-              <Compare guidingChild="last">
-                <FormField label="Label" error="There is an error.">
-                  <CheckBox label="Checkbox label" />
-                </FormField>
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <StyleInProgress />
-              <Compare>
-                <CheckBox label="Switch label" toggle />
-                <CheckBox label="Switch label" toggle checked />
-                <CheckBox label="Switch label" toggle disabled />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare guidingChild="last">
-                <CheckBoxGroup
-                  options={[
-                    { label: 'Option 1' },
-                    { label: 'Option 2' },
-                    { label: 'Option 3', disabled: true },
-                  ]}
-                  value={['Option 2']}
-                />
-              </Compare>
-              <Compare>
-                <FormField label="Label">
-                  <CheckBoxGroup
-                    options={['Option 1', 'Option 2', 'Option 3']}
-                    value={['Option 2']}
-                  />
-                </FormField>
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <StyleInProgress />
-              <Compare guidingChild="last">
-                <RadioButtonGroup
-                  options={['Option 1', 'Option 2', 'Option 3']}
-                  value="Option 2"
-                  name="radio-group"
-                />
-              </Compare>
-              <Compare>
-                <FormField label="Label">
-                  <RadioButtonGroup
-                    options={['Option 1', 'Option 2', 'Option 3']}
-                    value="Option 2"
-                    name="radio-group-form"
-                  />
-                </FormField>
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <StarRating name="rating" value={2} />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <ThumbsRating name="like-dislike" value="like" />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare guidingChild="last">
-                <FormField
-                  label="Label"
-                  help="Here is help text"
-                  info="Here is info text"
-                >
-                  <TextInput value="Value" />
-                </FormField>
-              </Compare>
-              <Compare guidingChild="last">
-                <FormField label="Disabled input" disabled>
-                  <TextInput value="Value" disabled />
-                </FormField>
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <DateInput
-                  format="mm/dd/yyyy-mm/dd/yyyy"
-                  inline
-                  value={[
-                    new Date().toISOString(),
-                    new Date(+new Date() + 86400000 * 9).toISOString(),
-                  ]}
-                />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <TextArea placeholder="Type something" />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <Select
-                  options={['Option 1', 'Option 2', 'Option 3']}
-                  placeholder="Select option"
-                />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <SelectMultiple
-                  options={['Option 1', 'Option 2', 'Option 3']}
-                  value={['Option 1', 'Option 2']}
-                  showSelectedInline
-                />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <FileInput />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <RangeInput value={60} />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Box gap="medium">
-                <Compare>
-                  <Spinner size="xsmall" />
-                </Compare>
-                <Compare>
-                  <Spinner size="small" />
-                </Compare>
-                <Compare>
-                  <Spinner size="medium" />
-                </Compare>
-                <Compare>
-                  <Spinner size="large" />
-                </Compare>
-              </Box>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <Box align="start" gap="small">
-                  <Tag value="Value" name="Name" />
-                  <Tag value="Value" name="Name" onRemove={() => {}} />
-                </Box>
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <NameValueList>
-                  <NameValuePair name="City">San Francisco</NameValuePair>
-                  <NameValuePair name="State">California</NameValuePair>
-                </NameValueList>
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Box gap="medium">
-                <Compare>
-                  <Notification
-                    status="critical"
-                    message="this is a message"
-                    title="this is a title"
-                  />
-                </Compare>
-                <Compare>
-                  <Notification
-                    status="warning"
-                    message="this is a message"
-                    title="this is a title"
-                    onClose={() => {}}
-                  />
-                </Compare>
-                <Compare>
-                  <Notification
-                    status="normal"
-                    message="this is a message"
-                    title="this is a title"
-                    onClose={() => {}}
-                  />
-                </Compare>
-                <Compare>
-                  <Notification
-                    status="info"
-                    message="this is a message"
-                    title="this is a title"
-                    onClose={() => {}}
-                  />
-                </Compare>
-                <Compare>
-                  <Notification
-                    status="unknown"
-                    message="this is a message"
-                    title="this is a title"
-                    onClose={() => {}}
-                  />
-                </Compare>
-              </Box>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <PageHeader
-                  title="Page title"
-                  subtitle="Here is a subtitle for the page."
-                />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <DataTable
-                  onSelect={() => {}}
-                  select={['4352351']}
-                  columns={[
-                    {
-                      property: 'id',
-                      header: 'ID',
-                    },
-                    {
-                      property: 'firstName',
-                      header: 'First name',
-                    },
-                    {
-                      property: 'lastName',
-                      header: 'Last name',
-                      units: 'GB',
-                    },
-                  ]}
-                  data={[
-                    {
-                      id: '2341234',
-                      firstName: 'Taylor',
-                      lastName: 'Seamans',
-                    },
-                    {
-                      id: '4352351',
-                      firstName: 'Oliver',
-                      lastName: 'Plunkett',
-                    },
-                    {
-                      id: '6439201',
-                      firstName: 'Joelle',
-                      lastName: 'Gregory',
-                    },
-                  ]}
-                  sort={{
-                    property: 'firstName',
-                    direction: 'asc',
-                  }}
-                />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Compare>
-                <Meter
-                  type="circle"
-                  values={[
-                    {
-                      value: 40,
-                    },
-                    {
-                      value: 30,
-                    },
-                    {
-                      value: 10,
-                    },
-                    {
-                      value: 10,
-                    },
-                    {
-                      value: 10,
-                    },
-                  ]}
-                  max={100}
-                  size="small"
-                  thickness="medium"
-                />
-              </Compare>
-            </ContentPane>
-            <ContentPane>
-              <Box gap="small">
-                {Object.keys(hpeCurrent.global.edgeSize).map(
-                  size =>
-                    size !== 'responsiveBreakpoint' && (
-                      <Compare key={size}>
-                        <Box
-                          alignSelf="start"
-                          background={{ color: 'blue', opacity: 'medium' }}
-                          pad={{ left: size }}
-                          height="xxsmall"
-                          flex={false}
-                        />
-                      </Compare>
-                    ),
-                )}
-              </Box>
-            </ContentPane>
-            <ContentPane overflow={{ horizontal: 'auto' }}>
-              <Box gap="small">
-                {Object.keys(hpeCurrent.global.size).map(
-                  size =>
-                    size !== 'responsiveBreakpoint' && (
-                      <Compare key={size}>
-                        <Box
-                          alignSelf="start"
-                          background={{ color: 'blue', opacity: 'medium' }}
-                          width={size}
-                          height={size}
-                          flex={false}
-                        />
-                      </Compare>
-                    ),
-                )}
-              </Box>
-            </ContentPane>
+            </Tabs>
           </PageContent>
         </Page>
       </ModeContext.Provider>