Add more examples of styleguides

Author: Andrey Okonetchnikov

slides/ds101-worskhop.mdx

@@ -527,6 +527,54 @@ to find out the relevant parts of your design system.
 
 ---
 
+<Figure
+  src={"/assets/design-tokens-colors.png"}
+  alt="Design tokens: colors"
+  caption={
+    <a href="https://marvelapp.com/styleguide/design/color-scheme">
+      https://marvelapp.com/styleguide/design/color-scheme
+    </a>
+  }
+/>
+
+---
+
+<Figure
+  src={"/assets/design-tokens-gradients.png"}
+  alt="Design tokens: gradients"
+  caption={
+    <a href="https://cloudflare.github.io/cf-ui/#cf-design-gradients">
+      https://cloudflare.github.io/cf-ui/#cf-design-gradients
+    </a>
+  }
+/>
+
+---
+
+<Figure
+  src={"/assets/design-tokens-fonts-spacing.png"}
+  alt="Design tokens: fonts and spacing"
+  caption={
+    <a href="https://vueds.com/example/#!/Design%20Tokens">
+      https://vueds.com/example/#!/Design%20Tokens
+    </a>
+  }
+/>
+
+---
+
+<Figure
+  src={"/assets/design-tokens-misc.png"}
+  alt="Design tokens"
+  caption={
+    <a href="https://www.lightningdesignsystem.com/design-tokens/">
+      https://www.lightningdesignsystem.com/design-tokens/
+    </a>
+  }
+/>
+
+---
+
 # 👩‍💻👨‍💻 [Parts of Design System](/parts)
 
 ---