coderbm1
diff --git a/Diff for: ‎docs/contributing/organize-a-gatsby-event.md
+1-1 b/Diff for: ‎docs/contributing/organize-a-gatsby-event.md
+1-1
diff --git a/Diff for: ‎svgo.yml
+4-1 b/Diff for: ‎svgo.yml
+4-1
diff --git a/Diff for: ‎www/README.md
+4 b/Diff for: ‎www/README.md
+4
diff --git a/Diff for: ‎www/gatsby-config.js
+7 b/Diff for: ‎www/gatsby-config.js
+7
diff --git a/Diff for: ‎www/package.json
+11-1 b/Diff for: ‎www/package.json
+11-1
diff --git a/Diff for: ‎www/src/assets/guidelines/clearspace-monogram.svg
+8 b/Diff for: ‎www/src/assets/guidelines/clearspace-monogram.svg
+8
diff --git a/Diff for: ‎www/src/assets/guidelines/clearspace.svg
+10 b/Diff for: ‎www/src/assets/guidelines/clearspace.svg
+10
diff --git a/Diff for: ‎www/src/assets/guidelines/manually-tracked.svg
+4 b/Diff for: ‎www/src/assets/guidelines/manually-tracked.svg
+4
diff --git a/Diff for: ‎www/src/assets/guidelines/partnership-lockups.svg
+19 b/Diff for: ‎www/src/assets/guidelines/partnership-lockups.svg
+19
diff --git a/Diff for: ‎www/src/assets/guidelines/wordmark.svg
+3 b/Diff for: ‎www/src/assets/guidelines/wordmark.svg
+3
diff --git a/Diff for: ‎www/src/components/diagram.js
+2 b/Diff for: ‎www/src/components/diagram.js
+2
diff --git a/Diff for: ‎www/src/components/ecosystem/ecosystem-section.js
+2 b/Diff for: ‎www/src/components/ecosystem/ecosystem-section.js
+2
diff --git a/Diff for: ‎www/src/components/guidelines/avatar.js
+16 b/Diff for: ‎www/src/components/guidelines/avatar.js
+16
diff --git a/Diff for: ‎www/src/components/guidelines/badge.js
+47 b/Diff for: ‎www/src/components/guidelines/badge.js
+47
@@ -26,7 +26,7 @@ There are several ways Gatsby may support your event:
 - The event must have at least half of the content focused on Gatsby or a Gatsby-related topic (such as JAMstack)
 - Both US and international events qualify for support
 - If you’re requesting the \$300 food credit, then you must submit a receipt for the expense
