diff --git a/src/components/elements/MultiCodeEditor/MultiCodeEditor.js b/src/components/elements/MultiCodeEditor/MultiCodeEditor.js
index 2d4891824..4b96d1021 100644
--- a/src/components/elements/MultiCodeEditor/MultiCodeEditor.js
+++ b/src/components/elements/MultiCodeEditor/MultiCodeEditor.js
@@ -41,12 +41,7 @@ const ActionComponent = ({
         <Box css={{ width: '100%' }}>
           <SelectLanguage
             isDark={isDark}
-            css={theme({
-              py: '2px',
-              mx: 'auto',
-              width: '4.8rem',
-              mb: 2
-            })}
+            css={theme({ py: '2px' })}
             value={language}
             onClick={setLanguage}
           >
diff --git a/src/components/elements/Toggle/Toggle.js b/src/components/elements/Toggle/Toggle.js
index 004b3112f..32aa66bb1 100644
--- a/src/components/elements/Toggle/Toggle.js
+++ b/src/components/elements/Toggle/Toggle.js
@@ -13,7 +13,7 @@ const ButtonToggle = styled(Button)`
     px: 0,
     borderRadius: 0,
     _hover: {
-      cursor: props => (props.active ? 'auto' : 'pointer'),
+      cursor: props => (props.$active ? 'auto' : 'pointer'),
       boxShadow: 'none'
     }
   })}
@@ -46,7 +46,7 @@ function Toggle ({ onChange, children, defaultValue, ...props }) {
                 px: 3
               })}
             >
-              <ButtonToggle active={isActive} onClick={setAsActive(value)}>
+              <ButtonToggle $active={isActive} onClick={setAsActive(value)}>
                 <Caps
                   css={theme({
                     fontWeight: !isActive ? 'normal' : 'bold',
diff --git a/src/components/markdown/index.js b/src/components/markdown/index.js
index 72ba65498..ba5a8ddaf 100644
--- a/src/components/markdown/index.js
+++ b/src/components/markdown/index.js
@@ -72,7 +72,9 @@ export const H1 = withTitle(
       fontSize: `calc(${fontSizes[5]} * 0.75)`,
       lineHeight: [1, 2],
       textAlign: 'left',
-      mx: 'auto',
+      mt: 5,
+      mb: 4,
+      mx: 'auto'
     })}
   `)
 )
