From d53b991fd765c53f1712564772c7be0032341524 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Fri, 24 Nov 2023 15:00:56 +0330
Subject: [PATCH] refactor: use logos-brand-guidelines-theme, remove scripts
 and move sidebar config to the docs dir

---
 docs/gallery.mdx                              |   2 +
 docs/index.md                                 |   1 +
 docs/lsd/_category_.json                      |   8 +
 docs/lsd/components/Autocomplete.mdx          |   2 +-
 docs/lsd/components/Badge.mdx                 |   2 +-
 docs/lsd/components/Breadcrumb.mdx            |   2 +-
 docs/lsd/components/Button.mdx                |   2 +-
 docs/lsd/components/ButtonGroup.mdx           |   2 +-
 docs/lsd/components/Card.mdx                  |   2 +-
 docs/lsd/components/Checkbox.mdx              |   2 +-
 docs/lsd/components/CheckboxGroup.mdx         |   2 +-
 docs/lsd/components/Collapse.mdx              |   2 +-
 docs/lsd/components/DateField.mdx             |   2 +-
 docs/lsd/components/DatePicker.mdx            |   2 +-
 docs/lsd/components/DateRangePicker.mdx       |   2 +-
 docs/lsd/components/Dropdown.mdx              |   2 +-
 docs/lsd/components/IconButton.mdx            |   2 +-
 docs/lsd/components/IconButtonGroup.mdx       |   2 +-
 docs/lsd/components/Modal.mdx                 |   2 +-
 docs/lsd/components/NumberInput.mdx           |   2 +-
 docs/lsd/components/Quote.mdx                 |   2 +-
 docs/lsd/components/RadioButton.mdx           |   2 +-
 docs/lsd/components/RadioButtonGroup.mdx      |   2 +-
 docs/lsd/components/Table.mdx                 |   2 +-
 docs/lsd/components/Tabs.mdx                  |   2 +-
 docs/lsd/components/Tag.mdx                   |   2 +-
 docs/lsd/components/TextField.mdx             |   2 +-
 docs/lsd/components/ThemeProvider.mdx         |   2 +-
 docs/lsd/components/Toast.mdx                 |   2 +-
 docs/lsd/components/ToastProvider.mdx         |   2 +-
 docs/lsd/components/Typography.mdx            |   2 +-
 docs/lsd/components/index.mdx                 |  44 ++---
 docs/lsd/design-tokens/Colors.mdx             |   2 +-
 docs/lsd/design-tokens/Spacing.mdx            |   2 +-
 docs/lsd/design-tokens/Typography.mdx         |   2 +-
 docs/lsd/design-tokens/_category_.json        |   7 +
 docs/lsd/{index.mdx => overview.mdx}          |   3 +-
 docs/philosophy/index.md                      |   4 +-
 docs/templates/_category_.json                |   7 +
 docs/templates/social-media-assets.mdx        |  10 +-
 docs/visual-language/_category_.json          |   7 +
 docs/visual-language/color.mdx                |   2 +-
 .../grid-and-layout/_category_.json           |   4 +
 .../grid-and-layout/non-web-environment.mdx   |   1 +
 .../{index.mdx => overview.mdx}               |   3 +-
 .../grid-and-layout/web-environment.mdx       |   1 +
 docs/visual-language/illustration.mdx         |   3 +-
 docs/visual-language/logo.mdx                 |   3 +-
 .../visual-language/{index.md => overview.md} |   5 +-
 docs/visual-language/photography.mdx          |   8 +-
 .../typography/_category_.json                |   4 +
 .../typography/non-web-environment.md         |   1 +
 .../typography/{index.mdx => overview.mdx}    |   3 +-
 .../typography/web-environment.mdx            |   3 +-
 docs/voice/index.md                           |   1 +
 docusaurus.config.js                          |  43 ++++
 package.json                                  |   7 +-
 scripts/config.ts                             |   3 -
 scripts/download-storybook-data.ts            | 161 ---------------
 scripts/index.ts                              |  33 ----
 sidebars.js                                   | 165 +---------------
 .../mdx/ColorCard/ColorCard.module.scss       |  28 ---
 src/components/mdx/ColorCard/ColorCard.tsx    |  55 ------
 src/components/mdx/ColorCard/index.ts         |   1 -
 .../ComponentCard/ComponentCard.module.scss   |  42 ----
 .../mdx/ComponentCard/ComponentCard.tsx       |  41 ----
 src/components/mdx/ComponentCard/index.ts     |   1 -
 .../ComponentGrid/ComponentGrid.module.scss   |  24 ---
 .../mdx/ComponentGrid/ComponentGrid.tsx       |  38 ----
 src/components/mdx/ComponentGrid/index.ts     |   1 -
 src/components/mdx/Image/Image.module.scss    |  46 -----
 src/components/mdx/Image/Image.tsx            | 110 -----------
 src/components/mdx/Image/index.ts             |   1 -
 .../mdx/ImageGrid/ImageGrid.module.scss       |  61 ------
 src/components/mdx/ImageGrid/ImageGrid.tsx    | 104 ----------
 src/components/mdx/ImageGrid/index.ts         |   1 -
 .../StorybookDemo/StoryBookDemo.module.scss   |  13 --
 .../mdx/StorybookDemo/StorybookDemo.tsx       | 184 ------------------
 src/components/mdx/StorybookDemo/index.ts     |   1 -
 src/components/mdx/index.tsx                  |   7 +-
 src/css/custom.scss                           |  34 ----
 .../{img/components => lsd}/Autocomplete.png  | Bin
 static/{img/components => lsd}/Breadcrumb.png | Bin
 static/{img/components => lsd}/Button.png     | Bin
 .../{img/components => lsd}/ButtonGroup.png   | Bin
 static/{img/components => lsd}/Card.png       | Bin
 static/{img/components => lsd}/Checkbox.png   | Bin
 .../{img/components => lsd}/CheckboxGroup.png | Bin
 static/{img/components => lsd}/Collapse.png   | Bin
 static/{img/components => lsd}/DateField.png  | Bin
 static/{img/components => lsd}/DatePicker.png | Bin
 .../components => lsd}/DateRangePicker.png    | Bin
 static/{img/components => lsd}/Dropdown.png   | Bin
 static/{img/components => lsd}/IconButton.png | Bin
 static/{img/components => lsd}/Modal.png      | Bin
 .../{img/components => lsd}/NumberInput.png   | Bin
 static/{img/components => lsd}/Quote.png      | Bin
 .../{img/components => lsd}/RadioButton.png   | Bin
 .../components => lsd}/RadioButtonGroup.png   | Bin
 static/{img/components => lsd}/Tabs.png       | Bin
 static/{img/components => lsd}/Tag.png        | Bin
 static/{img/components => lsd}/TextField.png  | Bin
 static/{img/components => lsd}/Toast.png      | Bin
 yarn.lock                                     |   5 +
 104 files changed, 175 insertions(+), 1232 deletions(-)
 create mode 100644 docs/lsd/_category_.json
 create mode 100644 docs/lsd/design-tokens/_category_.json
 rename docs/lsd/{index.mdx => overview.mdx} (96%)
 create mode 100644 docs/templates/_category_.json
 create mode 100644 docs/visual-language/_category_.json
 create mode 100644 docs/visual-language/grid-and-layout/_category_.json
 rename docs/visual-language/grid-and-layout/{index.mdx => overview.mdx} (82%)
 rename docs/visual-language/{index.md => overview.md} (86%)
 create mode 100644 docs/visual-language/typography/_category_.json
 rename docs/visual-language/typography/{index.mdx => overview.mdx} (96%)
 delete mode 100644 scripts/config.ts
 delete mode 100644 scripts/download-storybook-data.ts
 delete mode 100644 scripts/index.ts
 delete mode 100644 src/components/mdx/ColorCard/ColorCard.module.scss
 delete mode 100644 src/components/mdx/ColorCard/ColorCard.tsx
 delete mode 100644 src/components/mdx/ColorCard/index.ts
 delete mode 100644 src/components/mdx/ComponentCard/ComponentCard.module.scss
 delete mode 100644 src/components/mdx/ComponentCard/ComponentCard.tsx
 delete mode 100644 src/components/mdx/ComponentCard/index.ts
 delete mode 100644 src/components/mdx/ComponentGrid/ComponentGrid.module.scss
 delete mode 100644 src/components/mdx/ComponentGrid/ComponentGrid.tsx
 delete mode 100644 src/components/mdx/ComponentGrid/index.ts
 delete mode 100644 src/components/mdx/Image/Image.module.scss
 delete mode 100644 src/components/mdx/Image/Image.tsx
 delete mode 100644 src/components/mdx/Image/index.ts
 delete mode 100644 src/components/mdx/ImageGrid/ImageGrid.module.scss
 delete mode 100644 src/components/mdx/ImageGrid/ImageGrid.tsx
 delete mode 100644 src/components/mdx/ImageGrid/index.ts
 delete mode 100644 src/components/mdx/StorybookDemo/StoryBookDemo.module.scss
 delete mode 100644 src/components/mdx/StorybookDemo/StorybookDemo.tsx
 delete mode 100644 src/components/mdx/StorybookDemo/index.ts
 rename static/{img/components => lsd}/Autocomplete.png (100%)
 rename static/{img/components => lsd}/Breadcrumb.png (100%)
 rename static/{img/components => lsd}/Button.png (100%)
 rename static/{img/components => lsd}/ButtonGroup.png (100%)
 rename static/{img/components => lsd}/Card.png (100%)
 rename static/{img/components => lsd}/Checkbox.png (100%)
 rename static/{img/components => lsd}/CheckboxGroup.png (100%)
 rename static/{img/components => lsd}/Collapse.png (100%)
 rename static/{img/components => lsd}/DateField.png (100%)
 rename static/{img/components => lsd}/DatePicker.png (100%)
 rename static/{img/components => lsd}/DateRangePicker.png (100%)
 rename static/{img/components => lsd}/Dropdown.png (100%)
 rename static/{img/components => lsd}/IconButton.png (100%)
 rename static/{img/components => lsd}/Modal.png (100%)
 rename static/{img/components => lsd}/NumberInput.png (100%)
 rename static/{img/components => lsd}/Quote.png (100%)
 rename static/{img/components => lsd}/RadioButton.png (100%)
 rename static/{img/components => lsd}/RadioButtonGroup.png (100%)
 rename static/{img/components => lsd}/Tabs.png (100%)
 rename static/{img/components => lsd}/Tag.png (100%)
 rename static/{img/components => lsd}/TextField.png (100%)
 rename static/{img/components => lsd}/Toast.png (100%)

