diff --git a/apps/marketing/content/design-system.mdx b/apps/marketing/content/design-system.mdx
new file mode 100644
index 000000000..3034f10a3
--- /dev/null
+++ b/apps/marketing/content/design-system.mdx
@@ -0,0 +1,17 @@
+---
+title: Design System
+---
+
+# Design System
+
+At Documenso we aim to be a design driven company. We believe that design is not just about how things look, but also how they work. We want to make sure that our products are easy to use and intuitive. We also want to make sure that our products are consistent and that they look and feel like they belong together.
+
+To achieve this we have created our design system which contains our primitives, token and screens alongside branding assets.
+
+We're open-sourcing our design system so that you can see how we build our products and think about design as a whole.
+
+<iframe
+  src="https://documen.so/design-system-embed"
+  className="aspect-square w-full border-none"
+  frameBorder="0"
+/>
diff --git a/apps/marketing/src/components/(marketing)/footer.tsx b/apps/marketing/src/components/(marketing)/footer.tsx
index ab0dd6e24..fb4195800 100644
--- a/apps/marketing/src/components/(marketing)/footer.tsx
+++ b/apps/marketing/src/components/(marketing)/footer.tsx
@@ -21,6 +21,7 @@ const FOOTER_LINKS = [
   { href: '/open', text: 'Open' },
   { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },
   { href: 'https://status.documenso.com', text: 'Status', target: '_blank' },
+  { href: '/design-system', text: 'Design System' },
   { href: 'mailto:support@documenso.com', text: 'Support' },
   { href: '/privacy', text: 'Privacy' },
 ];
@@ -43,7 +44,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           </div>
         </div>
 
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
+        <div className="grid max-w-xs flex-1 grid-cols-2 gap-x-4 gap-y-2">
           {FOOTER_LINKS.map((link, index) => (
             <Link
               key={index}
diff --git a/packages/tailwind-config/index.cjs b/packages/tailwind-config/index.cjs
index 1564454d8..5195e1d9b 100644
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@@ -4,7 +4,7 @@ const { fontFamily } = require('tailwindcss/defaultTheme');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ['class'],
-  content: ['src/**/*.{ts,tsx}'],
+  content: ['src/**/*.{ts,tsx}', 'content/**/*.{md,mdx}'],
   theme: {
     extend: {
       fontFamily: {