diff --git a/components/AgentAvailability.tsx b/components/AgentAvailability.tsx
index ea0b389..c935f35 100644
--- a/components/AgentAvailability.tsx
+++ b/components/AgentAvailability.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Box, Flex, Text} from 'theme-ui';
+import {colors} from '../helpers/theme';
 
 const AgentAvailability = ({
   hasAvailableAgents,
@@ -15,7 +16,7 @@ const AgentAvailability = ({
       px={20}
       py={1}
       sx={{
-        bg: 'lighter',
+        bg: colors.lighter,
         borderTop: '1px solid rgba(230, 230, 230, 0.25)',
         alignItems: 'center',
       }}
@@ -25,12 +26,12 @@ const AgentAvailability = ({
         sx={{
           height: 8,
           width: 8,
-          bg: hasAvailableAgents ? 'green' : 'muted',
+          bg: hasAvailableAgents ? colors.green : colors.muted,
           border: '1px solid #fff',
           borderRadius: '50%',
         }}
       ></Box>
-      <Text sx={{color: 'offset', fontSize: 12}}>
+      <Text sx={{color: colors.offset, fontSize: 12}}>
         {hasAvailableAgents ? agentAvailableText : agentUnavailableText}
       </Text>
     </Flex>
diff --git a/components/ChatFooter.tsx b/components/ChatFooter.tsx
index 836a4e2..b63c5fa 100644
--- a/components/ChatFooter.tsx
+++ b/components/ChatFooter.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Box, Button, Flex, Input, Textarea} from 'theme-ui';
 import SendIcon from './SendIcon';
+import {colors} from '../helpers/theme';
 
 const ChatFooter = ({
   placeholder,
@@ -72,7 +73,7 @@ const ChatFooter = ({
             <Textarea
               sx={{
                 fontFamily: 'body',
-                color: 'input',
+                color: colors.input,
                 variant: 'styles.input.transparent',
               }}
               ref={messageInput}
diff --git a/components/ChatMessage.tsx b/components/ChatMessage.tsx
index 8b24bee..2c6d85c 100644
--- a/components/ChatMessage.tsx
+++ b/components/ChatMessage.tsx
@@ -5,6 +5,7 @@ import utc from 'dayjs/plugin/utc';
 import BotIcon from './BotIcon';
 import ChatMessageBody from './ChatMessageBody';
 import {Message, User} from '../helpers/utils';
+import {colors} from '../helpers/theme';
 
 dayjs.extend(utc);
 
@@ -72,13 +73,13 @@ const SenderAvatar = ({
     <Flex
       mr={2}
       sx={{
-        bg: isBot ? 'lighter' : 'primary',
+        bg: isBot ? colors.lighter : colors.primary,
         height: 32,
         width: 32,
         borderRadius: '50%',
         justifyContent: 'center',
         alignItems: 'center',
-        color: '#fff',
+        color: colors.background,
       }}
     >
       {isBot && name.toLowerCase() === 'bot' ? (
@@ -119,8 +120,8 @@ const ChatMessage = ({
           <ChatMessageBody
             className="Text--white"
             sx={{
-              color: 'background',
-              bg: 'primary',
+              color: colors.background,
+              bg: colors.primary,
               whiteSpace: 'pre-wrap',
             }}
             content={body}
@@ -128,7 +129,7 @@ const ChatMessage = ({
         </Flex>
         {shouldDisplayTimestamp && (
           <Flex m={1} sx={{justifyContent: 'flex-end'}}>
-            <Text sx={{color: 'gray'}}>
+            <Text sx={{color: colors.gray}}>
               {timestamp ? `Sent ${timestamp}` : 'Sending...'}
             </Text>
           </Flex>
@@ -153,7 +154,7 @@ const ChatMessage = ({
       </Flex>
       {shouldDisplayTimestamp && (
         <Flex m={1} sx={{justifyContent: 'flex-start'}}>
-          <Text sx={{color: 'gray'}}>
+          <Text sx={{color: colors.gray}}>
             {identifer} · Sent {timestamp}
           </Text>
         </Flex>
@@ -180,8 +181,8 @@ export const PopupChatMessage = ({message}: Props) => {
           sx={{
             px: 3,
             py: 3,
-            color: 'text',
-            bg: 'background',
+            color: colors.text,
+            bg: colors.background,
             whiteSpace: 'pre-wrap',
             flex: 1,
             border: '1px solid rgb(245, 245, 245)',
diff --git a/components/ChatWindow.tsx b/components/ChatWindow.tsx
index 5a7736c..283da15 100644
--- a/components/ChatWindow.tsx
+++ b/components/ChatWindow.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import {Box, Button, Flex, Heading, Text, Link} from 'theme-ui';
 import {Socket, Presence} from 'phoenix';
-import {motion} from 'framer-motion';
 import ChatMessage, {PopupChatMessage} from './ChatMessage';
 import ChatFooter from './ChatFooter';
 import AgentAvailability from './AgentAvailability';
 import PapercupsBranding from './PapercupsBranding';
 import CloseIcon from './CloseIcon';
+// import {motion} from '../helpers/motion';
 import * as API from '../helpers/api';
 import {
   Message,
@@ -21,6 +21,7 @@ import {
   isWindowHidden,
   addVisibilityEventListener,
 } from '../helpers/visibility';
+import {colors} from '../helpers/theme';
 
 type Props = {
   accountId: string;
@@ -696,14 +697,14 @@ class ChatWindow extends React.Component<Props, State> {
       <Flex
         className={isMobile ? 'Mobile' : ''}
         sx={{
-          bg: 'background',
+          bg: colors.background,
           flexDirection: 'column',
           height: '100%',
           width: '100%',
           flex: 1,
         }}
       >
-        <motion.iframe
+        <iframe
           src={`https://reichert621.github.io/?v=2`}
           sandbox="allow-same-origin allow-scripts allow-top-navigation"
           style={{
@@ -712,9 +713,9 @@ class ChatWindow extends React.Component<Props, State> {
             border: 'none',
             boxShadow: 'none',
           }}
-          initial={{opacity: 0, y: 2}}
-          animate={{opacity: 1, y: 0}}
-          transition={{duration: 0.4, ease: 'easeIn'}}
+          // initial={{opacity: 0, y: 2}}
+          // animate={{opacity: 1, y: 0}}
+          // transition={{duration: 0.4, ease: 'easeIn'}}
           onLoad={this.handleGameLoaded}
         />
         <Flex
@@ -786,14 +787,14 @@ class ChatWindow extends React.Component<Props, State> {
       >
         {displayed.map((msg, key) => {
           return (
-            <motion.div
+            <div
               key={key}
-              initial={{opacity: 0, x: -2}}
-              animate={{opacity: 1, x: 0}}
-              transition={{duration: 0.2, ease: 'easeIn'}}
+              // initial={{opacity: 0, x: -2}}
+              // animate={{opacity: 1, x: 0}}
+              // transition={{duration: 0.2, ease: 'easeIn'}}
             >
               <PopupChatMessage key={key} message={msg} />
-            </motion.div>
+            </div>
           );
         })}
 
@@ -852,14 +853,14 @@ class ChatWindow extends React.Component<Props, State> {
       <Flex
         className={isMobile ? 'Mobile' : ''}
         sx={{
-          bg: 'background',
+          bg: colors.background,
           flexDirection: 'column',
           height: '100%',
           width: '100%',
           flex: 1,
         }}
       >
-        <Box sx={{bg: 'primary', position: 'relative'}}>
+        <Box sx={{bg: colors.primary, position: 'relative'}}>
           <Box pt={3} pb={showAgentAvailability ? 12 : 16} px={20}>
             {/* TODO: wrap in a button element */}
             {isCloseable && !this.isOnDeprecatedVersion() && (
@@ -873,11 +874,11 @@ class ChatWindow extends React.Component<Props, State> {
             <Heading
               as="h2"
               className="Papercups-heading"
-              sx={{color: 'background', my: 1, mr: 12}}
+              sx={{color: colors.background, my: 1, mr: 12}}
             >
               {title}
             </Heading>
-            <Text sx={{color: 'offset'}}>{subtitle}</Text>
+            <Text sx={{color: colors.offset}}>{subtitle}</Text>
           </Box>
 
           {showAgentAvailability && (
@@ -909,11 +910,11 @@ class ChatWindow extends React.Component<Props, State> {
             const isMe = this.isCustomerMessage(msg, customerId);
 
             return (
-              <motion.div
+              <div
                 key={key}
-                initial={{opacity: 0, x: isMe ? 2 : -2}}
-                animate={{opacity: 1, x: 0}}
-                transition={{duration: 0.2, ease: 'easeIn'}}
+                // initial={{opacity: 0, x: isMe ? 2 : -2}}
+                // animate={{opacity: 1, x: 0}}
+                // transition={{duration: 0.2, ease: 'easeIn'}}
               >
                 <ChatMessage
                   key={key}
@@ -923,7 +924,7 @@ class ChatWindow extends React.Component<Props, State> {
                   isLastInGroup={isLastInGroup}
                   shouldDisplayTimestamp={shouldDisplayTimestamp}
                 />
-              </motion.div>
+              </div>
             );
           })}
           <div ref={(el) => (this.scrollToEl = el)} />
diff --git a/components/PapercupsBranding.tsx b/components/PapercupsBranding.tsx
index 2777743..c523fec 100644
--- a/components/PapercupsBranding.tsx
+++ b/components/PapercupsBranding.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Flex, Link} from 'theme-ui';
+import {colors} from '../helpers/theme';
 
 const PapercupsBranding = () => {
   return (
@@ -9,7 +10,7 @@ const PapercupsBranding = () => {
         target="_blank"
         rel="noopener noreferrer"
         sx={{
-          color: 'gray',
+          color: colors.gray,
           opacity: 0.8,
           transition: '0.2s',
           '&:hover': {opacity: 1},
diff --git a/helpers/theme.ts b/helpers/theme.ts
index 75c0a47..de46fbf 100644
--- a/helpers/theme.ts
+++ b/helpers/theme.ts
@@ -1,7 +1,23 @@
 import tinycolor from 'tinycolor2';
+import cssVars from 'css-vars-ponyfill';
 
 type ThemeSettings = {primary?: string};
 
+export const colors = {
+  text: '#141414',
+  background: '#fff',
+  primary: '#1890ff',
+  darker: '#1890ff',
+  lighter: '#1890ff',
+  secondary: '#722ed1',
+  green: '#52c41a',
+  muted: '#f0f0f0',
+  gray: 'rgba(0, 0, 0, 0.45)',
+  // TODO: come up with better names!
+  input: 'rgba(0, 0, 0, 0.65)',
+  offset: 'rgba(255, 255, 255, 0.8)',
+};
+
 export const getThemeConfig = (settings: ThemeSettings) => {
   const {primary = '#1890ff'} = settings;
   const base = tinycolor(primary);
@@ -11,6 +27,34 @@ export const getThemeConfig = (settings: ThemeSettings) => {
     dark: base.darken().toString(),
   };
 
+  cssVars({
+    onlyLegacy: false,
+    preserveVars: true,
+    watch: true,
+    variables: {
+      '--theme-ui-colors-text': '#141414',
+      '--theme-ui-colors-background': '#fff',
+      '--theme-ui-colors-primary': overrides.primary,
+      '--theme-ui-colors-darker': overrides.dark,
+      '--theme-ui-colors-lighter': overrides.light,
+      '--theme-ui-colors-secondary': '#722ed1',
+      '--theme-ui-colors-green': '#52c41a',
+      '--theme-ui-colors-muted': '#f0f0f0',
+      '--theme-ui-colors-gray': 'rgba(0, 0, 0, 0.45)',
+      '--theme-ui-colors-input': 'rgba(0, 0, 0, 0.65)',
+      '--theme-ui-colors-offset': 'rgba(255, 255, 255, 0.8)',
+      //
+      '--antd-wave-shadow-color': overrides.primary,
+      '--scroll-bar': '0',
+    },
+    // onBeforeSend: console.log,
+    // onError: console.error,
+    // onWarning: console.warn,
+    // onSuccess: console.info,
+    // onComplete: console.info,
+    // onFinally: console.log,
+  });
+
   return {
     useBodyStyles: false,
     space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
diff --git a/package-lock.json b/package-lock.json
index eaa4002..f5a4dae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1102,6 +1102,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@csstools/convert-colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
+      "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
+    },
     "@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
@@ -1308,23 +1313,6 @@
         "tinycolor2": "^1.4.1"
       }
     },
-    "@popmotion/easing": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz",
-      "integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw=="
-    },
-    "@popmotion/popcorn": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.4.tgz",
-      "integrity": "sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==",
-      "requires": {
-        "@popmotion/easing": "^1.0.1",
-        "framesync": "^4.0.1",
-        "hey-listen": "^1.0.8",
-        "style-value-types": "^3.1.7",
-        "tslib": "^1.10.0"
-      }
-    },
     "@styled-system/background": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz",
@@ -2108,6 +2096,37 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "autoprefixer": {
+      "version": "9.8.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+      "requires": {
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "colorette": "^1.2.1",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "dependencies": {
+        "caniuse-lite": {
+          "version": "1.0.30001158",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001158.tgz",
+          "integrity": "sha512-s5loVYY+yKpuVA3HyW8BarzrtJvwHReuzugQXlv1iR3LKSReoFXRm86mT6hT7PEF5RxW+XQZg+6nYjlywYzQ+g=="
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -2814,6 +2833,11 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "colorette": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw=="
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -3049,6 +3073,14 @@
         "urix": "^0.1.0"
       }
     },
+    "css-blank-pseudo": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
+      "integrity": "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==",
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -3063,6 +3095,32 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-has-pseudo": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz",
+      "integrity": "sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==",
+      "requires": {
+        "postcss": "^7.0.6",
+        "postcss-selector-parser": "^5.0.0-rc.4"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "css-loader": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.5.3.tgz",
@@ -3108,6 +3166,14 @@
         }
       }
     },
+    "css-prefers-color-scheme": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
+      "integrity": "sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==",
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
     "css-select": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@@ -3144,6 +3210,11 @@
         "source-map": "^0.6.1"
       }
     },
+    "css-vars-ponyfill": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/css-vars-ponyfill/-/css-vars-ponyfill-2.4.1.tgz",
+      "integrity": "sha512-duoN5j10VJPdPUgo/H4PwvxhSxhJWgfymjeIGpTA7+KzQ2AmeFHnlKwrCYC9Ii+HUpC8BrIS5fhwcuaNOs/Hrg=="
+    },
     "css-what": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
@@ -3154,6 +3225,11 @@
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
     },
+    "cssdb": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
+      "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ=="
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3920,6 +3996,11 @@
         "semver-regex": "^2.0.0"
       }
     },
+    "flatten": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
+      "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg=="
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -4063,27 +4144,24 @@
       }
     },
     "framer-motion": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-2.3.0.tgz",
-      "integrity": "sha512-zX6V5vz3joMzacqV7UpiHKUtqLMmU/YsVM6KpeRCi65KjUiymUX5O2jkpR3cCdlr1DkJ1yWUjBWY7xyiO834VA==",
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-2.9.4.tgz",
+      "integrity": "sha512-Bvgdwpu5UO6VnEEwenJEmnGeo9ILRRWh9f3iIX+71NiM5X60Qi6KlkBFGZc9DGbdIUAn0AYgaxVhTKL39OOYng==",
       "requires": {
         "@emotion/is-prop-valid": "^0.8.2",
-        "@popmotion/easing": "^1.0.2",
-        "@popmotion/popcorn": "^0.4.2",
-        "framesync": "^4.0.4",
+        "framesync": "^4.1.0",
         "hey-listen": "^1.0.8",
-        "popmotion": "9.0.0-beta-8",
+        "popmotion": "9.0.0-rc.20",
         "style-value-types": "^3.1.9",
         "tslib": "^1.10.0"
       }
     },
     "framesync": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.0.4.tgz",
-      "integrity": "sha512-mdP0WvVHe0/qA62KG2LFUAOiWLng5GLpscRlwzBxu2VXOp6B8hNs5C5XlFigsMgrfDrr2YbqTsgdWZTc4RXRMQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz",
+      "integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==",
       "requires": {
-        "hey-listen": "^1.0.8",
-        "tslib": "^1.10.0"
+        "hey-listen": "^1.0.5"
       }
     },
     "from2": {
@@ -5162,6 +5240,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
       "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -5187,6 +5270,23 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
+    "lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0"
+      }
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -5843,6 +5943,11 @@
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
+    },
     "normalize-url": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
@@ -5865,6 +5970,11 @@
         "boolbase": "~1.0.0"
       }
     },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -6244,15 +6354,13 @@
       }
     },
     "popmotion": {
-      "version": "9.0.0-beta-8",
-      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.0.0-beta-8.tgz",
-      "integrity": "sha512-6eQzqursPvnP7ePvdfPeY4wFHmS3OLzNP8rJRvmfFfEIfpFqrQgLsM50Gd9AOvGKJtYJOFknNG+dsnzCpgIdAA==",
+      "version": "9.0.0-rc.20",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.0.0-rc.20.tgz",
+      "integrity": "sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg==",
       "requires": {
-        "@popmotion/easing": "^1.0.1",
-        "@popmotion/popcorn": "^0.4.2",
-        "framesync": "^4.0.4",
+        "framesync": "^4.1.0",
         "hey-listen": "^1.0.8",
-        "style-value-types": "^3.1.6",
+        "style-value-types": "^3.1.9",
         "tslib": "^1.10.0"
       }
     },
@@ -6271,6 +6379,15 @@
         "supports-color": "^6.1.0"
       }
     },
+    "postcss-attribute-case-insensitive": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz",
+      "integrity": "sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==",
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^6.0.2"
+      }
+    },
     "postcss-calc": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.2.tgz",
@@ -6281,6 +6398,53 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "postcss-color-functional-notation": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
+      "integrity": "sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==",
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-gray": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz",
+      "integrity": "sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==",
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-hex-alpha": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz",
+      "integrity": "sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==",
+      "requires": {
+        "postcss": "^7.0.14",
+        "postcss-values-parser": "^2.0.1"
+      }
+    },
+    "postcss-color-mod-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz",
+      "integrity": "sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==",
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-rebeccapurple": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz",
+      "integrity": "sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==",
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
     "postcss-colormin": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
@@ -6316,6 +6480,106 @@
         }
       }
     },
+    "postcss-css-variables": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.17.0.tgz",
+      "integrity": "sha512-/ZpFnJgksNOrQA72b3DKhExYh+0e2P5nEc3aPZ62G7JLmdDjWRFv3k/q4LxV7uzXFnmvkhXRbdVIiH5tKgfFNA==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "escape-string-regexp": "^1.0.3",
+        "extend": "^3.0.1",
+        "postcss": "^6.0.8"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-custom-media": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz",
+      "integrity": "sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==",
+      "requires": {
+        "postcss": "^7.0.14"
+      }
+    },
+    "postcss-custom-properties": {
+      "version": "8.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz",
+      "integrity": "sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==",
+      "requires": {
+        "postcss": "^7.0.17",
+        "postcss-values-parser": "^2.0.1"
+      }
+    },
+    "postcss-custom-selectors": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz",
+      "integrity": "sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==",
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
+    "postcss-dir-pseudo-class": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz",
+      "integrity": "sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==",
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "postcss-discard-comments": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
@@ -6348,6 +6612,108 @@
         "postcss": "^7.0.0"
       }
     },
+    "postcss-double-position-gradients": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz",
+      "integrity": "sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==",
+      "requires": {
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-env-function": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-2.0.2.tgz",
+      "integrity": "sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==",
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-flexbugs-fixes": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz",
+      "integrity": "sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==",
+      "requires": {
+        "postcss": "^7.0.26"
+      }
+    },
+    "postcss-focus-visible": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz",
+      "integrity": "sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-focus-within": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz",
+      "integrity": "sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-font-variant": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-4.0.1.tgz",
+      "integrity": "sha512-I3ADQSTNtLTTd8uxZhtSOrTCQ9G4qUVKPjHiDk0bV75QSxXjVWiJVJ2VLdspGUi9fbW9BcjKJoRvxAH1pckqmA==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-gap-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
+      "integrity": "sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-image-set-function": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz",
+      "integrity": "sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==",
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-initial": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.2.tgz",
+      "integrity": "sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA==",
+      "requires": {
+        "lodash.template": "^4.5.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-lab-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
+      "integrity": "sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==",
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-logical": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-3.0.0.tgz",
+      "integrity": "sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-media-minmax": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz",
+      "integrity": "sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
     "postcss-merge-longhand": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",
@@ -6505,6 +6871,14 @@
         "postcss": "^7.0.6"
       }
     },
+    "postcss-nesting": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
+      "integrity": "sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -6668,6 +7042,101 @@
         }
       }
     },
+    "postcss-overflow-shorthand": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz",
+      "integrity": "sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-page-break": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-2.0.0.tgz",
+      "integrity": "sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-place": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-4.0.1.tgz",
+      "integrity": "sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==",
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-preset-env": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz",
+      "integrity": "sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==",
+      "requires": {
+        "autoprefixer": "^9.6.1",
+        "browserslist": "^4.6.4",
+        "caniuse-lite": "^1.0.30000981",
+        "css-blank-pseudo": "^0.1.4",
+        "css-has-pseudo": "^0.10.0",
+        "css-prefers-color-scheme": "^3.1.1",
+        "cssdb": "^4.4.0",
+        "postcss": "^7.0.17",
+        "postcss-attribute-case-insensitive": "^4.0.1",
+        "postcss-color-functional-notation": "^2.0.1",
+        "postcss-color-gray": "^5.0.0",
+        "postcss-color-hex-alpha": "^5.0.3",
+        "postcss-color-mod-function": "^3.0.3",
+        "postcss-color-rebeccapurple": "^4.0.1",
+        "postcss-custom-media": "^7.0.8",
+        "postcss-custom-properties": "^8.0.11",
+        "postcss-custom-selectors": "^5.1.2",
+        "postcss-dir-pseudo-class": "^5.0.0",
+        "postcss-double-position-gradients": "^1.0.0",
+        "postcss-env-function": "^2.0.2",
+        "postcss-focus-visible": "^4.0.0",
+        "postcss-focus-within": "^3.0.0",
+        "postcss-font-variant": "^4.0.0",
+        "postcss-gap-properties": "^2.0.0",
+        "postcss-image-set-function": "^3.0.1",
+        "postcss-initial": "^3.0.0",
+        "postcss-lab-function": "^2.0.1",
+        "postcss-logical": "^3.0.0",
+        "postcss-media-minmax": "^4.0.0",
+        "postcss-nesting": "^7.0.0",
+        "postcss-overflow-shorthand": "^2.0.0",
+        "postcss-page-break": "^2.0.0",
+        "postcss-place": "^4.0.1",
+        "postcss-pseudo-class-any-link": "^6.0.0",
+        "postcss-replace-overflow-wrap": "^3.0.0",
+        "postcss-selector-matches": "^4.0.0",
+        "postcss-selector-not": "^4.0.0"
+      }
+    },
+    "postcss-pseudo-class-any-link": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz",
+      "integrity": "sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==",
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -6697,6 +7166,14 @@
         }
       }
     },
+    "postcss-replace-overflow-wrap": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz",
+      "integrity": "sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==",
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
     "postcss-safe-parser": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-4.0.2.tgz",
@@ -6705,6 +7182,24 @@
         "postcss": "^7.0.26"
       }
     },
