diff --git a/docs/content/Dialog.md b/docs/content/Dialog.md
index 23d083efb04..7884eb65d36 100644
--- a/docs/content/Dialog.md
+++ b/docs/content/Dialog.md
@@ -8,12 +8,13 @@ The dialog component is used for all modals. It renders on top of the rest of th
 
 **Note:** You'll need to manage the `isOpen` state in a wrapper component of your own. For documentation purposes only we've created a mock `State` to handle this, but you should handle the state in the component you consume `Dialog` in or in a wrapper component.
 
-
+```jsx live
 <State default={false}>
   {([isOpen, setIsOpen]) => (
     <>
       <Button onClick={() => setIsOpen(true)}>Open</Button>
-      <Dialog title="Title" isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
+      <Dialog isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
+        <Dialog.Header>Title</Dialog.Header>
         <Box p={3}>
           <Text fontFamily="sans-serif">Some content</Text>
         </Box>
@@ -21,13 +22,19 @@ The dialog component is used for all modals. It renders on top of the rest of th
     </>
   )}
 </State>
+```
+
+You can also pass any non-text content into the header:
 
-```jsx
+```jsx live
 <State default={false}>
   {([isOpen, setIsOpen]) => (
     <>
       <Button onClick={() => setIsOpen(true)}>Open</Button>
-      <Dialog title="Title" isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
+      <Dialog isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
+        <Dialog.Header>
+          <Octicon icon={Zap} />
+        </Dialog.Header>
         <Box p={3}>
           <Text fontFamily="sans-serif">Some content</Text>
         </Box>
@@ -37,23 +44,15 @@ The dialog component is used for all modals. It renders on top of the rest of th
 </State>
 ```
 
-
-You can also pass any React node as the title to override the styling:
-
-```jsx
-<Dialog title={<Text fontSize={6}>Title</Text>}>
-```
-
 ## System props
 
-Dialog components get the `COMMON` and `LAYOUT` categories of system props. Read our [System Props](/system-props) doc page for a full list of available props.
+`Dialog` components get the `COMMON` and `LAYOUT` categories of system props. `Dialog.Header` components get `COMMON`, `LAYOUT`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 
-These props are **all required**.
-
 | Prop name | Type | Description |
 | :- | :- | :- |
-| title | String or Node | The title shown in the header |
-| isOpen | Boolean | Handles opening and closing the dialog |
-| onDismiss | Function | Should close the dialog |
+| isOpen | Boolean | Set whether or not the dialog is shown |
+| onDismiss | Function | A user-provided function that should close the dialog |
+
+`Dialog.Header` does not take any non-system props.
diff --git a/docs/content/Heading.md b/docs/content/Heading.md
index 824a33be9f4..3e71f224abf 100644
--- a/docs/content/Heading.md
+++ b/docs/content/Heading.md
@@ -2,11 +2,13 @@
 title: Heading
 ---
 
-The Heading component will render an html `h1-6` tag without any default styling. Please reference the [w3 recommendations for headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) to ensure your headings provide an accessible experience for screen reader users.
+The Heading component will render an html `h2` tag without any default styling. Other heading level elements `h1-h6` are available through use of the `as` prop (see [System Props](/system-props) for additional explanation). Please reference the [w3 recommendations for headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) to ensure your headings provide an accessible experience for screen reader users.
+
+**Attention:** Make sure to include a valid heading element to render a Heading component other than `h2` (`<Heading as="h1">H1 Element</Heading>`).
 
 ## Default example
 ```jsx live
-<Heading fontSize={1} mb={2}>With fontSize={1}</Heading>
+<Heading fontSize={1} mb={2}>H2 heading with fontSize={1}</Heading>
 ```
 
 ## System props
@@ -15,4 +17,6 @@ Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System
 
 ## Component props
 
-Heading does not get any additional props other than the system props mentioned above.
+| Prop name | Type    | Description                                      |
+| :-------- | :------ | :----------------------------------------------- |
+| as        | String  | sets the HTML tag for the component              |
diff --git a/index.d.ts b/index.d.ts
index f4538f169d4..61fbd30d03d 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -72,7 +72,9 @@ declare module '@primer/components' {
     extends BaseProps,
       CommonProps,
       TypographyProps,
-      Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'> {}
+      Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'> {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  }
 
   export const Heading: React.FunctionComponent<HeadingProps>
 
@@ -480,12 +482,15 @@ declare module '@primer/components' {
   export const themeGet: (key: any) => any
 
   export interface DialogProps extends CommonProps {
-    title: string
     isOpen: boolean
     onDismiss: () => unknown
   }
 
-  export const Dialog: React.FunctionComponent<DialogProps>
+  export interface DialogHeaderProps extends FlexProps {}
+
+  export const Dialog: React.FunctionComponent<DialogProps> & {
+    Header: React.FunctionComponent<DialogHeaderProps>
+  }
 
   export interface LabelGroupProps extends CommonProps, Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {}
 
diff --git a/src/Dialog.js b/src/Dialog.js
index ca67571f1d6..b00d4c46ad1 100644
--- a/src/Dialog.js
+++ b/src/Dialog.js
@@ -26,6 +26,7 @@ export const StyledDialog = styled(ReachDialog)`
   box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.35);
   border-radius: 4px;
   padding: 0 !important;
+  position: relative;
 
   @media screen and (max-width: 750px) {
     width: 100vw !important;
@@ -45,14 +46,13 @@ const UnstyledButton = styled(Flex).attrs({
   background: none;
   border: none;
   padding: 0;
+
+  position: absolute;
+  top: 16px;
+  right: 16px;
 `
 
-const DialogHeader = styled(Flex).attrs({
-  p: 3,
-  bg: 'gray.1',
-  justifyContent: 'space-between',
-  alignItems: 'center'
-})`
+const DialogHeaderBase = styled(Flex)`
   border-radius: 4px 4px 0px 0px;
   border-bottom: 1px solid #dad5da;
 
@@ -61,22 +61,29 @@ const DialogHeader = styled(Flex).attrs({
   }
 `
 
-const Dialog = ({title, children, ...props}) => {
+function DialogHeader({theme, children, ...rest}) {
+  if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
+    children = (
+      <Text theme={theme} color="gray.9" fontSize={1} fontWeight="bold" fontFamily="sans-serif">
+        {children}
+      </Text>
+    )
+  }
+
+  return (
+    <DialogHeaderBase theme={theme} p={3} {...rest}>
+      {children}
+    </DialogHeaderBase>
+  )
+}
+
+const Dialog = ({children, ...props}) => {
   return (
     <>
       <StyledDialog {...props}>
-        <DialogHeader>
-          {typeof title === 'string' ? (
-            <Text color="gray.9" fontSize={1} fontWeight="bold" fontFamily="sans-serif">
-              {title}
-            </Text>
-          ) : (
-            title
-          )}
-          <UnstyledButton onClick={props.onDismiss}>
-            <StyledOcticon icon={X} />
-          </UnstyledButton>
-        </DialogHeader>
+        <UnstyledButton onClick={props.onDismiss}>
+          <StyledOcticon icon={X} />
+        </UnstyledButton>
         {children}
       </StyledDialog>
       <ReachGlobalStyle />
@@ -93,8 +100,17 @@ Dialog.propTypes = {
   children: PropTypes.node.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onDismiss: PropTypes.func.isRequired,
-  theme: PropTypes.object,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+  theme: PropTypes.object
+}
+
+DialogHeader.defaultProps = {
+  backgroundColor: 'gray.1',
+  theme
+}
+
+DialogHeader.propTypes = {
+  ...Flex.propTypes
 }
 
+Dialog.Header = DialogHeader
 export default Dialog
diff --git a/src/Heading.js b/src/Heading.js
index f75ff14c3bc..424d3327572 100644
--- a/src/Heading.js
+++ b/src/Heading.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import {TYPOGRAPHY, COMMON, get} from './constants'
 import theme from './theme'
 
-const Heading = styled.h1`
+const Heading = styled.h2`
   font-weight: ${get('fontWeights.bold')};
   font-size: ${get('fontSizes.5')};
   margin: 0;
@@ -15,9 +15,10 @@ Heading.defaultProps = {
 }
 
 Heading.propTypes = {
+  as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  theme: PropTypes.object,
   ...COMMON.propTypes,
-  ...TYPOGRAPHY.propTypes,
-  theme: PropTypes.object
+  ...TYPOGRAPHY.propTypes
 }
 
 export default Heading
diff --git a/src/__tests__/BorderBox.js b/src/__tests__/BorderBox.js
index 9304f6ab166..67a2c3becc8 100644
--- a/src/__tests__/BorderBox.js
+++ b/src/__tests__/BorderBox.js
@@ -40,6 +40,6 @@ describe('BorderBox', () => {
 
   // the test returns the box shadow value without spaces, so had to manually provide the expected string here
   it('renders box shadow', () => {
-    expect(render(<BorderBox boxShadow="small" />)).toHaveStyleRule('box-shadow', '0 1px 1px rgba(27,31,35,0.1)')
+    expect(render(<BorderBox boxShadow="small" />)).toHaveStyleRule('box-shadow', '0 1px 0 rgba(149,157,165,0.1)')
   })
 })
diff --git a/src/__tests__/Dialog.js b/src/__tests__/Dialog.js
index 99a32e4d065..38173a350d7 100644
--- a/src/__tests__/Dialog.js
+++ b/src/__tests__/Dialog.js
@@ -8,7 +8,8 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 const comp = (
-  <Dialog title="Title" isOpen onDismiss={() => null}>
+  <Dialog isOpen onDismiss={() => null}>
+    <Dialog.Header>Title</Dialog.Header>
     <Box p={3}>
       <Text fontFamily="sans-serif">Some content</Text>
     </Box>
@@ -22,4 +23,8 @@ describe('Dialog', () => {
     expect(results).toHaveNoViolations()
     cleanup()
   })
+
+  it('renders consistently', () => {
+    expect(comp).toMatchSnapshot()
+  })
 })
diff --git a/src/__tests__/Heading.js b/src/__tests__/Heading.js
index d447cc2c587..2540da192c0 100644
--- a/src/__tests__/Heading.js
+++ b/src/__tests__/Heading.js
@@ -31,8 +31,8 @@ const theme = {
 }
 
 describe('Heading', () => {
-  it('renders <h1> by default', () => {
-    expect(render(<Heading />).type).toEqual('h1')
+  it('renders <h2> by default', () => {
+    expect(render(<Heading />).type).toEqual('h2')
   })
 
   it('should have no axe violations', async () => {
@@ -94,7 +94,6 @@ describe('Heading', () => {
 
   it('respects the "fontStyle" prop', () => {
     expect(render(<Heading fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Heading as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
   })
 
   it.skip('renders fontSize with f* classes using inverse scale', () => {
diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap
index e35e2e949b2..ccce0cf64b7 100644
--- a/src/__tests__/__snapshots__/CircleBadge.js.snap
+++ b/src/__tests__/__snapshots__/CircleBadge.js.snap
@@ -16,7 +16,7 @@ exports[`CircleBadge respects "as" prop 1`] = `
   justify-content: center;
   background-color: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+  box-shadow: 0 3px 6px rgba(149,157,165,0.15);
   width: 96px;
   height: 96px;
 }
@@ -42,7 +42,7 @@ exports[`CircleBadge respects the inline prop 1`] = `
   justify-content: center;
   background-color: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+  box-shadow: 0 3px 6px rgba(149,157,165,0.15);
   width: 96px;
   height: 96px;
 }
@@ -68,7 +68,7 @@ exports[`CircleBadge respects the variant prop 1`] = `
   justify-content: center;
   background-color: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+  box-shadow: 0 3px 6px rgba(149,157,165,0.15);
   width: 128px;
   height: 128px;
 }
@@ -94,7 +94,7 @@ exports[`CircleBadge uses the size prop to override the variant prop 1`] = `
   justify-content: center;
   background-color: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+  box-shadow: 0 3px 6px rgba(149,157,165,0.15);
   width: 20px;
   height: 20px;
 }
diff --git a/src/__tests__/__snapshots__/Dialog.js.snap b/src/__tests__/__snapshots__/Dialog.js.snap
new file mode 100644
index 00000000000..8566ce03799
--- /dev/null
+++ b/src/__tests__/__snapshots__/Dialog.js.snap
@@ -0,0 +1,1255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog renders consistently 1`] = `
+<Dialog
+  isOpen={true}
+  onDismiss={[Function]}
+  theme={
+    Object {
+      "borders": Array [
+        0,
+        "1px solid",
+      ],
+      "breakpoints": Array [
+        "544px",
+        "768px",
+        "1012px",
+        "1280px",
+      ],
+      "buttons": Object {
+        "danger": Object {
+          "bg": Object {
+            "active": "#be222e",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#cb2431",
+          },
+          "border": Object {
+            "active": "#9e1c23",
+            "default": "#e1e4e8",
+            "hover": "#b31d28",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#cb2431",
+            "disabled": "rgba(203,36,49, .5)",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(179, 29, 40, 0.4)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(203, 36, 49, 0.4)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "default": Object {
+          "bg": Object {
+            "active": "#edeff2",
+            "default": "#fafbfc",
+            "disabled": "#fafbfc",
+            "hover": "#F3F4F6",
+          },
+          "border": Object {
+            "active": "#d1d5da",
+            "default": "#e1e4e8",
+            "disabled": "#eaecef",
+          },
+          "color": Object {
+            "default": "#24292e",
+            "disabled": "#959da5",
+          },
+          "shadow": Object {
+            "active": "inset 0px 2px 0px rgba(149, 157, 165, 0.1)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)",
+          },
+        },
+        "outline": Object {
+          "bg": Object {
+            "active": "#035fc7",
+            "default": "#fafbfc",
+            "disabled": "#F3F4F6",
+            "hover": "#0366d6",
+          },
+          "border": Object {
+            "active": "rgba(4, 66, 137, .5)",
+            "default": "#e1e4e8",
+            "hover": "#005cc5",
+          },
+          "color": Object {
+            "active": "#fff",
+            "default": "#005cc5",
+            "disabled": "#959da5",
+            "hover": "#fff",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(4, 66, 137, 0.2)",
+            "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+            "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+            "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          },
+        },
+        "primary": Object {
+          "bg": Object {
+            "active": "#128031",
+            "default": "#159739",
+            "disabled": "#94D3A2",
+            "focus": "#138934",
+            "hover": "#138934",
+          },
+          "border": Object {
+            "active": "#176f2c",
+            "default": "#22863a",
+            "disabled": "rgba(34, 134, 58, 0.1)",
+            "hover": "#176f2c",
+          },
+          "color": Object {
+            "default": "#fff",
+            "disabled": "rgba(255, 255, 255, 0.50)",
+          },
+          "shadow": Object {
+            "active": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+            "default": " 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            "focus": "0 0 0 3px #94D3A2",
+          },
+        },
+      },
+      "colors": Object {
+        "accent": "#f66a0a",
+        "bg": Object {
+          "disabled": "#F3F4F6",
+          "gray": "#f6f8fa",
+          "grayLight": "#fafbfc",
+        },
+        "black": "#1b1f23",
+        "blackfade15": "rgba(27, 31, 35, 0.15)",
+        "blackfade20": "rgba(27, 31, 35, 0.20)",
+        "blackfade30": "rgba(27,31,35,0.3)",
+        "blackfade35": "rgba(27, 31, 35, 0.35)",
+        "blackfade50": "rgba(27, 31, 35, 0.5)",
+        "blue": Array [
+          "#f1f8ff",
+          "#dbedff",
+          "#c8e1ff",
+          "#79b8ff",
+          "#2188ff",
+          "#0366d6",
+          "#005cc5",
+          "#044289",
+          "#032f62",
+          "#05264c",
+        ],
+        "bodytext": "#24292e",
+        "border": Object {
+          "gray": "#e1e4e8",
+          "grayDark": "#d1d5da",
+          "grayLight": "#eaecef",
+        },
+        "counter": Object {
+          "bg": "rgba(27, 31, 35, 0.08)",
+        },
+        "filterList": Object {
+          "hoverBg": "#eaecef",
+        },
+        "gray": Array [
+          "#fafbfc",
+          "#f6f8fa",
+          "#e1e4e8",
+          "#d1d5da",
+          "#959da5",
+          "#6a737d",
+          "#586069",
+          "#444d56",
+          "#2f363d",
+          "#24292e",
+        ],
+        "green": Array [
+          "#f0fff4",
+          "#dcffe4",
+          "#bef5cb",
+          "#85e89d",
+          "#34d058",
+          "#28a745",
+          "#22863a",
+          "#176f2c",
+          "#165c26",
+          "#144620",
+        ],
+        "orange": Array [
+          "#fff8f2",
+          "#ffebda",
+          "#ffd1ac",
+          "#ffab70",
+          "#fb8532",
+          "#f66a0a",
+          "#e36209",
+          "#d15704",
+          "#c24e00",
+          "#a04100",
+        ],
+        "purple": Array [
+          "#f5f0ff",
+          "#e6dcfd",
+          "#d1bcf9",
+          "#b392f0",
+          "#8a63d2",
+          "#6f42c1",
+          "#5a32a3",
+          "#4c2889",
+          "#3a1d6e",
+          "#29134e",
+        ],
+        "red": Array [
+          "#ffeef0",
+          "#ffdce0",
+          "#fdaeb7",
+          "#f97583",
+          "#ea4a5a",
+          "#d73a49",
+          "#cb2431",
+          "#b31d28",
+          "#9e1c23",
+          "#86181d",
+        ],
+        "state": Object {
+          "error": "#d73a49",
+          "failure": "#d73a49",
+          "pending": "#dbab09",
+          "queued": "#dbab09",
+          "success": "#28a745",
+          "unknown": "#959da5",
+        },
+        "text": Object {
+          "gray": "#586069",
+          "grayDark": "#24292e",
+          "grayLight": "#6a737d",
+          "red": "#cb2431",
+        },
+        "white": "#fff",
+        "whitefade15": "rgba(255, 255, 255, 0.15)",
+        "whitefade50": "rgba(255, 255, 255, 0.50)",
+        "yellow": Array [
+          "#fffdef",
+          "#fffbdd",
+          "#fff5b1",
+          "#ffea7f",
+          "#ffdf5d",
+          "#ffd33d",
+          "#f9c513",
+          "#dbab09",
+          "#b08800",
+          "#735c0f",
+        ],
+      },
+      "fontSizes": Array [
+        "12px",
+        "14px",
+        "16px",
+        "20px",
+        "24px",
+        "32px",
+        "40px",
+        "48px",
+      ],
+      "fontWeights": Object {
+        "bold": 600,
+        "light": 300,
+        "normal": 400,
+        "semibold": 500,
+      },
+      "fonts": Object {
+        "mono": "SFMono-Regular, Consolas, \\"Liberation Mono\\", Menlo, Courier, monospace",
+        "normal": "-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"",
+      },
+      "lineHeights": Object {
+        "condensed": 1.25,
+        "condensedUltra": 1,
+        "default": 1.5,
+      },
+      "popovers": Object {
+        "colors": Object {
+          "caret": "rgba(27, 31, 35, 0.15)",
+        },
+      },
+      "radii": Array [
+        "0",
+        "3px",
+        "6px",
+        "100px",
+      ],
+      "shadows": Object {
+        "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)",
+        "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
+        "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
+        "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
+        "large": "0 8px 24px rgba(149, 157, 165, 0.2)",
+        "medium": "0 3px 6px rgba(149, 157, 165, 0.15)",
+        "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+        "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+        "small": "0 1px 0 rgba(149, 157, 165, 0.1)",
+      },
+      "sizes": Object {
+        "large": "1012px",
+        "medium": "768px",
+        "small": "544px",
+        "xlarge": "1280px",
+      },
+      "space": Array [
+        "0",
+        "4px",
+        "8px",
+        "16px",
+        "24px",
+        "32px",
+        "40px",
+        "48px",
+        "64px",
+        "80px",
+        "96px",
+        "112px",
+        "128px",
+      ],
+    }
+  }
+>
+  <DialogHeader
+    backgroundColor="gray.1"
+    theme={
+      Object {
+        "borders": Array [
+          0,
+          "1px solid",
+        ],
+        "breakpoints": Array [
+          "544px",
+          "768px",
+          "1012px",
+          "1280px",
+        ],
+        "buttons": Object {
+          "danger": Object {
+            "bg": Object {
+              "active": "#be222e",
+              "default": "#fafbfc",
+              "disabled": "#F3F4F6",
+              "hover": "#cb2431",
+            },
+            "border": Object {
+              "active": "#9e1c23",
+              "default": "#e1e4e8",
+              "hover": "#b31d28",
+            },
+            "color": Object {
+              "active": "#fff",
+              "default": "#cb2431",
+              "disabled": "rgba(203,36,49, .5)",
+              "hover": "#fff",
+            },
+            "shadow": Object {
+              "active": "inset 0px 2px 0px rgba(179, 29, 40, 0.4)",
+              "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+              "focus": "0 0 0 3px rgba(203, 36, 49, 0.4)",
+              "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            },
+          },
+          "default": Object {
+            "bg": Object {
+              "active": "#edeff2",
+              "default": "#fafbfc",
+              "disabled": "#fafbfc",
+              "hover": "#F3F4F6",
+            },
+            "border": Object {
+              "active": "#d1d5da",
+              "default": "#e1e4e8",
+              "disabled": "#eaecef",
+            },
+            "color": Object {
+              "default": "#24292e",
+              "disabled": "#959da5",
+            },
+            "shadow": Object {
+              "active": "inset 0px 2px 0px rgba(149, 157, 165, 0.1)",
+              "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+              "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+              "hover": "0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)",
+            },
+          },
+          "outline": Object {
+            "bg": Object {
+              "active": "#035fc7",
+              "default": "#fafbfc",
+              "disabled": "#F3F4F6",
+              "hover": "#0366d6",
+            },
+            "border": Object {
+              "active": "rgba(4, 66, 137, .5)",
+              "default": "#e1e4e8",
+              "hover": "#005cc5",
+            },
+            "color": Object {
+              "active": "#fff",
+              "default": "#005cc5",
+              "disabled": "#959da5",
+              "hover": "#fff",
+            },
+            "shadow": Object {
+              "active": "inset 0px 1px 0px rgba(4, 66, 137, 0.2)",
+              "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+              "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+              "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            },
+          },
+          "primary": Object {
+            "bg": Object {
+              "active": "#128031",
+              "default": "#159739",
+              "disabled": "#94D3A2",
+              "focus": "#138934",
+              "hover": "#138934",
+            },
+            "border": Object {
+              "active": "#176f2c",
+              "default": "#22863a",
+              "disabled": "rgba(34, 134, 58, 0.1)",
+              "hover": "#176f2c",
+            },
+            "color": Object {
+              "default": "#fff",
+              "disabled": "rgba(255, 255, 255, 0.50)",
+            },
+            "shadow": Object {
+              "active": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+              "default": " 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+              "focus": "0 0 0 3px #94D3A2",
+            },
+          },
+        },
+        "colors": Object {
+          "accent": "#f66a0a",
+          "bg": Object {
+            "disabled": "#F3F4F6",
+            "gray": "#f6f8fa",
+            "grayLight": "#fafbfc",
+          },
+          "black": "#1b1f23",
+          "blackfade15": "rgba(27, 31, 35, 0.15)",
+          "blackfade20": "rgba(27, 31, 35, 0.20)",
+          "blackfade30": "rgba(27,31,35,0.3)",
+          "blackfade35": "rgba(27, 31, 35, 0.35)",
+          "blackfade50": "rgba(27, 31, 35, 0.5)",
+          "blue": Array [
+            "#f1f8ff",
+            "#dbedff",
+            "#c8e1ff",
+            "#79b8ff",
+            "#2188ff",
+            "#0366d6",
+            "#005cc5",
+            "#044289",
+            "#032f62",
+            "#05264c",
+          ],
+          "bodytext": "#24292e",
+          "border": Object {
+            "gray": "#e1e4e8",
+            "grayDark": "#d1d5da",
+            "grayLight": "#eaecef",
+          },
+          "counter": Object {
+            "bg": "rgba(27, 31, 35, 0.08)",
+          },
+          "filterList": Object {
+            "hoverBg": "#eaecef",
+          },
+          "gray": Array [
+            "#fafbfc",
+            "#f6f8fa",
+            "#e1e4e8",
+            "#d1d5da",
+            "#959da5",
+            "#6a737d",
+            "#586069",
+            "#444d56",
+            "#2f363d",
+            "#24292e",
+          ],
+          "green": Array [
+            "#f0fff4",
+            "#dcffe4",
+            "#bef5cb",
+            "#85e89d",
+            "#34d058",
+            "#28a745",
+            "#22863a",
+            "#176f2c",
+            "#165c26",
+            "#144620",
+          ],
+          "orange": Array [
+            "#fff8f2",
+            "#ffebda",
+            "#ffd1ac",
+            "#ffab70",
+            "#fb8532",
+            "#f66a0a",
+            "#e36209",
+            "#d15704",
+            "#c24e00",
+            "#a04100",
+          ],
+          "purple": Array [
+            "#f5f0ff",
+            "#e6dcfd",
+            "#d1bcf9",
+            "#b392f0",
+            "#8a63d2",
+            "#6f42c1",
+            "#5a32a3",
+            "#4c2889",
+            "#3a1d6e",
+            "#29134e",
+          ],
+          "red": Array [
+            "#ffeef0",
+            "#ffdce0",
+            "#fdaeb7",
+            "#f97583",
+            "#ea4a5a",
+            "#d73a49",
+            "#cb2431",
+            "#b31d28",
+            "#9e1c23",
+            "#86181d",
+          ],
+          "state": Object {
+            "error": "#d73a49",
+            "failure": "#d73a49",
+            "pending": "#dbab09",
+            "queued": "#dbab09",
+            "success": "#28a745",
+            "unknown": "#959da5",
+          },
+          "text": Object {
+            "gray": "#586069",
+            "grayDark": "#24292e",
+            "grayLight": "#6a737d",
+            "red": "#cb2431",
+          },
+          "white": "#fff",
+          "whitefade15": "rgba(255, 255, 255, 0.15)",
+          "whitefade50": "rgba(255, 255, 255, 0.50)",
+          "yellow": Array [
+            "#fffdef",
+            "#fffbdd",
+            "#fff5b1",
+            "#ffea7f",
+            "#ffdf5d",
+            "#ffd33d",
+            "#f9c513",
+            "#dbab09",
+            "#b08800",
+            "#735c0f",
+          ],
+        },
+        "fontSizes": Array [
+          "12px",
+          "14px",
+          "16px",
+          "20px",
+          "24px",
+          "32px",
+          "40px",
+          "48px",
+        ],
+        "fontWeights": Object {
+          "bold": 600,
+          "light": 300,
+          "normal": 400,
+          "semibold": 500,
+        },
+        "fonts": Object {
+          "mono": "SFMono-Regular, Consolas, \\"Liberation Mono\\", Menlo, Courier, monospace",
+          "normal": "-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"",
+        },
+        "lineHeights": Object {
+          "condensed": 1.25,
+          "condensedUltra": 1,
+          "default": 1.5,
+        },
+        "popovers": Object {
+          "colors": Object {
+            "caret": "rgba(27, 31, 35, 0.15)",
+          },
+        },
+        "radii": Array [
+          "0",
+          "3px",
+          "6px",
+          "100px",
+        ],
+        "shadows": Object {
+          "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)",
+          "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
+          "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
+          "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
+          "large": "0 8px 24px rgba(149, 157, 165, 0.2)",
+          "medium": "0 3px 6px rgba(149, 157, 165, 0.15)",
+          "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+          "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          "small": "0 1px 0 rgba(149, 157, 165, 0.1)",
+        },
+        "sizes": Object {
+          "large": "1012px",
+          "medium": "768px",
+          "small": "544px",
+          "xlarge": "1280px",
+        },
+        "space": Array [
+          "0",
+          "4px",
+          "8px",
+          "16px",
+          "24px",
+          "32px",
+          "40px",
+          "48px",
+          "64px",
+          "80px",
+          "96px",
+          "112px",
+          "128px",
+        ],
+      }
+    }
+  >
+    Title
+  </DialogHeader>
+  <ForwardRef(Box)
+    p={3}
+    theme={
+      Object {
+        "borders": Array [
+          0,
+          "1px solid",
+        ],
+        "breakpoints": Array [
+          "544px",
+          "768px",
+          "1012px",
+          "1280px",
+        ],
+        "buttons": Object {
+          "danger": Object {
+            "bg": Object {
+              "active": "#be222e",
+              "default": "#fafbfc",
+              "disabled": "#F3F4F6",
+              "hover": "#cb2431",
+            },
+            "border": Object {
+              "active": "#9e1c23",
+              "default": "#e1e4e8",
+              "hover": "#b31d28",
+            },
+            "color": Object {
+              "active": "#fff",
+              "default": "#cb2431",
+              "disabled": "rgba(203,36,49, .5)",
+              "hover": "#fff",
+            },
+            "shadow": Object {
+              "active": "inset 0px 2px 0px rgba(179, 29, 40, 0.4)",
+              "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+              "focus": "0 0 0 3px rgba(203, 36, 49, 0.4)",
+              "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            },
+          },
+          "default": Object {
+            "bg": Object {
+              "active": "#edeff2",
+              "default": "#fafbfc",
+              "disabled": "#fafbfc",
+              "hover": "#F3F4F6",
+            },
+            "border": Object {
+              "active": "#d1d5da",
+              "default": "#e1e4e8",
+              "disabled": "#eaecef",
+            },
+            "color": Object {
+              "default": "#24292e",
+              "disabled": "#959da5",
+            },
+            "shadow": Object {
+              "active": "inset 0px 2px 0px rgba(149, 157, 165, 0.1)",
+              "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+              "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+              "hover": "0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)",
+            },
+          },
+          "outline": Object {
+            "bg": Object {
+              "active": "#035fc7",
+              "default": "#fafbfc",
+              "disabled": "#F3F4F6",
+              "hover": "#0366d6",
+            },
+            "border": Object {
+              "active": "rgba(4, 66, 137, .5)",
+              "default": "#e1e4e8",
+              "hover": "#005cc5",
+            },
+            "color": Object {
+              "active": "#fff",
+              "default": "#005cc5",
+              "disabled": "#959da5",
+              "hover": "#fff",
+            },
+            "shadow": Object {
+              "active": "inset 0px 1px 0px rgba(4, 66, 137, 0.2)",
+              "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+              "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+              "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            },
+          },
+          "primary": Object {
+            "bg": Object {
+              "active": "#128031",
+              "default": "#159739",
+              "disabled": "#94D3A2",
+              "focus": "#138934",
+              "hover": "#138934",
+            },
+            "border": Object {
+              "active": "#176f2c",
+              "default": "#22863a",
+              "disabled": "rgba(34, 134, 58, 0.1)",
+              "hover": "#176f2c",
+            },
+            "color": Object {
+              "default": "#fff",
+              "disabled": "rgba(255, 255, 255, 0.50)",
+            },
+            "shadow": Object {
+              "active": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+              "default": " 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+              "focus": "0 0 0 3px #94D3A2",
+            },
+          },
+        },
+        "colors": Object {
+          "accent": "#f66a0a",
+          "bg": Object {
+            "disabled": "#F3F4F6",
+            "gray": "#f6f8fa",
+            "grayLight": "#fafbfc",
+          },
+          "black": "#1b1f23",
+          "blackfade15": "rgba(27, 31, 35, 0.15)",
+          "blackfade20": "rgba(27, 31, 35, 0.20)",
+          "blackfade30": "rgba(27,31,35,0.3)",
+          "blackfade35": "rgba(27, 31, 35, 0.35)",
+          "blackfade50": "rgba(27, 31, 35, 0.5)",
+          "blue": Array [
+            "#f1f8ff",
+            "#dbedff",
+            "#c8e1ff",
+            "#79b8ff",
+            "#2188ff",
+            "#0366d6",
+            "#005cc5",
+            "#044289",
+            "#032f62",
+            "#05264c",
+          ],
+          "bodytext": "#24292e",
+          "border": Object {
+            "gray": "#e1e4e8",
+            "grayDark": "#d1d5da",
+            "grayLight": "#eaecef",
+          },
+          "counter": Object {
+            "bg": "rgba(27, 31, 35, 0.08)",
+          },
+          "filterList": Object {
+            "hoverBg": "#eaecef",
+          },
+          "gray": Array [
+            "#fafbfc",
+            "#f6f8fa",
+            "#e1e4e8",
+            "#d1d5da",
+            "#959da5",
+            "#6a737d",
+            "#586069",
+            "#444d56",
+            "#2f363d",
+            "#24292e",
+          ],
+          "green": Array [
+            "#f0fff4",
+            "#dcffe4",
+            "#bef5cb",
+            "#85e89d",
+            "#34d058",
+            "#28a745",
+            "#22863a",
+            "#176f2c",
+            "#165c26",
+            "#144620",
+          ],
+          "orange": Array [
+            "#fff8f2",
+            "#ffebda",
+            "#ffd1ac",
+            "#ffab70",
+            "#fb8532",
+            "#f66a0a",
+            "#e36209",
+            "#d15704",
+            "#c24e00",
+            "#a04100",
+          ],
+          "purple": Array [
+            "#f5f0ff",
+            "#e6dcfd",
+            "#d1bcf9",
+            "#b392f0",
+            "#8a63d2",
+            "#6f42c1",
+            "#5a32a3",
+            "#4c2889",
+            "#3a1d6e",
+            "#29134e",
+          ],
+          "red": Array [
+            "#ffeef0",
+            "#ffdce0",
+            "#fdaeb7",
+            "#f97583",
+            "#ea4a5a",
+            "#d73a49",
+            "#cb2431",
+            "#b31d28",
+            "#9e1c23",
+            "#86181d",
+          ],
+          "state": Object {
+            "error": "#d73a49",
+            "failure": "#d73a49",
+            "pending": "#dbab09",
+            "queued": "#dbab09",
+            "success": "#28a745",
+            "unknown": "#959da5",
+          },
+          "text": Object {
+            "gray": "#586069",
+            "grayDark": "#24292e",
+            "grayLight": "#6a737d",
+            "red": "#cb2431",
+          },
+          "white": "#fff",
+          "whitefade15": "rgba(255, 255, 255, 0.15)",
+          "whitefade50": "rgba(255, 255, 255, 0.50)",
+          "yellow": Array [
+            "#fffdef",
+            "#fffbdd",
+            "#fff5b1",
+            "#ffea7f",
+            "#ffdf5d",
+            "#ffd33d",
+            "#f9c513",
+            "#dbab09",
+            "#b08800",
+            "#735c0f",
+          ],
+        },
+        "fontSizes": Array [
+          "12px",
+          "14px",
+          "16px",
+          "20px",
+          "24px",
+          "32px",
+          "40px",
+          "48px",
+        ],
+        "fontWeights": Object {
+          "bold": 600,
+          "light": 300,
+          "normal": 400,
+          "semibold": 500,
+        },
+        "fonts": Object {
+          "mono": "SFMono-Regular, Consolas, \\"Liberation Mono\\", Menlo, Courier, monospace",
+          "normal": "-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"",
+        },
+        "lineHeights": Object {
+          "condensed": 1.25,
+          "condensedUltra": 1,
+          "default": 1.5,
+        },
+        "popovers": Object {
+          "colors": Object {
+            "caret": "rgba(27, 31, 35, 0.15)",
+          },
+        },
+        "radii": Array [
+          "0",
+          "3px",
+          "6px",
+          "100px",
+        ],
+        "shadows": Object {
+          "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)",
+          "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
+          "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
+          "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
+          "large": "0 8px 24px rgba(149, 157, 165, 0.2)",
+          "medium": "0 3px 6px rgba(149, 157, 165, 0.15)",
+          "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+          "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+          "small": "0 1px 0 rgba(149, 157, 165, 0.1)",
+        },
+        "sizes": Object {
+          "large": "1012px",
+          "medium": "768px",
+          "small": "544px",
+          "xlarge": "1280px",
+        },
+        "space": Array [
+          "0",
+          "4px",
+          "8px",
+          "16px",
+          "24px",
+          "32px",
+          "40px",
+          "48px",
+          "64px",
+          "80px",
+          "96px",
+          "112px",
+          "128px",
+        ],
+      }
+    }
+  >
+    <ForwardRef(Text)
+      fontFamily="sans-serif"
+      theme={
+        Object {
+          "borders": Array [
+            0,
+            "1px solid",
+          ],
+          "breakpoints": Array [
+            "544px",
+            "768px",
+            "1012px",
+            "1280px",
+          ],
+          "buttons": Object {
+            "danger": Object {
+              "bg": Object {
+                "active": "#be222e",
+                "default": "#fafbfc",
+                "disabled": "#F3F4F6",
+                "hover": "#cb2431",
+              },
+              "border": Object {
+                "active": "#9e1c23",
+                "default": "#e1e4e8",
+                "hover": "#b31d28",
+              },
+              "color": Object {
+                "active": "#fff",
+                "default": "#cb2431",
+                "disabled": "rgba(203,36,49, .5)",
+                "hover": "#fff",
+              },
+              "shadow": Object {
+                "active": "inset 0px 2px 0px rgba(179, 29, 40, 0.4)",
+                "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+                "focus": "0 0 0 3px rgba(203, 36, 49, 0.4)",
+                "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+              },
+            },
+            "default": Object {
+              "bg": Object {
+                "active": "#edeff2",
+                "default": "#fafbfc",
+                "disabled": "#fafbfc",
+                "hover": "#F3F4F6",
+              },
+              "border": Object {
+                "active": "#d1d5da",
+                "default": "#e1e4e8",
+                "disabled": "#eaecef",
+              },
+              "color": Object {
+                "default": "#24292e",
+                "disabled": "#959da5",
+              },
+              "shadow": Object {
+                "active": "inset 0px 2px 0px rgba(149, 157, 165, 0.1)",
+                "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+                "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+                "hover": "0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)",
+              },
+            },
+            "outline": Object {
+              "bg": Object {
+                "active": "#035fc7",
+                "default": "#fafbfc",
+                "disabled": "#F3F4F6",
+                "hover": "#0366d6",
+              },
+              "border": Object {
+                "active": "rgba(4, 66, 137, .5)",
+                "default": "#e1e4e8",
+                "hover": "#005cc5",
+              },
+              "color": Object {
+                "active": "#fff",
+                "default": "#005cc5",
+                "disabled": "#959da5",
+                "hover": "#fff",
+              },
+              "shadow": Object {
+                "active": "inset 0px 1px 0px rgba(4, 66, 137, 0.2)",
+                "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)",
+                "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)",
+                "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+              },
+            },
+            "primary": Object {
+              "bg": Object {
+                "active": "#128031",
+                "default": "#159739",
+                "disabled": "#94D3A2",
+                "focus": "#138934",
+                "hover": "#138934",
+              },
+              "border": Object {
+                "active": "#176f2c",
+                "default": "#22863a",
+                "disabled": "rgba(34, 134, 58, 0.1)",
+                "hover": "#176f2c",
+              },
+              "color": Object {
+                "default": "#fff",
+                "disabled": "rgba(255, 255, 255, 0.50)",
+              },
+              "shadow": Object {
+                "active": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+                "default": " 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+                "focus": "0 0 0 3px #94D3A2",
+              },
+            },
+          },
+          "colors": Object {
+            "accent": "#f66a0a",
+            "bg": Object {
+              "disabled": "#F3F4F6",
+              "gray": "#f6f8fa",
+              "grayLight": "#fafbfc",
+            },
+            "black": "#1b1f23",
+            "blackfade15": "rgba(27, 31, 35, 0.15)",
+            "blackfade20": "rgba(27, 31, 35, 0.20)",
+            "blackfade30": "rgba(27,31,35,0.3)",
+            "blackfade35": "rgba(27, 31, 35, 0.35)",
+            "blackfade50": "rgba(27, 31, 35, 0.5)",
+            "blue": Array [
+              "#f1f8ff",
+              "#dbedff",
+              "#c8e1ff",
+              "#79b8ff",
+              "#2188ff",
+              "#0366d6",
+              "#005cc5",
+              "#044289",
+              "#032f62",
+              "#05264c",
+            ],
+            "bodytext": "#24292e",
+            "border": Object {
+              "gray": "#e1e4e8",
+              "grayDark": "#d1d5da",
+              "grayLight": "#eaecef",
+            },
+            "counter": Object {
+              "bg": "rgba(27, 31, 35, 0.08)",
+            },
+            "filterList": Object {
+              "hoverBg": "#eaecef",
+            },
+            "gray": Array [
+              "#fafbfc",
+              "#f6f8fa",
+              "#e1e4e8",
+              "#d1d5da",
+              "#959da5",
+              "#6a737d",
+              "#586069",
+              "#444d56",
+              "#2f363d",
+              "#24292e",
+            ],
+            "green": Array [
+              "#f0fff4",
+              "#dcffe4",
+              "#bef5cb",
+              "#85e89d",
+              "#34d058",
+              "#28a745",
+              "#22863a",
+              "#176f2c",
+              "#165c26",
+              "#144620",
+            ],
+            "orange": Array [
+              "#fff8f2",
+              "#ffebda",
+              "#ffd1ac",
+              "#ffab70",
+              "#fb8532",
+              "#f66a0a",
+              "#e36209",
+              "#d15704",
+              "#c24e00",
+              "#a04100",
+            ],
+            "purple": Array [
+              "#f5f0ff",
+              "#e6dcfd",
+              "#d1bcf9",
+              "#b392f0",
+              "#8a63d2",
+              "#6f42c1",
+              "#5a32a3",
+              "#4c2889",
+              "#3a1d6e",
+              "#29134e",
+            ],
+            "red": Array [
+              "#ffeef0",
+              "#ffdce0",
+              "#fdaeb7",
+              "#f97583",
+              "#ea4a5a",
+              "#d73a49",
+              "#cb2431",
+              "#b31d28",
+              "#9e1c23",
+              "#86181d",
+            ],
+            "state": Object {
+              "error": "#d73a49",
+              "failure": "#d73a49",
+              "pending": "#dbab09",
+              "queued": "#dbab09",
+              "success": "#28a745",
+              "unknown": "#959da5",
+            },
+            "text": Object {
+              "gray": "#586069",
+              "grayDark": "#24292e",
+              "grayLight": "#6a737d",
+              "red": "#cb2431",
+            },
+            "white": "#fff",
+            "whitefade15": "rgba(255, 255, 255, 0.15)",
+            "whitefade50": "rgba(255, 255, 255, 0.50)",
+            "yellow": Array [
+              "#fffdef",
+              "#fffbdd",
+              "#fff5b1",
+              "#ffea7f",
+              "#ffdf5d",
+              "#ffd33d",
+              "#f9c513",
+              "#dbab09",
+              "#b08800",
+              "#735c0f",
+            ],
+          },
+          "fontSizes": Array [
+            "12px",
+            "14px",
+            "16px",
+            "20px",
+            "24px",
+            "32px",
+            "40px",
+            "48px",
+          ],
+          "fontWeights": Object {
+            "bold": 600,
+            "light": 300,
+            "normal": 400,
+            "semibold": 500,
+          },
+          "fonts": Object {
+            "mono": "SFMono-Regular, Consolas, \\"Liberation Mono\\", Menlo, Courier, monospace",
+            "normal": "-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"",
+          },
+          "lineHeights": Object {
+            "condensed": 1.25,
+            "condensedUltra": 1,
+            "default": 1.5,
+          },
+          "popovers": Object {
+            "colors": Object {
+              "caret": "rgba(27, 31, 35, 0.15)",
+            },
+          },
+          "radii": Array [
+            "0",
+            "3px",
+            "6px",
+            "100px",
+          ],
+          "shadows": Object {
+            "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)",
+            "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
+            "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
+            "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
+            "large": "0 8px 24px rgba(149, 157, 165, 0.2)",
+            "medium": "0 3px 6px rgba(149, 157, 165, 0.15)",
+            "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
+            "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
+            "small": "0 1px 0 rgba(149, 157, 165, 0.1)",
+          },
+          "sizes": Object {
+            "large": "1012px",
+            "medium": "768px",
+            "small": "544px",
+            "xlarge": "1280px",
+          },
+          "space": Array [
+            "0",
+            "4px",
+            "8px",
+            "16px",
+            "24px",
+            "32px",
+            "40px",
+            "48px",
+            "64px",
+            "80px",
+            "96px",
+            "112px",
+            "128px",
+          ],
+        }
+      }
+    >
+      Some content
+    </ForwardRef(Text)>
+  </ForwardRef(Box)>
+</Dialog>
+`;
diff --git a/src/theme.js b/src/theme.js
index cccbade424e..e0542dfa958 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -82,10 +82,10 @@ const borders = [0, '1px solid']
 const radii = ['0', '3px', '6px', '100px']
 
 const shadows = {
-  small: '0 1px 1px rgba(27, 31, 35, 0.1)',
-  medium: '0 1px 5px rgba(27, 31, 35, 0.15)',
-  large: '0 1px 15px rgba(27, 31, 35, 0.15)',
-  'extra-large': '0 10px 50px rgba(27, 31, 35, 0.07)',
+  small: '0 1px 0 rgba(149, 157, 165, 0.1)',
+  medium: '0 3px 6px rgba(149, 157, 165, 0.15)',
+  large: '0 8px 24px rgba(149, 157, 165, 0.2)',
+  'extra-large': '0 12px 48px rgba(149, 157, 165, 0.3)',
   formControl: 'inset 0px 2px 0px rgba(225, 228, 232, 0.2)',
   formControlDisabled: 'inset 0px 2px 0px rgba(220, 227, 237, 0.3)',
   formControlFocus: 'rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em',