diff --git a/src/components/spacing/Spacing.style.scss b/src/components/spacing/Spacing.style.scss
new file mode 100644
index 00000000..97edbe52
--- /dev/null
+++ b/src/components/spacing/Spacing.style.scss
@@ -0,0 +1,11 @@
+@use "../../styles/variables";
+
+.spacing {
+  position: relative;
+}
+
+@each $name, $size in variables.$sizes {
+  .spacing--#{$name} {
+    margin-bottom: $size;
+  }
+}
\ No newline at end of file
diff --git a/src/components/spacing/Spacing.tsx b/src/components/spacing/Spacing.tsx
new file mode 100644
index 00000000..a45cb0e8
--- /dev/null
+++ b/src/components/spacing/Spacing.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import {Code0Component, Code0Sizes, mergeCode0Props} from "../../utils";
+
+export interface SpacingProps extends Code0Component<HTMLDivElement> {
+    spacing: Code0Sizes
+}
+
+export const Spacing: React.FC<SpacingProps> = (props) => {
+
+    const {spacing, ...rest} = props
+
+    return <div {...mergeCode0Props(`spacing spacing--${spacing}`, rest)}/>
+
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 3a21558a..6ea5c0f3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -25,6 +25,7 @@ export * from "./components/quote/Quote"
 export * from "./components/row/Row"
 export * from "./components/scroll-area/ScrollArea"
 export * from "./components/segmented-control/SegmentedControl"
+export * from "./components/spacing/Spacing"
 export * from "./components/text/Text"
 export * from "./components/tooltip/Tooltip"
 
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index e1fd6d74..5fdaa48f 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -22,6 +22,7 @@ $hierarchySecondary: 0.75;
 $hierarchyTertiary: 0.5;
 
 $sizes: (
+        "xxs": $xxs,
         "xs": $xs,
         "sm": $sm,
         "md": $md,
diff --git a/src/utils/types.ts b/src/utils/types.ts
index af3a1391..51f723f5 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -4,9 +4,9 @@ export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "
 
 export const Colors: Color[] = ["primary", "secondary", "info", "success", "warning", "error"]
 
-export type Code0Sizes = "xs" | "sm" | "md" | "lg" | "xl";
+export type Code0Sizes = "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
 
-export type Code0FontSizes = "0.75" | "0.8" | "1" | "1.2" | "1.25"
+export type Code0FontSizes = "0.35" | "0.7" | "0.8" | "1" | "1.2" | "1.3"
 
 export type StyleProp<Value> = Value;