diff --git a/web/.storybook/preview.js b/web/.storybook/preview.js
index e01aef8bc..c70e71aea 100644
--- a/web/.storybook/preview.js
+++ b/web/.storybook/preview.js
@@ -13,6 +13,8 @@ export const parameters = {
   docs: {
     container: DocsContainer,
   },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  viewMode: 'docs',
   controls: {
     matchers: {
       color: /(background|color)$/i,
diff --git a/web/.storybook/stories-category-doc-pages/Colors.stories.mdx b/web/.storybook/stories-category-doc-pages/Colors.stories.mdx
deleted file mode 100644
index 95a4ba162..000000000
--- a/web/.storybook/stories-category-doc-pages/Colors.stories.mdx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { ColorRow } from './Color';
-
-<Meta title="owncast/Styles/Colors" parameters={{ chromatic: { disableSnapshot: true } }} />
-
-# Default theme colors
-
-These colors are assigned in our [color token](https://github.com/owncast/owncast/tree/develop/web/style-definitions/tokens/color) files
-and get reflected here as they change. run `npm run build-styles` to regenerate.
-
-<Story name="Default Theme">
-	
-## Default Theme
-
-These color names are assigned to specific component variables. They can be overwritten via CSS.
-
-<ColorRow
-  colors={[
-    'theme-color-palette-0',
-    'theme-color-palette-1',
-    'theme-color-palette-2',
-    'theme-color-palette-3',
-    'theme-color-palette-4',
-    'theme-color-palette-5',
-    'theme-color-palette-6',
-    'theme-color-palette-7',
-    'theme-color-palette-8',
-    'theme-color-palette-9',
-    'theme-color-palette-10',
-    'theme-color-palette-11',
-    'theme-color-palette-12',
-    'theme-color-palette-13',
-    'theme-color-palette-15',
-    'theme-color-palette-error',
-    'theme-color-palette-warning',
-    'theme-color-background-main',
-    'theme-color-background-light',
-    'theme-color-background-header',
-    'theme-color-action',
-    'theme-color-action-hover',
-    'theme-color-action-disabled',
-  ]}
-/>
-</Story>
-
-<Story
-  name="Frontend Components"
->
-## Component Colors
-
-<ColorRow
-  colors={[
-    'theme-color-components-text-on-light',
-    'theme-color-components-text-on-dark',
-    'theme-color-components-primary-button-background',
-    'theme-color-components-primary-button-background-disabled',
-    'theme-color-components-primary-button-text',
-    'theme-color-components-primary-button-text-disabled',
-    'theme-color-components-primary-button-border',
-    'theme-color-components-secondary-button-background',
-    'theme-color-components-secondary-button-background-disabled',
-    'theme-color-components-secondary-button-text',
-    'theme-color-components-secondary-button-text-disabled',
-    'theme-color-components-secondary-button-border',
-    'theme-color-components-chat-background',
-    'theme-color-components-chat-text',
-    'theme-color-components-modal-header-background',
-    'theme-color-components-modal-header-text',
-    'theme-color-components-modal-content-background',
-    'theme-color-components-content-background',
-    'theme-color-components-modal-content-text',
-    'theme-color-components-menu-background',
-    'theme-color-components-menu-item-text',
-    'theme-color-components-menu-item-bg',
-    'theme-color-components-menu-item-hover-bg',
-    'theme-color-components-menu-item-focus-bg',
-    'theme-color-components-form-field-background',
-    'theme-color-components-form-field-placeholder',
-    'theme-color-components-form-field-text',
-    'theme-color-components-form-field-border',
-    'theme-color-components-video-status-bar-background',
-    'theme-color-components-video-status-bar-foreground',
-  ]}
-/>
-</Story>
-
-<Story
-  name="Owncast Color Palette"
->
-## Default Palette
-
-These are the core colors for the default, out of the box, Owncast web application theme.
-They should not be overwritten, instead the theme variables should be overwritten.
-
-<ColorRow
-  colors={[
-    'color-owncast-palette-0',
-    'color-owncast-palette-1',
-    'color-owncast-palette-2',
-    'color-owncast-palette-3',
-    'color-owncast-palette-4',
-    'color-owncast-palette-5',
-    'color-owncast-palette-6',
-    'color-owncast-palette-7',
-    'color-owncast-palette-9',
-    'color-owncast-palette-10',
-    'color-owncast-palette-11',
-    'color-owncast-palette-12',
-    'color-owncast-palette-13',
-    'color-owncast-palette-15',
-  ]}
-/>
-</Story>
-
-<Story
-  name="User Chat Colors"
->
-## User Colors
-
-<ColorRow
-  colors={[
-    'theme-color-users-0',
-    'theme-color-users-1',
-    'theme-color-users-2',
-    'theme-color-users-3',
-    'theme-color-users-4',
-    'theme-color-users-5',
-    'theme-color-users-6',
-    'theme-color-users-7',
-  ]}
-/>
-</Story>
diff --git a/web/.storybook/stories-category-doc-pages/Typography.stories.mdx b/web/.storybook/stories-category-doc-pages/Typography.stories.mdx
index 990de5ee1..d9cbab28f 100644
--- a/web/.storybook/stories-category-doc-pages/Typography.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Typography.stories.mdx
@@ -1,6 +1,12 @@
 import { Canvas, Meta, Story, Typeset, Source } from '@storybook/addon-docs';
 
-<Meta title="owncast/Styles/Typography" />
+<Meta
+  title="owncast/Styles/Typography"
+  parameters={{
+    previewTabs: { canvas: { hidden: true } },
+    chromatic: { disableSnapshot: true },
+  }}
+/>
 
 export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
 
diff --git a/web/.storybook/stories-category-doc-pages/Color.tsx b/web/.storybook/stories-category-doc-pages/colors/Color.tsx
similarity index 89%
rename from web/.storybook/stories-category-doc-pages/Color.tsx
rename to web/.storybook/stories-category-doc-pages/colors/Color.tsx
index 0924bb84c..e0c259520 100644
--- a/web/.storybook/stories-category-doc-pages/Color.tsx
+++ b/web/.storybook/stories-category-doc-pages/colors/Color.tsx
@@ -81,3 +81,9 @@ export const ColorRow = props => {
 ColorRow.propTypes = {
   colors: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
+
+export const getColor = color => {
+  const colorValue = getComputedStyle(document.documentElement).getPropertyValue(`--${color}`);
+  return { [color]: colorValue };
+  // return { [color]: colorValue };
+};
diff --git a/web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx b/web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx
new file mode 100644
index 000000000..5ef40e736
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx
@@ -0,0 +1,110 @@
+import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
+import { ColorRow, getColor } from './Color';
+
+<Meta
+  title="owncast/Styles/Colors/Components"
+  parameters={{
+    previewTabs: { canvas: { hidden: true } },
+    chromatic: { disableSnapshot: true },
+  }}
+/>
+
+<Description markdown={`
+  
+## Component Colors
+
+These are the specific colors used for components in the web application. They point to colors in the Owncast color palette but CSS variable names can be overwritten for customizing the theme.
+
+`}/>
+
+<ColorPalette>
+  <ColorItem
+    title="Text"
+    subtitle=""
+    colors={{
+      ...getColor('theme-color-components-text-on-light'),
+      ...getColor('theme-color-components-text-on-dark'),
+    }}
+  />
+  <ColorItem
+    title="Primary Button"
+    subtitle=""
+    colors={{
+      ...getColor('theme-color-components-primary-button-background'),
+      ...getColor('theme-color-components-primary-button-background-disabled'),
+			...getColor('theme-color-components-primary-button-text'),
+			...getColor('theme-color-components-primary-button-text-disabled'),
+			...getColor('theme-color-components-primary-button-border')
+    }}
+    />
+
+    <ColorItem
+    title="Secondary Button"
+    subtitle=""
+    colors={{
+      ...getColor('theme-color-components-secondary-button-background'),
+      ...getColor('theme-color-components-secondary-button-background-disabled'),
+    		...getColor('theme-color-components-secondary-button-text'),
+    		...getColor('theme-color-components-secondary-button-text-disabled'),
+    		...getColor('theme-color-components-secondary-button-border'),
+    }}
+    />
+
+<ColorItem
+  title="Chat"
+  subtitle=""
+  colors={{
+    ...getColor('theme-color-components-chat-background'),
+    ...getColor('theme-color-components-chat-text'),
+  }}
+/>
+<ColorItem
+  title="Modals"
+  subtitle=""
+  colors={{
+    ...getColor('theme-color-components-modal-header-background'),
+    ...getColor('theme-color-components-modal-header-text'),
+    ...getColor('theme-color-components-modal-content-background'),
+    ...getColor('theme-color-components-modal-content-text'),
+  }}
+/>
+<ColorItem
+  title="Page Content"
+  subtitle="Tabbed content"
+  colors={{
+    ...getColor('theme-color-components-content-background'),
+  }}
+/>
+<ColorItem
+  title="Menus"
+  subtitle=""
+  colors={{
+    ...getColor('theme-color-components-menu-background'),
+    ...getColor('theme-color-components-menu-item-text'),
+    ...getColor('theme-color-components-menu-item-bg'),
+    ...getColor('theme-color-components-menu-item-text'),
+    ...getColor('theme-color-components-menu-item-hover-bg'),
+    ...getColor('theme-color-components-menu-item-focus-bg'),
+  }}
+/>
+<ColorItem
+  title="Form Fields"
+  subtitle=""
+  colors={{
+    ...getColor('theme-color-components-form-field-background'),
+    ...getColor('theme-color-components-form-field-placeholder'),
+    ...getColor('theme-color-components-form-field-text'),
+    ...getColor('theme-color-components-menu-item-text'),
+    ...getColor('theme-color-components-form-field-border'),
+  }}
+/>
+<ColorItem
+  title="Video Player Status Bar"
+  subtitle="Displays duration and viewer count."
+  colors={{
+    ...getColor('theme-color-components-video-status-bar-background'),
+    ...getColor('theme-color-components-video-status-bar-foreground'),
+  }}
+/>
+
+</ColorPalette>
diff --git a/web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx b/web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx
new file mode 100644
index 000000000..ffde7464c
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx
@@ -0,0 +1,64 @@
+import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
+import { ColorRow, getColor } from './Color';
+
+<Meta
+  title="owncast/Styles/Colors/Palette"
+  parameters={{
+    previewTabs: { canvas: { hidden: true } },
+    chromatic: { disableSnapshot: true },
+  }}
+/>
+
+<Description markdown={`
+  
+## Theme Color Palette
+
+These are the colors used across the web application. All the specific component colors point to colors in this palette. If you override one of these colors all usage of that color will be updated.
+
+`}/>
+
+<ColorPalette>
+  <ColorItem
+    title="Theme color palette"
+    subtitle="Colors used across the theme."
+    colors={{
+      ...getColor('theme-color-palette-0'),
+      ...getColor('theme-color-palette-1'),
+      ...getColor('theme-color-palette-2'),
+      ...getColor('theme-color-palette-3'),
+      ...getColor('theme-color-palette-4'),
+      ...getColor('theme-color-palette-5'),
+    }}
+  />
+  <ColorItem
+    colors={{
+      ...getColor('theme-color-palette-6'),
+      ...getColor('theme-color-palette-7'),
+      ...getColor('theme-color-palette-8'),
+      ...getColor('theme-color-palette-9'),
+      ...getColor('theme-color-palette-10'),
+      ...getColor('theme-color-palette-11'),
+    }}
+
+/>
+
+  <ColorItem
+    colors={{
+      ...getColor('theme-color-palette-12'),
+      ...getColor('theme-color-palette-13'),
+      ...getColor('theme-color-palette-14'),
+      ...getColor('theme-color-palette-15'),
+      ...getColor('theme-color-palette-error'),
+      ...getColor('theme-color-palette-warning'),
+    }}
+  />
+  <ColorItem
+    colors={{
+      ...getColor('theme-color-background-light'),
+      ...getColor('theme-color-background-header'),
+      ...getColor('theme-color-action'),
+      ...getColor('theme-color-action-hover'),
+      ...getColor('theme-color-action-disabled'),
+    }}
+  />
+</ColorPalette>
diff --git a/web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx b/web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx
new file mode 100644
index 000000000..120f17ab0
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx
@@ -0,0 +1,64 @@
+import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
+import { ColorRow, getColor } from './Color';
+
+<Meta
+  title="owncast/Styles/Colors/Users"
+  parameters={{
+    previewTabs: { canvas: { hidden: true } },
+    chromatic: { disableSnapshot: true },
+  }}
+/>
+
+<Description markdown={`
+  
+## User Colors
+
+These are the colors available for assigning to chat users for display purposes. The CSS variables can be overwritten for customizing the theme.
+
+`}/>
+
+<ColorPalette>
+  <ColorItem title="User Color 0" colors={{ ...getColor('theme-color-users-0') }} />
+  <ColorItem
+    title="User Color 1"
+    colors={{
+      ...getColor('theme-color-users-1'),
+    }}
+  />
+  <ColorItem
+    title="User Color 2"
+    colors={{
+      ...getColor('theme-color-users-2'),
+    }}
+  />
+  <ColorItem
+    title="User Color 3"
+    colors={{
+      ...getColor('theme-color-users-3'),
+    }}
+  />
+  <ColorItem
+    title="User Color 4"
+    colors={{
+      ...getColor('theme-color-users-4'),
+    }}
+  />
+  <ColorItem
+    title="User Color 5"
+    colors={{
+      ...getColor('theme-color-users-5'),
+    }}
+  />
+  <ColorItem
+    title="User Color 6"
+    colors={{
+      ...getColor('theme-color-users-6'),
+    }}
+  />
+  <ColorItem
+    title="User Color 7"
+    colors={{
+      ...getColor('theme-color-users-7'),
+    }}
+  />
+</ColorPalette>