-- The event must be in harmony with the [Gatsby Code of Conduct](/contributing/code-of-conduct/) and follow the [Gatsby brand guidelines](https://mutability.netlify.com/logo/)
+- The event must be in harmony with the [Gatsby Code of Conduct](/contributing/code-of-conduct/) and follow the [Gatsby brand guidelines](/guidelines/logo/)
 
 ## How do you qualify for Gatsby support?
 
 
@@ -1,8 +1,11 @@
 plugins:
+  - addAttributesToSVGElement:
+      attributes:
+        - focusable: false
   - collapseGroups: true
   - removeDesc: true
   - removeScriptElement: true
   - removeStyleElement: true
-  - removeTitle: true
+  - removeTitle: false
   - removeUselessDefs: true
   - removeViewBox: false
@@ -49,3 +49,7 @@ GATSBY_SCREENSHOT_PLACEHOLDER=true
 ```
 
 For more information checkout [`gatsby-transformer-screenshot` docs](http://www.gatsbyjs.org/packages/gatsby-transformer-screenshot#placeholder-image).
+
+## Design tokens
+
+Please make use of the design tokens available in `src/utils/presets` when adding or modifying component CSS styles. You can find a work-in-progress documentation of these tokens at https://www.gatsbyjs.org/guidelines/design-tokens/ (and on some of the sibling pages documenting color and typography).
@@ -86,6 +86,13 @@ module.exports = {
         path: `${__dirname}/src/data/ecosystem/`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `guidelines`,
+        path: `${__dirname}/src/data/guidelines/`,
+      },
+    },
     `gatsby-transformer-gatsby-api-calls`,
     {
       resolve: `gatsby-plugin-typography`,
 
@@ -5,16 +5,21 @@
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
     "@emotion/core": "^10.0.7",
-    "@emotion/styled": "^10.0.7",
+    "@emotion/styled": "^10.0.12",
     "@mdx-js/mdx": "^1.0.14",
     "@mdx-js/react": "^1.0.6",
     "@reach/skip-nav": "^0.1.1",
     "@reach/visually-hidden": "^0.1.2",
+    "@styled-system/prop-types": "^5.0.5",
+    "@styled-system/should-forward-prop": "^5.0.5",
+    "@styled-system/theme-get": "^5.0.5",
     "@xstate/react": "^0.2.1",
     "axios": "^0.19.0",
     "bluebird": "^3.5.1",
+    "color-blend": "^2.0.4",
     "dotenv": "^6.0.0",
     "email-validator": "^1.1.1",
+    "emotion-theming": "^10.0.10",
     "fuse.js": "^3.2.0",
     "gatsby": "^2.9.1",
     "gatsby-image": "^2.0.5",
@@ -62,6 +67,7 @@
     "git-rev-sync": "^1.12.0",
     "graphql-request": "1.6.0",
     "gray-percentage": "^2.0.0",
+    "hex-rgb": "^4.1.0",
     "hex2rgba": "^0.0.1",
     "lodash-es": "^4.17.11",
     "mitt": "^1.1.3",
@@ -70,7 +76,9 @@
     "prismjs": "^1.14.0",
     "qs": "^6.5.2",
     "query-string": "^6.1.0",
+    "range": "^0.0.3",
     "react": "^16.8.6",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.0",
     "react-highcharts": "^16.0.2",
@@ -82,8 +90,10 @@
     "remove-markdown": "^0.3.0",
     "slash": "^1.0.0",
     "slugify": "^1.3.0",
+    "styled-system": "^5.0.5",
     "typography": "^1.0.0-alpha.4",
     "typography-plugin-code": "^1.0.0-alpha.0",
+    "wcag-contrast": "^2.1.1",
     "xstate": "^4.5.0",
     "zipkin": "^0.14.2",
     "zipkin-javascript-opentracing": "^2.0.0",
 
@@ -13,6 +13,7 @@ import {
   lineHeights,
   fontSizes,
   fonts,
+  fontWeights,
 } from "../utils/presets"
 import logo from "../monogram.svg"
 import { GraphQLIcon, ReactJSIcon } from "../assets/logos"
@@ -252,6 +253,7 @@ const Diagram = () => (
       >
         <h1
           css={{
+            fontWeight: fontWeights[1],
             marginTop: 0,
             marginBottom: space[6],
             [mediaQueries.md]: {
 
@@ -15,6 +15,7 @@ import {
   shadows,
   mediaQueries,
   fontSizes,
+  fontWeights,
 } from "../../utils/presets"
 
 const EcosystemSectionRoot = styled(`section`)`
@@ -63,6 +64,7 @@ const Title = styled(`h1`)`
   color: ${colors.gatsby};
   display: flex;
   font-size: ${fontSizes[4]};
+  font-weight: ${fontWeights[1]};
   line-height: ${lineHeights.solid};
   margin: 0;
   margin-bottom: ${space[1]};
 
@@ -0,0 +1,16 @@
+import styled from "@emotion/styled"
+
+import { Box } from "./system"
+
+const Avatar = styled(Box)()
+
+Avatar.defaultProps = {
+  bg: `grey.10`,
+  borderRadius: 6,
+  flex: `0 0 auto`,
+  height: `avatar`,
+  lineHeight: `solid`,
+  width: `avatar`,
+}
+
+export default Avatar
@@ -0,0 +1,47 @@
+import React from "react"
+import styled from "@emotion/styled"
+import { border, typography, compose } from "styled-system"
+import propTypes from "@styled-system/prop-types"
+
+import { Flex } from "./system"
+
+const styleProps = compose(
+  border,
+  typography
+)
+
+const BadgeBase = styled(Flex)(
+  {
+    display: `inline-flex`,
+    position: `relative`,
+    textTransform: `uppercase`,
+  },
+  styleProps
+)
+
+BadgeBase.propTypes = {
+  ...propTypes.border,
+  ...propTypes.typography,
+}
+
+BadgeBase.defaultProps = {
+  alignItems: `center`,
+  bg: `yellow.10`,
+  border: 1,
+  borderColor: `yellow.10`,
+  borderRadius: 5,
+  color: `yellow.90`,
+  fontFamily: `system`,
+  fontSize: 0,
+  fontWeight: 0,
+  letterSpacing: `tracked`,
+  lineHeight: `solid`,
+  py: 1,
+  px: 2,
+}
+
+const Badge = ({ children, ...rest }) => (
+  <BadgeBase {...rest}>{children}</BadgeBase>
+)
+
+export default Badge