docs(design-tokens): Creates docs for design tokens.

packages/documentation-site/patternfly-docs/content/design-tokens/design-tokens.md

@@ -0,0 +1,79 @@
+---
+id: About
+section: design-tokens
+---
+
+# Design tokens 
+
+This guide outlines PatternFly's use of design tokens. You should familiarize yourself with the details across this guide to learn about the purpose and implementation of PatternFly's tokens. 
+
+PatternFly's tokens are only available within Figma, so it's important that you follow our [Figma migration](/design-tokens/migrate) guide if necessary.
+
+## What are design tokens
+
+Design tokens are variables that store visual design attributes, like color, typography, and spacing. A design token has a name and value that represents the visual design information it contains. 
+
+## Why use tokens 
+
+Using design tokens helps maintain consistency across product design processes by ensuring that designers use the same colors for the same use cases. 
+
+Tokens also enable easier maintenance. Whenever a color is changed as part of a redesign or update,related tokens are automatically updated to reflect this change. This means that developers won't have to make any changes to code to ensure that their product is up to date with the latest recommendations. Likewise, designers will see that their designs automatically update to reflect any changes.
+
+## PatternFly design tokens
+
+### How to read tokens 
+
+Tokens can be read from left to right, with each part separated by a forward slash (/):
+
+`scope / component / category / property / concept / variant / state` 
+
+Each piece represents different information:
+- **Scope:** The range of the token. For example, `global` signifies that a token applies across the system.
+- **Component:** The component that the token relates to. 
+- **Category:** NEED INFO
+- **Property:** NEED INFO
+- **Concept:** NEED INFO
+- **Variant:** The variant type of the token's component.For example, a variant may be `plain` or `primary`.
+- **State:** The state that the component is in. This is typically `disabled`, `hover`, or `active`.
+
+Note that all PatternFly tokens also begin with `pf`.
+
+### Token layers
+
+PatternFly tokens have 3 layers: a **palette layer**, a **base layer**, and a **semantic layer**. 
+
+![Design layers example](./img/design-layers-example.png)
+
+#### **Palette layer**
+
+Palette layer tokens contain the colors in [PatternFly color palettes](/design-foundations/colors#patternfly-palettes). 
+
+If you've used PatternFly previously, these values resemble some of the CSS variables that you may be familiar with. They 
+
+**Add:** example image and/or `example / token / style / 000`
+
+#### **Base layer**
+
+Base layer tokens contain a wide range of tokens that the semantic layer can choose from. 
+
+These values are grouped conceptually and named numerically. There are no duplicate values within a concept group.
+
+**Add:** example image and/or `example / token / style / 000`
+
+#### **Semantic layer**
+
+Semantic layer tokens will be the value that you see the most frequently. These values are the top-level tokens that are grouped conceptually and named semantically. 
+
+Most of the time, these reference base tokens, but can also reference other semantic tokens
+
+**Add:** example image and/or `example / token / style / 000`
+
+### Examples of token use 
+
+#### **Color tokens**
+
+**Add:** example image and/or `example / token / style / 000`
+
+#### **Spacing tokens**
+
+**Add:** example image and/or `example / token / style / 000`

packages/documentation-site/patternfly-docs/content/design-tokens/designing-with-tokens.md

@@ -0,0 +1,13 @@
+---
+id: Designing with tokens
+section: design-tokens
+---
+
+As a designer, you can access and use our token libraries in Figma.
+
+NEED INFO
+
+## Figma instructions 
+
+## Figma overview
+

packages/documentation-site/patternfly-docs/content/design-tokens/developing-with-tokens.md

@@ -0,0 +1,12 @@
+---
+id: Developing with tokens
+section: design-tokens
+---
+
+## Installing tokens
+
+To develop with PatternFly tokens, you must first install the tokens package from `@patternfly/react-tokens`.
+
+NEED INFO
+
+### Using tokens with React 

packages/documentation-site/patternfly-docs/content/design-tokens/migrate-to-tokens

@@ -0,0 +1,24 @@
+---
+id: Migrate to tokens
+section: design-tokens
+---
+
+This guide provides instructions for migrating to tokens from PatternFly's previous design and wireframe kits. 
+
+## How to migrate a product to tokens 
+
+### For designers 
+
+Designers should migrate all designs into Figma, so that they can be updates to use tokens.
+
+Once you've completed your migration you can begin to [design with tokens.](/design-tokens/design-with-tokens)
+
+### For developers
+
+Developers will need to download token packages and update all colors and styles to use tokens, instead of CSS variables. 
+
+This change may resemble the following: 
+
+```code example```
+
+For more detailed instructions, refer to our [develop with tokens](/design/tokens/develop-with-tokens) guide.

packages/documentation-site/patternfly-docs/content/design-tokens/patternfly-tokens.md

@@ -0,0 +1,6 @@
+---
+id: PatternFly tokens
+section: design-tokens
+---
+
+## All tokens

packages/documentation-site/patternfly-docs/patternfly-docs.config.js

@@ -32,6 +32,7 @@ if (process.env.EXTENSIONS_ONLY === 'true') {
     sideNavItems: [
       { section: 'get-started' },
       { section: 'design-foundations' },
+      { section: `design-tokens` },
       { section: 'accessibility' },
       { section: 'UX writing' },
       { section: 'components' },