From 947b4322c8ac672116a27e651398619dec2c146f Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Wed, 25 Sep 2019 10:53:03 -0600
Subject: [PATCH 1/2] Add global styling setup to README

---
 README.md | 42 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 5f361d00..d5ea377b 100644
--- a/README.md
+++ b/README.md
@@ -44,18 +44,44 @@ The Storybook design system codifies existing UI components into a central, well
 npm install --save @storybook/design-system
 ```
 
-## Usage
+## Global Styles
 
-```jsx
-import React, { Component } from 'react';
+Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:
+
+#### Option 1: Render the `GlobalStyle` component
+
+Useful when you don't need any custom `body` styling in the application.
 
-import MyComponent from '@storybook/design-system';
+```javascript
+import { global } from '@storybook/design-system';
+const { GlobalStyle } = global;
+```
+
+```javascript
+/* Render the global styles once per page */
+<GlobalStyle />
+```
 
-class Example extends Component {
-  render() {
-    return <MyComponent />;
+#### Option 2: Use the `bodyStyles` to apply styling
+
+Useful when you want build upon the shared global styling.
+
+```javascript
+import { createGlobalStyle } from 'styled-components';
+import { global } from '@storybook/design-system';
+const { bodyStyles } = global;
+
+const CustomGlobalStyle = createGlobalStyle`
+  body {
+    ${bodyStyles}
+    // Custom body styling for the app
   }
-}
+`;
+```
+
+```javascript
+/* Render the global styles once per page */
+<CustomGlobalStyle />
 ```
 
 ## Font Loading

From fb7271b9adc39f1ee2db15ea365900b5799fbac8 Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Mon, 30 Sep 2019 10:01:33 -0600
Subject: [PATCH 2/2] Update README.md

Co-Authored-By: Tom Coleman <tom@thesnail.org>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d5ea377b..8502acda 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ Components within the design system assume that a set of global styles have been
 
 #### Option 1: Render the `GlobalStyle` component
 
-Useful when you don't need any custom `body` styling in the application.
+Useful when you don't need any custom `body` styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level `App` component.
 
 ```javascript
 import { global } from '@storybook/design-system';