+    "postcss-selector-matches": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz",
+      "integrity": "sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-selector-not": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz",
+      "integrity": "sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
     "postcss-selector-parser": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
@@ -6748,6 +7243,16 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
     },
+    "postcss-values-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz",
+      "integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==",
+      "requires": {
+        "flatten": "^1.0.2",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
     "prepend-http": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
diff --git a/package.json b/package.json
index f195faa..890f5ee 100644
--- a/package.json
+++ b/package.json
@@ -22,9 +22,12 @@
   "dependencies": {
     "@papercups-io/chat-widget": "^1.0.6",
     "antd": "^4.4.2",
-    "framer-motion": "^2.3.0",
+    "css-vars-ponyfill": "^2.4.1",
     "next": "9.4.4",
     "phoenix": "^1.5.4",
+    "postcss-css-variables": "^0.17.0",
+    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss-preset-env": "^6.7.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-emoji-render": "^1.2.4",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 9ac81e6..6d32a82 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,25 @@
+import cssVars from 'css-vars-ponyfill';
 import '../styles/global.css';
 
+// cssVars({
+//   onlyLegacy: false,
+//   preserveVars: true,
+//   watch: true,
+//   variables: {
+//     '--theme-ui-colors-text': '#141414',
+//     '--theme-ui-colors-background': '#fff',
+//     '--theme-ui-colors-primary': '#1890ff',
+//     '--theme-ui-colors-darker': '#1890ff',
+//     '--theme-ui-colors-lighter': '#1890ff',
+//     '--theme-ui-colors-secondary': '#722ed1',
+//     '--theme-ui-colors-green': '#52c41a',
+//     '--theme-ui-colors-muted': '#f0f0f0',
+//     '--theme-ui-colors-gray': 'rgba(0, 0, 0, 0.45)',
+//     '--theme-ui-colors-input': 'rgba(0, 0, 0, 0.65)',
+//     '--theme-ui-colors-offset': 'rgba(255, 255, 255, 0.8)',
+//   },
+// });
+
 export default function App({Component, pageProps}) {
   return <Component {...pageProps} />;
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index fd425c2..755280e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,6 +13,19 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
         <base target="_parent _blank"></base>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+
+        <script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              cssVars({
+                onlyLegacy: false,
+                preserveVars: true,
+                watch: true,
+              })
+            `,
+          }}
+        />
       </Head>
 
       {query.accountId ? <Widget config={query} /> : null}
diff --git a/postcss.config.json b/postcss.config.json
new file mode 100644
index 0000000..5ea2b21
--- /dev/null
+++ b/postcss.config.json
@@ -0,0 +1,36 @@
+{
+  "plugins": [
+    "postcss-flexbugs-fixes",
+    [
+      "postcss-css-variables",
+      {
+        "preserve": true,
+        "variables": {
+          "--theme-ui-colors-text": "#141414",
+          "--theme-ui-colors-background": "#fff",
+          "--theme-ui-colors-primary": "#1890ff",
+          "--theme-ui-colors-darker": "#1890ff",
+          "--theme-ui-colors-lighter": "#1890ff",
+          "--theme-ui-colors-secondary": "#722ed1",
+          "--theme-ui-colors-green": "#52c41a",
+          "--theme-ui-colors-muted": "#f0f0f0",
+          "--theme-ui-colors-gray": "rgba(0, 0, 0, 0.45)",
+          "--theme-ui-colors-input": "rgba(0, 0, 0, 0.65)",
+          "--theme-ui-colors-offset": "rgba(255, 255, 255, 0.8)"
+        }
+      }
+    ],
+    [
+      "postcss-preset-env",
+      {
+        "autoprefixer": {
+          "flexbox": "no-2009"
+        },
+        "stage": 3,
+        "features": {
+          "custom-properties": true
+        }
+      }
+    ]
+  ]
+}