diff --git a/docs/gallery.mdx b/docs/gallery.mdx
index b69d5a3..1a67885 100644
--- a/docs/gallery.mdx
+++ b/docs/gallery.mdx
@@ -1,6 +1,8 @@
 ---
 title: Gallery
 displayed_sidebar: main
+sidebar_position: 2
+sidebar_class_name: sidebar-menu-divider
 ---
 
 import { ImageGrid, Grid } from "@site/src/components/mdx"
diff --git a/docs/index.md b/docs/index.md
index 4f0e235..b550389 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,7 @@
 ---
 title: Brand Guidelines
 displayed_sidebar: main
+sidebar_position: 0
 ---
 
 # Brand guidelines
diff --git a/docs/lsd/_category_.json b/docs/lsd/_category_.json
new file mode 100644
index 0000000..3f06efb
--- /dev/null
+++ b/docs/lsd/_category_.json
@@ -0,0 +1,8 @@
+{
+  "position": 5,
+  "label": "LSD - UI Library",
+  "link": {
+    "type": "generated-index",
+    "title": "Title"
+  }
+}
diff --git a/docs/lsd/components/Autocomplete.mdx b/docs/lsd/components/Autocomplete.mdx
index d46c220..9212c40 100644
--- a/docs/lsd/components/Autocomplete.mdx
+++ b/docs/lsd/components/Autocomplete.mdx
@@ -2,7 +2,7 @@
 title: Autocomplete
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Autocomplete
 
diff --git a/docs/lsd/components/Badge.mdx b/docs/lsd/components/Badge.mdx
index e45f3ee..780ea3e 100644
--- a/docs/lsd/components/Badge.mdx
+++ b/docs/lsd/components/Badge.mdx
@@ -2,7 +2,7 @@
 title: Badge
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Badge
 
diff --git a/docs/lsd/components/Breadcrumb.mdx b/docs/lsd/components/Breadcrumb.mdx
index 339c4e8..7afbcd7 100644
--- a/docs/lsd/components/Breadcrumb.mdx
+++ b/docs/lsd/components/Breadcrumb.mdx
@@ -2,7 +2,7 @@
 title: Breadcrumb
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Breadcrumb
 
diff --git a/docs/lsd/components/Button.mdx b/docs/lsd/components/Button.mdx
index 68a2cf0..2743fe8 100644
--- a/docs/lsd/components/Button.mdx
+++ b/docs/lsd/components/Button.mdx
@@ -2,7 +2,7 @@
 title: Button
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Button
 
diff --git a/docs/lsd/components/ButtonGroup.mdx b/docs/lsd/components/ButtonGroup.mdx
index 094fd43..aa8d4cd 100644
--- a/docs/lsd/components/ButtonGroup.mdx
+++ b/docs/lsd/components/ButtonGroup.mdx
@@ -2,7 +2,7 @@
 title: ButtonGroup
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # ButtonGroup
 
diff --git a/docs/lsd/components/Card.mdx b/docs/lsd/components/Card.mdx
index e72ead5..9a704c8 100644
--- a/docs/lsd/components/Card.mdx
+++ b/docs/lsd/components/Card.mdx
@@ -2,7 +2,7 @@
 title: Card
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Card
 
diff --git a/docs/lsd/components/Checkbox.mdx b/docs/lsd/components/Checkbox.mdx
index 2ae0523..e51b337 100644
--- a/docs/lsd/components/Checkbox.mdx
+++ b/docs/lsd/components/Checkbox.mdx
@@ -2,7 +2,7 @@
 title: Checkbox
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Checkbox
 
diff --git a/docs/lsd/components/CheckboxGroup.mdx b/docs/lsd/components/CheckboxGroup.mdx
index 3255126..42d3e8a 100644
--- a/docs/lsd/components/CheckboxGroup.mdx
+++ b/docs/lsd/components/CheckboxGroup.mdx
@@ -2,7 +2,7 @@
 title: CheckboxGroup
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # CheckboxGroup
 
diff --git a/docs/lsd/components/Collapse.mdx b/docs/lsd/components/Collapse.mdx
index 59124f0..ad42b61 100644
--- a/docs/lsd/components/Collapse.mdx
+++ b/docs/lsd/components/Collapse.mdx
@@ -2,7 +2,7 @@
 title: Collapse
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Collapse
 
diff --git a/docs/lsd/components/DateField.mdx b/docs/lsd/components/DateField.mdx
index 23eb839..4fd8d8b 100644
--- a/docs/lsd/components/DateField.mdx
+++ b/docs/lsd/components/DateField.mdx
@@ -2,7 +2,7 @@
 title: DateField
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # DateField
 
diff --git a/docs/lsd/components/DatePicker.mdx b/docs/lsd/components/DatePicker.mdx
index 0a7c01d..270d99e 100644
--- a/docs/lsd/components/DatePicker.mdx
+++ b/docs/lsd/components/DatePicker.mdx
@@ -2,7 +2,7 @@
 title: DatePicker
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # DatePicker
 
diff --git a/docs/lsd/components/DateRangePicker.mdx b/docs/lsd/components/DateRangePicker.mdx
index eed148b..2ddd4bd 100644
--- a/docs/lsd/components/DateRangePicker.mdx
+++ b/docs/lsd/components/DateRangePicker.mdx
@@ -2,7 +2,7 @@
 title: DateRangePicker
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # DateRangePicker
 
diff --git a/docs/lsd/components/Dropdown.mdx b/docs/lsd/components/Dropdown.mdx
index 03be9bc..a14076d 100644
--- a/docs/lsd/components/Dropdown.mdx
+++ b/docs/lsd/components/Dropdown.mdx
@@ -2,7 +2,7 @@
 title: Dropdown
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Dropdown
 
diff --git a/docs/lsd/components/IconButton.mdx b/docs/lsd/components/IconButton.mdx
index f6c440a..249abd2 100644
--- a/docs/lsd/components/IconButton.mdx
+++ b/docs/lsd/components/IconButton.mdx
@@ -2,7 +2,7 @@
 title: IconButton
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # IconButton
 
diff --git a/docs/lsd/components/IconButtonGroup.mdx b/docs/lsd/components/IconButtonGroup.mdx
index 944a8d1..eed3bd1 100644
--- a/docs/lsd/components/IconButtonGroup.mdx
+++ b/docs/lsd/components/IconButtonGroup.mdx
@@ -2,7 +2,7 @@
 title: IconButtonGroup
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # IconButtonGroup
 
diff --git a/docs/lsd/components/Modal.mdx b/docs/lsd/components/Modal.mdx
index 4a258d4..97aa2b4 100644
--- a/docs/lsd/components/Modal.mdx
+++ b/docs/lsd/components/Modal.mdx
@@ -2,7 +2,7 @@
 title: Modal
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Modal
 
diff --git a/docs/lsd/components/NumberInput.mdx b/docs/lsd/components/NumberInput.mdx
index a41d9b5..b541139 100644
--- a/docs/lsd/components/NumberInput.mdx
+++ b/docs/lsd/components/NumberInput.mdx
@@ -2,7 +2,7 @@
 title: NumberInput
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # NumberInput
 
diff --git a/docs/lsd/components/Quote.mdx b/docs/lsd/components/Quote.mdx
index 0313619..5d7b255 100644
--- a/docs/lsd/components/Quote.mdx
+++ b/docs/lsd/components/Quote.mdx
@@ -2,7 +2,7 @@
 title: Quote
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Quote
 
diff --git a/docs/lsd/components/RadioButton.mdx b/docs/lsd/components/RadioButton.mdx
index 75bf13d..6dc6c52 100644
--- a/docs/lsd/components/RadioButton.mdx
+++ b/docs/lsd/components/RadioButton.mdx
@@ -2,7 +2,7 @@
 title: RadioButton
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # RadioButton
 
diff --git a/docs/lsd/components/RadioButtonGroup.mdx b/docs/lsd/components/RadioButtonGroup.mdx
index a918d47..5a7fffa 100644
--- a/docs/lsd/components/RadioButtonGroup.mdx
+++ b/docs/lsd/components/RadioButtonGroup.mdx
@@ -2,7 +2,7 @@
 title: RadioButtonGroup
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # RadioButtonGroup
 
diff --git a/docs/lsd/components/Table.mdx b/docs/lsd/components/Table.mdx
index c35c039..b456857 100644
--- a/docs/lsd/components/Table.mdx
+++ b/docs/lsd/components/Table.mdx
@@ -2,7 +2,7 @@
 title: Table
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Table
 
diff --git a/docs/lsd/components/Tabs.mdx b/docs/lsd/components/Tabs.mdx
index 5f14361..75464aa 100644
--- a/docs/lsd/components/Tabs.mdx
+++ b/docs/lsd/components/Tabs.mdx
@@ -2,7 +2,7 @@
 title: Tabs
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Tabs
 
diff --git a/docs/lsd/components/Tag.mdx b/docs/lsd/components/Tag.mdx
index 2750bb0..8316821 100644
--- a/docs/lsd/components/Tag.mdx
+++ b/docs/lsd/components/Tag.mdx
@@ -2,7 +2,7 @@
 title: Tag
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Tag
 
