From 3e9715511111274913366e340feb221d33d3274c Mon Sep 17 00:00:00 2001
From: Zain Khoja <zainkho@github.com>
Date: Tue, 25 Jun 2019 13:45:21 -0700
Subject: [PATCH 1/2] Updated documentation for /design landing

Additional text descriptions for design tools page and progressive disclosure section
---
 pages/design/index.mdx                        | 13 +++++++++-
 pages/design/tools/index.mdx                  |  5 ++++
 .../ui-patterns/progressive-disclosure.mdx    | 26 +++++++------------
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/pages/design/index.mdx b/pages/design/index.mdx
index 96f86e1..c413635 100644
--- a/pages/design/index.mdx
+++ b/pages/design/index.mdx
@@ -1,3 +1,14 @@
-# Guidelines
+# Introduction
+
+The goal of Primer Design is to create an accessible and approachable system that keeps user experience consistent across the breadth of GitHub products and services while also allowing flexibility for new ideas. These guidelines are created with *all* users in mind. These guidelines set a foundation for design principles, accessibility, layouts, content, and resources for multiple design tools.
+
+## Designed with accessibility first
+We created Primer Design so that GitHub can be used by everyone. We suggest guidelines that create the most opportunity for those with visual, hearing, cognitive, and mobile disabilities.
+
+## Responsiveness
+Primer Design works with all devices and includes guidelines for page layouts, hierarchy, navigation, and so much more.
+
+## Tools that encourage collaboration
+We use [Figma](http://figma.com) as our primary tool of choice because of its ability to create a more transparent work environment. Figma allows designers to share early and share often.
 
 export const meta = {displayName: 'Guidelines', nav: 'top', hero: true}
diff --git a/pages/design/tools/index.mdx b/pages/design/tools/index.mdx
index ef950de..5c96ced 100644
--- a/pages/design/tools/index.mdx
+++ b/pages/design/tools/index.mdx
@@ -1,3 +1,8 @@
 # Design tools
 
+Figma is a vital part of Primer Design's workflow. Figma's collaborative environment allows designers to work together across distance and give feedback asynchronously. Learn more about [GitHub's remote design culture here](https://www.figma.com/blog/github-case-study/).
+
+## Resources
+We provide some open source Figma files to help designers create more with GitHub.com and other GitHub products. Download them below.
+
 export const meta = {displayName: 'Design tools', nav: 'top'}
diff --git a/pages/design/ui-patterns/progressive-disclosure.mdx b/pages/design/ui-patterns/progressive-disclosure.mdx
index 7c0c160..6941ff3 100644
--- a/pages/design/ui-patterns/progressive-disclosure.mdx
+++ b/pages/design/ui-patterns/progressive-disclosure.mdx
@@ -10,10 +10,10 @@ The following table outlines common progressive disclosure solutions in use at G
 
 | Component | Icon | Usage | Notes |
 | --- | --- | --- | --- |
-| Chevron | ![chevron](https://user-images.githubusercontent.com/24916540/52089727-1ae9d480-2564-11e9-8291-1ee9d3225427.png) | When elements of content are collapsed and can be toggled open | Do not use this icon to trigger a dropdown menus or navigation; the Caret icon is the more suitable for this. | 
-Expand/ Collapse Icon | ![expand](https://user-images.githubusercontent.com/24916540/52089724-1a513e00-2564-11e9-84f8-eba077f6abfc.png) | Signify that there is content (typically text) to be revealed | Should generally stand alone, rather than being paired with text | 
-Ellipses Icon | ![ellipses](https://user-images.githubusercontent.com/24916540/52089725-1ae9d480-2564-11e9-8d29-1dc28740924a.png) | For toggling truncated inline text content | Do not use this icon to trigger a dropdown menus or navigation; the Kebab icon is the more suitable for this. | 
-Text-only Toggles | | | Usage of this solution is discouraged, as generally icons or icon+text pairings provide better accessibility and more information |
+| Chevron | ![chevron](https://user-images.githubusercontent.com/24916540/52089727-1ae9d480-2564-11e9-8291-1ee9d3225427.png) | When elements of content are collapsed and can be toggled open | Do not use this icon to trigger a dropdown menus or navigation; the Caret icon is the more suitable for this. |
+Expand/ Collapse Icon | ![expand](https://user-images.githubusercontent.com/24916540/52089724-1a513e00-2564-11e9-84f8-eba077f6abfc.png) | Signify that there is content (typically text) to be revealed | Should generally stand alone, rather than being paired with text |
+Ellipses Icon | ![ellipses](https://user-images.githubusercontent.com/24916540/52089725-1ae9d480-2564-11e9-8d29-1dc28740924a.png) | For toggling truncated inline text content | Do not use this icon to trigger a dropdown menus or navigation; the Kebab icon is the more suitable for this. |
+Text-only Toggles | [example]() |  | Usage of this solution is discouraged, as generally icons or icon+text pairings provide better accessibility and more information |
 Kebab | ![kebab](https://user-images.githubusercontent.com/24916540/52089726-1ae9d480-2564-11e9-984b-2d304cc0d46e.png) | N/A | For toggling inline dropdowns and menus |
 Caret | ![caret](https://user-images.githubusercontent.com/24916540/52089723-1a513e00-2564-11e9-8179-420bba7922e7.png) | N/A | Refrain from using this icon as a progressive disclosure solution |
 
@@ -24,7 +24,7 @@ Caret | ![caret](https://user-images.githubusercontent.com/24916540/52089723-1a5
 When designing interfaces that incorporate progressive disclosure, refrain from creating interactions that drastically disorient the user’s initial point of focus.
 
 ### Progressive Disclosure vs Navigation
-It's important to understand the differentiation from progressive disclosure and navigation patterns, as the two share “cousin” elements that can be confusing when deciding which one to implement. 
+It's important to understand the differentiation from progressive disclosure and navigation patterns, as the two share “cousin” elements that can be confusing when deciding which one to implement.
 
 Please refer to these guidelines as they detail in-use solutions, and outline best practices for implementation. For more clarity, refer to the Support section of this article for more information.
 
@@ -33,14 +33,14 @@ Pair progressive disclosure icons with descriptive text to provide context.
 
 
 ### Implement Only as Necessary
-Progressive disclosures should be used sparingly, when it’s necessary to truncate information for the general layout/design. 
+Progressive disclosures should be used sparingly, when it’s necessary to truncate information for the general layout/design.
 
 
 
 ## Progressive Disclosure UI Patterns
 
 ### Chevron Icon
-The Chevron Icon is used when elements of content are collapsed and can be toggled open. Typically this icon is positioned vertically, and alternates between “up” and “down” states. This icon is quite flexible, and can stand alone, or be paired with text. 
+The Chevron Icon is used when elements of content are collapsed and can be toggled open. Typically this icon is positioned vertically, and alternates between “up” and “down” states. This icon is quite flexible, and can stand alone, or be paired with text.
 
 
 <Text textAlign="center">
@@ -66,7 +66,7 @@ The Chevron Icon is used when elements of content are collapsed and can be toggl
       <img src="https://user-images.githubusercontent.com/24916540/52088378-892c9800-2560-11e9-9e36-0e72599da28a.png"/>
     </BorderBox>
     <Text fontWeight='bold' color='red.5'>Don't:</Text> use the chevron to trigger dropdowns
-  </Box> 
+  </Box>
 </Flex>
 
 #### Caution:
@@ -124,7 +124,7 @@ The ellipses icon is used for toggling truncated inline text content. It’s pri
 </Flex>
 
 #### Caution:
-* While visually similar, the ellipses icon is different from the kebab icon, which is used for dropdown menus or general call-to-actions. Be careful not to confuse them for one another. 
+* While visually similar, the ellipses icon is different from the kebab icon, which is used for dropdown menus or general call-to-actions. Be careful not to confuse them for one another.
 * This icon generally stands alone within inline bodies of text.
 
 ## Support
@@ -134,11 +134,3 @@ If or when certain progressive disclosure patterns in your design emerge, or you
 
 ### Requesting Feedback
 Progressive Disclosure can be tricky to implement, and certain designs may test the bounds of our design guidelines in unique scenarios. If you have further questions or require clarity on implementation, please reach out to the  #design-systems channel on Slack.
-
-
-
-
-
-
-
-
-- 
GitLab


From ac880eba6324d3009d70d81394d179b7f19d3739 Mon Sep 17 00:00:00 2001
From: Zain Khoja <zainkho@github.com>
Date: Tue, 25 Jun 2019 14:59:43 -0700
Subject: [PATCH 2/2] Updated documentation for /design landing page

---
 pages/design/index.mdx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/pages/design/index.mdx b/pages/design/index.mdx
index c413635..a4717be 100644
--- a/pages/design/index.mdx
+++ b/pages/design/index.mdx
@@ -1,14 +1,16 @@
 # Introduction
 
-The goal of Primer Design is to create an accessible and approachable system that keeps user experience consistent across the breadth of GitHub products and services while also allowing flexibility for new ideas. These guidelines are created with *all* users in mind. These guidelines set a foundation for design principles, accessibility, layouts, content, and resources for multiple design tools.
+Our goal is to create an accessible and approachable system that keeps user experience consistent across the breadth of GitHub products and services while also allowing flexibility for new ideas. These guidelines are created with *all* users in mind. Primer Design sets foundations for design principles, accessibility, layouts, and content. We also provide downloadable resources for multiple design tools.
 
 ## Designed with accessibility first
-We created Primer Design so that GitHub can be used by everyone. We suggest guidelines that create the most opportunity for those with visual, hearing, cognitive, and mobile disabilities.
+We created Primer Design so that GitHub can be used by everyone. Our guidelines have considerations for users with visual, hearing, cognitive, and mobile disabilities.
+
 
 ## Responsiveness
-Primer Design works with all devices and includes guidelines for page layouts, hierarchy, navigation, and so much more.
+Primer Design includes guidelines for page layouts, hierarchy, and navigation on both web and mobile.
+
 
 ## Tools that encourage collaboration
-We use [Figma](http://figma.com) as our primary tool of choice because of its ability to create a more transparent work environment. Figma allows designers to share early and share often.
+We use [Figma](http://figma.com) as our primary tool of choice because of its ability to create a more transparent work environment. Figma supports GitHub's mission to help people work together from all of the world and contribute to amazing projects.
 
 export const meta = {displayName: 'Guidelines', nav: 'top', hero: true}
-- 
GitLab