diff --git a/packages/ui/components/layout/spacing.stories.mdx b/packages/ui/components/layout/spacing.stories.mdx
new file mode 100644
index 0000000000..8d8d63ed1b
--- /dev/null
+++ b/packages/ui/components/layout/spacing.stories.mdx
@@ -0,0 +1,85 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+ Examples,
+ Example,
+ Note,
+ Title,
+ VariantsTable,
+ VariantColumn,
+ RowTitles,
+ CustomArgsTable,
+} from "@calcom/storybook/components";
+
+import { Tooltip } from "../tooltip";
+import { FiPlus, FiX } from "../icon";
+import { Flex } from "./Flex";
+
+
+
+
+
+## Definition
+
+Defines the spacing guide used in Cal.coms design system
+
+## Structure
+
+
+
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+