diff --git a/.changeset/rich-toes-grin.md b/.changeset/rich-toes-grin.md
new file mode 100644
index 00000000000..e9367ac115a
--- /dev/null
+++ b/.changeset/rich-toes-grin.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Add tooling section to document tools help build and maintain Polaris in consuming applications.
diff --git a/polaris-for-vscode/README.md b/polaris-for-vscode/README.md
index 4d581751404..a719a1596c8 100644
--- a/polaris-for-vscode/README.md
+++ b/polaris-for-vscode/README.md
@@ -1,26 +1,5 @@
 # Polaris for VS Code
 
-Official VS Code extension for building with the Shopify [Polaris Design System](https://polaris.shopify.com/).
+Official VS Code extension for building with the Shopify Polaris Design System
 
-![Demo of Polaris for VS Code tokens autocomplete](https://github.com/Shopify/polaris/blob/main/polaris-for-vscode/docs/polaris-for-vscode-preview.gif?raw=true)
-
-## Features
-
-### Design Token Autocomplete
-
-Get code autocomplete suggestions for the [Polaris Design Tokens](https://polaris.shopify.com/tokens/colors#navigation)
-
-- 🗄️ Automatically works for CSS and Sass files
-- 🔍 Preview design token values in autocomplete description
-- 🎨 Color previews for all `color` tokens
-- 🥇 Relevant code completions based on the current line of code
-
-## How to use
-
-Once installed and enabled, the Polaris for VS Code extension will automatically run in any CSS and Sass files.
-
-To trigger tokens autocomplete feature:
-
-1. Open a CSS or Sass file from your project
-2. Start typing the CSS property you want to set ex. `color: `
-3. Type the extension trigger characters `--`. This will bring up the relevant autocomplete tokens associated with the CSS property typed.
+[Polaris for VS Code documentation](https://polaris.shopify.com/tools/polaris-for-vscode)
diff --git a/polaris.shopify.com/content/tools/index.md b/polaris.shopify.com/content/tools/index.md
new file mode 100644
index 00000000000..3ff075b02fe
--- /dev/null
+++ b/polaris.shopify.com/content/tools/index.md
@@ -0,0 +1,6 @@
+---
+title: Tools
+description: Extensions, plugins, and other tools to help you use Polaris to build Admin experiences.
+icon: ToolsMajor
+order: 11
+---
diff --git a/polaris.shopify.com/content/tools/polaris-for-vscode.md b/polaris.shopify.com/content/tools/polaris-for-vscode.md
new file mode 100644
index 00000000000..cdacb4820d8
--- /dev/null
+++ b/polaris.shopify.com/content/tools/polaris-for-vscode.md
@@ -0,0 +1,28 @@
+---
+title: Polaris for VS Code
+description: Official VS Code extension for building with the Shopify Polaris Design System
+icon: HintMajor
+---
+
+![Demo of Polaris for VS Code tokens autocomplete](https://github.com/Shopify/polaris/blob/main/polaris-for-vscode/docs/polaris-for-vscode-preview.gif?raw=true)
+
+## Features
+
+### Design Token Autocomplete
+
+Get code autocomplete suggestions for the [Polaris Design Tokens](https://polaris.shopify.com/tokens/colors#navigation)
+
+- 🗄️ Automatically works for CSS and Sass files
+- 🔍 Preview design token values in autocomplete description
+- 🎨 Color previews for all `color` tokens
+- 🥇 Relevant code completions based on the current line of code
+
+## How to use
+
+Install the [Polaris for VS Code extension](https://marketplace.visualstudio.com/items?itemName=Shopify.polaris-for-vscode). Once enabled, the extension will automatically run in any CSS and Sass files.
+
+To trigger the token autocomplete feature:
+
+1. Open a CSS or Sass file from your project
+2. Start typing the CSS property you want to set, for example: `color:`
+3. Type the extension trigger characters: `--`. This will bring up the relevant autocomplete tokens associated with the CSS property typed.
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/index.md b/polaris.shopify.com/content/tools/stylelint-polaris/index.md
new file mode 100644
index 00000000000..7b29d28f0c5
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/index.md
@@ -0,0 +1,211 @@
+---
+title: Stylelint Polaris
+description: A configuration of Stylelint rules that promote adoption and track coverage of the Polaris design system in consuming apps.
+icon: WandMajor
+collapseChildren: true
+keywords:
+  - stylelint
+  - dev tools
+  - developer tools
+  - tools
+  - tooling
+  - development
+  - plugin
+  - rules
+  - linter
+  - linting
+  - css
+---
+
+## Installation
+
+```sh
+yarn add -D @shopify/stylelint-polaris stylelint
+```
+
+> Note: `stylelint-polaris` requires a peer dependency of `stylelint@>=14.15.0`
+
+[Source code](https://github.com/Shopify/polaris/tree/main/stylelint-polaris)
+
+## Usage
+
+Extend `@shopify/stylelint-polaris` in your [Stylelint config](https://stylelint.io/user-guide/configure/). Example in `package.json`
+
+```json
+{
+  "stylelint": {
+    "extends": ["@shopify/stylelint-polaris"]
+  }
+}
+```
+
+> IMPORTANT: `@shopify/stylelint-polaris` must be added to the end of the `extends` array
+
+### Run the linter
+
+```sh
+npx stylelint '**/*.{css,scss}'
+```
+
+### Run the linter and autofix failures
+
+```sh
+npx stylelint --fix '**/*.{css,scss}'
+```
+
+### Ignoring existing failures
+
+Enabling the linter could result in a large amount of warnings and errors in existing codebases. It is important to fix as many failures upfront as possible, but that shouldn't block the linter from being added. The [styles-insert-stylelint-disable](https://github.com/Shopify/polaris/tree/main/polaris-migrator#v10) migration inserts [ignore comments](https://stylelint.io/user-guide/ignore-code/) so that enabling `stylelint-polaris` can be unblocked.
+
+The migration will insert comments as follows:
+
+```diff
++ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+padding: 1rem;
+```
+
+Run the following command substituting `<path>` with a glob pattern of files to run against:
+
+```sh
+npx @shopify/polaris-migrator styles-insert-stylelint-disable <path>
+```
+
+## Rules
+
+There are over 40 rules configured in Stylelint Polaris to help you avoid errors and follow stylistic and non-stylistic conventions while building for the Shopify admin.
+
+- [Colors](/tools/stylelint-polaris/rules#colors)
+- [Conventions](/tools/stylelint-polaris/rules#conventions)
+- [Depth](/tools/stylelint-polaris/rules#depth)
+- [Layout](/tools/stylelint-polaris/rules#layout)
+- [Legacy](/tools/stylelint-polaris/rules#legacy)
+- [Media queries](/tools/stylelint-polaris/rules#media-queries)
+- [Motion](/tools/stylelint-polaris/rules#motion)
+- [Shape](/tools/stylelint-polaris/rules#shape)
+- [Spacing](/tools/stylelint-polaris/rules#spacing)
+- [Typography](/tools/stylelint-polaris/rules#typography)
+- [Z-index](/tools/stylelint-polaris/rules#z-index)
+
+## Development
+
+### Add new rules
+
+1. Navigate to the root [`stylelint-polaris` config](https://github.com/Shopify/polaris/blob/main/stylelint-polaris/index.js)
+1. Locate the `stylelint-polaris/coverage` options
+1. Identify the appropriate category for the new rule
+1. Insert the rule using standard Stylelint [rule configurations](https://stylelint.io/user-guide/configure#rules)
+1. Add documentation for the rule with examples of code that will be reported as a problem and code that will fix the problem
+1. The title should be the category + the stylelint rule name, for example `### colors/color-named`
+
+```js
+module.exports = {
+  rules: {
+    'polaris/coverage': {
+      colors: {...}, // Standard Stylelint rules config
+      layout: {...}, // Standard Stylelint rules config
+      motion: {
+        'new-rule': 'new-rule-options',
+      },
+    },
+  },
+};
+```
+
+### Build custom rules
+
+1. Refer to the [Writing plugins](https://stylelint.io/developer-guide/plugins) guide of the Stylelint documentation
+1. Create your rule in the [plugins](plugins) directory
+1. Validate your plugin with [tests](https://github.com/stylelint/jest-preset-stylelint#usage) (reference sibling plugins for examples)
+1. Refer to the [Add new rules](#add-new-rules) section to add your custom rule to the `stylelint-polaris` config
+
+### Add custom messages
+
+Custom messages are surfaced in the command line, CI, and supported editors along side the default `stylelint` rule messages. They are added to the root level config and aim to provide more insight on how to resolve rule violations.
+
+In a majority of cases, the default rule messages are clear and concise. However, they don't always guide developers to a desired outcome. Thus, there are two mechanisms we suggest for improving and providing custom rule messages:
+
+Set a generic custom message on the `message` property of the secondary options of a given `stylelint-polaris/coverage` category. This message is appended to the default rule message and we expect will cover most cases.
+
+```js
+module.exports = {
+  rules: {
+    'polaris/coverage': {
+      colors: [
+        {
+          'color-named': 'never'
+          'color-no-hex': true,
+        },
+        {message: 'Please use a Polaris color token: https://polaris.shopify.com/tokens/colors'},
+      ],
+    },
+  },
+}
+```
+
+Example failure message:
+
+```diff
+- Unexpected named color "red" (color-named)
++ Unexpected named color "red" (color-named) Please use a Polaris color token
+```
+
+Set a custom message on the `message` property in the [Stylelint rule config's secondary options](https://stylelint.io/user-guide/configure/#message) if supported. This message is appended to the default rule message instead of the generic category message when provided.
+
+```js
+module.exports = {
+  rules: {
+    'polaris/coverage': {
+      layout: [
+        {
+          'property-disallowed-list': [
+            ['position'],
+            {message: 'Please use the Polaris "Sticky" component'},
+          ],
+        },
+        {message: 'Please use a Polaris layout component'},
+      ],
+    },
+  },
+};
+```
+
+Example failure message:
+
+```diff
+- Unexpected value "sticky" for property "position" (declaration-property-value-disallowed-list) Please use a Polaris layout component
++ Unexpected value "sticky" for property "position" (declaration-property-value-disallowed-list) Please use the Polaris "Sticky" component
+```
+
+### Tophat `stylelint-polaris` updates in `polaris-react`
+
+> Open your terminal to the root of the `polaris` monorepo:
+
+1. Install and symlink dependencies
+
+```sh
+yarn install
+```
+
+2. Build `@shopify/polaris` dependencies, but not `@shopify/polaris` itself
+
+```sh
+yarn build -- --filter=@shopify/polaris^...
+```
+
+> Note: Remove the `^` character if you do want to build `@shopify/polaris`
+
+3. Run `stylelint` in `polaris-react`
+
+All files
+
+```sh
+yarn turbo run lint:styles --filter=@shopify/polaris
+```
+
+Specific file
+
+```sh
+yarn run stylelint path/to/component.scss
+
+// yarn run stylelint polaris-react/src/components/TopBar/TopBar.scss
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-at-rule-disallowed-list.md
new file mode 100644
index 00000000000..70f6bc70f08
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-at-rule-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: colors/at-rule-disallowed-list
+description: Disallows use of legacy color mixins
+keywords:
+  - stylelint
+  - colors
+  - colors rules
+---
+
+```diff
+// Do
++ fill: var(--p-icon-subdued);
+// Don't
+- fill: recolor-icon(--p-text-subdued);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-named.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-named.md
new file mode 100644
index 00000000000..5011b0a4e62
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-named.md
@@ -0,0 +1,17 @@
+---
+title: colors/color-named
+description: Disallows named colors
+keywords:
+  - stylelint
+  - colors
+  - colors rules
+---
+
+```diff
+// Do
++ color: var(--p-text);
++ fill: var(--p-icon)
+// Don't
+- color: black;
+- fill: dimgray;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-no-hex.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-no-hex.md
new file mode 100644
index 00000000000..99ae76bf36a
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-color-no-hex.md
@@ -0,0 +1,17 @@
+---
+title: colors/color-no-hex
+description: Disallows hex colors
+keywords:
+  - stylelint
+  - colors
+  - colors rules
+---
+
+```diff
+// Do
++ color: var(--p-text);
++ fill: var(--p-icon)
+// Don't
+- color: #202223;
+- fill: #5c5f62;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-declaration-property-value-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-declaration-property-value-disallowed-list.md
new file mode 100644
index 00000000000..a439068dc31
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-declaration-property-value-disallowed-list.md
@@ -0,0 +1,16 @@
+---
+title: colors/declaration-property-value-disallowed-list
+description: Disallows custom decimal opacity values
+keywords:
+  - stylelint
+  - colors
+  - colors rules
+---
+
+```diff
+// Do
++ background: var(--p-hint-from-direct-light);
+// Don't
+- background: black;
+- opacity: 0.15;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-function-disallowed-list.md
new file mode 100644
index 00000000000..468704e1dc1
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-function-disallowed-list.md
@@ -0,0 +1,17 @@
+---
+title: colors/function-disallowed-list
+description: Disallows allows use of built in and legacy color functions
+keywords:
+  - stylelint
+  - colors
+  - colors rules
+---
+
+```diff
+// Do
++ color: var(--p-text-disabled);
++ background: var(--p-action-secondary-hovered-dark);
+// Don't
+- color: rgb(140, 145, 150);
+- background: color('hover');
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md
new file mode 100644
index 00000000000..566cba97dd5
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md
@@ -0,0 +1,24 @@
+---
+title: colors/global-disallowed-list
+description: Disallows use of legacy color custom properties and mixin map data
+keywords:
+  - stylelint
+  - colors
+  - colors rules
+---
+
+Disallows use of legacy custom properties.
+
+```diff
+// Do
++ border: transparent;
+// Don't
+- border: var(--p-override-transparent);
+```
+
+Disallows use of legacy mixin map data.
+
+```diff
+// Don't
+- @type map $filter-palette-data: $polaris-color-filters;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md
new file mode 100644
index 00000000000..f9a44676914
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md
@@ -0,0 +1,37 @@
+---
+title: conventions/custom-property-allowed-list
+description: Allows definition of custom properties not using Polaris prefixes, flags declaration property values that are not valid Polaris tokens, flags declaration property values using private tokens
+keywords:
+  - stylelint
+  - conventions
+  - conventions rules
+---
+
+Allows definition of custom properties not prefixed with `--p-`, `--pc-`, or `--polaris-version-`.
+
+```diff
+root: {
+// Do
++ --osui_animation-name-drag-handle-pulse: osui_drag-handle-pulse;
+// Don't
+- --p-animation-name-drag-handle-pulse: osui_drag-handle-pulse;
+};
+```
+
+Flags declaration property values using `--p-*` that are not valid Polaris tokens.
+
+```diff
+// Do
++ font-size: var(--p-font-size-200);
+// Don't
+- font-size: var(--p-fontsize-200);
+```
+
+Flags declaration property values using private `--pc-*` tokens.
+
+```diff
+// Do
++ background: var(--p-action-secondary-depressed);
+// Don't
+- background: var(--pc-button-color-depressed);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-declaration-property-unit-disallowed-list.md
new file mode 100644
index 00000000000..1f326df23c5
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-declaration-property-unit-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: depth/declaration-property-unit-disallowed-list
+description: Disallows box-shadow declarations with hard coded px, rem, or em units
+keywords:
+  - stylelint
+  - depth
+  - depth rules
+---
+
+```diff
+// Do
++ box-shadow: var(--p-shadow-card);
+// Don't
+- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-function-disallowed-list.md
new file mode 100644
index 00000000000..96d99728115
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-function-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: depth/function-disallowed-list
+description: Disallows use of built-in and legacy shadow functions
+keywords:
+  - stylelint
+  - depth
+  - depth rules
+---
+
+```diff
+// Do
++ box-shadow: var(--p-shadow-base);
+// Don't
+- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md
new file mode 100644
index 00000000000..4d8ed5399d0
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: depth/global-disallowed-list
+description: Disallows use of legacy shadow custom properties and Sass mixin data
+keywords:
+  - stylelint
+  - depth
+  - depth rules
+---
+
+```diff
+// Do
++ box-shadow: var(--p-shadow-card);
+// Don't
+- box-shadow: var(--p-card-shadow);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-property-disallowed-list.md
new file mode 100644
index 00000000000..e7d8e381c1c
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-property-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: depth/property-disallowed-list
+description: Disallows text shadow property
+keywords:
+  - stylelint
+  - depth
+  - depth rules
+---
+
+Instead of using properties like `text-shadow`, make sure the text has proper contrast with the background so that it is readable without a shadow.
+
+```diff
+// Don't
+- text-shadow: 2px 2px #ff0000;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/index.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/index.md
new file mode 100644
index 00000000000..0f578cb10a8
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/index.md
@@ -0,0 +1,9 @@
+---
+title: Rules
+description: There are over 40 rules configured in Stylelint Polaris to help you avoid errors and follow stylistic and non-stylistic conventions while building for the Shopify admin.
+hideChildren: true
+keywords:
+  - rules
+  - stylelint rules
+  - css rules
+---
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-at-rule-disallowed-list.md
new file mode 100644
index 00000000000..696fd437463
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-at-rule-disallowed-list.md
@@ -0,0 +1,17 @@
+---
+title: layout/at-rule-disallowed-list
+description: Disallows use of legacy Sass mixins
+keywords:
+  - stylelint
+  - layout
+  - layout rules
+---
+
+```diff
+// Do
++ @media print {
++   display: none;
++ }
+// Don't
+- @include print-hidden;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-declaration-property-value-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-declaration-property-value-disallowed-list.md
new file mode 100644
index 00000000000..f11eba9b749
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-declaration-property-value-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: layout/declaration-property-value-disallowed-list
+description: Disallows declaration of positioning and dimension property values with Polaris tokens
+keywords:
+  - stylelint
+  - layout
+  - layout rules
+---
+
+```diff
+// Do
++ <Stack />
+// Don't
+- width: 100%;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-function-disallowed-list.md
new file mode 100644
index 00000000000..fb45b56720c
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-function-disallowed-list.md
@@ -0,0 +1,17 @@
+---
+title: layout/function-disallowed-list
+description: Disallows use of internal Sass layout functions
+keywords:
+  - stylelint
+  - layout
+  - layout rules
+---
+
+Use hard coded pixel or rem values for `width` and `height` instead of legacy mixins/variables or spacing tokens.
+
+```diff
+// Do
++ height: 56px;
+// Don't
+- height: top-bar-height();
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md
new file mode 100644
index 00000000000..6919e8a5417
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: layout/global-disallowed-list
+description: Disallows use of legacy custom properties and Sass mixin map data
+keywords:
+  - stylelint
+  - layout
+  - layout rules
+---
+
+```diff
+// Do
++ <Checkbox />
+// Don't
+- height: var(--p-choice-size);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-property-disallowed-list.md
new file mode 100644
index 00000000000..a4febf9e6d2
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-property-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: layout/property-disallowed-list
+description: Disallows declarations of layout properties
+keywords:
+  - stylelint
+  - layout
+  - layout rules
+---
+
+```diff
+// Do
++ <Columns />
+// Don't
+- display: grid;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-at-rule-disallowed-list.md
new file mode 100644
index 00000000000..7aa396ba10d
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-at-rule-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: legacy/at-rule-disallowed-list
+description: Disallows use pf legacy Sass mixins
+keywords:
+  - stylelint
+  - legacy
+  - legacy rules
+---
+
+```diff
+// Do
++ <UnstyledButton />
+// Don't
+- @include unstyled-button;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-function-disallowed-list.md
new file mode 100644
index 00000000000..4b386228ec2
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-function-disallowed-list.md
@@ -0,0 +1,13 @@
+---
+title: legacy/function-disallowed-list
+description: Disallows use off legacy Sass functions
+keywords:
+  - stylelint
+  - legacy
+  - legacy rules
+---
+
+```diff
+// Don't
+- @include available-names
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-global-disallowed-list.md
new file mode 100644
index 00000000000..bc8564b52c1
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/legacy-global-disallowed-list.md
@@ -0,0 +1,19 @@
+---
+title: legacy/global-disallowed-list
+description: Disallows use of legacy custom properties and Sass mixin map data
+keywords:
+  - stylelint
+  - legacy
+  - legacy rules
+---
+
+Use [Polaris tokens](https://polaris.shopify.com/tokens) when possible. Otherwise use hard coded pixel or rem values instead of legacy mixins/variables.
+
+```diff
+// Do
++ left: calc(-1 * var(--p-space-1));
+// Don't
+- left: -1 * $timeline-border-width;
+```
+
+#
\ No newline at end of file
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-at-rule-disallowed-list.md
new file mode 100644
index 00000000000..5f3fa340bd4
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-at-rule-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: media-queries/at-rule-disallowed-list
+description: Disallows use of legacy breakpoint Sass mixins
+keywords:
+  - stylelint
+  - media queries
+  - media queries rules
+---
+
+```diff
+// Do
++ @media (max-width: var(--p-breakpoints-md)) {}
+// Don't
+- @include breakpoint-before(layout-width(page-with-nav)) {}
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-function-disallowed-list.md
new file mode 100644
index 00000000000..a7c3a5d6d5c
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-function-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: media-queries/function-disallowed-list
+description: Disallows use of legacy breakpoint sass functions
+keywords:
+  - stylelint
+  - media queries
+  - media queries rules
+---
+
+```diff
+// Do
++ @media (min-width: var(--p-breakpoints-md)) {}
+// Don't
+- @include breakpoint-after(layout-width(page-with-nav)) {}
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-media-queries-allowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-media-queries-allowed-list.md
new file mode 100644
index 00000000000..d4006b76b5d
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/media-queries-media-queries-allowed-list.md
@@ -0,0 +1,15 @@
+---
+title: media-queries/media-queries-allowed-list
+description: Allows declaration of `print` and `screen` `@media` queries, allows `@media` queries for `forced-colors` and `ms-high-contrast` features, allows `@media` queries using Polaris breakpoints
+keywords:
+  - stylelint
+  - media queries
+  - media queries rules
+---
+
+```diff
+// Do
++ @include @media #{$p-breakpoints-sm-up} {}
+// Don't
+- @include @media #{$my-var} {}
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md
new file mode 100644
index 00000000000..87da78cbcb5
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-at-rule-disallowed-list.md
@@ -0,0 +1,23 @@
+---
+title: motion/at-rule-disallowed-list
+description: Disallows use of CSS @keyframes
+keywords:
+  - stylelint
+  - motion
+  - motion rules
+---
+
+```diff
+// Do
++ animation: var(--p-keyframes-spin) var(--p-duration-500) linear infinite;
+// Don't
+- @keyframes spin {
+-  from {
+-    transform: rotate(0deg);
+-  }
+
+-  to {
+-    transform: rotate(360deg);
+-  }
+-}
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md
new file mode 100644
index 00000000000..d179544ba1c
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-declaration-property-unit-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: motion/declaration-property-unit-disallowed-list
+description: Disallows use of hard-coded millisecond `ms` and second `s` values on transition and animation properties
+keywords:
+  - stylelint
+  - motion
+  - motion rules
+---
+
+```diff
+// Do
++ transition-duration: var(--p-duration-200);
+// Don't
+- transition-duration: 200ms;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md
new file mode 100644
index 00000000000..6c28389a03a
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-function-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: motion/function-disallowed-list
+description: Disallows use of legacy Sass motion functions
+keywords:
+  - stylelint
+  - motion
+  - motion rules
+---
+
+```diff
+// Do
++ transition-duration: var(--p-duration-200);
+// Don't
+- transition-duration: 200ms;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md
new file mode 100644
index 00000000000..0b6d9d80ba4
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: motion/global-disallowed-list
+description: Disallows use of legacy Polaris motion tokens
+keywords:
+  - stylelint
+  - motion
+  - motion rules
+---
+
+```diff
+// Do
++ transition: var(--p-duration-100) var(--p-ease);
+// Don't
+- transition: var(--p-duration-1-0-0) var(--p-ease);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-at-rule-disallowed-list.md
new file mode 100644
index 00000000000..7466550c1da
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-at-rule-disallowed-list.md
@@ -0,0 +1,27 @@
+---
+title: shape/at-rule-disallowed-list
+description: Disallows use of legacy Sass border mixins
+keywords:
+  - stylelint
+  - shape
+  - shape rules
+---
+
+```diff
+// Do
++ outline: var(--p-border-width-1) solid transparent;
+// Don't
+- @include high-contrast-outline()
+```
+
+NOTE: The `focus-ring` at rule does not currently have an equivalent token or component. If you need to use it, feel free to add a stylelint ignore comment until a solution from Polaris is ready.
+
+```diff
+// Do
++ &:focus {
+  + outline: var(--p-border-width-2) solid var(--p-focused);
+  + outline-offset: var(--p-space-05);
++ }
+// Don't
+- @include focus-ring
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-declaration-property-unit-disallowed-list.md
new file mode 100644
index 00000000000..68ac4e8e5d4
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-declaration-property-unit-disallowed-list.md
@@ -0,0 +1,17 @@
+---
+title: shape/declaration-property-unit-disallowed-list
+description: Disallows hard-coded `px`, `em`, and `rem` units in border property values
+keywords:
+  - stylelint
+  - shape
+  - shape rules
+---
+
+```diff
+// Do
++ border-width: var(--p-border-width-2);
++ border-radius: var(--p-border-radius-2);
+// Don't
+- border-width: 2px;
+- border-radius: 0.5rem;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-function-disallowed-list.md
new file mode 100644
index 00000000000..dd0c155d0f3
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-function-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: shape/function-disallowed-list
+description: Disallows use of legacy Sass border functions
+keywords:
+  - stylelint
+  - shape
+  - shape rules
+---
+
+```diff
+// Do
++ border-radius: var(--p-border-radius-base);
+// Don't
+- border-radius: border-radius();
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-global-disallowed-list.md
new file mode 100644
index 00000000000..a75eafc5db4
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-global-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: shape/global-disallowed-list
+description: Disallows use of legacy Polaris shape tokens and mixin map data
+keywords:
+  - stylelint
+  - shape
+  - shape rules
+---
+
+```diff
+// Do
++ border-radius: var(--p-border-radius-2);
+// Don't
+- border-radius: var(--p-border-radius-wide);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-unit-disallowed-list.md
new file mode 100644
index 00000000000..863dd9dbd96
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-declaration-property-unit-disallowed-list.md
@@ -0,0 +1,17 @@
+---
+title: spacing/declaration-property-unit-disallowed-list
+description: Disallows use of hard-coded px, em, and rem values on gap, margin, and padding properties
+keywords:
+  - stylelint
+  - spacing
+  - spacing rules
+---
+
+```diff
+// Do
++ gap: var(--p-space-05);
++ margin: var(--p-space-3) 0;
+// Don't
+- gap: 2px;
+- margin: 12px  0;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-function-disallowed-list.md
new file mode 100644
index 00000000000..f6aab5b7a36
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-function-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: spacing/function-disallowed-list
+description: Disallows use of legacy Sass spacing functions
+keywords:
+  - stylelint
+  - spacing
+  - spacing rules
+---
+
+```diff
+// Do
++ padding: var(--p-space-1);
+// Don't
+- padding: rem(4px);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-global-disallowed-list.md
new file mode 100644
index 00000000000..2e8f218c04d
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-global-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: spacing/global-disallowed-list
+description: Disallows use of legacy spacing custom properties and Sass mixin data
+keywords:
+  - stylelint
+  - spacing
+  - spacing rules
+---
+
+```diff
+// Do
++ margin-bottom: var(--p-space-1);
+// Don't
+- margin-bottom: var(--p-text-field-spinner-offset);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-at-rule-disallowed-list.md
new file mode 100644
index 00000000000..cafdcaf2112
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-at-rule-disallowed-list.md
@@ -0,0 +1,16 @@
+---
+title: typography/at-rule-disallowed-list
+description: Disallows use of legacy Sass typography mixins
+keywords:
+  - stylelint
+  - typography
+  - typography rules
+---
+
+```diff
+// Do
++ <Text breakWord truncate />
+// Don't
+- @include text-breakword;
+- @include truncate;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md
new file mode 100644
index 00000000000..fcb1b1e55fa
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md
@@ -0,0 +1,17 @@
+---
+title: typography/declaration-property-unit-disallowed-list
+description: Disallows hard-coded `px`, `em`, and `rem` values for font-size and line-height properties
+keywords:
+  - stylelint
+  - typography
+  - typography rules
+---
+
+```diff
+// Do
++ font-size: var(--p-font-size-75);
++ line-height: var(--p-font-line-height-3);
+// Don't
+- font-size: 12px;
+- line-height: 1.5rem
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-value-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-value-disallowed-list.md
new file mode 100644
index 00000000000..25c4982b082
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-value-disallowed-list.md
@@ -0,0 +1,17 @@
+---
+title: typography/declaration-property-value-disallowed-list
+description: Disallows hard-coded alphanumeric font-weight values
+keywords:
+  - stylelint
+  - typography
+  - typography rules
+---
+
+```diff
+// Do
++ <Text fontWeight='bold' />
+// Do
++ font-weight: var(--p-font-weight-bold);
+// Don't
+- font-weight: 700;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md
new file mode 100644
index 00000000000..e53127da6a9
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md
@@ -0,0 +1,17 @@
+---
+title: typography/function-disallowed-list
+description: Disallows use of legacy Sass typography functions
+keywords:
+  - stylelint
+  - typography
+  - typography rules
+---
+
+```diff
+// Do
++ <Text variant="headingXs" as="p" />
+// Do
++ font-size: var(--p-font-size-75);
+// Don't
+- font-size: font-size('caption');
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md
new file mode 100644
index 00000000000..352a18d0518
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: typography/global-disallowed-list
+description: Disallows use of legacy Polaris typography tokens and mixin map data
+keywords:
+  - stylelint
+  - typography
+  - typography rules
+---
+
+```diff
+// Do
++ font-size: var(--p-font-size-200);
+// Don't
+- font-size: $base-font-size;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-declaration-property-value-allowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-declaration-property-value-allowed-list.md
new file mode 100644
index 00000000000..915f3ed33b6
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-declaration-property-value-allowed-list.md
@@ -0,0 +1,15 @@
+---
+title: z-index/declaration-property-value-allowed-list
+description: Disallows declaration of `z-index` values that are not Polaris z-index tokens
+keywords:
+  - stylelint
+  - z-index
+  - z-index rules
+---
+
+```diff
+// Do
++ z-index: var(--p-z-1);
+// Don't
+- z-index: 1;
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-function-disallowed-list.md
new file mode 100644
index 00000000000..f7586aab9de
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-function-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: z-index/function-disallowed-list
+description: Disallows use of the legacy z-index Sass function
+keywords:
+  - stylelint
+  - z-index
+  - z-index rules
+---
+
+```diff
+// Do
++ z-index: var(--p-z-1);
+// Don't
+- z-index: z-index(content);
+```
diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md
new file mode 100644
index 00000000000..d4c0068cc9a
--- /dev/null
+++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md
@@ -0,0 +1,15 @@
+---
+title: z-index/global-disallowed-list
+description: Disallows the use of legacy z-index custom properties and Sass mixin data
+keywords:
+  - stylelint
+  - z-index
+  - z-index rules
+---
+
+```diff
+// Do
++ z-index: var(--p-z-1);
+// Don't
+- z-index(toast, $fixed-element-stacking-order);
+```
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index cc9208c1037..5448e4c0d67 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -24,6 +24,7 @@
     "@shopify/polaris": "^10.21.0",
     "@shopify/polaris-icons": "^6.7.0",
     "@shopify/polaris-tokens": "^6.3.0",
+    "@types/react-syntax-highlighter": "^15.5.6",
     "codesandbox": "^2.2.3",
     "framer-motion": "^6.5.1",
     "fuse.js": "^6.5.3",
@@ -35,6 +36,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.2",
+    "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "use-dark-mode": "^2.3.1"
   },
diff --git a/polaris.shopify.com/pages/[...slug].tsx b/polaris.shopify.com/pages/[...slug].tsx
index 898abf5adce..0704b7fb056 100644
--- a/polaris.shopify.com/pages/[...slug].tsx
+++ b/polaris.shopify.com/pages/[...slug].tsx
@@ -77,6 +77,7 @@ const catchAllTemplateExcludeList = [
   '/design',
   '/content',
   '/patterns',
+  '/tools',
   '/tokens',
   '/sandbox',
 ];
@@ -84,6 +85,7 @@ const catchAllTemplateExcludeList = [
 function fileShouldNotBeRenderedWithCatchAllTemplate(path: string): boolean {
   return (
     !path.startsWith('/components') &&
+    !path.includes('/tools/stylelint-polaris/rules') &&
     !catchAllTemplateExcludeList.includes(path)
   );
 }
@@ -92,6 +94,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
   const globPath = [
     path.resolve(process.cwd(), 'content/*.md'),
     path.resolve(process.cwd(), 'content/**/*.md'),
+    path.resolve(process.cwd(), 'content/**/**/*.md'),
   ];
   const paths = globby
     .sync(globPath)
diff --git a/polaris.shopify.com/pages/tools.tsx b/polaris.shopify.com/pages/tools.tsx
new file mode 100644
index 00000000000..61bc37bd62a
--- /dev/null
+++ b/polaris.shopify.com/pages/tools.tsx
@@ -0,0 +1,13 @@
+import FoundationsPage from '../src/components/FoundationsPage';
+import {FoundationsProps} from '../src/components/FoundationsPage/FoundationsPage';
+import {getStaticPropsForFoundations} from '../src/utils/foundations';
+
+const SECTION = 'tools';
+
+const FoundationsCategory = (props: FoundationsProps) => (
+  <FoundationsPage {...props} />
+);
+
+export const getStaticProps = getStaticPropsForFoundations(SECTION);
+
+export default FoundationsCategory;
diff --git a/polaris.shopify.com/pages/tools/stylelint-polaris/rules/[rule].tsx b/polaris.shopify.com/pages/tools/stylelint-polaris/rules/[rule].tsx
new file mode 100644
index 00000000000..a9a3c8e33b9
--- /dev/null
+++ b/polaris.shopify.com/pages/tools/stylelint-polaris/rules/[rule].tsx
@@ -0,0 +1,143 @@
+import type {GetStaticPaths, GetStaticProps, NextPage} from 'next';
+import fs from 'fs';
+import path from 'path';
+import globby from 'globby';
+
+import Page from '../../../../src/components/Page';
+import Longform from '../../../../src/components/Longform';
+import Markdown from '../../../../src/components/Markdown';
+import PageMeta from '../../../../src/components/PageMeta';
+import {parseMarkdown} from '../../../../src/utils/markdown.mjs';
+import {MarkdownFile} from '../../../../src/types';
+
+type CategoryMap = {
+  conventions: string;
+  colors: string;
+  motion: string;
+  typography: string;
+  shape: string;
+  spacing: string;
+  depth: string;
+  'media queries': string;
+  'z-index': string;
+  layout: string;
+  legacy: string;
+};
+
+type Category = keyof CategoryMap;
+
+const resourceLinks = {
+  conventions: '',
+  colors: 'Polaris [color tokens](/tokens/colors)',
+  motion: 'Polaris [motion tokens](/tokens/motion)',
+  typography:
+    'the [text component](/components/text) or [font tokens](/tokens/font)',
+  shape: 'Polaris [shape tokens](/tokens/shape)',
+  spacing: 'Polaris [spacking tokens](/tokens/spacing)',
+  depth: 'Polaris [depth tokens](/tokens/depth)',
+  'media queries':
+    'Polaris [breakpoint sass variables](/tokens/breakpoints#sass-variables)',
+  'z-index': 'Polaris [z-index tokens](/tokens/z-index)',
+  layout: 'Polaris [layout components](/components)',
+  legacy: 'Polaris [components](/components) or [tokens](/tokens)',
+};
+
+interface Props {
+  readme: MarkdownFile['readme'];
+  title: string;
+  description?: string;
+  editPageLinkPath: string;
+}
+
+const StylelintRulePage: NextPage<Props> = ({
+  readme,
+  title,
+  description,
+  editPageLinkPath,
+}: Props) => {
+  return (
+    <Page title={title} editPageLinkPath={editPageLinkPath}>
+      <PageMeta title={title} description={description} />
+      <Longform>
+        {description ? <Markdown text={description} /> : null}
+        <Markdown text={readme} />
+      </Longform>
+    </Page>
+  );
+};
+
+function getPageContent(title: string, readme: MarkdownFile['readme']) {
+  const category = title.split('/')[0] as Category;
+  const categoryIs = `${category} ${category.slice(-1) === 's' ? 'are' : 'is'}`;
+  const resourceText = resourceLinks[category]?.length
+    ? [
+        `Use ${resourceLinks[category]} instead of custom styles so that ${categoryIs} consistent across the Admin. This helps merchants have a coherent user experience and also ensures that ${categoryIs} in sync with the design system.`,
+      ]
+    : [];
+
+  return [
+    ...resourceText,
+    readme,
+    '## Contribute',
+    '',
+    `Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by:`,
+    '',
+    '- Starting a [discussion](https://github.com/Shopify/polaris/discussions/6750) to collaborate with the community to find a solution',
+    '- Submitting a [feature proposal issue](https://github.com/Shopify/polaris/issues/new?assignees=&labels=Feature+request&template=FEATURE_REQUEST.md) to share context on your suggestion',
+    '- Drafting a [pull request](https://github.com/Shopify/polaris/pulls) with your proposed improvement or addition',
+    '',
+    '## Ignore failure',
+    '',
+    `If styles are intentionally designed to diverge from Polaris and it isn't viable to contribute back to the design system, you can [ignore the failing rule](https://stylelint.io/user-guide/ignore-code/#within-files). Make sure to provide context as to why you are writing custom styles with a disable description.`,
+    '',
+    '```',
+    '// stylelint-disable-next-line -- why custom styles are being used instead of Polaris',
+    '```',
+  ].join('\n');
+}
+
+export const getStaticProps: GetStaticProps<Props, {rule: string}> = async ({
+  params,
+}) => {
+  const rule = params?.rule;
+  const relativeMdPath = `content/tools/stylelint-polaris/rules/${rule}.md`;
+  const mdFilePath = path.resolve(process.cwd(), relativeMdPath);
+  const editPageLinkPath = `/polaris.shopify.com/${relativeMdPath}`;
+
+  if (fs.existsSync(mdFilePath)) {
+    const markdown = fs.readFileSync(mdFilePath, 'utf-8');
+    const {readme, frontMatter}: MarkdownFile = parseMarkdown(markdown);
+    const {title, description} = frontMatter;
+    const props: Props = {
+      title,
+      description: description || null,
+      readme: getPageContent(title, readme),
+      editPageLinkPath,
+    };
+
+    return {props};
+  } else {
+    return {notFound: true};
+  }
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const globPath = [
+    path.resolve(process.cwd(), 'content/tools/stylelint-polaris/rules/*.md'),
+  ];
+  const paths = globby
+    .sync(globPath)
+    .filter((path) => !path.endsWith('index.md'))
+    .map((fileName: string) => {
+      return fileName
+        .replace(`${process.cwd()}/content`, '')
+        .replace('.md', '');
+    });
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export default StylelintRulePage;
diff --git a/polaris.shopify.com/pages/tools/stylelint-polaris/rules/index.tsx b/polaris.shopify.com/pages/tools/stylelint-polaris/rules/index.tsx
new file mode 100644
index 00000000000..4b34716adae
--- /dev/null
+++ b/polaris.shopify.com/pages/tools/stylelint-polaris/rules/index.tsx
@@ -0,0 +1,99 @@
+import type {GetStaticProps} from 'next';
+import fs from 'fs';
+import path from 'path';
+import globby from 'globby';
+import Longform from '../../../../src/components/Longform';
+import Markdown from '../../../../src/components/Markdown';
+import Page from '../../../../src/components/Page';
+import PageMeta from '../../../../src/components/PageMeta';
+import {uppercaseFirst} from '../../../../src/utils/various';
+import {MarkdownFile} from '../../../../src/types';
+import {parseMarkdown} from '../../../../src/utils/markdown.mjs';
+
+export interface RulesProps {
+  title: string;
+  description: string;
+  content: string;
+}
+
+const FoundationsCategory = ({title, description, content}: RulesProps) => {
+  return (
+    <>
+      <PageMeta description={description} />
+      <Page>
+        <Longform>
+          <h1>{title}</h1>
+          <p>{description}</p>
+          <Markdown text={content} />
+        </Longform>
+      </Page>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps<RulesProps> = async () => {
+  const {title, description} = indexPageMetadata();
+  const content = ruleListMarkdown();
+
+  return {
+    props: {
+      title,
+      description,
+      content,
+    },
+  };
+};
+
+const rulesPath = 'content/tools/stylelint-polaris/rules';
+
+function indexPageMetadata() {
+  const markdownPath = path.resolve(process.cwd(), `${rulesPath}/index.md`);
+  const markdown = fs.readFileSync(markdownPath, 'utf-8');
+  const {
+    frontMatter: {title, description},
+  }: MarkdownFile = parseMarkdown(markdown);
+
+  return {title, description};
+}
+
+function ruleListMarkdown(): string {
+  const globPath = [path.resolve(process.cwd(), `${rulesPath}/*.md`)];
+  const rulePagePaths = globby
+    .sync(globPath)
+    .filter((path) => !path.endsWith(`${rulesPath}/index.md`));
+
+  const content: {[key: string]: string[]} = {};
+  rulePagePaths.forEach((markdownFilePath) => {
+    if (fs.existsSync(markdownFilePath)) {
+      const markdown = fs.readFileSync(markdownFilePath, 'utf-8');
+      const {
+        frontMatter: {title, description},
+      }: MarkdownFile = parseMarkdown(markdown);
+
+      const url = markdownFilePath
+        .replace(`${process.cwd()}/content`, '')
+        .replace('/index', '')
+        .replace(/\.md$/, '');
+
+      const category = uppercaseFirst(title.split('/')[0]).replace(
+        'Media-queries',
+        'Media queries',
+      );
+
+      if (!(category in content)) {
+        content[category] = ['', `## ${category}`, ''];
+      }
+
+      content[category].push(`- [${title}](${url}): ${description}`);
+    }
+  });
+
+  const ruleList: string[] = Object.keys(content).reduce(
+    (prev: string[], key: string) => [...prev, ...content[key]],
+    [],
+  );
+
+  return ruleList.join('\n');
+}
+
+export default FoundationsCategory;
diff --git a/polaris.shopify.com/src/components/Code/Code.tsx b/polaris.shopify.com/src/components/Code/Code.tsx
index c817bace78b..493a00f8618 100644
--- a/polaris.shopify.com/src/components/Code/Code.tsx
+++ b/polaris.shopify.com/src/components/Code/Code.tsx
@@ -1,7 +1,7 @@
 import {ClipboardMinor} from '@shopify/polaris-icons';
 import {Tab} from '@headlessui/react';
 import {useState} from 'react';
-import Prism from 'prismjs';
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
 
 import {useCopyToClipboard} from '../../utils/hooks';
 import Icon from '../Icon';
@@ -13,10 +13,12 @@ interface Props {
     | {
         title: string;
         code: string;
+        className?: string;
       }
     | {
         title: string;
         code: string;
+        className?: string;
       }[];
 }
 
@@ -41,9 +43,9 @@ function Code({code}: Props) {
           </div>
 
           <Tab.Panels>
-            {code.map(({title, code}) => (
+            {code.map(({title, code, className}) => (
               <Tab.Panel key={title}>
-                <HighlightedCode code={code} />
+                <HighlightedCode code={code} className={className} />
               </Tab.Panel>
             ))}
           </Tab.Panels>
@@ -56,27 +58,31 @@ function Code({code}: Props) {
             </div>
             <CopyButton code={code.code} />
           </div>
-          <HighlightedCode code={code.code} />
+          <HighlightedCode code={code.code} className={code.className} />
         </>
       )}
     </div>
   );
 }
 
-function HighlightedCode({code}: {code: string}) {
+function HighlightedCode({
+  code,
+  className,
+}: {
+  code: string;
+  className?: string;
+}) {
+  const match = /language-(\w+)/.exec(className || '');
+  const lang = match ? match[1] : 'javascript';
   return (
-    <pre>
-      <code
-        className={styles.ActualCode}
-        dangerouslySetInnerHTML={{
-          __html: Prism.highlight(
-            code,
-            Prism.languages.javascript,
-            'javascript',
-          ),
-        }}
-      ></code>
-    </pre>
+    <SyntaxHighlighter
+      // eslint-disable-next-line react/no-children-prop
+      children={String(code).replace(/\n$/, '')}
+      language={lang}
+      codeTagProps={{className: styles.ActualCode}}
+      useInlineStyles={false}
+      wrapLongLines
+    />
   );
 }
 
diff --git a/polaris.shopify.com/src/components/FoundationsThumbnail/FoundationsThumbnail.module.scss b/polaris.shopify.com/src/components/FoundationsThumbnail/FoundationsThumbnail.module.scss
index 0b39c1366fe..48cad07e23e 100644
--- a/polaris.shopify.com/src/components/FoundationsThumbnail/FoundationsThumbnail.module.scss
+++ b/polaris.shopify.com/src/components/FoundationsThumbnail/FoundationsThumbnail.module.scss
@@ -25,4 +25,8 @@
   &[data-category='patterns'] {
     background: var(--decorative-3);
   }
+
+  &[data-category='tools'] {
+    background: var(--decorative-4);
+  }
 }
diff --git a/polaris.shopify.com/src/components/Frame/Frame.module.scss b/polaris.shopify.com/src/components/Frame/Frame.module.scss
index 9cfa06bc397..c334d4c922f 100644
--- a/polaris.shopify.com/src/components/Frame/Frame.module.scss
+++ b/polaris.shopify.com/src/components/Frame/Frame.module.scss
@@ -116,6 +116,23 @@ $breakpointNav: $breakpointTablet;
           }
         }
       }
+
+      > ul > li > ul > li {
+        > .NavItem {
+          font-size: var(--font-size-200);
+          letter-spacing: var(--letter-spacing-300);
+          padding-left: 3rem;
+
+          > a {
+            color: var(--text);
+            white-space: normal;
+          }
+
+          &.isCurrent > a {
+            color: var(--primary);
+          }
+        }
+      }
     }
   }
 
diff --git a/polaris.shopify.com/src/components/Markdown/Markdown.tsx b/polaris.shopify.com/src/components/Markdown/Markdown.tsx
index 659a1e65c58..4c67ae13209 100644
--- a/polaris.shopify.com/src/components/Markdown/Markdown.tsx
+++ b/polaris.shopify.com/src/components/Markdown/Markdown.tsx
@@ -32,11 +32,13 @@ function Markdown({text}: Props) {
             return <h3>{children}</h3>;
           }
         },
-        code: ({inline, children}) =>
+        code: ({inline, children, className}) =>
           inline ? (
             <code>{children}</code>
           ) : (
-            <Code code={{title: 'Example', code: children.toString()}} />
+            <Code
+              code={{className, title: 'Example', code: children.toString()}}
+            />
           ),
         table: ({children}) => (
           <div className="table-wrapper">
diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
index 486dc5230b2..dcc4e8b18b0 100644
--- a/polaris.shopify.com/src/styles/globals.scss
+++ b/polaris.shopify.com/src/styles/globals.scss
@@ -161,6 +161,17 @@ html {
     .comment {
       color: var(--code-comment);
     }
+    .inserted {
+      background: var(--code-inserted-highlight);
+      color: var(--code-inserted);
+    }
+    .deleted {
+      background: var(--code-deleted-highlight);
+      color: var(--code-deleted);
+    }
+    .prefix {
+      font-weight: 900;
+    }
   }
 }
 
@@ -212,6 +223,10 @@ body,
   --code-property: var(--code-keyword);
   --code-selector: var(--code-keyword);
   --code-comment: #3d2fe8;
+  --code-inserted: var(--code-keyword);
+  --code-deleted: var(--code-boolean);
+  --code-inserted-highlight: #e5ffef;
+  --code-deleted-highlight: #fff3f8;
 }
 
 .dark-mode {
@@ -245,6 +260,10 @@ body,
   --code-property: var(--code-keyword);
   --code-selector: var(--code-keyword);
   --code-comment: #897fff;
+  --code-inserted: var(--code-keyword);
+  --code-deleted: #ffb7d1;
+  --code-inserted-highlight: var(--surface-information);
+  --code-deleted-highlight: var(--surface-warning);
 }
 
 video {
diff --git a/polaris.shopify.com/src/utils/foundations.ts b/polaris.shopify.com/src/utils/foundations.ts
index 4c23b115467..87ee9d32479 100644
--- a/polaris.shopify.com/src/utils/foundations.ts
+++ b/polaris.shopify.com/src/utils/foundations.ts
@@ -18,13 +18,19 @@ export const getStaticPropsForFoundations = (category: string) => {
       frontMatter: {description},
     }: MarkdownFile = parseMarkdown(markdown);
 
-    const filePattern = path.resolve(process.cwd(), `content/${category}/*.md`);
+    const globPath = [
+      path.resolve(process.cwd(), `content/${category}/*.md`),
+      path.resolve(process.cwd(), `content/${category}/*/index.md`),
+    ];
+
+    const itemPaths = globby
+      .sync(globPath)
+      .filter((path) => !path.endsWith(`content/${category}/index.md`));
 
     let items: FoundationsProps['items'] = [];
-    const markdownFilePaths = await globby(filePattern);
 
-    markdownFilePaths
-      .filter((path) => !path.endsWith(`index.md`))
+    itemPaths
+      .filter((path) => !path.endsWith(`content/${category}/index.md`))
       .forEach((markdownFilePath) => {
         if (fs.existsSync(markdownFilePath)) {
           const markdown = fs.readFileSync(markdownFilePath, 'utf-8');
@@ -33,6 +39,7 @@ export const getStaticPropsForFoundations = (category: string) => {
 
           const url = markdownFilePath
             .replace(`${process.cwd()}/content`, '')
+            .replace('/index', '')
             .replace(/\.md$/, '');
 
           const headings = (readme.match(/\n## [^\n]+/gi) || []).map(
diff --git a/stylelint-polaris/README.md b/stylelint-polaris/README.md
index 4abc20d70b9..dff5571e705 100644
--- a/stylelint-polaris/README.md
+++ b/stylelint-polaris/README.md
@@ -2,166 +2,4 @@
 
 Collection of Stylelint configs and rules that promote Polaris Design System adoption and coverage
 
-## Installation
-
-```sh
-yarn add -D @shopify/stylelint-polaris stylelint
-```
-
-> Note: `stylelint-polaris` requires a peer dependency of `stylelint@>=14.15.0`
-
-## Usage
-
-Extend `@shopify/stylelint-polaris` in your [Stylelint config](https://stylelint.io/user-guide/configure/). Example in `package.json`
-
-```json
-{
-  "stylelint": {
-    "extends": ["@shopify/stylelint-polaris"]
-  }
-}
-```
-
-> IMPORTANT: `@shopify/stylelint-polaris` must be added to the end of the `extends` array
-
-### Run the linter
-
-```sh
-npx stylelint '**/*.{css,scss}'
-```
-
-### Run the linter and autofix failures
-
-```sh
-npx stylelint --fix '**/*.{css,scss}'
-```
-
-### Ignoring existing failures
-
-Enabling the linter could result in a large amount of warnings and errors in existing codebases. It is important to fix as many failures upfront as possible, but that shouldn't block the linter from being added. The [styles-insert-stylelint-disable](https://github.com/Shopify/polaris/tree/main/polaris-migrator#v10) migration inserts [ignore comments](https://stylelint.io/user-guide/ignore-code/) so that enabling `stylelint-polaris` can be unblocked.
-
-The migration will insert comments as follows:
-
-```diff
-+ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-padding: 1rem;
-```
-
-Run the following command substituting `<path>` with a glob pattern of files to run against:
-
-```sh
-npx @shopify/polaris-migrator styles-insert-stylelint-disable <path>
-```
-
-## Development
-
-### Add new rules
-
-1. Navigate to the root [`stylelint-polaris` config](index.js)
-1. Locate the `stylelint-polaris/coverage` options
-1. Identify the appropriate category for the new rule
-1. Insert the rule using standard Stylelint [rule configurations](https://stylelint.io/user-guide/configure#rules)
-
-```js
-module.exports = {
-  rules: {
-    'stylelint-polaris/coverage': {
-      colors: {...}, // Standard Stylelint rules config
-      layout: {...}, // Standard Stylelint rules config
-      motion: {
-        'new-rule': 'new-rule-options',
-      },
-    },
-  },
-};
-```
-
-### Build custom rules
-
-1. Refer to the [Writing plugins](https://stylelint.io/developer-guide/plugins) guide of the Stylelint documentation
-1. Create your rule in the [plugins](plugins) directory
-1. Validate your plugin with [tests](https://github.com/stylelint/jest-preset-stylelint#usage) (reference sibling plugins for examples)
-1. Refer to the [Add new rules](#add-new-rules) section to add your custom rule to the `stylelint-polaris` config
-
-### Add custom messages
-
-Custom messages are surfaced in the command line, CI, and supported editors along side the default `stylelint` rule messages. They are added to the root level config and aim to provide more meaning insight on rule violations and how to resolve them.
-
-In a majority of cases, the default rule messages are clear and concise. However, they don't always guide developers to a desired outcome. Thus, there are two mechanisms we suggest for improving and providing custom rule messages:
-
-1. Add a generic `message` to the secondary options of a given `stylelint-polaris/coverage` category. This message is appended to the default rule message and we expect will cover most cases.
-
-```js
-module.exports = {
-  rules: {
-    'stylelint-polaris/coverage': {
-      colors: [
-        {
-          'color-named': 'never'
-          'color-no-hex': true,
-        },
-        {message: 'Please use a Polaris color token: https://polaris.shopify.com/tokens/colors'},
-      ],
-    },
-  },
-}
-```
-
-Example failure message:
-
-```diff
-- Unexpected named color "red" (color-named)
-+ Unexpected named color "red" (color-named) Please use a Polaris color token: https://polaris.shopify.com/tokens/colors
-```
-
-2. Add a custom `message` property in the [rule config's secondary options](https://stylelint.io/user-guide/configure/#message). This message is used in place of the default rule message.
-
-```js
-module.exports = {
-  rules: {
-    'stylelint-polaris/coverage': {
-      colors: [
-        {
-          'color-named': [
-            'never',
-            {message: 'Unexpected named color. Please refer to this specific page with guidance on how to resolve the failure' },
-          ]
-          'color-no-hex': true,
-        },
-        {message: 'Please use a Polaris color token: https://polaris.shopify.com/tokens/colors'},
-      ],
-    },
-  },
-}
-```
-
-Example failure message:
-
-```diff
-- Unexpected named color "red" (color-named)
-+ Unexpected named color. Please refer to this specific page with guidance on how to resolve the failure
-```
-
-### Tophat `stylelint-polaris` updates in `polaris-react`
-
-> Open your terminal to the root of the `polaris` monorepo:
-
-1. Install and symlink dependencies
-
-```sh
-yarn install
-```
-
-2. Build `@shopify/polaris` dependencies, but not `@shopify/polaris` itself
-
-```sh
-yarn build -- --filter=@shopify/polaris^...
-```
-
-> Note: Remove the `^` character if you do want to build `@shopify/polaris`
-
-3. Run `stylelint` on `polaris-react`
-
-```sh
-cd polaris-react && yarn lint:styles
-```
+[Stylelint Polaris documentation](https://polaris.shopify.com/tools/stylelint-polaris)
diff --git a/stylelint-polaris/plugins/coverage/index.js b/stylelint-polaris/plugins/coverage/index.js
index b96a6c44167..7df0fa1ca00 100644
--- a/stylelint-polaris/plugins/coverage/index.js
+++ b/stylelint-polaris/plugins/coverage/index.js
@@ -136,10 +136,10 @@ module.exports = stylelint.createPlugin(
  */
 function getMeta(category, stylelintRuleName) {
   const baseMetaUrl =
-    'https://github.com/Shopify/polaris/tree/main/stylelint-polaris/README.md';
+    'https://polaris.shopify.com/tools/stylelint-polaris/rules';
 
   return {
-    url: `${baseMetaUrl}#${category}-${stylelintRuleName.replace('/', '-')}`,
+    url: `${baseMetaUrl}/${category}-${stylelintRuleName.replace('/', '-')}`,
   };
 }
 
diff --git a/yarn.lock b/yarn.lock
index 25d88be7097..7f5e73f8534 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1797,6 +1797,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.3.1":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
+  integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/standalone@^7.13.11":
   version "7.19.3"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.19.3.tgz#c14f669c931e5579021b432c612bb4d027603ee8"
@@ -4850,6 +4857,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-syntax-highlighter@^15.5.6":
+  version "15.5.6"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.6.tgz#77c95e6b74d2be23208fcdcf187b93b47025f1b1"
+  integrity sha512-i7wFuLbIAFlabTeD2I1cLjEOrG/xdMa/rpx2zwzAoGHuXJDhSqp9BSfDlMHSh9JSuNfxHk9eEmMX6D55GiyjGg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.4.2":
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.2.tgz#38890fd9db68bf1f2252b99a942998dc7877c5b3"
@@ -10394,6 +10408,13 @@ fastq@^1.6.0, fastq@^1.6.1:
   dependencies:
     reusify "^1.0.4"
 
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.11.3:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
@@ -10822,6 +10843,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
 formdata-polyfill@^4.0.10:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
@@ -11923,6 +11949,11 @@ hey-listen@^1.0.8:
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
+highlight.js@^10.4.1, highlight.js@~10.7.0:
+  version "10.7.3"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
+  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
+
 history@^5.0.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
@@ -14632,6 +14663,14 @@ lowercase-keys@^3.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-3.0.0.tgz#c5e7d442e37ead247ae9db117a9d0a467c89d4f2"
   integrity sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==
 
+lowlight@^1.17.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
+  integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.7.0"
+
 lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -17912,6 +17951,11 @@ prismjs@^1.27.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
   integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 
+prismjs@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -18403,6 +18447,17 @@ react-sizeme@^3.0.1:
     shallowequal "^1.1.0"
     throttle-debounce "^3.0.1"
 
+react-syntax-highlighter@^15.5.0:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
+  integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.27.0"
+    refractor "^3.6.0"
+
 react-test-renderer@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
@@ -18653,6 +18708,15 @@ reduce-flatten@^2.0.0:
   resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-2.0.0.tgz#734fd84e65f375d7ca4465c69798c25c9d10ae27"
   integrity sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w==
 
+refractor@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
+  integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.27.0"
+
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
@@ -18672,6 +18736,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"