diff --git a/README.md b/README.md
index 13d4e734f..2976995c3 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,3 @@ styled-components-website
 ├── utils/       # Various utilities use across the site
 └── vendor/      # Cached dependencies
 ```
-
-### Got stuck?
-
-Feel free to ping us on [Spectrum](https://spectrum.chat/styled-components/website) if you get stuck somewhere while trying to make this website better, let's resolve it together!
diff --git a/components/Layout.js b/components/Layout.ts
similarity index 84%
rename from components/Layout.js
rename to components/Layout.ts
index 3c3b71f5c..727ac2238 100644
--- a/components/Layout.js
+++ b/components/Layout.ts
@@ -13,7 +13,7 @@ export const Container = styled.div`
   `)};
 `;
 
-export const Content = styled.div`
+export const Content = styled.div<{ $hero: boolean; $moveRight: boolean }>`
   max-width: 100%;
   margin: 0;
   padding: ${rem(90)} ${rem(60)} 0 ${rem(60)};
@@ -26,10 +26,11 @@ export const Content = styled.div`
     max-width: 80ch;
   }
 
-  ${mobile(css`
-    padding: ${rem(100)} ${rem(20)} ${rem(30)} ${rem(20)};
-    transform: translateX(${p => (p.$moveRight ? rem(sidebarWidth) : 0)});
-  `)};
+  ${p =>
+    mobile(css`
+      padding: ${rem(100)} ${rem(20)} ${rem(30)} ${rem(20)};
+      transform: translateX(${p.$moveRight ? rem(sidebarWidth) : 0});
+    `)};
 
   ${p =>
     p.$hero &&
diff --git a/components/Nav/Social.js b/components/Nav/Social.js
index 77a85ee4d..c414c2e1d 100644
--- a/components/Nav/Social.js
+++ b/components/Nav/Social.js
@@ -41,11 +41,6 @@ const SocialLink = styled(Link).attrs((/* props */) => ({
   }
 `;
 
-const Svg = styled.svg`
-  width: ${p => rem(Number(p.width))};
-  height: ${p => rem(Number(p.height))};
-`;
-
 const StyledIcon = styled.div`
   && {
     width: ${p => rem(Number(p.width))};
@@ -63,21 +58,8 @@ const StyledIcon = styled.div`
 //   </Svg>
 // )
 
