diff --git a/packages/docz-theme-default/src/config.ts b/packages/docz-theme-default/src/config.ts
index 3b15b2b9e..90c0c766c 100644
--- a/packages/docz-theme-default/src/config.ts
+++ b/packages/docz-theme-default/src/config.ts
@@ -1,9 +1,11 @@
 import { styles } from './styles'
 import * as colors from './styles/colors'
 import { prismTheme } from './styles/prism-theme'
+import { mq } from './styles/responsive'
 
 export const config = {
   colors,
   styles,
   prismTheme,
+  mq,
 }
diff --git a/packages/docz-theme-default/src/styles/responsive.ts b/packages/docz-theme-default/src/styles/responsive.ts
new file mode 100644
index 000000000..fe83e9a6e
--- /dev/null
+++ b/packages/docz-theme-default/src/styles/responsive.ts
@@ -0,0 +1,7 @@
+import facepaint from 'facepaint'
+
+export const mq = facepaint([
+  '@media(min-width: 420px)',
+  '@media(min-width: 920px)',
+  '@media(min-width: 1120px)'
+])
diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts
index 44f5ae1a9..ef1ecc16e 100644
--- a/packages/docz-theme-default/src/types.d.ts
+++ b/packages/docz-theme-default/src/types.d.ts
@@ -8,3 +8,31 @@ declare module '*.svg' {
   const content: any
   export default content
 }
+
+declare module "facepaint" {
+
+  interface Styles {
+    [ruleOrSelector: string]: string | number | Styles;
+  }
+
+  interface MqStyles {
+    [ruleOrSelector: string]: string | string[] | number | number[] | Styles;
+  }
+
+  type Mq = (styles: object) => Styles;
+
+  interface FacepaintSettings {
+    literal?: boolean;
+    overlap?: boolean;
+  }
+
+  type Facepaint = (
+    /** media queries to be applied across */
+    mediaQueries: [string, string, string],
+    settings?: FacepaintSettings
+  ) => Mq;
+
+  const facepaint: Facepaint;
+
+  export = facepaint;
+}