diff --git a/src/renderer/components/gutter/gutter.module.scss b/src/renderer/components/gutter/gutter.module.scss
new file mode 100644
index 0000000000..8cf1567a66
--- /dev/null
+++ b/src/renderer/components/gutter/gutter.module.scss
@@ -0,0 +1,14 @@
+@mixin gutterSize(
+  $sizeName,
+  $size
+) {
+  .size-#{$sizeName} {
+    min-width: $size;
+    min-height: $size;
+  }
+}
+
+$baseline: 8px;
+
+@include gutterSize('sm', 2 * $baseline);
+@include gutterSize('md', 3 * $baseline);
diff --git a/src/renderer/components/gutter/gutter.tsx b/src/renderer/components/gutter/gutter.tsx
new file mode 100644
index 0000000000..d19a82ddf8
--- /dev/null
+++ b/src/renderer/components/gutter/gutter.tsx
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { cssNames } from "../../utils";
+import styles from "./gutter.module.scss";
+
+interface GutterProps {
+  size?: "sm" | "md";
+}
+
+const Gutter = ({ size = "md" }: GutterProps) => {
+  const classNames = cssNames(styles[`size-${size}`]);
+
+  return <div className={classNames} />;
+};
+
+
+export default Gutter;