diff --git a/docs/lsd/components/TextField.mdx b/docs/lsd/components/TextField.mdx
index ba4e798..050e700 100644
--- a/docs/lsd/components/TextField.mdx
+++ b/docs/lsd/components/TextField.mdx
@@ -2,7 +2,7 @@
 title: TextField
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # TextField
 
diff --git a/docs/lsd/components/ThemeProvider.mdx b/docs/lsd/components/ThemeProvider.mdx
index 20dca33..21d6af1 100644
--- a/docs/lsd/components/ThemeProvider.mdx
+++ b/docs/lsd/components/ThemeProvider.mdx
@@ -2,7 +2,7 @@
 title: ThemeProvider
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # ThemeProvider
 
diff --git a/docs/lsd/components/Toast.mdx b/docs/lsd/components/Toast.mdx
index 77cd9fc..62d4595 100644
--- a/docs/lsd/components/Toast.mdx
+++ b/docs/lsd/components/Toast.mdx
@@ -2,7 +2,7 @@
 title: Toast
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Toast
 
diff --git a/docs/lsd/components/ToastProvider.mdx b/docs/lsd/components/ToastProvider.mdx
index bc7483c..cf76394 100644
--- a/docs/lsd/components/ToastProvider.mdx
+++ b/docs/lsd/components/ToastProvider.mdx
@@ -2,7 +2,7 @@
 title: ToastProvider
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # ToastProvider
 
diff --git a/docs/lsd/components/Typography.mdx b/docs/lsd/components/Typography.mdx
index 55d9f07..fbee74d 100644
--- a/docs/lsd/components/Typography.mdx
+++ b/docs/lsd/components/Typography.mdx
@@ -2,7 +2,7 @@
 title: Typography
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Typography
 
diff --git a/docs/lsd/components/index.mdx b/docs/lsd/components/index.mdx
index caebb77..19ed3ce 100644
--- a/docs/lsd/components/index.mdx
+++ b/docs/lsd/components/index.mdx
@@ -10,111 +10,111 @@ import { ComponentGrid } from '@site/src/components/mdx';
   {
     "title": "Autocomplete",
     "href": "./Autocomplete",
-    "imageSrc": "/img/components/Autocomplete.png"
+    "imageSrc": "/lsd/Autocomplete.png"
   },
   {
     "title": "Breadcrumb",
     "href": "./Breadcrumb",
-    "imageSrc": "/img/components/Breadcrumb.png"
+    "imageSrc": "/lsd/Breadcrumb.png"
   },
   {
     "title": "Button",
     "href": "./Button",
-    "imageSrc": "/img/components/Button.png"
+    "imageSrc": "/lsd/Button.png"
   },
   {
     "title": "ButtonGroup",
     "href": "./ButtonGroup",
-    "imageSrc": "/img/components/ButtonGroup.png"
+    "imageSrc": "/lsd/ButtonGroup.png"
   },
   {
     "title": "Card",
     "href": "./Card",
-    "imageSrc": "/img/components/Card.png"
+    "imageSrc": "/lsd/Card.png"
   },
   {
     "title": "Checkbox",
     "href": "./Checkbox",
-    "imageSrc": "/img/components/Checkbox.png"
+    "imageSrc": "/lsd/Checkbox.png"
   },
   {
     "title": "CheckboxGroup",
     "href": "./CheckboxGroup",
-    "imageSrc": "/img/components/CheckboxGroup.png"
+    "imageSrc": "/lsd/CheckboxGroup.png"
   },
   {
     "title": "Collapse",
     "href": "./Collapse",
-    "imageSrc": "/img/components/Collapse.png"
+    "imageSrc": "/lsd/Collapse.png"
   },
   {
     "title": "DateField",
     "href": "./DateField",
-    "imageSrc": "/img/components/DateField.png"
+    "imageSrc": "/lsd/DateField.png"
   },
   {
     "title": "DatePicker",
     "href": "./DatePicker",
-    "imageSrc": "/img/components/DatePicker.png"
+    "imageSrc": "/lsd/DatePicker.png"
   },
   {
     "title": "DateRangePicker",
     "href": "./DateRangePicker",
-    "imageSrc": "/img/components/DateRangePicker.png"
+    "imageSrc": "/lsd/DateRangePicker.png"
   },
   {
     "title": "Dropdown",
     "href": "./Dropdown",
-    "imageSrc": "/img/components/Dropdown.png"
+    "imageSrc": "/lsd/Dropdown.png"
   },
   {
     "title": "IconButton",
     "href": "./IconButton",
-    "imageSrc": "/img/components/IconButton.png"
+    "imageSrc": "/lsd/IconButton.png"
   },
   {
     "title": "Modal",
     "href": "./Modal",
-    "imageSrc": "/img/components/Modal.png"
+    "imageSrc": "/lsd/Modal.png"
   },
   {
     "title": "NumberInput",
     "href": "./NumberInput",
-    "imageSrc": "/img/components/NumberInput.png"
+    "imageSrc": "/lsd/NumberInput.png"
   },
   {
     "title": "Quote",
     "href": "./Quote",
-    "imageSrc": "/img/components/Quote.png"
+    "imageSrc": "/lsd/Quote.png"
   },
   {
     "title": "RadioButton",
     "href": "./RadioButton",
-    "imageSrc": "/img/components/RadioButton.png"
+    "imageSrc": "/lsd/RadioButton.png"
   },
   {
     "title": "RadioButtonGroup",
     "href": "./RadioButtonGroup",
-    "imageSrc": "/img/components/RadioButtonGroup.png"
+    "imageSrc": "/lsd/RadioButtonGroup.png"
   },
   {
     "title": "Tabs",
     "href": "./Tabs",
-    "imageSrc": "/img/components/Tabs.png"
+    "imageSrc": "/lsd/Tabs.png"
   },
   {
     "title": "Tag",
     "href": "./Tag",
-    "imageSrc": "/img/components/Tag.png"
+    "imageSrc": "/lsd/Tag.png"
   },
   {
     "title": "TextField",
     "href": "./TextField",
-    "imageSrc": "/img/components/TextField.png"
+    "imageSrc": "/lsd/TextField.png"
   },
   {
     "title": "Toast",
     "href": "./Toast",
-    "imageSrc": "/img/components/Toast.png"
+    "imageSrc": "/lsd/Toast.png"
   }
 ]} />
diff --git a/docs/lsd/design-tokens/Colors.mdx b/docs/lsd/design-tokens/Colors.mdx
index 193e320..d73cd4e 100644
--- a/docs/lsd/design-tokens/Colors.mdx
+++ b/docs/lsd/design-tokens/Colors.mdx
@@ -2,7 +2,7 @@
 title: Colors
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Colors
 
diff --git a/docs/lsd/design-tokens/Spacing.mdx b/docs/lsd/design-tokens/Spacing.mdx
index cb38309..48aa95d 100644
--- a/docs/lsd/design-tokens/Spacing.mdx
+++ b/docs/lsd/design-tokens/Spacing.mdx
@@ -2,7 +2,7 @@
 title: Spacing
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Spacing
 
diff --git a/docs/lsd/design-tokens/Typography.mdx b/docs/lsd/design-tokens/Typography.mdx
index 16909e6..e3a8c0a 100644
--- a/docs/lsd/design-tokens/Typography.mdx
+++ b/docs/lsd/design-tokens/Typography.mdx
@@ -2,7 +2,7 @@
 title: Typography
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Typography
 
diff --git a/docs/lsd/design-tokens/_category_.json b/docs/lsd/design-tokens/_category_.json
new file mode 100644
index 0000000..9ccb60e
--- /dev/null
+++ b/docs/lsd/design-tokens/_category_.json
@@ -0,0 +1,7 @@
+{
+  "label": "Design Tokens",
+  "link": {
+    "type": "generated-index",
+    "title": "Design Tokens"
+  }
+}
\ No newline at end of file
diff --git a/docs/lsd/index.mdx b/docs/lsd/overview.mdx
similarity index 96%
rename from docs/lsd/index.mdx
rename to docs/lsd/overview.mdx
index bfa7248..1b2f34e 100644
--- a/docs/lsd/index.mdx
+++ b/docs/lsd/overview.mdx
@@ -1,7 +1,6 @@
 ---
 title: Overview
-displayed_sidebar: main
-pagination_label: LSD - UI Library
+sidebar_position: 0
 ---
 
 import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
diff --git a/docs/philosophy/index.md b/docs/philosophy/index.md
index defdfe8..2217fa5 100644
--- a/docs/philosophy/index.md
+++ b/docs/philosophy/index.md
@@ -1,4 +1,6 @@
-
+---
+sidebar_position: 1
+---
 
 # Philosophy
 
