diff --git a/packages/system/src/overflow/index.ts b/packages/system/src/overflow/index.ts
new file mode 100644
index 0000000000..196d185fb1
--- /dev/null
+++ b/packages/system/src/overflow/index.ts
@@ -0,0 +1,2 @@
+export * from './overflow';
+export type { Overflows } from './types';
diff --git a/packages/system/src/overflow.test.js b/packages/system/src/overflow/overflow.test.js
similarity index 100%
rename from packages/system/src/overflow.test.js
rename to packages/system/src/overflow/overflow.test.js
diff --git a/packages/system/src/overflow.js b/packages/system/src/overflow/overflow.ts
similarity index 90%
rename from packages/system/src/overflow.js
rename to packages/system/src/overflow/overflow.ts
index 194b80e6e2..555da2f1fe 100644
--- a/packages/system/src/overflow.js
+++ b/packages/system/src/overflow/overflow.ts
@@ -1,4 +1,4 @@
-import { compose, generator } from './theme';
+import { compose, generator } from '../theme';
 
 const overflow = props =>
   generator({
diff --git a/packages/system/src/overflow/types.ts b/packages/system/src/overflow/types.ts
new file mode 100644
index 0000000000..9e965371ff
--- /dev/null
+++ b/packages/system/src/overflow/types.ts
@@ -0,0 +1,18 @@
+type OverflowValues = string;
+
+type Overflow = {
+  overflow?: OverflowValues;
+  of?: OverflowValues;
+};
+
+type OverflowX = {
+  overflowX?: OverflowValues;
+  ox?: OverflowValues;
+};
+
+type OverflowY = {
+  overflowY?: OverflowValues;
+  oy?: OverflowValues;
+};
+
+export type Overflows = Overflow & OverflowX & OverflowY;