diff --git a/src/components/patterns/DemoLinks/DemoLinks.js b/src/components/patterns/DemoLinks/DemoLinks.js
index c4a514306..f3d0b4c4e 100644
--- a/src/components/patterns/DemoLinks/DemoLinks.js
+++ b/src/components/patterns/DemoLinks/DemoLinks.js
@@ -50,7 +50,7 @@ const DemoLinks = ({ children, chunkSize, onClick }) => {
   return (
     <BackgroundSliderContainer
       as='section'
-      css={theme({ p: 0, maxWidth: '100%' })}
+      css={theme({ py: 0, px: 0, maxWidth: '100%' })}
     >
       {chunk(links, chunkSize).map((chunkBrands, chunkIndex) => {
         const isEven = chunkIndex % 2 === 0
diff --git a/src/pages/changelog.js b/src/pages/changelog.js
index a67a11b87..864f55e10 100644
--- a/src/pages/changelog.js
+++ b/src/pages/changelog.js
@@ -3,7 +3,7 @@ import { Caption, Layout } from 'components/patterns'
 import Markdown, { H1 } from 'components/markdown'
 import { useChangelog } from 'components/hook'
 import { cdnUrl } from 'helpers'
-import { layout } from 'theme'
+import { layout, theme } from 'theme'
 import React from 'react'
 
 export const Head = () => (
@@ -18,20 +18,28 @@ const ChangelogPage = () => {
 
   return (
     <Layout>
-      <Container pt={[2, 2, 3, 3]} justifyContent='center' alignItems='center'>
-        <Heading maxWidth={layout.large}>Changelog</Heading>
+      <Container
+        css={theme({
+          pt: [2, null, 3],
+          justifyContent: 'center',
+          alignItems: 'center'
+        })}
+      >
+        <Heading css={{ maxWidth: layout.large }}>Changelog</Heading>
         <Caption
-          as='h2'
-          pt={[3, 3, 4, 4]}
-          mb={['-16px', '-16px', '-32px', '-32px']}
-          px={[4, 4, 0, 0]}
+          forwardedAs='h2'
+          css={theme({
+            pt: [3, null, 4],
+            mb: ['-16px', null, '-32px'],
+            px: [4, null, 0],
+            maxWidth: layout.small
+          })}
           titleize={false}
-          maxWidth={layout.small}
         >
           We’re constantly improving the platform. See here notable changes in
           our lineup of products & improvements over the time.
         </Caption>
-        <Box pt={[3, 3, 4, 4]}>
+        <Box css={theme({ pt: [3, null, 4] })}>
           {changelog.map(({ date, notes }) => {
             return (
               <Box key={date}>
diff --git a/src/pages/community.js b/src/pages/community.js
index 4342c5bc6..cc9373ca7 100644
--- a/src/pages/community.js
+++ b/src/pages/community.js
@@ -1,7 +1,7 @@
 import { Meta, Heading, Container, Flex } from 'components/elements'
 import { Caption, Layout, Chat } from 'components/patterns'
 import { cdnUrl } from 'helpers'
-import { layout } from 'theme'
+import { layout, theme } from 'theme'
 import React from 'react'
 
 export const Head = () => (
@@ -13,21 +13,35 @@ export const Head = () => (
 
 const CommunityPage = () => (
   <Layout>
-    <Container pt={[2, 2, 3, 3]} justifyContent='center' alignItems='center'>
+    <Container
+      css={theme({
+        pt: [2, null, 3],
+        justifyContent: 'center',
+        alignItems: 'center'
+      })}
+    >
       <Heading>Community</Heading>
 
       <Caption
-        as='h2'
-        pt={[3, 3, 4, 4]}
-        px={4}
+        forwardedAs='h2'
+        css={theme({
+          pt: [3, null, 4],
+          px: 4,
+          maxWidth: layout.small
+        })}
         titleize={false}
-        maxWidth={[layout.small, layout.small, layout.small, layout.small]}
       >
         Direct support via chat with guaranteed response from exclusive top-tier
         engineers.
       </Caption>
 
-      <Flex alignItems='center' justifyContent='center' pt={[0, 0, 4, 4]}>
+      <Flex
+        css={theme({
+          alignItems: 'center',
+          justifyContent: 'center',
+          pt: [0, null, 4]
+        })}
+      >
         <Chat />
       </Flex>
     </Container>
diff --git a/src/pages/oss.js b/src/pages/oss.js
index e993312d4..3b521bd14 100644
--- a/src/pages/oss.js
+++ b/src/pages/oss.js
@@ -18,7 +18,7 @@ const OssPage = () => {
   const repositories = useOss()
   return (
     <DotsBackground>
-      <Layout footer={{ bg: 'transparent' }}>
+      <Layout footer={{ style: { background: 'transparent' } }}>
         <Flex
           css={theme({
             pt: 2,
diff --git a/src/pages/recipes.js b/src/pages/recipes.js
index 8eb5ae8c5..f68518e7a 100644
--- a/src/pages/recipes.js
+++ b/src/pages/recipes.js
@@ -1,9 +1,8 @@
 import { DotsBackground, Layout, Caption } from 'components/patterns'
-import { colors, space, layout, toPx, toRaw, fontSizes } from 'theme'
+import { colors, space, layout, toPx, toRaw, fontSizes, theme } from 'theme'
 import { cdnUrl, issueUrl, formatNumber } from 'helpers'
 import React, { useState, useEffect } from 'react'
 import kebabCase from 'lodash/kebabCase'
-import styled from 'styled-components'
 import { Eye } from 'react-feather'
 import { getDomain } from 'tldts'
 
@@ -14,7 +13,6 @@ import {
   Button,
   Caps,
   Card,
-  Container,
   Flex,
   Heading,
   Link,
@@ -34,13 +32,6 @@ const width = [...Array(4).keys()].map(() => CARD_WIDTH)
 
 const maxWidth = width.map(w => toPx(toRaw(space[3]) * 4 + w * CARDS_PER_ROW))
 
-const CustomLink = styled(Link)`
-  color: inherit;
-  :hover:not([disabled]) {
-    color: inherit;
-  }
-`
-
 export const Head = () => (
   <Meta
     description='Just start with code. Instant integration, automating any site in a few lines.'
@@ -49,7 +40,7 @@ export const Head = () => (
 )
 
 const RecipesPage = () => {
-  const [counters, setCounters] = useState(null)
+  const [counters, setCounters] = useState()
   const isLoaded = counters !== null
 
   useEffect(() => {
@@ -61,46 +52,48 @@ const RecipesPage = () => {
   }, [])
 
   return (
-    <DotsBackground alignItems='center' justifyContent='center'>
-      <Layout footer={{ bg: 'transparent' }}>
+    <DotsBackground>
+      <Layout footer={{ style: { background: 'transparent' } }}>
         <Flex
-          width='100%'
-          flexDirection='column'
-          justifyContent='center'
-          alignItems='center'
-          pt={2}
-          px={3}
+          css={theme({
+            width: '100%',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            pt: 2,
+            px: 3
+          })}
         >
           <Flex
-            flexDirection='column'
-            alignItems='center'
-            justifyContent='center'
+            css={{
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
           >
-            <Heading titleize={false} maxWidth={layout.large}>
+            <Heading titleize={false} css={{ maxWidth: layout.large }}>
               Recipes
             </Heading>
             <Caption
-              as='h2'
-              pt={[3, 3, 4, 4]}
-              pb={[3, 3, 4, 4]}
-              px={[4, 4, 0, 0]}
+              forwardedAs='h2'
+              css={theme({
+                py: [3, null, 4],
+                px: [4, null, 0],
+                maxWidth: layout.small
+              })}
               titleize={false}
-              maxWidth={[
-                layout.small,
-                layout.small,
-                layout.small,
-                layout.small
-              ]}
             >
               Just start with code — Instant integration, automating any site in
               a few lines.
             </Caption>
           </Flex>
           <Flex
-            pt={[3, 3, 4, 4]}
-            maxWidth={maxWidth}
-            justifyContent='center'
-            flexWrap='wrap'
+            css={theme({
+              pt: [3, null, 4],
+              maxWidth,
+              justifyContent: 'center',
+              flexWrap: 'wrap'
+            })}
           >
             {recipes.map(([recipeName, meta], index) => {
               const count = isLoaded && counters[index]
@@ -114,64 +107,81 @@ const RecipesPage = () => {
               return (
                 <Card
                   key={recipeName}
-                  flexDirection='column'
-                  p={3}
-                  width={width}
-                  height='inherit'
-                  mb={3}
-                  mr={[0, 3, 3, 3]}
+                  css={theme({
+                    flexDirection: 'column',
+                    p: 3,
+                    width,
+                    height: 'inherit',
+                    mb: 3,
+                    mr: [0, 3],
+                    color: 'black',
+                    _hover: {
+                      color: 'black'
+                    }
+                  })}
                 >
-                  <CustomLink href={`/recipes/${kebabCase(recipeName)}`}>
-                    <Flex alignItems='center'>
-                      <Box pr={2}>
+                  <Link
+                    css={theme({
+                      color: 'inherit',
+                      _hover: { color: 'inherit' }
+                    })}
+                    href={`/recipes/${kebabCase(recipeName)}`}
+                  >
+                    <Flex css={{ alignItems: 'center' }}>
+                      <Box css={theme({ pr: 2 })}>
                         <Logo
                           isProvider={isProvider}
                           domain={domain}
                           {...meta}
                         />
                       </Box>
-                      <Text fontSize={1} fontWeight='bold'>
+                      <Text css={theme({ fontSize: 1, fontWeight: 'bold' })}>
                         {meta.name}
                       </Text>
                     </Flex>
                     <Flex>
                       <Text
-                        mt={3}
-                        fontSize={0}
-                        css={`
-                          min-height: 56px;
-                        `}
+                        css={theme({
+                          mt: 3,
+                          fontSize: 0,
+                          minHeight: '56px'
+                        })}
                       >
                         {description}
                       </Text>
                     </Flex>
                     <Flex
-                      alignItems='center'
+                      css={{ alignItems: 'center' }}
                       style={{ visibility: isLoaded ? 'inherit' : 'hidden' }}
                     >
                       <Eye size={fontSizes[0]} color={colors.black50} />
-                      <Text pl={1} color={colors.black50} fontSize={0}>
+                      <Text
+                        css={theme({ pl: 1, color: 'black50', fontSize: 0 })}
+                      >
                         {formatNumber(count)}
                       </Text>
                     </Flex>
-                  </CustomLink>
+                  </Link>
                 </Card>
               )
             })}
           </Flex>
           <Flex
-            pt={Container.defaultProps.pt}
-            justifyContent='space-between'
-            alignItems='center'
-            flexDirection={['column', 'column', 'row', 'row']}
-            width='100%'
-            maxWidth={layout.large}
+            css={theme({
+              pt: [5, null, 6],
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              flexDirection: ['column', null, 'row'],
+              width: '100%',
+              maxWidth: layout.large
+            })}
           >
             <Subhead>Miss something?</Subhead>
-            <Box pt={[4, 4, 0, 0]}>
+            <Box css={theme({ pt: [4, null, 0] })}>
               <Button
                 onClick={() =>
-                  window.open(issueUrl.bug(), '_blank', 'noopener noreferrer')}
+                  window.open(issueUrl.bug(), '_blank', 'noopener noreferrer')
+                }
               >
                 <Caps>Request an Integration</Caps>
               </Button>
diff --git a/src/pages/user-agents.js b/src/pages/user-agents.js
index 3b6bfba8f..9baed3eb5 100644
--- a/src/pages/user-agents.js
+++ b/src/pages/user-agents.js
@@ -1,7 +1,7 @@
 import { ArrowLink, Caption, Layout } from 'components/patterns'
 import Markdown from 'components/markdown'
 import React, { useState } from 'react'
-import { layout } from 'theme'
+import { layout, theme } from 'theme'
 
 import { Toggle, Container, Flex, Heading, Meta } from 'components/elements'
 
@@ -30,44 +30,57 @@ const UserAgentsPage = () => {
 
   return (
     <Layout>
-      <Container pt={2} pb={3} justifyContent='center' alignItems='center'>
-        <Heading px={5} maxWidth={layout.large}>
+      <Container
+        css={theme({
+          pt: 2,
+          pb: 3,
+          justifyContent: 'center',
+          alignItems: 'center'
+        })}
+      >
+        <Heading css={theme({ px: 5, maxWidth: layout.large })}>
           User Agents
         </Heading>
         <Caption
-          pt={[3, 3, 4, 4]}
-          px={['48px', 4, 4, 4]}
+          forwardedAs='h2'
+          css={theme({
+            pt: [3, null, 4],
+            px: ['48px', 4],
+            maxWidth: layout.small
+          })}
           titleize={false}
-          maxWidth={[layout.small, layout.small, layout.small, layout.small]}
         >
           Most common `user-agent` used on Internet.
         </Caption>
         <Flex
-          py={[3, 3, 4, 4]}
-          flexDirection='column'
-          justifyContent='center'
-          alignItems='center'
+          css={theme({
+            py: [3, null, 4],
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center'
+          })}
         >
           <Toggle
-            alignItems='center'
-            justifyContent='center'
+            css={theme({ alignItems: 'center', justifyContent: 'center' })}
             defaultValue='User Agent'
             onChange={value =>
-              setType(value === 'User Agent' ? 'user' : 'crawler')}
+              setType(value === 'User Agent' ? 'user' : 'crawler')
+            }
           >
             {['User Agent', 'Crawler Agent']}
           </Toggle>
-          <Flex pt={[3, 3, 4, 4]}>
-            <ArrowLink pr={[2, 4, 4, 4]} href={downloadUrl}>
-              Download
-            </ArrowLink>
+          <Flex
+            css={theme({
+              pt: [3, null, 4],
+              gap: [2, 4],
+              fontSize: [2, null, 3]
+            })}
+          >
+            <ArrowLink href={downloadUrl}>Download</ArrowLink>
             <ArrowLink href={githubUrl}>See on GitHub</ArrowLink>
           </Flex>
         </Flex>
-        <Flex
-          flexDirection='column'
-          maxWidth={['95vw', '95vw', undefined, undefined]}
-        >
+        <Flex css={theme({ flexDirection: 'column', maxWidth: '95vw' })}>
           <Markdown>{content}</Markdown>
         </Flex>
       </Container>
diff --git a/src/templates/doc/index.js b/src/templates/doc/index.js
index eb4aef021..4366800d3 100644
--- a/src/templates/doc/index.js
+++ b/src/templates/doc/index.js
@@ -1,7 +1,7 @@
 import { getActiveRouteName } from 'components/patterns/Aside/constants'
 import Markdown, { H1, ProBadge } from 'components/markdown'
 import { Layout, Aside } from 'components/patterns'
-import { fontSizes, colors, layout } from 'theme'
+import { fontSizes, layout, theme } from 'theme'
 import { formatDate } from 'helpers'
 import React from 'react'
 
@@ -13,44 +13,51 @@ const DocTemplate = ({ meta, content, githubUrl, ...props }) => {
   return (
     <Layout footer={false}>
       <Container
-        pt={[0, 0, 0, 4]}
-        ml={[3, 3, 3, 'auto']}
-        mr={[3, 3, 3, 'auto']}
-        px={0}
-        maxWidth={layout.large}
+        css={theme({
+          pt: [0, null, null, 4],
+          mx: [3, null, null, 'auto'],
+          px: 0,
+          maxWidth: layout.large
+        })}
       >
         <Aside activeRouteName={activeRouteName}>
           <Choose>
             <Choose.When condition={!!meta.title}>
               <Text as='header'>
                 <H1
-                  mt={[0, 0, 0, `calc(-1 * ${fontSizes[2]})`]}
+                  css={theme({
+                    mt: [0, null, null, `calc(-1 * ${fontSizes[2]})`],
+                    mb: 1
+                  })}
                   variant={null}
-                  mb={1}
                   slug={false}
                 >
                   <span>{meta.title}</span>
-                  {meta.isPro && <ProBadge top='12px' ml={2} />}
+                  {meta.isPro && (
+                    <ProBadge css={theme({ top: '12px', ml: 2 })} />
+                  )}
                 </H1>
               </Text>
             </Choose.When>
             <Choose.Otherwise>
-              <Box mt={4} />
+              <Box css={theme({ mt: 4 })} />
             </Choose.Otherwise>
           </Choose>
           <Markdown>{content}</Markdown>
           <Flex
             as='footer'
-            borderTop={1}
-            borderColor={colors.black05}
-            justifyContent='space-between'
-            my={4}
-            pt={4}
+            css={theme({
+              borderTop: 1,
+              borderColor: 'black05',
+              justifyContent: 'space-between',
+              my: 4,
+              pt: 4
+            })}
           >
-            <Text color='gray' fontSize={0}>
+            <Text css={theme({ color: 'gray', fontSize: 0 })}>
               Last Edited on {formatDate(meta.date)}
             </Text>
-            <Link href={githubUrl} fontSize={0}>
+            <Link href={githubUrl} css={theme({ fontSize: 0 })}>
               Edit on GitHub
             </Link>
           </Flex>
diff --git a/src/templates/recipe.js b/src/templates/recipe.js
index fbad30b89..0118bd30b 100644
--- a/src/templates/recipe.js
+++ b/src/templates/recipe.js
@@ -1,7 +1,7 @@
 import { Caption, DotsBackground, ArrowLink, Layout } from 'components/patterns'
 import { Meta, Text, Box, CodeEditor, Flex, Heading } from 'components/elements'
 import React, { useState, useEffect } from 'react'
-import { fontSizes, colors, layout } from 'theme'
+import { fontSizes, colors, layout, theme } from 'theme'
 import { Logo } from 'components/pages/recipes'
 import { cdnUrl, formatNumber } from 'helpers'
 import { Eye } from 'react-feather'
@@ -15,7 +15,7 @@ const Description = recipe => {
       children.push(str.trim())
     } else {
       children.push(
-        <Box key={domain} ml={2} mr={1}>
+        <Box key={domain} css={theme({ ml: 2, mr: 1 })}>
           <Logo {...recipe} />
         </Box>
       )
@@ -54,59 +54,60 @@ const RecipeTemplate = ({ pageContext: recipe }) => {
   }/${recipe.slug}.js`
 
   return (
-    <DotsBackground alignItems='center' justifyContent='center'>
-      <Layout footer={{ bg: 'transparent' }}>
+    <DotsBackground>
+      <Layout footer={{ style: { background: 'transparent' } }}>
         <Flex
-          px={3}
-          pt={[2, 2, 3, 3]}
-          width='100%'
-          flexDirection='column'
-          justifyContent='center'
-          alignItems='center'
+          css={theme({
+            px: 3,
+            pt: [2, null, 3],
+            width: '100%',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center'
+          })}
         >
-          <Heading fontSize={4} pt={[3, 3, 4, 4]} titleize={false}>
+          <Heading
+            css={theme({ fontSize: 4, pt: [3, null, 4] })}
+            titleize={false}
+          >
             <Name {...recipe} />
           </Heading>
 
           <Caption
-            as='h2'
+            forwardedAs='h2'
             titleize={false}
-            pt={[3, 3, 3, 3]}
-            px={[4, 4, 0, 0]}
-            maxWidth={[
-              layout.small,
-              layout.small,
-              layout.normal,
-              layout.normal
-            ]}
-            style={{
+            css={theme({
+              pt: 3,
+              px: [4, null, 0],
+              maxWidth: [layout.small, null, layout.normal],
               display: 'flex',
               alignItems: 'center'
-            }}
+            })}
           >
             <Description {...recipe} />
           </Caption>
 
           {isLoaded && (
-            <Flex pt={[2, 2, 2, 2]} alignItems='center'>
+            <Flex css={theme({ pt: 2, alignItems: 'center' })}>
               <Eye size={fontSizes[2]} color={colors.black50} />
-              <Text pl={2} color={colors.black50}>
+              <Text css={theme({ pl: 2, color: 'black50' })}>
                 {formatNumber(count)}
               </Text>
             </Flex>
           )}
 
           <Flex
-            pt={4}
-            width='100%'
-            flexDirection='column'
-            justifyContent='center'
-            alignItems='center'
+            css={theme({
+              pt: 4,
+              width: '100%',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center'
+            })}
           >
             <CodeEditor
               title={`${recipe.key}.js`}
-              width='100%'
-              maxWidth={layout.small}
+              css={{ width: '100%', maxWidth: layout.small }}
               interactive
             >
               {recipe.code}
@@ -114,19 +115,18 @@ const RecipeTemplate = ({ pageContext: recipe }) => {
           </Flex>
 
           <Flex
-            alignItems={['center', undefined, undefined, undefined]}
-            flexDirection={['column', 'row', 'row', 'row']}
-            pt={[3, 3, 4, 4]}
+            css={theme({
+              alignItems: 'center',
+              flexDirection: ['column', 'row'],
+              pt: [3, null, 4],
+              fontSize: [2, null, 3],
+              gap: [3, 4]
+            })}
           >
-            <ArrowLink
-              pr={[0, 4, 4, 4]}
-              href='/docs/mql/getting-started/overview'
-            >
+            <ArrowLink href='/docs/mql/getting-started/overview'>
               Read docs
             </ArrowLink>
-            <ArrowLink pt={[3, 0, 0, 0]} href={gitHubUrl}>
-              Edit on GitHub
-            </ArrowLink>
+            <ArrowLink href={gitHubUrl}>Edit on GitHub</ArrowLink>
           </Flex>
         </Flex>
       </Layout>