diff --git a/docs/templates/_category_.json b/docs/templates/_category_.json
new file mode 100644
index 0000000..7b48337
--- /dev/null
+++ b/docs/templates/_category_.json
@@ -0,0 +1,7 @@
+{
+  "position": "5",
+  "label": "Templates",
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/docs/templates/social-media-assets.mdx b/docs/templates/social-media-assets.mdx
index 576d84c..ce5ae99 100644
--- a/docs/templates/social-media-assets.mdx
+++ b/docs/templates/social-media-assets.mdx
@@ -1,11 +1,11 @@
 
 # Social media assets
 
-import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
+import { ExternalResourceCard, Grid, Box } from '@site/src/components/mdx';
 
 <Grid xs={{ cols: 1, wrap: true, gap: '16px' }} md={{ cols: 2 }}>
     <Grid.Item xs={1}>
-        <div className="template-card-title">Network State Press templates</div>
+        <Box top={40} bottom={24}>Network State Press templates</Box>
         <ExternalResourceCard
             title="Logos templates"
             description="www.figma.com"
@@ -14,7 +14,7 @@ import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
         />
     </Grid.Item>
     <Grid.Item xs={1}>
-        <div className="template-card-title">Tweet templates</div>
+        <Box top={40} bottom={24}>Tweet templates</Box>
         <ExternalResourceCard
             title="Logos templates"
             description="www.figma.com"
@@ -23,7 +23,7 @@ import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
         />
     </Grid.Item>
     <Grid.Item xs={1}>
-        <div className="template-card-title">Logos podcast templates</div>
+        <Box top={40} bottom={24}>Logos podcast templates</Box>
         <ExternalResourceCard
             title="Logos templates"
             description="www.figma.com"
@@ -32,7 +32,7 @@ import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
         />
     </Grid.Item>
     <Grid.Item xs={1}>
-        <div className="template-card-title">Hashing It Out templates</div>
+        <Box top={40} bottom={24}>Hashing It Out templates</Box>
         <ExternalResourceCard
             title="Logos templates"
             description="www.figma.com"
diff --git a/docs/visual-language/_category_.json b/docs/visual-language/_category_.json
new file mode 100644
index 0000000..ad34b2e
--- /dev/null
+++ b/docs/visual-language/_category_.json
@@ -0,0 +1,7 @@
+{
+  "position": 4,
+  "label": "Visual Language",
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/docs/visual-language/color.mdx b/docs/visual-language/color.mdx
index d6b242f..1bd43f9 100644
--- a/docs/visual-language/color.mdx
+++ b/docs/visual-language/color.mdx
@@ -1,6 +1,6 @@
 ---
 title: Color
-sidebar_position: 3
+sidebar_position: 2 
 displayed_sidebar: main
 ---
 
diff --git a/docs/visual-language/grid-and-layout/_category_.json b/docs/visual-language/grid-and-layout/_category_.json
new file mode 100644
index 0000000..df1c6cc
--- /dev/null
+++ b/docs/visual-language/grid-and-layout/_category_.json
@@ -0,0 +1,4 @@
+{
+  "position": 4,
+  "label": "Grid and Layout"
+}
diff --git a/docs/visual-language/grid-and-layout/non-web-environment.mdx b/docs/visual-language/grid-and-layout/non-web-environment.mdx
index f0ffa90..76b2346 100644
--- a/docs/visual-language/grid-and-layout/non-web-environment.mdx
+++ b/docs/visual-language/grid-and-layout/non-web-environment.mdx
@@ -1,5 +1,6 @@
 ---
 title: Non-web Environment
+sidebar_position: 2
 ---
 
 import { ImageGrid, Grid } from '@site/src/components/mdx'
diff --git a/docs/visual-language/grid-and-layout/index.mdx b/docs/visual-language/grid-and-layout/overview.mdx
similarity index 82%
rename from docs/visual-language/grid-and-layout/index.mdx
rename to docs/visual-language/grid-and-layout/overview.mdx
index 08ce448..9b2f768 100644
--- a/docs/visual-language/grid-and-layout/index.mdx
+++ b/docs/visual-language/grid-and-layout/overview.mdx
@@ -1,5 +1,6 @@
 ---
-title: Grid and Layout
+title: Overview 
+sidebar_position: 0
 ---
 
 import DocCardList from '@theme/DocCardList';
diff --git a/docs/visual-language/grid-and-layout/web-environment.mdx b/docs/visual-language/grid-and-layout/web-environment.mdx
index 9f2f0e6..5d667b0 100644
--- a/docs/visual-language/grid-and-layout/web-environment.mdx
+++ b/docs/visual-language/grid-and-layout/web-environment.mdx
@@ -1,5 +1,6 @@
 ---
 title: Web Environment
+sidebar_position: 1
 ---
 
 
diff --git a/docs/visual-language/illustration.mdx b/docs/visual-language/illustration.mdx
index 82aabb0..4cb8afd 100644
--- a/docs/visual-language/illustration.mdx
+++ b/docs/visual-language/illustration.mdx
@@ -1,7 +1,8 @@
 ---
 title: Illustration
 sidebar_position: 5
-displayed_sidebar: main
+displayed_sidebar: null
+sidebar_class_name: hidden 
 ---
 
 import { ImageGrid } from "@site/src/components/mdx"
diff --git a/docs/visual-language/logo.mdx b/docs/visual-language/logo.mdx
index 2640513..6b20f18 100644
--- a/docs/visual-language/logo.mdx
+++ b/docs/visual-language/logo.mdx
@@ -1,7 +1,6 @@
 ---
 title: Logo
-sidebar_position: 2
-displayed_sidebar: main
+sidebar_position: 1 
 ---
 
 import { AssetCard } from '@site/src/components/mdx';
diff --git a/docs/visual-language/index.md b/docs/visual-language/overview.md
similarity index 86%
rename from docs/visual-language/index.md
rename to docs/visual-language/overview.md
index 1b0235c..9c86bca 100644
--- a/docs/visual-language/index.md
+++ b/docs/visual-language/overview.md
@@ -1,7 +1,6 @@
 ---
-title: Visual Language
-sidebar_position: 1
-displayed_sidebar: main
+title: Overview 
+sidebar_position: 0
 ---
 
 # Overview
diff --git a/docs/visual-language/photography.mdx b/docs/visual-language/photography.mdx
index 3790d79..0561011 100644
--- a/docs/visual-language/photography.mdx
+++ b/docs/visual-language/photography.mdx
@@ -1,10 +1,10 @@
 ---
-title: Photography
-sidebar_position: 4
-displayed_sidebar: main
+title: Photography 
+displayed_sidebar: null
+sidebar_class_name: hidden
 ---
 
-import { ImageGrid, Grid } from "@site/src/components/mdx"
+import { ImageGrid } from "@site/src/components/mdx"
 
 export const portraits = [
     { src: "/photography/Logos-Photography-01.png", img: require("/photography/Logos-Photography-01.png") },
diff --git a/docs/visual-language/typography/_category_.json b/docs/visual-language/typography/_category_.json
new file mode 100644
index 0000000..7c61da2
--- /dev/null
+++ b/docs/visual-language/typography/_category_.json
@@ -0,0 +1,4 @@
+{
+  "position": 3,
+  "label": "Typography"
+}
diff --git a/docs/visual-language/typography/non-web-environment.md b/docs/visual-language/typography/non-web-environment.md
index 2ca8f23..17bdcc6 100644
--- a/docs/visual-language/typography/non-web-environment.md
+++ b/docs/visual-language/typography/non-web-environment.md
@@ -1,5 +1,6 @@
 ---
 title: Non-web environments
+sidebar_position: 2
 ---
 
 # Non-web environments
diff --git a/docs/visual-language/typography/index.mdx b/docs/visual-language/typography/overview.mdx
similarity index 96%
rename from docs/visual-language/typography/index.mdx
rename to docs/visual-language/typography/overview.mdx
index 7154050..868e3e8 100644
--- a/docs/visual-language/typography/index.mdx
+++ b/docs/visual-language/typography/overview.mdx
@@ -1,5 +1,6 @@
 ---
-title: Typography
+title: Overview
+sidebar_position: 0
 ---
 
 import DocCardList from '@theme/DocCardList';
diff --git a/docs/visual-language/typography/web-environment.mdx b/docs/visual-language/typography/web-environment.mdx
index c3d2d0b..0b85f47 100644
--- a/docs/visual-language/typography/web-environment.mdx
+++ b/docs/visual-language/typography/web-environment.mdx
@@ -1,8 +1,9 @@
 ---
 title: Web Environments
+sidebar_position: 1
 ---
 
-import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
+import { StorybookDemo } from '@site/src/components/mdx';
 
 # Web Environments
 
diff --git a/docs/voice/index.md b/docs/voice/index.md
index 5cff636..441f0b0 100644
--- a/docs/voice/index.md
+++ b/docs/voice/index.md
@@ -2,6 +2,7 @@
 title: Voice
 displayed_sidebar: main
 pagination_label: Voice
+sidebar_position: 3
 ---
 
 ## Overview
diff --git a/docusaurus.config.js b/docusaurus.config.js
index b8b1fa0..51d5176 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -65,6 +65,49 @@ const config = {
     ],
   ],
 
+  themes: [
+    [
+      '@acid-info/logos-docusaurus-brand-guidelines-theme',
+      /** @type {import('@acid-info/logos-docusaurus-brand-guidelines-theme').ThemeOptions} */
+      ({
+        customCss: [],
+        lsdDocs: {
+          storybookUrl: process.env.STORYBOOK_URL,
+          componentsDirectory: 'docs/lsd/components',
+          designTokensDirectory: 'docs/lsd/design-tokens',
+          componentConfig: {
+            Colors: {
+              globalProps: ['themeColor'],
+            },
+            Typography: {
+              globalProps: ['themeFont'],
+            },
+            Spacing: {
+              globalProps: [],
+            },
+          },
+          excludeComponents: [
+            'BreadcrumbItem',
+            'CardBody',
+            'CardHeader',
+            'CollapseHeader',
+            'DropdownItem',
+            'ModalBody',
+            'ModalFooter',
+            'TabItem',
+            'TableItem',
+            'TableRow',
+            'Calendar',
+            'TableBody',
+            'TableHeader',
+            'TooltipBase',
+          ],
+          staticDirectory: 'lsd',
+        },
+      }),
+    ],
+  ],
+
   themeConfig:
     /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */
     ({
diff --git a/package.json b/package.json
index 5a62a67..eccf560 100644
--- a/package.json
+++ b/package.json
@@ -6,19 +6,16 @@
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "build": "docusaurus build",
-    "prestart": "yarn run script:download-data",
-    "prebuild": "yarn run script:download-data",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc",
-    "script": "node -r dotenv/config -r tsconfig-paths/register -r ts-node/register scripts/",
-    "script:download-data": "yarn run script ./scripts/download-storybook-data.ts"
+    "typecheck": "tsc"
   },
   "dependencies": {
+    "@acid-info/logos-docusaurus-brand-guidelines-theme": "^1.0.0-alpha.123",
     "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.121",
     "@docusaurus/plugin-ideal-image": "2.4.1",
     "@emotion/react": "^11.11.0",
diff --git a/scripts/config.ts b/scripts/config.ts
deleted file mode 100644
index dad454b..0000000
--- a/scripts/config.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import * as path from 'path'
-
-export const DATA_DIR = path.join(__dirname, '../data')
diff --git a/scripts/download-storybook-data.ts b/scripts/download-storybook-data.ts
deleted file mode 100644
index fe86326..0000000
--- a/scripts/download-storybook-data.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import * as fs from 'fs'
-import * as fsp from 'fs/promises'
-import fetch from 'node-fetch'
-import * as path from 'path'
-import { URL } from 'url'
-import type { ComponentGridProps, GlobalControls } from '../src/components/mdx'
-import { DATA_DIR } from './config'
-
-const EXCLUDE_COMPONENTS = [
-  'BreadcrumbItem',
-  'CardBody',
-  'CardHeader',
-  'CollapseHeader',
-  'DropdownItem',
-  'ModalBody',
-  'ModalFooter',
-  'TabItem',
-  'TableItem',
-  'TableRow',
-  'Calendar',
-  'TableBody',
-  'TableHeader',
-  'TooltipBase',
-]
-
-const STORYBOOK_URL = process.env.STORYBOOK_URL
-const DOCS_DIR = path.join(DATA_DIR, '../docs')
-const LSD_DOCS_DIR = path.join(DOCS_DIR, './lsd')
-const COMPONENTS_DIR = path.join(LSD_DOCS_DIR, './components')
-const DESIGN_TOKENS_DIR = path.join(LSD_DOCS_DIR, './design-tokens')
-
-const getGlobalControls = (story): GlobalControls[] => {
-  if(story.name === 'Colors') {
-    return ["themeColor"]
-  } else if(story.name === 'Typography') {
-    return ["themeFont"]
-  } else if(story.name === 'Spacing') {
-    // On the spacing page, there's no need for a themeColor or themeFont dropdown
-    return []
-  }
-
-  return ["themeColor", "themeFont"]
-}
-
-const generateDocs = async (metadata: any) => {
-  const componentsDir = path.join(DATA_DIR, './components')
-  const designTokensDir = path.join(DATA_DIR, './design-tokens')
-
-  if (fs.existsSync(componentsDir))
-    await fsp.rm(componentsDir, { recursive: true })
-
-  if (fs.existsSync(designTokensDir))
-    await fsp.rm(designTokensDir, { recursive: true })
-
-  await fsp.mkdir(componentsDir)
-  await fsp.mkdir(designTokensDir)
-
-  await fsp.mkdir(LSD_DOCS_DIR, {
-    recursive: true,
-  })
-
-  const components = metadata.components.filter(
-    component => !EXCLUDE_COMPONENTS.includes(component.name),
-  )
-
-  for (const component of components) {
-    const story =
-      component.stories.find(s => s.name === 'Root') || component.stories[0]
-    const storyId = story.id
-
-    let doc = ''
-    doc += `---\ntitle: ${component.name}\n---\n\n`
-    doc += `import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';\n\n`
-    doc += `# ${component.component.title}\n\n`
-    doc += `<StorybookDemo name="${
-      component.name
-    }" storybookUrl="${STORYBOOK_URL}" docId="${storyId.replace(
-      '--root',
-      '--docs',
-    )}" globalTypes={{}} componentProperties={[]} />\n`
-
-    await fsp.writeFile(path.join(componentsDir, `${component.name}.mdx`), doc)
-  }
-
-  {
-    const themeProvider = components.find(comp => comp.name === 'ThemeProvider')
-
-    const root = themeProvider.stories.find(story => story.name === 'Root')
-    const stories = themeProvider.stories.filter(story => story !== root)
-    for (const story of stories) {
-      let doc = ''
-      const globalControls = getGlobalControls(story)
-      const globalControlsString = JSON.stringify(globalControls)
-
-      doc += `---\ntitle: ${story.name}\n---\n\n`
-      doc += `import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';\n\n`
-      doc += `# ${story.name}\n\n`
-      doc += `<StorybookDemo name="${story.name}" docId="${root.id.replace(
-        '--root',
-        '--docs',
-      )}" storybookUrl="${STORYBOOK_URL}" storyId="${
-        story.id
-      }" globalTypes={{}} componentProperties={[]} globalControls={${globalControlsString}}/>\n`
-
-      await fsp.writeFile(path.join(designTokensDir, `${story.name}.mdx`), doc)
-    }
-  }
-
-  if (fs.existsSync(COMPONENTS_DIR))
-    await fsp.rm(COMPONENTS_DIR, { recursive: true })
-
-  if (fs.existsSync(DESIGN_TOKENS_DIR))
-    await fsp.rm(DESIGN_TOKENS_DIR, { recursive: true })
-
-  await fsp.rename(componentsDir, COMPONENTS_DIR)
-  await fsp.rename(designTokensDir, DESIGN_TOKENS_DIR)
-
-  {
-    // components index page
-
-    let doc = ''
-    doc += `---\ntitle: Components\n---\n\n`
-    doc += `import { ComponentGrid } from '@site/src/components/mdx';\n\n`
-    doc += `# Components\n\n`
-
-    const list: ComponentGridProps['list'] = []
-
-    for (const component of components) {
-      const { name } = component
-
-      const imagePath = path.join(
-        DATA_DIR,
-        `../static/img/components/${name}.png`,
-      )
-
-      if (fs.existsSync(imagePath)) {
-        list.push({
-          title: name,
-          href: `./${name}`,
-          imageSrc: `/img/components/${name}.png`,
-        })
-      }
-    }
-
-    doc += `<ComponentGrid list={${JSON.stringify(list, null, 2)}} />\n`
-
-    await fsp.writeFile(path.join(COMPONENTS_DIR, `index.mdx`), doc)
-  }
-}
-
-export const run = async () => {
-  const metadataUrl = new URL('/_metadata.json', STORYBOOK_URL)
-  const response = await (await fetch(metadataUrl.toString())).json()
-
-  await fsp.writeFile(
-    path.join(__dirname, '../data', 'storybook.metadata.json'),
-    JSON.stringify(response),
-  )
-
-  await generateDocs(response)
-}
diff --git a/scripts/index.ts b/scripts/index.ts
deleted file mode 100644
index 896cbff..0000000
--- a/scripts/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as fs from 'fs'
-import * as fsp from 'fs/promises'
-import path from 'path'
-import { DATA_DIR } from './config'
-
-const main = async () => {
-  console.time()
-
-  if (!fs.existsSync(DATA_DIR)) {
-    await fsp.mkdir(DATA_DIR)
-  }
-
-  const [, , ...filenames] = process.argv
-
-  for (const filename of filenames) {
-    console.time(filename)
-    const { run } = await import(path.join(process.cwd(), filename))
-    await run()
-
-    console.timeEnd(filename)
-  }
-
-  console.timeEnd()
-}
-
-main()
-  .then(() => {
-    process.exit(0)
-  })
-  .catch(error => {
-    console.error(error)
-    process.exit(1)
-  })
diff --git a/sidebars.js b/sidebars.js
index beb8929..031311c 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -2,170 +2,9 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   main: [
-    'index',
     {
-      type: 'doc',
-      label: 'Philosophy',
-      id: 'philosophy/index',
-    },
-    'gallery',
-    {
-      type: 'html',
-      value: '<div class="sidebar-menu-divider"></div>',
-      defaultStyle: true,
-    },
-    {
-      type: 'doc',
-      label: 'Voice',
-      id: 'voice/index',
-    },
-    {
-      type: 'category',
-      label: 'Visual Language',
-      collapsible: true,
-      link: {
-        type: 'generated-index',
-      },
-      items: [
-        {
-          type: 'doc',
-          label: 'Overview',
-          id: 'visual-language/index',
-        },
-        {
-          type: 'doc',
-          label: 'Logo',
-          id: 'visual-language/logo',
-        },
-        {
-          type: 'doc',
-          label: 'Color',
-          id: 'visual-language/color',
-        },
-        {
-          type: 'category',
-          label: 'Typography',
-          collapsible: true,
-          items: [
-            {
-              type: 'doc',
-              label: 'Overview',
-              id: 'visual-language/typography/index',
-            },
-            {
-              type: 'doc',
-              label: 'Web Environment',
-              id: 'visual-language/typography/web-environment',
-            },
-            {
-              type: 'doc',
-              label: 'Non-web Environment',
-              id: 'visual-language/typography/non-web-environment',
-            },
-          ],
-        },
-        {
-          type: 'category',
-          label: 'Grid and Layout',
-          collapsible: true,
-          items: [
-            {
-              type: 'doc',
-              label: 'Overview',
-              id: 'visual-language/grid-and-layout/index',
-            },
-            {
-              type: 'doc',
-              label: 'Web Environment',
-              id: 'visual-language/grid-and-layout/web-environment',
-            },
-            {
-              type: 'doc',
-              label: 'Non-web Environment',
-              id: 'visual-language/grid-and-layout/non-web-environment',
-            },
-          ],
-        },
-        // {
-        //   type: 'doc',
-        //   label: 'Photography',
-        //   id: 'visual-language/photography',
-        // },
-        // {
-        //   type: 'doc',
-        //   label: 'Illustration',
-        //   id: 'visual-language/illustration',
-        // },
-      ],
-    },
-    {
-      type: 'html',
-      value: '<div class="sidebar-menu-divider"></div>',
-      defaultStyle: true,
-    },
-    {
-      type: 'category',
-      label: 'LSD - UI Library',
-      collapsible: true,
-      link: {
-        type: 'generated-index',
-        slug: 'category/lsd-ui-library',
-      },
-      items: [
-        {
-          type: 'doc',
-          label: 'Overview',
-          id: 'lsd/index',
-        },
-        {
-          type: 'category',
-          label: 'Design tokens',
-          link: {
-            type: 'generated-index',
-          },
-          items: [
-            {
-              type: 'autogenerated',
-              dirName: 'lsd/design-tokens',
-            },
-          ],
-        },
-        {
-          type: 'category',
-          label: 'Components',
-          link: {
-            type: 'doc',
-            id: 'lsd/components/index',
-          },
-          items: [
-            {
-              type: 'autogenerated',
-              dirName: 'lsd/components',
-            },
-          ],
-        },
-      ],
-    },
-
-    {
-      type: 'category',
-      label: 'Templates',
-      collapsible: true,
-      link: {
-        type: 'generated-index',
-      },
-      items: [
-        {
-          type: 'doc',
-          label: 'Presentation kits',
-          id: 'templates/presentation-kits',
-        },
-        {
-          type: 'doc',
-          label: 'Social media assets',
-          id: 'templates/social-media-assets',
-        },
-      ],
+      type: 'autogenerated',
+      dirName: '.',
     },
   ],
 }
diff --git a/src/components/mdx/ColorCard/ColorCard.module.scss b/src/components/mdx/ColorCard/ColorCard.module.scss
deleted file mode 100644
index 24583bc..0000000
--- a/src/components/mdx/ColorCard/ColorCard.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.root {
-  width: 100px;
-  border: 1px solid rgb(var(--lsd-border-primary));
-}
-
-.root.fullWidth {
-  width: 100%;
-}
-
-.root .color {
-  width: 100%;
-  height: 130px;
-  border-bottom: 1px solid rgb(var(--lsd-border-primary));
-}
-
-.root .info {
-  padding: 16px;
-}
-
-.root .title {
-  margin-bottom: 16px;
-}
-
-.root .variables {
-  display: grid;
-  gap: 8px 16px;
-  grid-template: auto / auto 1fr;
-}
diff --git a/src/components/mdx/ColorCard/ColorCard.tsx b/src/components/mdx/ColorCard/ColorCard.tsx
deleted file mode 100644
index 325fa18..0000000
--- a/src/components/mdx/ColorCard/ColorCard.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import styles from './ColorCard.module.scss'
-import clsx from 'clsx'
-import { Typography } from '@acid-info/lsd-react'
-
-export type ColorCardProps = Omit<
-  React.HTMLProps<HTMLDivElement>,
-  'title' | 'color'
-> & {
-  color: string
-  title: React.ReactNode
-  fullWidth?: boolean
-  variables?: {
-    name: string
-    value: string
-  }[]
-}
-
-export const ColorCard: React.FC<ColorCardProps> = ({
-  title,
-  color,
-  fullWidth,
-  variables = [],
-  ...props
-}) => {
-  return (
-    <div
-      {...props}
-      className={clsx(
-        props.className,
-        styles.root,
-        fullWidth && styles.fullWidth,
-      )}
-    >
-      <div className={styles.color} style={{ background: color }}></div>
-      <div className={styles.info}>
-        <Typography
-          className={styles.title}
-          variant="subtitle1"
-          component="div"
-        >
-          {title}
-        </Typography>
-        <div className={styles.variables}>
-          {variables.map((variable, index) => (
-            <React.Fragment key={index}>
-              <Typography variant="label2">{variable.name}</Typography>
-              <Typography variant="label2">{variable.value}</Typography>
-            </React.Fragment>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/mdx/ColorCard/index.ts b/src/components/mdx/ColorCard/index.ts
deleted file mode 100644
index 66eddf2..0000000
--- a/src/components/mdx/ColorCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ColorCard'
diff --git a/src/components/mdx/ComponentCard/ComponentCard.module.scss b/src/components/mdx/ComponentCard/ComponentCard.module.scss
deleted file mode 100644
index c484d17..0000000
--- a/src/components/mdx/ComponentCard/ComponentCard.module.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.root {
-  width: 100%;
-  height: auto;
-  border: 1px solid rgb(var(--lsd-border-primary));
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  text-decoration: none;
-  text-decoration: none !important;
-
-  aspect-ratio: 1 / 1;
-}
-
-.root .title {
-  padding: 16px;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-}
-
-.root .image {
-}
-
-.root .imageContainer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: auto;
-    height: auto;
-    object-fit: cover;
-    user-select: none;
-  }
-}
diff --git a/src/components/mdx/ComponentCard/ComponentCard.tsx b/src/components/mdx/ComponentCard/ComponentCard.tsx
deleted file mode 100644
index 503fd45..0000000
--- a/src/components/mdx/ComponentCard/ComponentCard.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Typography } from '@acid-info/lsd-react'
-import ThemedImage from '@theme/ThemedImage'
-import clsx from 'clsx'
-import React from 'react'
-import styles from './ComponentCard.module.scss'
-import Link, { Props as LinkProps } from '@docusaurus/Link'
-
-export type ComponentCardProps = Omit<LinkProps, 'title' | 'color'> & {
-  title: React.ReactNode
-  imageSrc?: string
-  imageDarkSrc?: string
-  imageWidth?: string | number
-  imageHeight?: string | number
-}
-
-export const ComponentCard: React.FC<ComponentCardProps> = ({
-  title,
-  imageSrc,
-  imageDarkSrc,
-  imageWidth,
-  imageHeight,
-  ...props
-}) => {
-  return (
-    <Link {...props} className={clsx(props.className, styles.root)}>
-      <Typography className={styles.title} component="div">
-        {title}
-      </Typography>
-      <div className={styles.imageContainer}>
-        <ThemedImage
-          width={imageWidth}
-          height={imageHeight}
-          sources={{
-            dark: imageDarkSrc || imageSrc || '',
-            light: imageSrc || imageDarkSrc || '',
-          }}
-        />
-      </div>
-    </Link>
-  )
-}
diff --git a/src/components/mdx/ComponentCard/index.ts b/src/components/mdx/ComponentCard/index.ts
deleted file mode 100644
index 18313fd..0000000
--- a/src/components/mdx/ComponentCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ComponentCard'
diff --git a/src/components/mdx/ComponentGrid/ComponentGrid.module.scss b/src/components/mdx/ComponentGrid/ComponentGrid.module.scss
deleted file mode 100644
index b7e1699..0000000
--- a/src/components/mdx/ComponentGrid/ComponentGrid.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use "@acid-info/logos-docusaurus-theme/lib/client/css/utils";
-
-.root {
-}
-
-@include utils.responsive('md', 'up') {
-  .root .item {
-    &:nth-child(even) > a {
-      border-left: none;
-    }
-
-    &:not(.lastRow) > a {
-      border-bottom: none;
-    }
-  }
-}
-
-@include utils.responsive('md', 'down') {
-  .root .item {
-    &:not(:last-child) > a {
-      border-bottom: none;
-    }
-  }
-}
diff --git a/src/components/mdx/ComponentGrid/ComponentGrid.tsx b/src/components/mdx/ComponentGrid/ComponentGrid.tsx
deleted file mode 100644
index 0bcd7dd..0000000
--- a/src/components/mdx/ComponentGrid/ComponentGrid.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-  Grid,
-  GridProps,
-} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
-import React from 'react'
-import { ComponentCard, ComponentCardProps } from '../ComponentCard'
-import styles from './ComponentGrid.module.scss'
-import clsx from 'clsx'
-
-export type ComponentGridProps = GridProps & {
-  list: ComponentCardProps[]
-}
-
-export const ComponentGrid: React.FC<ComponentGridProps> = ({
-  list = [],
-  ...props
-}) => {
-  return (
-    <Grid
-      md={{ cols: 2, wrap: true, gap: '0' }}
-      {...props}
-      className={clsx(styles.root, props.className)}
-    >
-      {list.map((props, idx) => (
-        <Grid.Item
-          md={1}
-          key={idx}
-          className={clsx(
-            styles.item,
-            idx >= list.length - 2 && styles.lastRow,
-          )}
-        >
-          <ComponentCard {...props} />
-        </Grid.Item>
-      ))}
-    </Grid>
-  )
-}
diff --git a/src/components/mdx/ComponentGrid/index.ts b/src/components/mdx/ComponentGrid/index.ts
deleted file mode 100644
index b3f9ff8..0000000
--- a/src/components/mdx/ComponentGrid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ComponentGrid'
diff --git a/src/components/mdx/Image/Image.module.scss b/src/components/mdx/Image/Image.module.scss
deleted file mode 100644
index 336ab1b..0000000
--- a/src/components/mdx/Image/Image.module.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@use "@acid-info/logos-docusaurus-theme/lib/client/css/utils";
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100vw;
-  height: 100vh;
-
-  background-color: rgb(var(--lsd-theme-secondary));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10000;
-}
-
-.thumbnail {
-  cursor: pointer;
-}
-
-.enlarged {
-  position: fixed;
-
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  max-height: 90vh;
-  max-width: 90vw;
-
-  display: block;
-  object-fit: contain;
-}
-
-.closeButton {
-  position: fixed;
-  top: 18px;
-  right: 16px;
-
-  background-color: rgb(var(--lsd-theme-secondary)) !important;
-
-  cursor: pointer;
-
-  z-index: 1001;
-}
diff --git a/src/components/mdx/Image/Image.tsx b/src/components/mdx/Image/Image.tsx
deleted file mode 100644
index 66c8807..0000000
--- a/src/components/mdx/Image/Image.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { LightBoxWrapper } from '@acid-info/logos-docusaurus-theme/lib/client/containers/LightBox'
-import { CloseIcon, IconButton } from '@acid-info/lsd-react'
-import clsx from 'clsx'
-import React, { useEffect, useMemo, useState } from 'react'
-import styles from './Image.module.scss'
-
-export type LoadedImage = {
-  preSrc: string
-  width: number
-  height: number
-  placeholder: any
-  src: string
-  srcSet: string
-  images: {
-    width: number
-    height: number
-  }[]
-}
-
-export type ImageProps = Omit<
-  React.ImgHTMLAttributes<HTMLImageElement>,
-  'src'
-> & {
-  src?: string
-  img?: LoadedImage | undefined | null
-  minWidth?: number
-}
-
-export const Image: React.FC<ImageProps> = ({
-  minWidth = 0,
-  src,
-  img,
-  ...rest
-}) => {
-  const [enlarged, setEnlarged] = useState(false)
-  const singleImage = !img?.images || img.images.length === 0
-
-  const originalImage = {
-    src: src,
-    width: rest.width,
-    height: rest.height,
-  }
-
-  const images = img?.images || []
-
-  const sorted = useMemo(
-    () =>
-      [...images]
-        .sort((a, b) => a.width - b.width)
-        .filter(img => img.width >= minWidth),
-    [images],
-  )
-
-  const [smallest] = [sorted[0] ?? originalImage].map(img => ({
-    width: img.width,
-    height: img.height,
-    src: 'src' in img ? img.src : 'path' in img ? img.path : '',
-  }))
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setEnlarged(false)
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [])
-
-  const imageElement = (
-    <img
-      src={smallest.src as string}
-      width={smallest.width}
-      height={smallest.height}
-      onClick={() => !singleImage && setEnlarged(true)}
-      {...rest}
-      className={clsx(
-        styles.image,
-        !singleImage && styles.thumbnail,
-        rest.className,
-      )}
-    />
-  )
-
-  return (
-    <>
-      {img ? imageElement : <LightBoxWrapper>{imageElement}</LightBoxWrapper>}
-      {enlarged && (
-        <div className={styles.overlay}>
-          <IconButton
-            size="small"
-            onClick={() => setEnlarged(false)}
-            className={styles.closeButton}
-          >
-            <CloseIcon color="primary" />
-          </IconButton>
-          <img
-            src={originalImage.src as string}
-            {...rest}
-            className={styles.enlarged}
-          />
-        </div>
-      )}
-    </>
-  )
-}
diff --git a/src/components/mdx/Image/index.ts b/src/components/mdx/Image/index.ts
deleted file mode 100644
index 072b161..0000000
--- a/src/components/mdx/Image/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Image'
diff --git a/src/components/mdx/ImageGrid/ImageGrid.module.scss b/src/components/mdx/ImageGrid/ImageGrid.module.scss
deleted file mode 100644
index 004d96c..0000000
--- a/src/components/mdx/ImageGrid/ImageGrid.module.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@use "@acid-info/logos-docusaurus-theme/lib/client/css/utils";
-
-.thumbnailImageContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  height: 100%;
-}
-
-.thumbnailImage {
-  width: 100%;
-  height: auto;
-  object-fit: cover;
-}
-
-.masonry .thumbnailImageContainer {
-  flex-direction: column;
-  margin-bottom: 16px;
-  height: auto; // overrides the height: 100% from the default thumbnailImageContainer
-}
-
-.squareThumbnails .thumbnailImageContainer {
-  aspect-ratio: 1 / 1;
-}
-
-// Overlay and expanded image styles.
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100vw;
-  height: 100vh;
-
-  background-color: rgb(var(--lsd-theme-secondary));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10000;
-}
-
-.closeButton {
-  position: fixed;
-  top: 18px;
-  right: 16px;
-
-  background-color: rgb(var(--lsd-theme-secondary)) !important;
-
-  cursor: pointer;
-
-  z-index: 1001;
-}
-
-// Single column image galleries on mobile don't have spacing between them.
-// The following padding bottom fixes that.
-@include utils.responsive('md', 'down') {
-  .thumbnailImageContainer {
-    padding-bottom: 16px;
-  }
-}
diff --git a/src/components/mdx/ImageGrid/ImageGrid.tsx b/src/components/mdx/ImageGrid/ImageGrid.tsx
deleted file mode 100644
index 9c2cb80..0000000
--- a/src/components/mdx/ImageGrid/ImageGrid.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import {
-  Grid,
-  GridProps,
-} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
-import clsx from 'clsx'
-import React from 'react'
-import { Image, LoadedImage } from '../Image/Image'
-import styles from './ImageGrid.module.scss'
-
-type ImageType = {
-  img?: { src: LoadedImage }
-  alt?: string
-  src: string
-}
-
-type MasonryModeProps = {
-  firstColumnSize: number
-  images: ImageType[]
-}
-
-// Masonry mode only has 2 columns with 1 item each.
-const MasonryMode: React.FC<MasonryModeProps> = ({
-  firstColumnSize,
-  images,
-}) => {
-  const firstColumnImages = images.slice(0, firstColumnSize)
-  const secondColumnImages = images.slice(firstColumnSize)
-
-  return (
-    <>
-      <Grid.Item>
-        {firstColumnImages.map((image, index) => (
-          <div key={index} className={styles.thumbnailImageContainer}>
-            <Image
-              minWidth={400}
-              src={image.src}
-              img={image.img?.src}
-              alt={image.alt ?? ''}
-              className={styles.thumbnailImage}
-            />
-          </div>
-        ))}
-      </Grid.Item>
-      <Grid.Item>
-        {secondColumnImages.map((image, index) => (
-          <div key={index} className={styles.thumbnailImageContainer}>
-            <Image
-              minWidth={400}
-              src={image.src}
-              img={image.img?.src}
-              alt={image.alt ?? ''}
-              className={styles.thumbnailImage}
-            />
-          </div>
-        ))}
-      </Grid.Item>
-    </>
-  )
-}
-
-export type ImageGridProps = GridProps & {
-  images: ImageType[]
-  mode?: 'masonry' | 'regular' | 'square-thumbnails'
-  firstColumnSize?: number
-}
-
-export const ImageGrid: React.FC<ImageGridProps> = ({
-  mode = 'regular',
-  images,
-  firstColumnSize = 0,
-  ...props
-}) => {
-  return (
-    <>
-      <Grid
-        md={{ cols: mode === 'masonry' ? 2 : 3, gap: '16px' }}
-        xs={{ cols: 2, gap: '16px' }}
-        className={clsx(
-          styles.imageGrid,
-          mode === 'masonry' && styles.masonry,
-          mode === 'regular' && styles.regular,
-          mode === 'square-thumbnails' && styles.squareThumbnails,
-        )}
-        {...props}
-      >
-        {mode === 'masonry' ? (
-          <MasonryMode firstColumnSize={firstColumnSize} images={images} />
-        ) : (
-          images.map((image, index) => (
-            <Grid.Item key={index} className={styles.thumbnailImageContainer}>
-              <Image
-                minWidth={400}
-                src={image.src}
-                img={image.img?.src}
-                alt={image.alt ?? ''}
-                className={styles.thumbnailImage}
-              />
-            </Grid.Item>
-          ))
-        )}
-      </Grid>
-    </>
-  )
-}
diff --git a/src/components/mdx/ImageGrid/index.ts b/src/components/mdx/ImageGrid/index.ts
deleted file mode 100644
index 46b8437..0000000
--- a/src/components/mdx/ImageGrid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ImageGrid'
diff --git a/src/components/mdx/StorybookDemo/StoryBookDemo.module.scss b/src/components/mdx/StorybookDemo/StoryBookDemo.module.scss
deleted file mode 100644
index 9c8ad66..0000000
--- a/src/components/mdx/StorybookDemo/StoryBookDemo.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.root {
-}
-
-.iframeContainer {
-  width: 100%;
-  margin-top: 8px;
-
-  iframe {
-    transform: translateY(-20px);
-    width: 100%;
-    background-color: transparent;
-  }
-}
diff --git a/src/components/mdx/StorybookDemo/StorybookDemo.tsx b/src/components/mdx/StorybookDemo/StorybookDemo.tsx
deleted file mode 100644
index daeb4de..0000000
--- a/src/components/mdx/StorybookDemo/StorybookDemo.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { Dropdown } from '@acid-info/lsd-react'
-import { useColorMode } from '@docusaurus/theme-common'
-import clsx from 'clsx'
-import React, { useMemo, useRef, useState } from 'react'
-import styles from './StoryBookDemo.module.scss'
-
-const onIframeLoad = (iframe: HTMLIFrameElement) => {
-  const handleIframeMessage = (event: MessageEvent) => {
-    if (
-      typeof event.data === 'string' &&
-      event.data.includes('storyRendered')
-    ) {
-      // XXX: This if() block executes when storybook has finished rendering.
-      // So if we ever want to implement a loading screen, this if() block may help.
-      requestHeightFromIframe()
-    } else if (event.data && event.data.type === 'iframeHeightResponse') {
-      iframe.style.height = `${event.data.height}px`
-    }
-  }
-
-  // Request height from the iframe
-  const requestHeightFromIframe = () => {
-    if (!iframe || !iframe.contentWindow) {
-      return
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: 'requestHeight',
-      },
-      '*',
-    )
-  }
-
-  window.addEventListener('message', handleIframeMessage)
-
-  // The following setInterval is just a safety mechanism for the very unlikely case
-  // of the iframe not sending a storyRendered message.
-  setInterval(() => {
-    requestHeightFromIframe()
-  }, 1000)
-}
-
-type GlobalType = {
-  name: string
-  description: string
-  defaultValue: string
-  toolbar: {
-    icon: string
-    items: { title: string; value: string }[]
-  }
-}
-
-type ComponentProperty = {
-  name: string
-  type: {
-    name: 'enum'
-    value: string[]
-  }
-  defaultValue?: string
-}
-
-export type GlobalControls = 'themeFont' | 'themeColor'
-
-export type StorybookDemoProps = {
-  name: string
-  docId: string
-  storyId: string
-  storybookUrl: string
-  globalTypes: Record<string, GlobalType>
-  componentProperties: ComponentProperty[]
-  globalControls?: GlobalControls[]
-}
-
-export const StorybookDemo: React.FC<StorybookDemoProps> = ({
-  name,
-  docId,
-  storyId,
-  storybookUrl,
-  globalTypes,
-  globalControls = ['themeColor', 'themeFont'],
-  componentProperties = [],
-}) => {
-  const colorMode = useColorMode()
-
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-
-  const [globalProps, setGlobalProps] = useState(
-    Object.fromEntries(
-      Object.entries(globalTypes).map(([name, prop]) => [
-        name,
-        name === 'themeColor'
-          ? colorMode.colorMode.slice(0, 1).toUpperCase() +
-            colorMode.colorMode.slice(1)
-          : prop.defaultValue,
-      ]),
-    ),
-  )
-
-  const [props, setProps] = useState(
-    Object.fromEntries(
-      componentProperties.map(prop => [prop.name, prop.defaultValue]),
-    ),
-  )
-
-  const embedUrl = useMemo(() => {
-    const el = iframeRef.current
-
-    const url = el?.src
-      ? new URL(el.src)
-      : new URL('/iframe.html', storybookUrl as string)
-
-    url.searchParams.set('id', docId)
-    storyId && url.searchParams.set('storyId', storyId)
-    url.searchParams.set('globals', 'themeColor:Dark;themeFont:sans-serif')
-    url.searchParams.set('embedded', 'true')
-    url.searchParams.set(
-      'hide',
-      'title,subtitle,toolbar' +
-        (storyId ? ',description,canvas-border,code' : ''),
-    )
-    url.searchParams.set(
-      'globalControls',
-      globalControls && globalControls.length
-        ? globalControls.join(',')
-        : 'false',
-    )
-
-    return url.toString()
-  }, [docId, storyId, globalProps, globalControls, props])
-
-  return (
-    <div className={clsx(styles.root, styles[globalProps.themeColor])}>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          gap: '0 8px',
-        }}
-      >
-        {Object.entries(globalTypes).map(([name, prop]) => (
-          <Dropdown
-            key={name}
-            value={globalProps[name]}
-            onChange={value =>
-              setGlobalProps(state => ({ ...state, [name]: value as string }))
-            }
-            options={prop.toolbar.items.map(i => ({
-              name: i.title,
-              value: i.value,
-            }))}
-            triggerLabel={prop.name}
-            label={prop.name}
-          />
-        ))}
-        {componentProperties.map(prop => (
-          <Dropdown
-            key={prop.name}
-            value={props[prop.name]}
-            onChange={value =>
-              setProps(state => ({ ...state, [prop.name]: value as string }))
-            }
-            options={prop.type.value.map(i => ({
-              name: i,
-              value: i,
-            }))}
-            triggerLabel={prop.name}
-            label={prop.name}
-          />
-        ))}
-      </div>
-      <div className={styles.iframeContainer}>
-        <iframe
-          ref={iframeRef}
-          src={embedUrl}
-          height={500}
-          onLoad={() => {
-            onIframeLoad(iframeRef.current)
-          }}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/mdx/StorybookDemo/index.ts b/src/components/mdx/StorybookDemo/index.ts
deleted file mode 100644
index c380a73..0000000
--- a/src/components/mdx/StorybookDemo/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './StorybookDemo'
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
index 3259159..b32572e 100644
--- a/src/components/mdx/index.tsx
+++ b/src/components/mdx/index.tsx
@@ -1,7 +1,2 @@
-export * from './ColorCard'
-export * from './ComponentCard'
-export * from './ComponentGrid'
-export * from './ImageGrid'
-export * from './StorybookDemo'
-
+export * from '@acid-info/logos-docusaurus-brand-guidelines-theme/lib/client/components/mdx'
 export * from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 3a98640..e69de29 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -1,34 +0,0 @@