-const Spectrum = () => (
-  <Svg width="14" height="14" viewBox="0 0 15 15">
-    <title>spectrum</title>
-    <path
-      fill="#FFF"
-      d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-    />
-  </Svg>
-);
-
 const Social = props => (
   <Wrapper {...props}>
-    <SocialLink href="https://spectrum.chat/styled-components/" aria-label="Spectrum chat">
-      <Spectrum />
-    </SocialLink>
     {/* <SocialLink href="https://twitter.com/someone">
       <Twitter />
     </SocialLink> */}
diff --git a/sections/tooling/stylelint.md b/sections/tooling/stylelint.md
index 9654de944..0b3a7f58d 100644
--- a/sections/tooling/stylelint.md
+++ b/sections/tooling/stylelint.md
@@ -173,7 +173,7 @@ The full list of supported tags:
 - `sc-property`
 - `sc-value`
 
-> If you are in doubt of the vocabulary you can refer to [this CSS vocabulary list](http://apps.workflower.fi/vocabs/css/en) with examples.
+> If you are in doubt of the vocabulary you can refer to [this CSS vocabulary list](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) with examples.
 
 For example, when you interpolate another styled component, what you really interpolate is its unique selector. Since the processor doesn't know that, you can tell it to replace it with a selector when linting:
 
diff --git a/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap b/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
index a90d19900..aa1a76fe2 100644
--- a/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
+++ b/test/components/NavBar/__snapshots__/MobileNavbar.spec.js.snap
@@ -78,12 +78,7 @@ exports[`MobileNavbar renders correctly 1`] = `
   fill: currentColor;
 }
 
-.c17 {
-  width: 0.7777777777777778rem;
-  height: 0.7777777777777778rem;
-}
-
-.c18.c18 {
+.c17.c17 {
   width: NaNrem;
   height: 1rem;
 }
@@ -297,33 +292,13 @@ exports[`MobileNavbar renders correctly 1`] = `
       <nav
         className="c15"
       >
-        <a
-          aria-label="Spectrum chat"
-          className="c16"
-          href="https://spectrum.chat/styled-components/"
-        >
-          <svg
-            className="c17"
-            height="14"
-            viewBox="0 0 15 15"
-            width="14"
-          >
-            <title>
-              spectrum
-            </title>
-            <path
-              d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-              fill="#FFF"
-            />
-          </svg>
-        </a>
         <a
           aria-label="Github"
           className="c16"
           href="https://github.com/styled-components"
         >
           <svg
-            className="c18"
+            className="c17"
             height="18"
           />
         </a>
@@ -333,7 +308,7 @@ exports[`MobileNavbar renders correctly 1`] = `
           href="https://medium.com/styled-components"
         >
           <svg
-            className="c18"
+            className="c17"
             height="18"
           />
         </a>
diff --git a/test/components/NavBar/__snapshots__/Navbar.spec.js.snap b/test/components/NavBar/__snapshots__/Navbar.spec.js.snap
index ffe6bd83d..77563c02b 100644
--- a/test/components/NavBar/__snapshots__/Navbar.spec.js.snap
+++ b/test/components/NavBar/__snapshots__/Navbar.spec.js.snap
@@ -70,12 +70,7 @@ exports[`Navbar renders correctly 1`] = `
   fill: currentColor;
 }
 
-.c18 {
-  width: 0.7777777777777778rem;
-  height: 0.7777777777777778rem;
-}
-
-.c19.c19 {
+.c18.c18 {
   width: NaNrem;
   height: 1rem;
 }
@@ -91,7 +86,7 @@ exports[`Navbar renders correctly 1`] = `
   height: 2.2222222222222223rem;
 }
 
-.c25 {
+.c24 {
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
@@ -102,15 +97,15 @@ exports[`Navbar renders correctly 1`] = `
   height: 1.6666666666666667rem;
 }
 
-.c23 svg {
+.c22 svg {
   display: inline-block;
 }
 
-.c23 svg path {
+.c22 svg path {
   fill: currentColor;
 }
 
-.c22 {
+.c21 {
   background: none;
   outline: none;
   border: none;
@@ -123,11 +118,11 @@ exports[`Navbar renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c21+.c21 {
+.c20+.c20 {
   padding-left: 0;
 }
 
-.c26 {
+.c25 {
   background: none;
   outline: none;
   border: none;
@@ -140,15 +135,15 @@ exports[`Navbar renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c21+.c21 {
+.c20+.c20 {
   padding-left: 0;
 }
 
-.c20 {
+.c19 {
   display: none;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   top: 2.7777777777777777rem;
   left: 0;
@@ -168,27 +163,27 @@ exports[`Navbar renders correctly 1`] = `
   color: #868686;
 }
 
-.c24 {
+.c23 {
   display: inline-block;
   vertical-align: center;
 }
 
-.c28 {
+.c27 {
   transition: transform 0.2s;
   transform-origin: center center;
   transform: rotate(180deg);
 }
 
-.c31 {
+.c30 {
   padding-right: 1.1111111111111112rem;
 }
 
-.c27.c27 {
+.c26.c26 {
   width: 1.5555555555555556rem;
   height: 1.5555555555555556rem;
 }
 
-.c29.c29 {
+.c28.c28 {
   width: 2rem;
   height: 2rem;
 }
@@ -303,7 +298,7 @@ exports[`Navbar renders correctly 1`] = `
 }
 
 @media (max-width: 62.5em) {
-  .c20 {
+  .c19 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -508,33 +503,13 @@ exports[`Navbar renders correctly 1`] = `
       <nav
         className="c16 "
       >
-        <a
-          aria-label="Spectrum chat"
-          className="c17"
-          href="https://spectrum.chat/styled-components/"
-        >
-          <svg
-            className="c18"
-            height="14"
-            viewBox="0 0 15 15"
-            width="14"
-          >
-            <title>
-              spectrum
-            </title>
-            <path
-              d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-              fill="#FFF"
-            />
-          </svg>
-        </a>
         <a
           aria-label="Github"
           className="c17"
           href="https://github.com/styled-components"
         >
           <svg
-            className="c19"
+            className="c18"
             height="18"
           />
         </a>
@@ -544,7 +519,7 @@ exports[`Navbar renders correctly 1`] = `
           href="https://medium.com/styled-components"
         >
           <svg
-            className="c19"
+            className="c18"
             height="18"
           />
         </a>
@@ -552,13 +527,13 @@ exports[`Navbar renders correctly 1`] = `
     </div>
   </div>
   <div
-    className="c20"
+    className="c19"
   >
     <button
-      className="c21 c22"
+      className="c20 c21"
     >
       <svg
-        className="c23"
+        className="c22"
         height="15"
         width="15"
         xmlns="http://www.w3.org/2000/svg"
@@ -582,38 +557,38 @@ exports[`Navbar renders correctly 1`] = `
     </button>
     <a
       aria-label="styled components"
-      className="c24"
+      className="c23"
       href="/"
     >
       <div
-        className="c25"
+        className="c24"
       />
     </a>
     <div>
       <button
-        className="c21 c26"
+        className="c20 c25"
         onClick={[Function]}
       >
         <svg
-          className="c27"
+          className="c26"
           size={28}
         />
       </button>
       <button
-        className="c21 c22"
+        className="c20 c21"
       >
         <div
-          className="c28"
+          className="c27"
         >
           <div
-            className="c29"
+            className="c28"
             size={36}
           />
         </div>
       </button>
     </div>
     <div
-      className="c30"
+      className="c29"
     >
       <nav
         className="c5"
@@ -653,38 +628,18 @@ exports[`Navbar renders correctly 1`] = `
         </a>
       </nav>
       <div
-        className="c31"
+        className="c30"
       >
         <nav
           className="c16"
         >
-          <a
-            aria-label="Spectrum chat"
-            className="c17"
-            href="https://spectrum.chat/styled-components/"
-          >
-            <svg
-              className="c18"
-              height="14"
-              viewBox="0 0 15 15"
-              width="14"
-            >
-              <title>
-                spectrum
-              </title>
-              <path
-                d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                fill="#FFF"
-              />
-            </svg>
-          </a>
           <a
             aria-label="Github"
             className="c17"
             href="https://github.com/styled-components"
           >
             <svg
-              className="c19"
+              className="c18"
               height="18"
             />
           </a>
@@ -694,7 +649,7 @@ exports[`Navbar renders correctly 1`] = `
             href="https://medium.com/styled-components"
           >
             <svg
-              className="c19"
+              className="c18"
               height="18"
             />
           </a>
diff --git a/test/components/NavBar/__snapshots__/index.spec.js.snap b/test/components/NavBar/__snapshots__/index.spec.js.snap
index 5796d4527..32957c438 100644
--- a/test/components/NavBar/__snapshots__/index.spec.js.snap
+++ b/test/components/NavBar/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Nav renders correctly 1`] = `
-.c36 {
+.c35 {
   display: inline-block;
   color: inherit;
   cursor: pointer;
@@ -78,12 +78,7 @@ exports[`Nav renders correctly 1`] = `
   fill: currentColor;
 }
 
-.c18 {
-  width: 0.7777777777777778rem;
-  height: 0.7777777777777778rem;
-}
-
-.c19.c19 {
+.c18.c18 {
   width: NaNrem;
   height: 1rem;
 }
@@ -99,7 +94,7 @@ exports[`Nav renders correctly 1`] = `
   height: 2.2222222222222223rem;
 }
 
-.c25 {
+.c24 {
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
@@ -110,15 +105,15 @@ exports[`Nav renders correctly 1`] = `
   height: 1.6666666666666667rem;
 }
 
-.c23 svg {
+.c22 svg {
   display: inline-block;
 }
 
-.c23 svg path {
+.c22 svg path {
   fill: currentColor;
 }
 
-.c22 {
+.c21 {
   background: none;
   outline: none;
   border: none;
@@ -131,11 +126,11 @@ exports[`Nav renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c21+.c21 {
+.c20+.c20 {
   padding-left: 0;
 }
 
-.c26 {
+.c25 {
   background: none;
   outline: none;
   border: none;
@@ -148,15 +143,15 @@ exports[`Nav renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c21+.c21 {
+.c20+.c20 {
   padding-left: 0;
 }
 
-.c20 {
+.c19 {
   display: none;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   top: 2.7777777777777777rem;
   left: 0;
@@ -176,27 +171,27 @@ exports[`Nav renders correctly 1`] = `
   color: #868686;
 }
 
-.c24 {
+.c23 {
   display: inline-block;
   vertical-align: center;
 }
 
-.c28 {
+.c27 {
   transition: transform 0.2s;
   transform-origin: center center;
   transform: rotate(180deg);
 }
 
-.c31 {
+.c30 {
   padding-right: 1.1111111111111112rem;
 }
 
-.c27.c27 {
+.c26.c26 {
   width: 1.5555555555555556rem;
   height: 1.5555555555555556rem;
 }
 
-.c29.c29 {
+.c28.c28 {
   width: 2rem;
   height: 2rem;
 }
@@ -310,7 +305,7 @@ exports[`Nav renders correctly 1`] = `
   margin-right: 1.9444444444444444rem;
 }
 
-.c32 {
+.c31 {
   position: fixed;
   transform: translateZ(0);
   display: block;
@@ -328,35 +323,35 @@ exports[`Nav renders correctly 1`] = `
   transition: transform 150ms ease-out;
 }
 
-.c33 {
+.c32 {
   display: block;
   box-sizing: border-box;
   height: 100%;
   padding-top: 3.3333333333333335rem;
 }
 
-.c34 {
+.c33 {
   margin-bottom: 1.1111111111111112rem;
 }
 
-.c35 {
+.c34 {
   display: block;
   margin: 0.5555555555555556rem 2.2222222222222223rem;
   font-weight: normal;
 }
 
 @media (min-width: 62.5em) {
-  .c36 {
+  .c35 {
     border-radius: 0.16666666666666666rem;
   }
 
-  .c36:hover {
+  .c35:hover {
     background: rgba(20, 20, 20, 0.1);
   }
 }
 
 @media (max-width: 62.5em) {
-  .c20 {
+  .c19 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -706,50 +701,6 @@ exports[`Nav renders correctly 1`] = `
                         <nav
                           className="c16 "
                         >
-                          <Styled(Link)
-                            aria-label="Spectrum chat"
-                            href="https://spectrum.chat/styled-components/"
-                          >
-                            <Link
-                              aria-label="Spectrum chat"
-                              className="c17"
-                              href="https://spectrum.chat/styled-components/"
-                              unstyled={true}
-                            >
-                              <Link
-                                href="https://spectrum.chat/styled-components/"
-                              >
-                                <a
-                                  aria-label="Spectrum chat"
-                                  className="c17"
-                                  href="https://spectrum.chat/styled-components/"
-                                >
-                                  <Spectrum>
-                                    <styled.svg
-                                      height="14"
-                                      viewBox="0 0 15 15"
-                                      width="14"
-                                    >
-                                      <svg
-                                        className="c18"
-                                        height="14"
-                                        viewBox="0 0 15 15"
-                                        width="14"
-                                      >
-                                        <title>
-                                          spectrum
-                                        </title>
-                                        <path
-                                          d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                                          fill="#FFF"
-                                        />
-                                      </svg>
-                                    </styled.svg>
-                                  </Spectrum>
-                                </a>
-                              </Link>
-                            </Link>
-                          </Styled(Link)>
                           <Styled(Link)
                             aria-label="Github"
                             href="https://github.com/styled-components"
@@ -773,11 +724,11 @@ exports[`Nav renders correctly 1`] = `
                                     height="18"
                                   >
                                     <DummyIcon
-                                      className="c19"
+                                      className="c18"
                                       height="18"
                                     >
                                       <svg
-                                        className="c19"
+                                        className="c18"
                                         height="18"
                                       />
                                     </DummyIcon>
@@ -809,11 +760,11 @@ exports[`Nav renders correctly 1`] = `
                                     height="18"
                                   >
                                     <DummyIcon
-                                      className="c19"
+                                      className="c18"
                                       height="18"
                                     >
                                       <svg
-                                        className="c19"
+                                        className="c18"
                                         height="18"
                                       />
                                     </DummyIcon>
@@ -835,13 +786,13 @@ exports[`Nav renders correctly 1`] = `
           >
             <styled.div>
               <div
-                className="c20"
+                className="c19"
               >
                 <styled.button
                   $active={true}
                 >
                   <button
-                    className="c21 c22"
+                    className="c20 c21"
                   >
                     <CloseIcon>
                       <styled.svg
@@ -851,7 +802,7 @@ exports[`Nav renders correctly 1`] = `
                         xmlnsXlink="http://www.w3.org/1999/xlink"
                       >
                         <svg
-                          className="c23"
+                          className="c22"
                           height="15"
                           width="15"
                           xmlns="http://www.w3.org/2000/svg"
@@ -879,7 +830,7 @@ exports[`Nav renders correctly 1`] = `
                 <Styled(Link)>
                   <Link
                     aria-label="styled components"
-                    className="c24"
+                    className="c23"
                     href="/"
                     unstyled={true}
                   >
@@ -888,14 +839,14 @@ exports[`Nav renders correctly 1`] = `
                     >
                       <a
                         aria-label="styled components"
-                        className="c24"
+                        className="c23"
                         href="/"
                       >
                         <styled.div
                           $compact={true}
                         >
                           <div
-                            className="c25"
+                            className="c24"
                           />
                         </styled.div>
                       </a>
@@ -907,7 +858,7 @@ exports[`Nav renders correctly 1`] = `
                     onClick={[Function]}
                   >
                     <button
-                      className="c21 c26"
+                      className="c20 c25"
                       onClick={[Function]}
                     >
                       <styled.div
@@ -915,11 +866,11 @@ exports[`Nav renders correctly 1`] = `
                         size={28}
                       >
                         <DummyIcon
-                          className="c27"
+                          className="c26"
                           size={28}
                         >
                           <svg
-                            className="c27"
+                            className="c26"
                             size={28}
                           />
                         </DummyIcon>
@@ -930,19 +881,19 @@ exports[`Nav renders correctly 1`] = `
                     $active={true}
                   >
                     <button
-                      className="c21 c22"
+                      className="c20 c21"
                     >
                       <styled.div
                         $shouldRotate={true}
                       >
                         <div
-                          className="c28"
+                          className="c27"
                         >
                           <styled.div
                             size={36}
                           >
                             <div
-                              className="c29"
+                              className="c28"
                               size={36}
                             />
                           </styled.div>
@@ -955,7 +906,7 @@ exports[`Nav renders correctly 1`] = `
                   $isOpen={true}
                 >
                   <div
-                    className="c30"
+                    className="c29"
                   >
                     <NavLinks>
                       <styled.nav>
@@ -1062,57 +1013,13 @@ exports[`Nav renders correctly 1`] = `
                     </NavLinks>
                     <styled.div>
                       <div
-                        className="c31"
+                        className="c30"
                       >
                         <Social>
                           <styled.nav>
                             <nav
                               className="c16"
                             >
-                              <Styled(Link)
-                                aria-label="Spectrum chat"
-                                href="https://spectrum.chat/styled-components/"
-                              >
-                                <Link
-                                  aria-label="Spectrum chat"
-                                  className="c17"
-                                  href="https://spectrum.chat/styled-components/"
-                                  unstyled={true}
-                                >
-                                  <Link
-                                    href="https://spectrum.chat/styled-components/"
-                                  >
-                                    <a
-                                      aria-label="Spectrum chat"
-                                      className="c17"
-                                      href="https://spectrum.chat/styled-components/"
-                                    >
-                                      <Spectrum>
-                                        <styled.svg
-                                          height="14"
-                                          viewBox="0 0 15 15"
-                                          width="14"
-                                        >
-                                          <svg
-                                            className="c18"
-                                            height="14"
-                                            viewBox="0 0 15 15"
-                                            width="14"
-                                          >
-                                            <title>
-                                              spectrum
-                                            </title>
-                                            <path
-                                              d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                                              fill="#FFF"
-                                            />
-                                          </svg>
-                                        </styled.svg>
-                                      </Spectrum>
-                                    </a>
-                                  </Link>
-                                </Link>
-                              </Styled(Link)>
                               <Styled(Link)
                                 aria-label="Github"
                                 href="https://github.com/styled-components"
@@ -1136,11 +1043,11 @@ exports[`Nav renders correctly 1`] = `
                                         height="18"
                                       >
                                         <DummyIcon
-                                          className="c19"
+                                          className="c18"
                                           height="18"
                                         >
                                           <svg
-                                            className="c19"
+                                            className="c18"
                                             height="18"
                                           />
                                         </DummyIcon>
@@ -1172,11 +1079,11 @@ exports[`Nav renders correctly 1`] = `
                                         height="18"
                                       >
                                         <DummyIcon
-                                          className="c19"
+                                          className="c18"
                                           height="18"
                                         >
                                           <svg
-                                            className="c19"
+                                            className="c18"
                                             height="18"
                                           />
                                         </DummyIcon>
@@ -1201,7 +1108,7 @@ exports[`Nav renders correctly 1`] = `
     <CaptureScroll>
       <styled.nav>
         <nav
-          className="c32"
+          className="c31"
         >
           <withRouter(Unknown)>
             <Component
@@ -1209,7 +1116,7 @@ exports[`Nav renders correctly 1`] = `
             >
               <styled.div>
                 <div
-                  className="c33"
+                  className="c32"
                 >
                   <Folder
                     isOpenDefault={null}
@@ -1217,13 +1124,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1236,7 +1143,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/basics"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/basics"
                                   >
                                     Basics
@@ -1255,13 +1162,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1274,7 +1181,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/advanced"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/advanced"
                                   >
                                     Advanced
@@ -1293,13 +1200,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1312,7 +1219,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/api"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/api"
                                   >
                                     API Reference
@@ -1331,13 +1238,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1350,7 +1257,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/tooling"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/tooling"
                                   >
                                     Tooling
@@ -1369,13 +1276,13 @@ exports[`Nav renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c34"
+                        className="c33"
                       >
                         <styled.h4
                           onClick={[Function]}
                         >
                           <h4
-                            className="c35"
+                            className="c34"
                             onClick={[Function]}
                           >
                             <Link
@@ -1388,7 +1295,7 @@ exports[`Nav renders correctly 1`] = `
                                   href="/docs/faqs"
                                 >
                                   <a
-                                    className="c36"
+                                    className="c35"
                                     href="/docs/faqs"
                                   >
                                     FAQs
diff --git a/test/components/__snapshots__/DocsLayout.spec.js.snap b/test/components/__snapshots__/DocsLayout.spec.js.snap
index 4d0f975f3..aa1d28f77 100644
--- a/test/components/__snapshots__/DocsLayout.spec.js.snap
+++ b/test/components/__snapshots__/DocsLayout.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DocsLayout renders correctly 1`] = `
-.c36 {
+.c35 {
   display: inline-block;
   color: inherit;
   cursor: pointer;
@@ -78,12 +78,7 @@ exports[`DocsLayout renders correctly 1`] = `
   fill: currentColor;
 }
 
-.c19 {
-  width: 0.7777777777777778rem;
-  height: 0.7777777777777778rem;
-}
-
-.c20.c20 {
+.c19.c19 {
   width: NaNrem;
   height: 1rem;
 }
@@ -99,7 +94,7 @@ exports[`DocsLayout renders correctly 1`] = `
   height: 2.2222222222222223rem;
 }
 
-.c26 {
+.c25 {
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
@@ -110,15 +105,15 @@ exports[`DocsLayout renders correctly 1`] = `
   height: 1.6666666666666667rem;
 }
 
-.c24 svg {
+.c23 svg {
   display: inline-block;
 }
 
-.c24 svg path {
+.c23 svg path {
   fill: currentColor;
 }
 
-.c23 {
+.c22 {
   background: none;
   outline: none;
   border: none;
@@ -131,15 +126,15 @@ exports[`DocsLayout renders correctly 1`] = `
   vertical-align: middle;
 }
 
-.c22+.c22 {
+.c21+.c21 {
   padding-left: 0;
 }
 
-.c21 {
+.c20 {
   display: none;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   top: 2.7777777777777777rem;
   left: 0;
@@ -159,25 +154,25 @@ exports[`DocsLayout renders correctly 1`] = `
   color: #868686;
 }
 
-.c25 {
+.c24 {
   display: inline-block;
   vertical-align: center;
 }
 
-.c28 {
+.c27 {
   transition: transform 0.2s;
 }
 
-.c31 {
+.c30 {
   padding-right: 1.1111111111111112rem;
 }
 
-.c27.c27 {
+.c26.c26 {
   width: 1.5555555555555556rem;
   height: 1.5555555555555556rem;
 }
 
-.c29.c29 {
+.c28.c28 {
   width: 2rem;
   height: 2rem;
 }
@@ -291,7 +286,7 @@ exports[`DocsLayout renders correctly 1`] = `
   margin-right: 1.9444444444444444rem;
 }
 
-.c32 {
+.c31 {
   position: fixed;
   transform: translateZ(0);
   display: block;
@@ -309,18 +304,18 @@ exports[`DocsLayout renders correctly 1`] = `
   transition: transform 150ms ease-out;
 }
 
-.c33 {
+.c32 {
   display: block;
   box-sizing: border-box;
   height: 100%;
   padding-top: 3.3333333333333335rem;
 }
 
-.c34 {
+.c33 {
   margin-bottom: 1.1111111111111112rem;
 }
 
-.c35 {
+.c34 {
   display: block;
   margin: 0.5555555555555556rem 2.2222222222222223rem;
   font-weight: normal;
@@ -330,7 +325,7 @@ exports[`DocsLayout renders correctly 1`] = `
   padding-left: 16.666666666666668rem;
 }
 
-.c37 {
+.c36 {
   max-width: 100%;
   margin: 0;
   padding: 5rem 3.3333333333333335rem 0 3.3333333333333335rem;
@@ -339,12 +334,12 @@ exports[`DocsLayout renders correctly 1`] = `
   transition: transform 150ms ease-out;
 }
 
-.c37 p,
-.c37 li {
+.c36 p,
+.c36 li {
   max-width: 80ch;
 }
 
-.c38 {
+.c37 {
   text-align: left;
   width: 100%;
   color: rgb(66, 66, 66);
@@ -354,17 +349,17 @@ exports[`DocsLayout renders correctly 1`] = `
 }
 
 @media (min-width: 62.5em) {
-  .c36 {
+  .c35 {
     border-radius: 0.16666666666666666rem;
   }
 
-  .c36:hover {
+  .c35:hover {
     background: rgba(20, 20, 20, 0.1);
   }
 }
 
 @media (max-width: 62.5em) {
-  .c21 {
+  .c20 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -468,7 +463,7 @@ exports[`DocsLayout renders correctly 1`] = `
 }
 
 @media (max-width: 62.5em) {
-  .c32 {
+  .c31 {
     transform: translateX(-16.666666666666668rem);
   }
 }
@@ -480,7 +475,7 @@ exports[`DocsLayout renders correctly 1`] = `
 }
 
 @media (max-width: 62.5em) {
-  .c37 {
+  .c36 {
     padding: 5.555555555555555rem 1.1111111111111112rem 1.6666666666666667rem 1.1111111111111112rem;
     transform: translateX(0);
   }
@@ -769,50 +764,6 @@ exports[`DocsLayout renders correctly 1`] = `
                               <nav
                                 className="c17 "
                               >
-                                <Styled(Link)
-                                  aria-label="Spectrum chat"
-                                  href="https://spectrum.chat/styled-components/"
-                                >
-                                  <Link
-                                    aria-label="Spectrum chat"
-                                    className="c18"
-                                    href="https://spectrum.chat/styled-components/"
-                                    unstyled={true}
-                                  >
-                                    <Link
-                                      href="https://spectrum.chat/styled-components/"
-                                    >
-                                      <a
-                                        aria-label="Spectrum chat"
-                                        className="c18"
-                                        href="https://spectrum.chat/styled-components/"
-                                      >
-                                        <Spectrum>
-                                          <styled.svg
-                                            height="14"
-                                            viewBox="0 0 15 15"
-                                            width="14"
-                                          >
-                                            <svg
-                                              className="c19"
-                                              height="14"
-                                              viewBox="0 0 15 15"
-                                              width="14"
-                                            >
-                                              <title>
-                                                spectrum
-                                              </title>
-                                              <path
-                                                d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                                                fill="#FFF"
-                                              />
-                                            </svg>
-                                          </styled.svg>
-                                        </Spectrum>
-                                      </a>
-                                    </Link>
-                                  </Link>
-                                </Styled(Link)>
                                 <Styled(Link)
                                   aria-label="Github"
                                   href="https://github.com/styled-components"
@@ -836,11 +787,11 @@ exports[`DocsLayout renders correctly 1`] = `
                                           height="18"
                                         >
                                           <DummyIcon
-                                            className="c20"
+                                            className="c19"
                                             height="18"
                                           >
                                             <svg
-                                              className="c20"
+                                              className="c19"
                                               height="18"
                                             />
                                           </DummyIcon>
@@ -872,11 +823,11 @@ exports[`DocsLayout renders correctly 1`] = `
                                           height="18"
                                         >
                                           <DummyIcon
-                                            className="c20"
+                                            className="c19"
                                             height="18"
                                           >
                                             <svg
-                                              className="c20"
+                                              className="c19"
                                               height="18"
                                             />
                                           </DummyIcon>
@@ -902,14 +853,14 @@ exports[`DocsLayout renders correctly 1`] = `
                 >
                   <styled.div>
                     <div
-                      className="c21"
+                      className="c20"
                     >
                       <styled.button
                         $active={false}
                         onClick={[Function]}
                       >
                         <button
-                          className="c22 c23"
+                          className="c21 c22"
                           onClick={[Function]}
                         >
                           <FoldIcon>
@@ -920,7 +871,7 @@ exports[`DocsLayout renders correctly 1`] = `
                               xmlnsXlink="http://www.w3.org/1999/xlink"
                             >
                               <svg
-                                className="c24"
+                                className="c23"
                                 height="14"
                                 width="17"
                                 xmlns="http://www.w3.org/2000/svg"
@@ -948,7 +899,7 @@ exports[`DocsLayout renders correctly 1`] = `
                       <Styled(Link)>
                         <Link
                           aria-label="styled components"
-                          className="c25"
+                          className="c24"
                           href="/"
                           unstyled={true}
                         >
@@ -957,14 +908,14 @@ exports[`DocsLayout renders correctly 1`] = `
                           >
                             <a
                               aria-label="styled components"
-                              className="c25"
+                              className="c24"
                               href="/"
                             >
                               <styled.div
                                 $compact={true}
                               >
                                 <div
-                                  className="c26"
+                                  className="c25"
                                 />
                               </styled.div>
                             </a>
@@ -976,7 +927,7 @@ exports[`DocsLayout renders correctly 1`] = `
                           onClick={[Function]}
                         >
                           <button
-                            className="c22 c23"
+                            className="c21 c22"
                             onClick={[Function]}
                           >
                             <styled.div
@@ -984,11 +935,11 @@ exports[`DocsLayout renders correctly 1`] = `
                               size={28}
                             >
                               <DummyIcon
-                                className="c27"
+                                className="c26"
                                 size={28}
                               >
                                 <svg
-                                  className="c27"
+                                  className="c26"
                                   size={28}
                                 />
                               </DummyIcon>
@@ -1000,20 +951,20 @@ exports[`DocsLayout renders correctly 1`] = `
                           onClick={[Function]}
                         >
                           <button
-                            className="c22 c23"
+                            className="c21 c22"
                             onClick={[Function]}
                           >
                             <styled.div
                               $shouldRotate={false}
                             >
                               <div
-                                className="c28"
+                                className="c27"
                               >
                                 <styled.div
                                   size={36}
                                 >
                                   <div
-                                    className="c29"
+                                    className="c28"
                                     size={36}
                                   />
                                 </styled.div>
@@ -1026,7 +977,7 @@ exports[`DocsLayout renders correctly 1`] = `
                         $isOpen={false}
                       >
                         <div
-                          className="c30"
+                          className="c29"
                         >
                           <NavLinks>
                             <styled.nav>
@@ -1133,57 +1084,13 @@ exports[`DocsLayout renders correctly 1`] = `
                           </NavLinks>
                           <styled.div>
                             <div
-                              className="c31"
+                              className="c30"
                             >
                               <Social>
                                 <styled.nav>
                                   <nav
                                     className="c17"
                                   >
-                                    <Styled(Link)
-                                      aria-label="Spectrum chat"
-                                      href="https://spectrum.chat/styled-components/"
-                                    >
-                                      <Link
-                                        aria-label="Spectrum chat"
-                                        className="c18"
-                                        href="https://spectrum.chat/styled-components/"
-                                        unstyled={true}
-                                      >
-                                        <Link
-                                          href="https://spectrum.chat/styled-components/"
-                                        >
-                                          <a
-                                            aria-label="Spectrum chat"
-                                            className="c18"
-                                            href="https://spectrum.chat/styled-components/"
-                                          >
-                                            <Spectrum>
-                                              <styled.svg
-                                                height="14"
-                                                viewBox="0 0 15 15"
-                                                width="14"
-                                              >
-                                                <svg
-                                                  className="c19"
-                                                  height="14"
-                                                  viewBox="0 0 15 15"
-                                                  width="14"
-                                                >
-                                                  <title>
-                                                    spectrum
-                                                  </title>
-                                                  <path
-                                                    d="M0 6.5V1c0-.6.4-1 1-1 9 .3 13.7 5 14 14 0 .6-.4 1-1 1H8.5c-.6 0-1-.4-1-1-.3-4.4-2-6.2-6.5-6.5-.6 0-1-.4-1-1z"
-                                                    fill="#FFF"
-                                                  />
-                                                </svg>
-                                              </styled.svg>
-                                            </Spectrum>
-                                          </a>
-                                        </Link>
-                                      </Link>
-                                    </Styled(Link)>
                                     <Styled(Link)
                                       aria-label="Github"
                                       href="https://github.com/styled-components"
@@ -1207,11 +1114,11 @@ exports[`DocsLayout renders correctly 1`] = `
                                               height="18"
                                             >
                                               <DummyIcon
-                                                className="c20"
+                                                className="c19"
                                                 height="18"
                                               >
                                                 <svg
-                                                  className="c20"
+                                                  className="c19"
                                                   height="18"
                                                 />
                                               </DummyIcon>
@@ -1243,11 +1150,11 @@ exports[`DocsLayout renders correctly 1`] = `
                                               height="18"
                                             >
                                               <DummyIcon
-                                                className="c20"
+                                                className="c19"
                                                 height="18"
                                               >
                                                 <svg
-                                                  className="c20"
+                                                  className="c19"
                                                   height="18"
                                                 />
                                               </DummyIcon>
@@ -1276,7 +1183,7 @@ exports[`DocsLayout renders correctly 1`] = `
               $isFolded={true}
             >
               <nav
-                className="c32"
+                className="c31"
               >
                 <withRouter(Unknown)
                   onRouteChange={[Function]}
@@ -1287,7 +1194,7 @@ exports[`DocsLayout renders correctly 1`] = `
                   >
                     <styled.div>
                       <div
-                        className="c33"
+                        className="c32"
                       >
                         <Folder
                           isOpenDefault={null}
@@ -1297,14 +1204,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1317,7 +1224,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/basics"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/basics"
                                         >
                                           Basics
@@ -1338,14 +1245,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1358,7 +1265,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/advanced"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/advanced"
                                         >
                                           Advanced
@@ -1379,14 +1286,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1399,7 +1306,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/api"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/api"
                                         >
                                           API Reference
@@ -1420,14 +1327,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1440,7 +1347,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/tooling"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/tooling"
                                         >
                                           Tooling
@@ -1461,14 +1368,14 @@ exports[`DocsLayout renders correctly 1`] = `
                             onClick={[Function]}
                           >
                             <div
-                              className="c34"
+                              className="c33"
                               onClick={[Function]}
                             >
                               <styled.h4
                                 onClick={[Function]}
                               >
                                 <h4
-                                  className="c35"
+                                  className="c34"
                                   onClick={[Function]}
                                 >
                                   <Link
@@ -1481,7 +1388,7 @@ exports[`DocsLayout renders correctly 1`] = `
                                         href="/docs/faqs"
                                       >
                                         <a
-                                          className="c36"
+                                          className="c35"
                                           href="/docs/faqs"
                                         >
                                           FAQs
@@ -1508,12 +1415,12 @@ exports[`DocsLayout renders correctly 1`] = `
         data-e2e-id="content"
       >
         <div
-          className="c37"
+          className="c36"
           data-e2e-id="content"
         >
           <styled.h1>
             <h1
-              className="c38"
+              className="c37"
             />
           </styled.h1>
         </div>
diff --git a/utils/media.js b/utils/media.js
deleted file mode 100644
index 73db79e54..000000000
--- a/utils/media.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { css } from 'styled-components';
-
-export const mobile = inner => css`
-  @media (max-width: ${1000 / 16}em) {
-    ${inner};
-  }
-`;
-
-export const phone = inner => css`
-  @media (max-width: ${650 / 16}em) {
-    ${inner};
-  }
-`;
diff --git a/utils/media.ts b/utils/media.ts
new file mode 100644
index 000000000..adcd9fc5d
--- /dev/null
+++ b/utils/media.ts
@@ -0,0 +1,15 @@
+type CSSUtilType = ReturnType<typeof css>;
+
+import { css } from 'styled-components';
+
+export const mobile = (inner: CSSUtilType): CSSUtilType => css`
+  @media (max-width: ${1000 / 16}em) {
+    ${inner};
+  }
+`;
+
+export const phone = (inner: CSSUtilType): CSSUtilType => css`
+  @media (max-width: ${650 / 16}em) {
+    ${inner};
+  }
+`;
diff --git a/utils/rem.js b/utils/rem.ts
similarity index 57%
rename from utils/rem.js
rename to utils/rem.ts
index 4f262cb9d..fd92582e5 100644
--- a/utils/rem.js
+++ b/utils/rem.ts
@@ -1,5 +1,5 @@
 import rem from 'polished/lib/helpers/rem';
 
-const _rem = size => rem(size, '18px');
+const _rem = (size: number) => rem(size, '18px');
 
 export default _rem;