diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index dd20949c8276..886a36654d38 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, FC } from "react";
+import React, { ComponentProps, FC, forwardRef } from "react";
 import { styled } from "@storybook/theming";
 
 export interface ButtonProps extends ComponentProps<"button"> {
@@ -61,15 +61,13 @@ const StyledButton = styled.button<{ variant: ButtonProps["variant"] }>`
   }
 `;
 
-export const Button: FC<ButtonProps> = ({
-  children,
-  onClick,
-  variant = "primary",
-  ...rest
-}) => {
-  return (
-    <StyledButton onClick={onClick} variant={variant} {...rest}>
-      {children}
-    </StyledButton>
-  );
-};
+export const Button: FC<ButtonProps> = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, onClick, variant = 'primary', ...rest }, ref) => {
+    return (
+      <StyledButton ref={ref} onClick={onClick} variant={variant} {...rest}>
+        {children}
+      </StyledButton>
+    );
+  }
+);
+
diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx
index d16e88fe4032..d12e6b52e807 100644
--- a/src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx
+++ b/src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx
@@ -58,8 +58,9 @@ export default meta;`,
 
 export const Warning: Story = {
   args: {
+    primary: true,
+    label: 'Delete now',
     backgroundColor: 'red',
-    label: 'Delete now'
   }
 };`,
     },
diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx
index 171c2b71f4e9..be860c14a370 100644
--- a/src/features/GuidedTour/GuidedTour.tsx
+++ b/src/features/GuidedTour/GuidedTour.tsx
@@ -34,7 +34,10 @@ export function GuidedTour({
           target: "#example-button--warning",
           title: "Congratulations!",
           content:
-            "You just created your first story. You nailed the basics. Continue setting up your project and start writing stories for your components.",
+            <>
+              You just created your first story. You nailed the basics. <br/>
+              Continue setting up your project and start writing stories for your components.
+            </>,
           placement: "right",
           disableOverlay: true,
           disableBeacon: true,
@@ -95,8 +98,8 @@ export function GuidedTour({
           title: "Congratulations!",
           content: (
             <>
-              You've learned how to control your stories interactively. Now:
-              let's explore how to write your first story.
+              You've learned how to control your stories interactively.<br/>
+              Now: let's explore how to write your first story.
               <Confetti
                 numberOfPieces={800}
                 recycle={false}
diff --git a/src/features/WelcomeModal/WelcomeModal.tsx b/src/features/WelcomeModal/WelcomeModal.tsx
index 733b92cc409d..17fa6752b25c 100644
--- a/src/features/WelcomeModal/WelcomeModal.tsx
+++ b/src/features/WelcomeModal/WelcomeModal.tsx
@@ -33,7 +33,7 @@ export const WelcomeModal: FC<WelcomeModalProps> = ({
             <StorybookLogo />
             <Title>Welcome to Storybook</Title>
             <Description>
-              Storybook helps you develop UI components. Learn the basics in a
+              Storybook helps you develop UI components faster. Learn the basics in a
               few simple steps.
             </Description>
             <Button style={{ marginTop: 4 }} onClick={onProceed}>
diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
index ef38f24032cc..70636d14f347 100644
--- a/src/features/WriteStoriesModal/WriteStoriesModal.tsx
+++ b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
@@ -146,7 +146,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                     <div>
                       <h3>Imports</h3>
                       <p>
-                        First, import Meta and StoryObj for type safety and
+                        First, import <SpanHighlight>Meta</SpanHighlight> and <SpanHighlight>StoryObj</SpanHighlight> for type safety and
                         autocompletion in TypeScript stories.
                       </p>
                       <p>
@@ -224,7 +224,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                         Args are inputs that are passed to the component, which
                         Storybook uses to render the component in different
                         states. In React, args = props. They also specify the
-                        initial control settings for the story.
+                        initial control values for the story.
                       </p>
                       <Image
                         alt="Args mapped to their controls in Storybook"
@@ -279,7 +279,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                             isCompleted={warningButtonStatus?.data}
                             index={3}
                           >
-                            Paste it at the bottom of the file
+                            Paste it at the bottom of the file and save
                           </ListItem>
                         </List>
                       </div>
diff --git a/src/features/WriteStoriesModal/code/javascript.tsx b/src/features/WriteStoriesModal/code/javascript.tsx
index e5a77589a306..f9d157e8215b 100644
--- a/src/features/WriteStoriesModal/code/javascript.tsx
+++ b/src/features/WriteStoriesModal/code/javascript.tsx
@@ -36,8 +36,8 @@ export default [
 export const Warning = {
   args: {
     primary: true,
+    label: 'Delete now',
     backgroundColor: 'red',
-    label: 'Delete now'
   }
 };`,
     },
diff --git a/src/features/WriteStoriesModal/code/nextjs-typescript.tsx b/src/features/WriteStoriesModal/code/nextjs-typescript.tsx
index 764260c5d82a..204e643c5c5f 100644
--- a/src/features/WriteStoriesModal/code/nextjs-typescript.tsx
+++ b/src/features/WriteStoriesModal/code/nextjs-typescript.tsx
@@ -40,8 +40,8 @@ export default [
 export const Warning: Story = {
   args: {
     primary: true,
+    label: 'Delete now',
     backgroundColor: 'red',
-    label: 'Delete now'
   }
 };`,
     },
diff --git a/src/features/WriteStoriesModal/code/typescript.tsx b/src/features/WriteStoriesModal/code/typescript.tsx
index de1d760e227c..0634648ecd37 100644
--- a/src/features/WriteStoriesModal/code/typescript.tsx
+++ b/src/features/WriteStoriesModal/code/typescript.tsx
@@ -40,8 +40,8 @@ export default [
 export const Warning: Story = {
   args: {
     primary: true,
+    label: 'Delete now',
     backgroundColor: 'red',
-    label: 'Delete now'
   }
 };`,
     },
diff --git a/src/stories/Introduction.mdx b/src/stories/Introduction.mdx
index 2994a7faef96..9e038cd3418c 100644
--- a/src/stories/Introduction.mdx
+++ b/src/stories/Introduction.mdx
@@ -1,219 +1,315 @@
 import { Meta } from "@storybook/blocks";
-import Code from "./assets/code-brackets.svg";
-import Colors from "./assets/colors.svg";
-import Comments from "./assets/comments.svg";
-import Direction from "./assets/direction.svg";
-import Flow from "./assets/flow.svg";
-import Plugin from "./assets/plugin.svg";
-import Repo from "./assets/repo.svg";
-import StackAlt from "./assets/stackalt.svg";
 
-<Meta title="Configure Your Project" />
+import Accessibility from "./assets/accessibility.svg";
+import Checkmark from "./assets/checkmark.svg";
+import Document from "./assets/document.svg";
+import Typography from "./assets/typography.svg";
+import Github from "./assets/github.svg";
+import Discord from "./assets/discord.svg";
+import Youtube from "./assets/youtube.svg";
+import Chromatic from "./assets/chromatic.svg";
+import Figma from "./assets/figma.svg";
+import Tutorials from "./assets/tutorials.svg";
+import Styling from "./assets/styling.jpg";
+import Context from "./assets/context.jpg";
+import Assets from "./assets/assets.jpg";
+
+<Meta title="Configure your project" />
+
+# Configure your project
+
+Because Storybook works separately from your app, you'll need to configure Storybook for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
+<section>
+  <div className="section-item">
+    <img
+      src={Styling}
+      alt="A wall of logos representing different styling technologies"
+    />
+    <div className="block">
+      <h3>Add styling and CSS</h3>
+      <p>
+        Like with web applications, there are many ways to include CSS within
+        Storybook. Learn more about setting up styling within Storybook.
+      </p>
+      <a
+        href="https://storybook.js.org/docs/react/configure/styling-and-css"
+        target="_blank"
+      >
+        Read more on how to set up styling{" "}
+        <span className="chevron">&#8250;</span>
+      </a>
+    </div>
+  </div>
+  <div className="section-item">
+    <img
+      src={Context}
+      alt="An abstraction representing the composition of data for a component"
+    />
+    <div className="block">
+      <h3>Provide context and mocking</h3>
+      <p>
+        Often when a story doesn't render, it's because your component is
+        expecting a specific environment or context (like a theme provider) to
+        be available. Learn more about solving these issues by providing context
+        and mocking to Storybook.
+      </p>
+      <a
+        href="https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking"
+        target="_blank"
+      >
+        Read more on how to set up context{" "}
+        <span className="chevron">&#8250;</span>
+      </a>
+    </div>
+  </div>
+  <div className="section-item">
+    <img src={Assets} alt="A representation of typography and image assets" />
+    <div className="block">
+      <h3>Load assets and resources</h3>
+      <p>
+        To link static files (like fonts) to your projects and stories, use the
+        -s path/to/folder flag to specify a static folder to load when starting
+        Storybook.
+      </p>
+      <a href="https://storybook.js.org/docs/" target="_blank">
+        Read more on how to load assets <span className="chevron">&#8250;</span>
+      </a>
+    </div>
+  </div>
+</section>
+
+# Do more with Storybook
+
+Now that you know the basics, let’s explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
+<br />
+
+<section>
+  <div className="features-grid-container">
+    <div className="grid-item">
+      <img src={Document} />
+      <h3>Autodocs</h3>
+      <p>
+        Auto-generate living, interactive reference documentation from your
+        components and stories.
+      </p>
+      <a
+        href="https://storybook.js.org/docs/react/writing-docs/autodocs"
+        target="_blank"
+      >
+        Learn more <span className="chevron">&#8250;</span>
+      </a>
+    </div>
+    <div className="grid-item">
+      <img src={Checkmark} />
+      <h3>Testing</h3>
+      <p>
+        Use stories to test a component in all its variations, no matter how
+        complex.
+      </p>
+      <a
+        href="https://storybook.js.org/docs/react/writing-tests/introduction"
+        target="_blank"
+      >
+        Learn more <span className="chevron">&#8250;</span>
+      </a>
+    </div>
+    <div className="grid-item">
+      <img src={Chromatic} />
+      <h3>Publish to Chromatic</h3>
+      <p>
+        Publish your Storybook to review and collaborate with your entire team.
+      </p>
+      <a
+        href="https://storybook.js.org/docs/react/sharing/publish-storybook#publish-storybook-with-chromatic"
+        target="_blank"
+      >
+        Learn more <span className="chevron">&#8250;</span>
+      </a>
+    </div>
+    <div className="grid-item">
+      <img src={Figma} />
+      <h3>Figma Plugin</h3>
+      <p>
+        Embed your stories into Figma to cross-reference the design and live
+        implementation in one place.
+      </p>
+      <a
+        href="https://storybook.js.org/docs/react/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+        target="_blank"
+      >
+        Learn more <span className="chevron">&#8250;</span>
+      </a>
+    </div>
+    <div className="grid-item">
+      <img src={Accessibility} />
+      <h3>Accessibility</h3>
+      <p>Automatically test your components for a11y issues as you develop.</p>
+      <a
+        href="https://storybook.js.org/docs/react/writing-tests/accessibility-testing"
+        target="_blank"
+      >
+        Learn more <span className="chevron">&#8250;</span>
+      </a>
+    </div>
+    <div className="grid-item">
+      <img src={Typography} />
+      <h3>Theming</h3>
+      <p>
+        Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <a href="https://storybook.js.org/tutorials/" target="_blank">
+        Learn more <span className="chevron">&#8250;</span>
+      </a>
+    </div>
+  </div>
+</section>
+
+# Explore and Connect
+
+Connect with our community on Discord or start contributing directly on Github. You might also be interesting in watching some videos on Youtube explaining how to take full advantage of Storybook.
+
+<br />
+
+<section>
+  <div className="card-grid-container">
+    <a
+      className="explore-card"
+      href="https://discord.gg/storybook"
+      target="_blank"
+    >
+      <img src={Discord} />
+      <span>Discord</span>
+    </a>
+    <a
+      className="explore-card"
+      href="https://github.com/storybookjs/storybook"
+      target="_blank"
+    >
+      <img src={Github} />
+      <span>Github</span>
+    </a>
+    <a
+      className="explore-card"
+      href="https://www.youtube.com/@chromaticui"
+      target="_blank"
+    >
+      <img src={Youtube} />
+      <span>Youtube</span>
+    </a>
+    <a
+      className="explore-card"
+      href="https://storybook.js.org/tutorials/"
+      target="_blank"
+    >
+      <img src={Tutorials} />
+      <span>Tutorials</span>
+    </a>
+  </div>
+</section>
 
 <style>
   {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 700;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
+  section {
+    margin-bottom: 64px;
+  }
 
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-    }
+  section img {
+    border-radius: 10px;
+    max-height: 170px;
+  }
 
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
+  .section-item {
+    width: 100%;
+    margin-bottom: 20px;
+    width: 100%;
+    display: flex;
+    gap: 18px;
+    align-items: center;
+  }
 
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
-      }
-    }
+  .section-item a,
+  .grid-item a {
+    font-size: 13px;
+    transition: transform 150ms ease-out,color 150ms ease-out;
+  }
 
-    .link-item {
-      display: block;
-      padding: 20px 30px 20px 15px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
+  .block {
+    flex: 1;
+    margin-left: 10px;
+  }
 
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
+  .chevron {
+    margin-left: 5px;
+  }
 
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
+  .features-grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 40px 20px;
+  }
 
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
+  .grid-item img {
+    max-height: 48px;
+    margin-bottom: 12px;
+  }
 
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
+  .card-grid-container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 20px;
+  }
 
-    .link-item span {
-      font-size: 14px;
-      line-height: 20px;
-    }
+  .explore-card {
+    border-radius: 8px;
+    border: 2px solid #00000010;
+    padding: 20px;
+    display: grid;
+    justify-content: center;
+    font-weight: 700;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    gap: 8px;
+  }
 
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
+  .explore-card:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
 
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
+  .explore-card:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  section h3 {
+    font-size: 16px !important;
+  }
 
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
+  .card-background {
+    width: 100%;
+    height: 150px;
+    background-color: #ccc;
+  }
+
+  @media screen and (max-width: 600px) {
+    .section-item {
+      flex-direction: column;
+      align-items: flex-start;
     }
+    .block {
+      margin-left: 0;
+      margin-top: 10px;
+    }
+    .features-grid-container {
+      grid-template-columns: repeat(1, 1fr);
+    }
+    .card-grid-container {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
   `}
 </style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/tutorials/"
-    target="_blank"
-  >
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://github.com/storybookjs/storybook"
-    target="_blank"
-  >
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{" "}
-  <code>stories/Introduction.stories.mdx</code>
-</div>
diff --git a/src/stories/assets/accessibility.svg b/src/stories/assets/accessibility.svg
new file mode 100644
index 000000000000..00efad3d0b7e
--- /dev/null
+++ b/src/stories/assets/accessibility.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Accessibility</title>
+  <circle cx="24.334" cy="24" r="24" fill="#A849FF" fill-opacity="0.3"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.8609 11.585C27.8609 9.59506 26.2497 7.99023 24.2519 7.99023C22.254 7.99023 20.6429 9.65925 20.6429 11.585C20.6429 13.575 22.254 15.1799 24.2519 15.1799C26.2497 15.1799 27.8609 13.575 27.8609 11.585ZM21.8922 22.6473C21.8467 23.9096 21.7901 25.4788 21.5897 26.2771C20.9853 29.0462 17.7348 36.3314 17.3325 37.2275C17.1891 37.4923 17.1077 37.7955 17.1077 38.1178C17.1077 39.1519 17.946 39.9902 18.9802 39.9902C19.6587 39.9902 20.253 39.6293 20.5814 39.0889L20.6429 38.9874L24.2841 31.22C24.2841 31.22 27.5529 37.9214 27.9238 38.6591C28.2948 39.3967 28.8709 39.9902 29.7168 39.9902C30.751 39.9902 31.5893 39.1519 31.5893 38.1178C31.5893 37.7951 31.3639 37.2265 31.3639 37.2265C30.9581 36.3258 27.698 29.0452 27.0938 26.2771C26.8975 25.4948 26.847 23.9722 26.8056 22.7236C26.7927 22.333 26.7806 21.9693 26.7653 21.6634C26.7008 21.214 27.0231 20.8289 27.4097 20.7005L35.3366 18.3253C36.3033 18.0685 36.8834 16.9773 36.6256 16.0144C36.3678 15.0515 35.2722 14.4737 34.3055 14.7305C34.3055 14.7305 26.8619 17.1057 24.2841 17.1057C21.7062 17.1057 14.456 14.7947 14.456 14.7947C13.4893 14.5379 12.3937 14.9873 12.0715 15.9502C11.7493 16.9131 12.3293 18.0044 13.3604 18.3253L21.2873 20.7005C21.674 20.8289 21.9318 21.214 21.9318 21.6634C21.9174 21.9493 21.9053 22.2857 21.8922 22.6473Z" fill="#A470D5"/>
+</svg>
diff --git a/src/stories/assets/assets.jpg b/src/stories/assets/assets.jpg
new file mode 100644
index 000000000000..5390e31ec915
Binary files /dev/null and b/src/stories/assets/assets.jpg differ
diff --git a/src/stories/assets/checkmark.svg b/src/stories/assets/checkmark.svg
new file mode 100644
index 000000000000..b1de90119d58
--- /dev/null
+++ b/src/stories/assets/checkmark.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Checkmark</title>
+  <circle cx="24.334" cy="24" r="24" fill="#96D07C"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M35.2311 14.7965L20.7422 30.1005L13.4388 22.0383C12.9295 21.4762 12.1039 21.4763 11.5948 22.0383C11.0856 22.6004 11.0856 23.5117 11.5948 24.0737L19.795 33.1258C20.0739 33.4365 20.4081 33.5769 20.7422 33.5765C21.0763 33.5769 21.4104 33.4365 21.6653 33.1551C21.6734 33.1462 37.075 16.8318 37.075 16.8318C37.5842 16.2698 37.5842 15.3586 37.075 14.7965C36.5658 14.2345 35.7402 14.2345 35.2311 14.7965Z" fill="white"/>
+</svg>
diff --git a/src/stories/assets/chromatic.svg b/src/stories/assets/chromatic.svg
new file mode 100644
index 000000000000..80060821a939
--- /dev/null
+++ b/src/stories/assets/chromatic.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Chromatic logo</title>
+  <circle cx="24.666" cy="24" r="24" fill="#FC521F"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M30.3052 35.0414L26.4916 32.8411L37.9648 26.2231C38.4044 25.969 38.8187 25.6783 39.2046 25.3534C40.6958 27.4768 40.8424 30.2735 39.5129 32.5754C38.3117 34.6532 36.0709 35.944 33.6677 35.944C32.4918 35.944 31.3299 35.6318 30.3052 35.0414ZM29.3864 36.6299C29.8265 36.8843 30.2853 37.0979 30.7603 37.2696C29.6654 39.6213 27.3154 41.1454 24.6535 41.1454C20.938 41.1454 17.9135 38.124 17.9135 34.4111V21.1743L23.7348 24.5333V32.8398C23.7348 33.1676 23.9102 33.4708 24.1939 33.6347L29.3864 36.6299ZM15.6578 35.9409C13.254 35.9409 11.0169 34.6513 9.81521 32.5743C8.91631 31.0166 8.6759 29.2022 9.14278 27.4638C9.60936 25.7254 10.7231 24.2731 12.2831 23.374L16.0956 21.1743L16.0962 34.4082C16.0962 34.9159 16.1398 35.4195 16.2283 35.9177C16.0384 35.9336 15.8477 35.9409 15.6578 35.9409ZM30.4946 19.5853L24.6755 22.9426L17.4756 18.7898C17.3339 18.7083 17.1754 18.6668 17.0157 18.6668C16.858 18.6668 16.6995 18.7083 16.5569 18.7898L11.3653 21.785C10.9255 22.0377 10.51 22.3279 10.1241 22.6542C8.63348 20.5311 8.48802 17.7347 9.81605 15.432C11.0178 13.3544 13.2563 12.0625 15.6609 12.0625C16.8354 12.0625 17.9979 12.3758 19.0234 12.9665L30.4946 19.5853ZM24.6537 6.85938C28.371 6.85938 31.3934 9.8807 31.3934 13.5951V17.9951L19.9237 11.3783C19.4836 11.1233 19.0245 10.9092 18.5481 10.7368C19.643 8.38425 21.9936 6.85938 24.6537 6.85938ZM39.5151 15.4341C41.3721 18.6504 40.2659 22.7774 37.0469 24.6336L25.5757 31.2518V24.5361L32.7748 20.3827C33.0593 20.2188 33.2347 19.9156 33.2347 19.5875V13.5971C33.2353 13.0911 33.1894 12.5869 33.1026 12.0905C33.291 12.0739 33.4809 12.0661 33.6714 12.0661C36.0754 12.0661 38.3145 13.3569 39.5151 15.4341Z" fill="white"/>
+</svg>
diff --git a/src/stories/assets/code-brackets.svg b/src/stories/assets/code-brackets.svg
deleted file mode 100644
index 73de94776001..000000000000
--- a/src/stories/assets/code-brackets.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
\ No newline at end of file
diff --git a/src/stories/assets/colors.svg b/src/stories/assets/colors.svg
deleted file mode 100644
index 17d58d516e14..000000000000
--- a/src/stories/assets/colors.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/colors</title><g id="illustration/colors" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><circle id="Oval" cx="23.763" cy="16.192" r="13.271" fill="#FC521F" opacity=".6"/><circle id="Oval-Copy" cx="15.468" cy="32.308" r="13.271" fill="#66BF3C" opacity=".6"/><path id="Combined-Shape" fill="#FF5F95" d="M15.4683651,19.0362231 C21.5434817,19.0362231 26.6652087,23.1181689 28.2404554,28.6889694 C26.8420385,29.1906678 25.3344184,29.4637769 23.7630101,29.4637769 C17.6878936,29.4637769 12.5661666,25.3818311 10.9909199,19.8110306 C12.3898993,19.3092302 13.8972501,19.0362231 15.4683651,19.0362231 Z"/><circle id="Oval-Copy-2" cx="32.532" cy="32.308" r="13.271" fill="#1EA7FD" opacity=".6"/><path id="Combined-Shape" fill="#87E6E5" d="M24.00025,22.1417324 C26.897967,24.5762286 28.7397972,28.2268506 28.7397972,32.3076552 C28.7397972,36.3884597 26.897967,40.0390817 24.00025,42.4735779 C21.1018087,40.038637 19.2602028,36.3882111 19.2602028,32.3076552 C19.2602028,28.2815316 21.0530043,24.6741393 23.8838362,22.2402492 Z"/><path id="Combined-Shape" fill="#FBD178" d="M32.5316349,19.0362231 C33.9415155,19.0362231 35.3000478,19.2560712 36.5748203,19.6633557 C35.0489179,25.3104816 29.8909911,29.4637769 23.7630101,29.4637769 C22.3527608,29.4637769 20.9938866,29.2438138 19.7188247,28.8363247 C21.2451195,23.1900077 26.403293,19.0362231 32.5316349,19.0362231 Z"/><path id="Combined-Shape" fill="#FFF" d="M24.00025,22.1417324 L24.0124326,22.1519799 C24.1747744,22.288701 24.3337918,22.4292434 24.4893463,22.5734686 L24.3896855,22.4820008 C24.4671836,22.552408 24.5438453,22.6237194 24.619654,22.6959185 L24.4893463,22.5734686 C24.5690639,22.6473803 24.6478719,22.7222591 24.7257519,22.7980864 L24.619654,22.6959185 C24.6907654,22.7636441 24.7611262,22.8321506 24.8307226,22.9014245 L24.7257519,22.7980864 C24.8120661,22.8821258 24.8972403,22.9673303 24.981249,23.0536745 L24.8307226,22.9014245 C24.9073006,22.9776475 24.9829531,23.0547994 25.0576619,23.132862 L25.057852,23.1330605 C25.3140855,23.4007967 25.559391,23.679459 25.7928375,23.9681079 L25.7230574,23.8825538 C25.7985998,23.9743942 25.8729325,24.0672672 25.9460311,24.1611484 L25.7928375,23.9681079 C25.8624256,24.0541514 25.93096,24.1410823 25.998421,24.228881 L25.9460311,24.1611484 C26.0074362,24.2400115 26.0679704,24.319586 26.1276194,24.3998576 L25.998421,24.228881 C26.0663495,24.317288 26.1331896,24.4065749 26.1989214,24.4967216 L26.1276194,24.3998576 C26.204848,24.5037867 26.2805926,24.6088841 26.3548219,24.7151187 L26.1989214,24.4967216 C26.2678555,24.59126 26.3355706,24.6867441 26.4020436,24.7831507 L26.3548219,24.7151187 C26.4130013,24.798383 26.4702498,24.8823459 26.5265523,24.9669921 L26.4020436,24.7831507 C26.4678788,24.8786322 26.5324956,24.9750187 26.5958716,25.0722875 L26.5959296,25.0723765 C26.736338,25.2878741 26.870709,25.5077955 26.9987399,25.7318073 L26.9410662,25.6319089 C26.9973106,25.7283602 27.0523736,25.8255849 27.1062352,25.9235633 L26.9987399,25.7318073 C27.0539848,25.8284676 27.1080492,25.9258895 27.1609136,26.0240532 L27.1606656,26.0235927 C27.2696676,26.2259984 27.3733426,26.4310837 27.4717677,26.6391379 L27.4715275,26.6386302 C27.5541941,26.8133735 27.6329386,26.9896914 27.7079006,27.1679911 C27.7630163,27.299081 27.8161443,27.431391 27.8671831,27.5647345 L27.804312,27.4036517 C27.8391482,27.4912057 27.8730792,27.5792182 27.9060936,27.6676774 L27.8671831,27.5647345 C27.906613,27.6677486 27.9447959,27.7713796 27.9817136,27.8756091 L27.9060936,27.6676774 C27.946474,27.7758735 27.9854831,27.884738 28.0230997,27.9942498 L27.9817136,27.8756091 C28.0144978,27.9681688 28.0462842,28.0612004 28.0770597,28.1546911 L28.0230997,27.9942498 C28.0618265,28.1069941 28.0990774,28.2204244 28.1348294,28.3345177 L28.0770597,28.1546911 C28.1112208,28.2584663 28.1441365,28.3628071 28.175789,28.4676958 L28.1756797,28.4673338 L28.2408136,28.6893554 C28.2284694,28.6937793 28.2161167,28.6981854 28.2037557,28.7025737 L28.2404554,28.6889694 C27.9517707,28.7925384 27.6584322,28.8863659 27.3608394,28.97006 L27.3609965,28.9702524 C27.0695498,29.0519815 26.7741843,29.1241944 26.4751174,29.1863314 L26.5385665,29.1730829 C26.3901218,29.2046704 26.2407589,29.2337757 26.0905233,29.2603535 L26.4751174,29.1863314 C26.3367402,29.215082 26.1975707,29.2416755 26.0576458,29.2660754 L26.0905233,29.2603535 C25.9366833,29.2875689 25.7819282,29.312134 25.6263069,29.334 L26.0576458,29.2660754 C25.9017815,29.2932549 25.7449801,29.3177127 25.5872928,29.3393985 L25.6263069,29.334 C25.493366,29.3526793 25.3597929,29.3693888 25.2256182,29.3840982 L25.5872928,29.3393985 C25.4326976,29.360659 25.277251,29.3792552 25.1210012,29.3951396 L25.2256182,29.3840982 C25.0570566,29.4025774 24.8875455,29.4178998 24.7171453,29.4300052 L25.1210012,29.3951396 C24.9661341,29.4108835 24.810478,29.4239634 24.6540799,29.4343333 L24.7171453,29.4300052 C24.5612618,29.4410793 24.4046342,29.4494611 24.2473088,29.4551045 L24.6540799,29.4343333 C24.5098436,29.4438967 24.3649762,29.4511552 24.2195147,29.4560724 L24.2473088,29.4551045 C24.0865878,29.4608697 23.9251385,29.4637769 23.7630101,29.4637769 L23.3130142,29.4562912 C23.2993121,29.4558347 23.2856153,29.4553574 23.2719237,29.4548593 C22.9596275,29.4434959 22.6502324,29.4213577 22.3439491,29.3888006 L22.3886972,29.3934808 C22.2468147,29.3788837 22.105595,29.3620515 21.9650736,29.3430199 L22.3439491,29.3888006 C22.1914515,29.3725905 22.0397254,29.3537976 21.8888152,29.3324664 L21.9650736,29.3430199 C21.8025527,29.3210088 21.6409661,29.2960557 21.4803691,29.2682161 L21.8888152,29.3324664 C21.7352182,29.3107553 21.5824665,29.2864149 21.4306071,29.2594919 L21.4803691,29.2682161 C21.3506285,29.2457255 21.2215338,29.221351 21.0931142,29.1951218 L21.4306071,29.2594919 C21.2772401,29.2323016 21.1247833,29.2024774 20.973285,29.1700676 L21.0931142,29.1951218 C20.9267071,29.1611338 20.7614335,29.1240315 20.5973571,29.0838786 L20.973285,29.1700676 C20.825476,29.138447 20.6785795,29.1043653 20.5326403,29.0678674 L20.5973571,29.0838786 C20.4596684,29.0501832 20.3228227,29.0143396 20.1868576,28.9763851 L20.5326403,29.0678674 C20.3930822,29.0329653 20.2543997,28.9958536 20.1166319,28.9565718 L20.1169729,28.956669 L19.7188247,28.8363247 L19.7188247,28.8363247 L19.7880988,28.5894836 C19.8166627,28.4914193 19.8463277,28.3938241 19.8770797,28.2967124 L19.8480041,28.389868 C19.888904,28.2573207 19.931824,28.1256601 19.9767281,27.9949221 L19.8770797,28.2967124 C19.9117081,28.1873592 19.9477148,28.0786191 19.9850793,27.9705124 L19.9853117,27.9700125 C20.1152243,27.5939638 20.2618428,27.2250995 20.4240731,26.8647811 L20.345088,27.0439391 C20.3899401,26.9402428 20.4360767,26.8372321 20.4834778,26.7349269 L20.4240731,26.8647811 C20.461061,26.78263 20.4988604,26.7009231 20.5374612,26.6196707 L20.4834778,26.7349269 C20.5344734,26.6248636 20.5869326,26.515617 20.6408302,26.4072119 L20.5374612,26.6196707 C20.5871241,26.5151329 20.6381134,26.4113474 20.6904074,26.308336 L20.6408302,26.4072119 C20.681671,26.3250682 20.7233378,26.2434076 20.7658197,26.1622412 L20.7658807,26.1619302 C20.8435258,26.013775 20.923959,25.866962 21.0070529,25.7218685 C21.2050227,25.3759931 21.4182299,25.0398756 21.6456589,24.7144306 L21.5286537,24.8848257 C21.5876708,24.7975143 21.6476996,24.7109431 21.7087233,24.6251289 L21.6456589,24.7144306 C21.6993229,24.6376387 21.7537788,24.5614411 21.8090146,24.4858495 L21.7087233,24.6251289 C21.7826333,24.5211934 21.8580028,24.4183683 21.9348018,24.3166836 L21.8090146,24.4858495 C21.8722751,24.3992759 21.9365587,24.3134973 22.0018475,24.2285315 L22.0016895,24.2288802 C22.3179789,23.8171232 22.6576794,23.4247699 23.0189296,23.053491 L22.8296293,23.2521975 C22.9033796,23.1732135 22.9780829,23.095131 23.0537208,23.0179683 L23.0189296,23.053491 C23.083529,22.9870982 23.1488175,22.9213793 23.2147836,22.8563459 L23.0537208,23.0179683 C23.131055,22.9390752 23.2093662,22.8611436 23.2886348,22.7841931 L23.2147836,22.8563459 C23.2821211,22.7899605 23.3501645,22.7242893 23.4189017,22.6593447 L23.2886348,22.7841931 C23.3852399,22.6904132 23.4832671,22.5980904 23.582681,22.5072602 L23.4189017,22.6593447 C23.4912637,22.5909753 23.5643945,22.523411 23.6382797,22.4566663 L23.582681,22.5072602 C23.6715916,22.4260264 23.7616113,22.3459865 23.8527148,22.2671658 L23.8525967,22.2671923 C23.8915062,22.2336043 23.9304941,22.2002638 23.9696766,22.1671464 L24.00025,22.1417324 Z"/></g></svg>
\ No newline at end of file
diff --git a/src/stories/assets/comments.svg b/src/stories/assets/comments.svg
deleted file mode 100644
index 6493a139f523..000000000000
--- a/src/stories/assets/comments.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>
\ No newline at end of file
diff --git a/src/stories/assets/context.jpg b/src/stories/assets/context.jpg
new file mode 100644
index 000000000000..763d0d871c85
Binary files /dev/null and b/src/stories/assets/context.jpg differ
diff --git a/src/stories/assets/direction.svg b/src/stories/assets/direction.svg
deleted file mode 100644
index 65676ac27229..000000000000
--- a/src/stories/assets/direction.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>
\ No newline at end of file
diff --git a/src/stories/assets/discord.svg b/src/stories/assets/discord.svg
new file mode 100644
index 000000000000..5ab7196249e7
--- /dev/null
+++ b/src/stories/assets/discord.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 62 48">
+  <title>Discord logo</title>
+  <g clip-path="url(#a)">
+    <mask id="b" width="62" height="48" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance">
+      <path fill="#fff" d="M62.75.5h-62v48h62V.5Z"/>
+    </mask>
+    <g mask="url(#b)">
+      <path fill="#5865F2" d="M53.236 4.774A51.148 51.148 0 0 0 40.616.863a.192.192 0 0 0-.203.095 35.573 35.573 0 0 0-1.571 3.226 47.228 47.228 0 0 0-14.175 0A32.64 32.64 0 0 0 23.071.958a.2.2 0 0 0-.202-.095 51.008 51.008 0 0 0-12.62 3.911.18.18 0 0 0-.083.072C2.128 16.847-.074 28.553 1.006 40.114c.005.057.037.111.08.145 5.304 3.893 10.44 6.255 15.482 7.822a.2.2 0 0 0 .218-.072 36.71 36.71 0 0 0 3.167-5.148.196.196 0 0 0-.107-.273 33.857 33.857 0 0 1-4.837-2.304.199.199 0 0 1-.02-.33c.326-.243.65-.496.961-.752a.192.192 0 0 1 .2-.027c10.147 4.63 21.132 4.63 31.16 0a.191.191 0 0 1 .202.025c.31.255.636.511.963.755a.199.199 0 0 1-.017.329 31.782 31.782 0 0 1-4.839 2.301.198.198 0 0 0-.105.276 41.23 41.23 0 0 0 3.165 5.146.197.197 0 0 0 .217.074c5.066-1.567 10.203-3.93 15.506-7.822a.2.2 0 0 0 .081-.142c1.293-13.366-2.165-24.976-9.167-35.269a.157.157 0 0 0-.08-.074Zm-31.768 28.3c-3.055 0-5.572-2.802-5.572-6.244 0-3.443 2.469-6.246 5.572-6.246 3.128 0 5.621 2.828 5.572 6.246 0 3.442-2.468 6.245-5.572 6.245Zm20.602 0c-3.055 0-5.572-2.802-5.572-6.244 0-3.443 2.468-6.246 5.572-6.246 3.128 0 5.62 2.828 5.572 6.246 0 3.442-2.444 6.245-5.572 6.245Z"/>
+    </g>
+  </g>
+  <defs><clipPath id="a"><path fill="#fff" d="M.75.5h62v48h-62z"/></clipPath></defs>
+</svg>
\ No newline at end of file
diff --git a/src/stories/assets/document.svg b/src/stories/assets/document.svg
new file mode 100644
index 000000000000..8e6e57986966
--- /dev/null
+++ b/src/stories/assets/document.svg
@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Document</title>
+  <path d="M7 0C4.79083 0 3 1.79083 3 4V44C3 46.2092 4.79083 48 7 48H41C43.2092 48 45 46.2092 45 44V9L36 0H7Z" fill="#FFE8B6"/>
+  <rect x="9" y="17" width="9" height="5" rx="2" fill="#FEBD32"/>
+  <rect x="20" y="17" width="19" height="5" rx="2" fill="#FEBD32"/>
+  <rect x="9" y="26" width="9" height="5" rx="2" fill="#FEBD32"/>
+  <rect x="20" y="26" width="19" height="5" rx="2" fill="#FEBD32"/>
+  <rect x="9" y="35" width="9" height="5" rx="2" fill="#FEBD32"/>
+  <rect x="20" y="35" width="19" height="5" rx="2" fill="#FEBD32"/>
+  <path d="M36 0V5C36 7.20914 37.7909 9 40 9H45L36 0Z" fill="#FEBD32"/>
+</svg>
diff --git a/src/stories/assets/figma.svg b/src/stories/assets/figma.svg
new file mode 100644
index 000000000000..0fccef023d3f
--- /dev/null
+++ b/src/stories/assets/figma.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 48">
+  <title>Figma logo</title>
+  <g clip-path="url(#a)">
+    <path fill="#1ABCFE" d="M16 24a7.919 7.919 0 1 1 15.837 0A7.919 7.919 0 0 1 16 24Z"/>
+    <path fill="#0ACF83" d="M.162 39.837a7.919 7.919 0 0 1 7.919-7.919h7.918v7.919a7.918 7.918 0 1 1-15.837 0Z"/>
+    <path fill="#FF7262" d="M16 .244v15.837h7.919a7.918 7.918 0 1 0 0-15.837H16Z"/>
+    <path fill="#F24E1E" d="M.162 8.163a7.918 7.918 0 0 0 7.919 7.918h7.918V.244H8.081A7.919 7.919 0 0 0 .162 8.163Z"/>
+    <path fill="#A259FF" d="M.162 24a7.918 7.918 0 0 0 7.919 7.92h7.918V16.081H8.081a7.919 7.919 0 0 0-7.919 7.919Z"/>
+  </g>
+  <defs><clipPath id="a"><path fill="#fff" d="M0 0h32v48H0z"/></clipPath></defs>
+</svg>
\ No newline at end of file
diff --git a/src/stories/assets/flow.svg b/src/stories/assets/flow.svg
deleted file mode 100644
index 8ac27db403c2..000000000000
--- a/src/stories/assets/flow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>
\ No newline at end of file
diff --git a/src/stories/assets/github.svg b/src/stories/assets/github.svg
new file mode 100644
index 000000000000..7360edd5c731
--- /dev/null
+++ b/src/stories/assets/github.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="62" height="48" viewBox="0 0 62 48">
+  <title>Github logo</title>
+  <path fill="#161614" d="M30.82.5C17.251.5 6.25 11.517 6.25 25.108c0 10.872 7.04 20.097 16.802 23.35 1.228.228 1.679-.533 1.679-1.183 0-.587-.023-2.526-.034-4.582-6.835 1.489-8.277-2.903-8.277-2.903-1.118-2.845-2.728-3.601-2.728-3.601-2.23-1.527.168-1.496.168-1.496 2.467.174 3.766 2.536 3.766 2.536 2.191 3.762 5.748 2.674 7.15 2.046.22-1.59.857-2.676 1.56-3.29-5.457-.623-11.194-2.733-11.194-12.162 0-2.687.96-4.882 2.531-6.605-.255-.62-1.096-3.123.238-6.513 0 0 2.063-.661 6.759 2.523 1.96-.546 4.061-.819 6.15-.828 2.087.01 4.19.282 6.154.828 4.69-3.184 6.75-2.523 6.75-2.523 1.337 3.39.496 5.893.24 6.513 1.576 1.723 2.53 3.918 2.53 6.605 0 9.451-5.748 11.532-11.22 12.142.882.763 1.667 2.26 1.667 4.557 0 3.292-.028 5.942-.028 6.753 0 .654.442 1.422 1.687 1.18 9.757-3.257 16.788-12.478 16.788-23.347C55.388 11.518 44.388.5 30.82.5ZM15.451 35.555c-.054.122-.246.159-.421.075-.178-.08-.278-.247-.22-.37.052-.126.245-.161.422-.077.18.08.28.249.219.372Zm1.208 1.08c-.117.108-.346.058-.501-.114-.16-.172-.191-.401-.072-.511.12-.11.343-.058.504.113.16.174.192.402.07.512Zm.83 1.382c-.15.104-.397.006-.55-.213-.15-.219-.15-.481.004-.586.153-.105.395-.01.55.206.15.223.15.485-.004.593Zm1.402 1.6c-.135.149-.422.109-.632-.094-.215-.199-.274-.48-.14-.629.137-.15.426-.107.637.094.213.198.278.482.135.629Zm1.812.54c-.06.193-.336.28-.614.199-.278-.085-.46-.31-.404-.505.058-.194.336-.285.616-.198.277.084.46.308.402.504Zm2.062.23c.007.202-.229.37-.52.374-.295.007-.532-.157-.535-.357 0-.205.23-.372.524-.377.292-.005.531.158.531.36Zm2.026-.078c.035.198-.168.401-.458.455-.285.052-.549-.07-.585-.266-.036-.203.171-.407.456-.46.29-.05.55.07.587.27Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/stories/assets/plugin.svg b/src/stories/assets/plugin.svg
deleted file mode 100644
index 29e5c690c0a2..000000000000
--- a/src/stories/assets/plugin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>
\ No newline at end of file
diff --git a/src/stories/assets/repo.svg b/src/stories/assets/repo.svg
deleted file mode 100644
index f386ee902c1f..000000000000
--- a/src/stories/assets/repo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>
\ No newline at end of file
diff --git a/src/stories/assets/stackalt.svg b/src/stories/assets/stackalt.svg
deleted file mode 100644
index 9b7ad2743506..000000000000
--- a/src/stories/assets/stackalt.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>
\ No newline at end of file
diff --git a/src/stories/assets/styling.jpg b/src/stories/assets/styling.jpg
new file mode 100644
index 000000000000..0f6b37a4c8d4
Binary files /dev/null and b/src/stories/assets/styling.jpg differ
diff --git a/src/stories/assets/tutorials.svg b/src/stories/assets/tutorials.svg
new file mode 100644
index 000000000000..bd08af920bd9
--- /dev/null
+++ b/src/stories/assets/tutorials.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="62" height="48" viewBox="0 0 62 48">
+  <title>Tutorials</title>
+  <path fill="#37D5D3" fill-rule="evenodd" d="M31.723 45.959H31.359a21.372 21.372 0 0 1-13.746-5.137v4.855a.282.282 0 0 1-.282.282H17a.282.282 0 0 1-.282-.282v-5.644h-6.35a.282.282 0 0 1-.283-.282v-.33c0-.156.126-.282.282-.282h5.486a21.382 21.382 0 0 1-5.768-14.474V24.315a21.373 21.373 0 0 1 5.12-13.726h-4.838a.282.282 0 0 1-.282-.282v-.33c0-.156.126-.282.282-.282h5.643c.23-.242.467-.478.708-.709V3.323c0-.156.127-.282.282-.282h.33c.156 0 .282.126.282.282v4.855A21.373 21.373 0 0 1 31.38 3.04H31.731a21.372 21.372 0 0 1 13.704 5.101V3.323c0-.156.127-.282.283-.282h.33c.155 0 .281.126.281.282v5.623c.256.244.506.493.75.749h5.643c.156 0 .282.126.282.282v.33a.282.282 0 0 1-.282.282h-4.837a21.372 21.372 0 0 1 5.118 13.725l.001.009V24.686a21.383 21.383 0 0 1-5.768 14.453h5.486c.156 0 .282.126.282.282v.33a.282.282 0 0 1-.282.282h-6.37l-.023.02v5.624a.282.282 0 0 1-.282.282h-.33a.282.282 0 0 1-.282-.282v-4.82a21.372 21.372 0 0 1-13.704 5.102h-.008Zm-.624-1.003v-4.923H18.227a20.377 20.377 0 0 0 12.872 4.923Zm-14.38-20.009v13.655a20.389 20.389 0 0 1-5.631-13.655h5.63Zm-5.631-.893h5.63V10.59h-.179a20.386 20.386 0 0 0-5.451 13.464Zm6.525-14.36v-.18a20.386 20.386 0 0 1 13.485-5.471v5.651H17.613Zm14.38-5.651v5.651h13.442v-.219a20.385 20.385 0 0 0-13.443-5.432ZM46.33 10.59h.22a20.386 20.386 0 0 1 5.452 13.464H46.33V10.59Zm5.672 14.357H46.33v13.698a20.39 20.39 0 0 0 5.672-13.698Zm-20.01 15.086h12.872a20.377 20.377 0 0 1-12.872 4.923v-4.923ZM45.435 10.59H31.992v13.464h13.443V10.59ZM31.992 24.947h13.443V39.14H31.992V24.947Zm-.894 14.192V24.947H17.613V39.14h13.485Zm0-28.55v13.465H17.613V10.59h13.485Z" clip-rule="evenodd" opacity=".3"/>
+  <rect width="15.341" height="15.341" x="50.447" y="2.74" fill="#37D5D3" opacity=".9" rx=".732" transform="rotate(45 50.447 2.74)"/>
+  <rect width="15.341" height="15.341" x="38.56" y="14.244" fill="#37D5D3" opacity=".9" rx=".732" transform="rotate(45 38.56 14.244)"/>
+  <rect width="15.341" height="15.341" x="26.67" y="26.135" fill="#37D5D3" opacity=".9" rx=".732" transform="rotate(45 26.67 26.135)"/>
+  <rect width="15.341" height="15.341" x="14.779" y="14.244" fill="#37D5D3" opacity=".9" rx=".732" transform="rotate(45 14.78 14.244)"/>
+</svg>
\ No newline at end of file
diff --git a/src/stories/assets/typography.svg b/src/stories/assets/typography.svg
new file mode 100644
index 000000000000..f2a18909b68b
--- /dev/null
+++ b/src/stories/assets/typography.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Typography</title>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.89639 37.9829L9.98859 31.9674H19.2633L21.2808 37.9829H28.4259L18.0889 9.99023H11.3926L0.939453 37.9829H7.89639ZM12.0725 10.9698L2.35092 37.0033H7.19995L9.29214 30.9878H19.968L21.9855 37.0033H27.0199L17.4064 10.9698H12.0725ZM14.2994 16.6489L10.4815 27.5409H18.7672L15.0725 16.6489H14.2994ZM14.6771 18.5327L17.4005 26.5613H11.8629L14.6771 18.5327ZM29.79 23.4589H34.1303C34.294 22.4953 34.6834 21.7644 35.3098 21.2887C36.0014 20.7634 36.9264 20.5079 38.0718 20.5079C38.5692 20.5079 39.036 20.5412 39.4724 20.6082C39.9451 20.6807 40.3675 20.8282 40.7359 21.0521C41.1219 21.2866 41.4308 21.615 41.6582 22.0296C41.8894 22.451 41.9988 22.99 41.9983 23.6241C42.0297 24.324 41.8107 24.8956 41.3365 25.29C40.9266 25.631 40.3878 25.8823 39.7238 26.0504C39.1007 26.2081 38.3919 26.3256 37.5965 26.4035C36.8341 26.4782 36.0592 26.5779 35.2716 26.7025C34.4923 26.8258 33.7191 26.9923 32.9517 27.202C32.2206 27.4018 31.5749 27.6995 31.012 28.095C30.4658 28.4788 30.0183 28.9943 29.6675 29.6474C29.3232 30.2886 29.1467 31.1244 29.1467 32.1586C29.1467 33.1004 29.3015 33.9013 29.6063 34.5645C29.9112 35.2277 30.3311 35.772 30.8687 36.2029C31.4145 36.6405 32.0532 36.9639 32.7887 37.1734C33.5408 37.3876 34.3551 37.4951 35.2324 37.4951C36.379 37.4951 37.501 37.3259 38.6 36.9872C39.6658 36.6587 40.5902 36.0854 41.3797 35.2624L42.1385 34.4713L42.2215 35.5643C42.245 35.8729 42.286 36.1752 42.3444 36.4713C42.3799 36.6509 42.4218 36.8282 42.4702 37.0033H46.7382C46.6234 36.6429 46.5373 36.2212 46.4775 35.7371C46.3754 34.9096 46.3244 34.0447 46.3244 33.1423V22.9651C46.3244 21.8765 46.0904 21.0247 45.6336 20.3968C45.1577 19.7429 44.5473 19.2334 43.7963 18.8647C43.0222 18.4847 42.1632 18.2285 41.2173 18.0967C40.2432 17.9611 39.2819 17.8933 38.3333 17.8933C37.295 17.8933 36.2628 17.9973 35.2362 18.2052C34.2306 18.4089 33.3298 18.7487 32.5316 19.2242C31.7485 19.6906 31.1052 20.3072 30.5978 21.0779C30.1753 21.7197 29.9048 22.5119 29.79 23.4589ZM35.2324 38.4747C36.4769 38.4747 37.6961 38.2908 38.8886 37.9233C39.8053 37.6408 40.6338 37.199 41.3716 36.5999L41.3834 36.6611C41.4496 36.996 41.5356 37.3244 41.6415 37.6462L41.7523 37.9829H48.3646L47.9035 37.2359C47.6975 36.9022 47.5415 36.3604 47.4498 35.6171C47.3526 34.8303 47.304 34.0054 47.304 33.1423V22.9651C47.304 21.6827 47.0149 20.6303 46.4257 19.8205C45.8554 19.0367 45.1209 18.4238 44.228 17.9854C43.3582 17.5583 42.399 17.2723 41.3524 17.1265C40.3339 16.9847 39.3275 16.9138 38.3333 16.9138C37.2296 16.9138 36.1323 17.0242 35.0418 17.2451C33.9303 17.4702 32.9257 17.8492 32.0303 18.3826C31.1196 18.925 30.3682 19.6453 29.7796 20.5392C29.1812 21.4482 28.8453 22.5775 28.7658 23.9198L28.735 24.4385H35.0058L35.0476 23.9946C35.1353 23.0611 35.4259 22.4305 35.9023 22.0688C36.4062 21.6861 37.1251 21.4875 38.0718 21.4875C38.5209 21.4875 38.9383 21.5173 39.3238 21.5764C39.6731 21.63 39.973 21.7348 40.2272 21.8892C40.4639 22.033 40.6532 22.2343 40.7994 22.5007C40.9418 22.7603 41.0192 23.1419 41.0192 23.6461C41.0381 24.0779 40.9334 24.3512 40.7101 24.5369C40.4226 24.7761 40.0149 24.9662 39.4834 25.1008C38.9109 25.2457 38.2499 25.3552 37.501 25.4286C36.7191 25.5052 35.925 25.6074 35.1185 25.735C34.3037 25.8639 33.4954 26.0379 32.6935 26.257C31.8555 26.486 31.1065 26.8314 30.4489 27.2935C29.7746 27.7672 29.2259 28.3993 28.8045 29.1839C28.3767 29.9804 28.1671 30.9732 28.1671 32.1586C28.1671 33.2345 28.3486 34.1739 28.7163 34.9737C29.0839 35.7734 29.598 36.4398 30.256 36.9672C30.9057 37.4881 31.6618 37.871 32.5204 38.1155C33.3623 38.3553 34.2666 38.4747 35.2324 38.4747ZM41.1813 27.5572L41.9988 26.8214V29.9264C41.9988 30.2522 41.9662 30.6744 41.9017 31.1971C41.8315 31.7659 41.643 32.3242 41.3391 32.8699C41.0223 33.4386 40.5391 33.9207 39.898 34.3159C39.2374 34.7231 38.3418 34.9184 37.2125 34.9184C36.7588 34.9184 36.3172 34.8777 35.8882 34.7963C35.4311 34.7095 35.0245 34.5551 34.6716 34.3317C34.2999 34.0965 34.005 33.7742 33.7912 33.3722C33.5764 32.9683 33.4723 32.4865 33.4723 31.9316C33.4723 31.3522 33.5758 30.8582 33.7912 30.4531C33.9991 30.0622 34.2767 29.7355 34.6213 29.4775C34.952 29.23 35.3361 29.0355 35.7715 28.8933C36.1774 28.7607 36.59 28.6546 37.0143 28.5741C37.447 28.4967 37.8799 28.4323 38.3128 28.3807C38.7243 28.3317 39.1169 28.2705 39.4907 28.1973C39.8561 28.1256 40.1965 28.0365 40.5117 27.9301C40.7872 27.8371 41.009 27.7123 41.1813 27.5572ZM39.6791 29.1586C40.0858 29.0788 40.4678 28.9788 40.825 28.8582C40.8914 28.8358 40.9561 28.8119 41.0192 28.7863V29.9264C41.0192 30.206 40.9895 30.5909 40.9295 31.0771C40.8752 31.5172 40.7274 31.9551 40.4833 32.3931C40.2522 32.8081 39.8885 33.171 39.384 33.482C38.8988 33.781 38.1754 33.9388 37.2125 33.9388C36.8194 33.9388 36.439 33.9038 36.071 33.8339C35.7311 33.7694 35.4403 33.6589 35.1955 33.504C34.9694 33.3609 34.7911 33.1661 34.6561 32.9123C34.5222 32.6604 34.4519 32.3352 34.4519 31.9316C34.4519 31.5021 34.5228 31.1638 34.6561 30.913C34.797 30.6482 34.9802 30.4326 35.2083 30.2618C35.4505 30.0805 35.7389 29.9345 36.0757 29.8245C36.4418 29.7049 36.8138 29.6092 37.1918 29.5374C37.6007 29.4644 38.0147 29.4028 38.4286 29.3534C38.864 29.3016 39.2808 29.2366 39.6791 29.1586Z" fill="#1EA7FD"/>
+</svg>
diff --git a/src/stories/assets/youtube.svg b/src/stories/assets/youtube.svg
new file mode 100644
index 000000000000..ab37d73a062e
--- /dev/null
+++ b/src/stories/assets/youtube.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="62" height="48" viewBox="0 0 62 48">
+  <title>Youtube logo</title>
+  <path fill="#ED1D24" d="M58.642 11.09c-.65-2.398-2.566-4.285-5-4.926C49.234 5 31.553 5 31.553 5S13.87 5 9.46 6.164c-2.433.64-4.349 2.528-5 4.925-1.18 4.345-1.18 13.409-1.18 13.409s0 9.064 1.18 13.409c.651 2.397 2.567 4.284 5 4.925 4.41 1.164 22.091 1.164 22.091 1.164s17.682 0 22.092-1.164c2.433-.64 4.349-2.528 4.999-4.925 1.182-4.345 1.182-13.409 1.182-13.409s0-9.064-1.182-13.409Z"/>
+  <path fill="#fff" d="m25.768 32.727 14.778-8.23-14.778-8.23v16.46Z"/>
+</svg>
\ No newline at end of file