-:root {
-}
-
-.hidden {
-  display: none;
-}
-
-.sidebar-menu-divider {
-  margin-top: 8px;
-}
-
-.DocCardList--no-overview {
-  article:first-child {
-    display: none;
-  }
-
-  article a {
-    text-decoration: none;
-  }
-
-  article a:hover {
-    text-decoration: underline;
-  }
-}
-
-.template-card-title {
-  margin-bottom: 24px;
-  margin-top: 40px;
-}
-
-pre {
-  background-color: rgb(var(--lsd-theme-secondary)) !important;
-  border: 1px solid rgb(var(--lsd-border-primary)) !important;
-}
diff --git a/static/img/components/Autocomplete.png b/static/lsd/Autocomplete.png
similarity index 100%
rename from static/img/components/Autocomplete.png
rename to static/lsd/Autocomplete.png
diff --git a/static/img/components/Breadcrumb.png b/static/lsd/Breadcrumb.png
similarity index 100%
rename from static/img/components/Breadcrumb.png
rename to static/lsd/Breadcrumb.png
diff --git a/static/img/components/Button.png b/static/lsd/Button.png
similarity index 100%
rename from static/img/components/Button.png
rename to static/lsd/Button.png
diff --git a/static/img/components/ButtonGroup.png b/static/lsd/ButtonGroup.png
similarity index 100%
rename from static/img/components/ButtonGroup.png
rename to static/lsd/ButtonGroup.png
diff --git a/static/img/components/Card.png b/static/lsd/Card.png
similarity index 100%
rename from static/img/components/Card.png
rename to static/lsd/Card.png
diff --git a/static/img/components/Checkbox.png b/static/lsd/Checkbox.png
similarity index 100%
rename from static/img/components/Checkbox.png
rename to static/lsd/Checkbox.png
diff --git a/static/img/components/CheckboxGroup.png b/static/lsd/CheckboxGroup.png
similarity index 100%
rename from static/img/components/CheckboxGroup.png
rename to static/lsd/CheckboxGroup.png
diff --git a/static/img/components/Collapse.png b/static/lsd/Collapse.png
similarity index 100%
rename from static/img/components/Collapse.png
rename to static/lsd/Collapse.png
diff --git a/static/img/components/DateField.png b/static/lsd/DateField.png
similarity index 100%
rename from static/img/components/DateField.png
rename to static/lsd/DateField.png
diff --git a/static/img/components/DatePicker.png b/static/lsd/DatePicker.png
similarity index 100%
rename from static/img/components/DatePicker.png
rename to static/lsd/DatePicker.png
diff --git a/static/img/components/DateRangePicker.png b/static/lsd/DateRangePicker.png
similarity index 100%
rename from static/img/components/DateRangePicker.png
rename to static/lsd/DateRangePicker.png
diff --git a/static/img/components/Dropdown.png b/static/lsd/Dropdown.png
similarity index 100%
rename from static/img/components/Dropdown.png
rename to static/lsd/Dropdown.png
diff --git a/static/img/components/IconButton.png b/static/lsd/IconButton.png
similarity index 100%
rename from static/img/components/IconButton.png
rename to static/lsd/IconButton.png
diff --git a/static/img/components/Modal.png b/static/lsd/Modal.png
similarity index 100%
rename from static/img/components/Modal.png
rename to static/lsd/Modal.png
diff --git a/static/img/components/NumberInput.png b/static/lsd/NumberInput.png
similarity index 100%
rename from static/img/components/NumberInput.png
rename to static/lsd/NumberInput.png
diff --git a/static/img/components/Quote.png b/static/lsd/Quote.png
similarity index 100%
rename from static/img/components/Quote.png
rename to static/lsd/Quote.png
diff --git a/static/img/components/RadioButton.png b/static/lsd/RadioButton.png
similarity index 100%
rename from static/img/components/RadioButton.png
rename to static/lsd/RadioButton.png
diff --git a/static/img/components/RadioButtonGroup.png b/static/lsd/RadioButtonGroup.png
similarity index 100%
rename from static/img/components/RadioButtonGroup.png
rename to static/lsd/RadioButtonGroup.png
diff --git a/static/img/components/Tabs.png b/static/lsd/Tabs.png
similarity index 100%
rename from static/img/components/Tabs.png
rename to static/lsd/Tabs.png
diff --git a/static/img/components/Tag.png b/static/lsd/Tag.png
similarity index 100%
rename from static/img/components/Tag.png
rename to static/lsd/Tag.png
diff --git a/static/img/components/TextField.png b/static/lsd/TextField.png
similarity index 100%
rename from static/img/components/TextField.png
rename to static/lsd/TextField.png
diff --git a/static/img/components/Toast.png b/static/lsd/Toast.png
similarity index 100%
rename from static/img/components/Toast.png
rename to static/lsd/Toast.png
diff --git a/yarn.lock b/yarn.lock
index 6fd1381..856916f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19,6 +19,11 @@
     satori "^0.10.1"
     sharp "^0.32.1"
 
+"@acid-info/logos-docusaurus-brand-guidelines-theme@^1.0.0-alpha.123":
+  version "1.0.0-alpha.123"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-brand-guidelines-theme/-/logos-docusaurus-brand-guidelines-theme-1.0.0-alpha.123.tgz#aa087cc4d7604a84e27fbb797cb19139c3a194fe"
+  integrity sha512-F+Uj/1ODjy+ZVm8EvpSLRIg42huEy5zBLU/McHmzu72wI1c0JdNYCM9m4jSS6NZajU94ZqmnRVS6Kqea7okNbg==
+
 "@acid-info/logos-docusaurus-preset@^1.0.0-alpha.121":
   version "1.0.0-alpha.121"
   resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-preset/-/logos-docusaurus-preset-1.0.0-alpha.121.tgz#86d632b8132c1671204502b64e82d54a94e49d73"