add design systems section

sites/website/sidebars.js

@@ -65,6 +65,16 @@ module.exports = {
                 "fast-element/next-steps",
             ],
         },
+        {
+            type: "category",
+            label: "Working with Design Systems",
+            items: [
+                "design-systems/overview",
+                "design-systems/fast-frame",
+                "design-systems/using-the-design-system",
+                "design-systems/creating-a-design-system",
+            ],
+        },
         {
             type: "category",
             label: "Tools",

sites/website/src/docs/design-systems/creating-a-design-system.md

@@ -0,0 +1,12 @@
+---
+id: creating-a-design-system
+title: Creating a Design System
+sidebar_label: Creating a Design System
+custom_edit_url: https://github.com/microsoft/fast/edit/master/sites/website/src/docs/design-systems/creating-a-design-system.md
+---
+- Defining a DesignSystemProvider custom element
+- Defining Design System properties
+    - default value
+    - CSS custom property name
+    - Common uses (design token)
+    - Other uses (font assets?)

sites/website/src/docs/design-systems/fast-frame.md

@@ -0,0 +1,19 @@
+---
+id: fast-frame
+title: The FAST Frame Design System 
+sidebar_label: FAST Frame
+custom_edit_url: https://github.com/microsoft/fast/edit/master/sites/website/src/docs/design-systems/fast-frame.md
+---
+- What is FAST Frame
+    - A design system implementation of FAST Foundation.
+- Comprehensive properties table with definitions and CSS custom property names (if applicable)
+    - Included use cases of properties
+    - Show examples where appropriate
+- Configuring the FAST Frame Design System
+    - Setting value driven by content property
+    - Setting value driven by IDL property
+    - Coordinating color palettes and base colors
+- Extending the FAST Frame Design System
+    - Create a new `DesignSystemProvider` that extends FASTDesignSystemProvider
+    - Declare new Design System properties
+    - Use element in HTML

sites/website/src/docs/design-systems/overview.md

@@ -0,0 +1,31 @@
+---
+id: overview
+title: Overview
+sidebar_label: Overview
+custom_edit_url: https://github.com/microsoft/fast/edit/master/sites/website/src/docs/design-systems/overview.md
+---
+- What is the Design System?
+    - Answers the question "What is a Design System in FAST and what is it for?"
+    - Captures information about UX design
+        - [Colors](https://www.fast.design/docs/design/color)
+        - Fonts and [font sizes](https://www.fast.design/docs/design/type-ramp)
+        - Motion
+        - Contrast preferences
+        - UI density
+        - etc...
+    - Stores Design Tokens
+- How is the Design System used?
+    - Values represented as CSS custom properties
+    - Values represented as a JavaScript object
+        - Can be used for programmatic calculation. See "Using design system resolvers"
+    - Provided to components by a DesignSystemProvider
+- What is the DesignSystemProvider?
+    - HTML element
+    - Creates CSS custom properties for Design System values
+    - Propagates Design System JavaScript object to descendent elements
+    - Resolves functions of the Design System to CSS custom properties
+        - [See color recipes](https://www.fast.design/docs/design/color#algorithmic-colors-recipes) 
+    - `use-defaults` explained
+    - Explain "Adaptive UI"
+    - Describe property inheritance through document structure
+    - Using the DesignSystemProvider to configure and change the Design System

sites/website/src/docs/design-systems/using-the-design-system.md

@@ -0,0 +1,13 @@
+---
+id: using-the-design-system
+title: Using the FAST Design System 
+sidebar_label: Using the Design System
+custom_edit_url: https://github.com/microsoft/fast/edit/master/sites/website/src/docs/design-systems/using-the-design-system.md
+---
+- Using design system CSS custom properties
+- Using design system resolvers (CSS custom property behaviors, conditional CSS, etc)
+    - List the available Design System resolvers
+- How to create a Design System resolver.
+    - When is this useful? 
+        - Adaptive color
+        - Directional stylesheets