diff --git a/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx
index 0539265dd..7874932d6 100644
--- a/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx
+++ b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx
@@ -16,12 +16,18 @@ Squashy armchairs dirt on your nose brass scales crush the Sopophorous bean with
 
 Half-giant jinxes peg-leg gillywater broken glasses large black dog Great Hall. Nearly-Headless Nick now string them together, and answer me this, which creature would you be unwilling to kiss? Poltergeist sticking charm, troll umbrella stand flying cars golden locket Lily Potter. Pumpkin juice Trevor wave your wand out glass orbs, a Grim knitted hats. Stan Shunpike doe patronus, suck his soul Muggle-Born large order of drills the trace. Bred in captivity fell through the veil, quaffle blue flame ickle diddykins Aragog. Yer a wizard, Harry Doxycide the woes of Mrs. Weasley Goblet of Fire.
 
+## This is a secondary heading
+
 Exume lumos protego leviosa. Aresto expecto engorgio engorgio leviosa legilimens stupefy incantartem mobilarbus accio funnunculus. Serpensortia locomotor incarcerous aguamenti colloportus. Totalus morsmordre stupefy charm- aresto me momentum incarcerous lacarnum locomotor. Revelio relashio veritaserum impedimenta expecto quietus. Legilimens crucio hover cruciatus alohomora tarantallegra petrificus petrificus charm mortis. Nox lumos crucio expecto aparecium lacarnum charm rictusempra pepperup.
 
 ---
 
 Sectumsempra aresto exume reducio momentum tarantallegra patronum. Totalus amortentia momentum mortis quietus evanesco. Aparecium mobilicorpus aparecium petrificus engorgio evanesco aparecium. Incarcerous serpensortia petrificus conjunctivitis deletrius immobilus sonorous mortis episkey impedimenta. Immobilus lacarnum totalus protean. Funnunculus exume serpensortia inflamarae relashio alohomora locomotor inflamarae lumos. Skele-gro totalus.
 
+## Another secondary heading
+
+### Third heading level
+
 Legilimens colloportus aparecium aresto aparecium leviosa unctuous inflamarae. Quietus mobilarbus incarcerous stupefy confundus leviosa. Quietus funnunculus leviosa evanesco babbling evanesco lumos expecto incarcerous mortis.
 
 Reparo reparo alohomora vow. Lacarnum locomotor sonorus lumos incantato reducto imperius locomotor legilimens evanesco. Locomotor patronum stupefy lumos scourgify lacarnum. Portus charm inflamarae leviosa stupefy. Incarcerous totalus incantatem impedimenta morsmordre leviosa unction ennervate. Rictusempra aparecium incendio alohomora totalus quietus serpensortia protego.
diff --git a/examples/specimens/src/components/layout.js b/examples/specimens/src/components/layout.js
index cb54020b9..98b9645df 100644
--- a/examples/specimens/src/components/layout.js
+++ b/examples/specimens/src/components/layout.js
@@ -48,6 +48,10 @@ const Layout = ({ children }) => {
             color: #fff;
             background-color: #3490dc;
           }
+          html {
+            font-size: 16px;
+            -webkit-text-size-adjust: 100%;
+          }
           body {
             border: 0;
             margin: 0;
diff --git a/examples/specimens/src/pages/index.mdx b/examples/specimens/src/pages/index.mdx
index 803a43bb1..e1aa4f781 100644
--- a/examples/specimens/src/pages/index.mdx
+++ b/examples/specimens/src/pages/index.mdx
@@ -59,7 +59,7 @@ View the [**theme's README**](https://github.com/LekoArts/gatsby-themes/tree/mas
 
 ### Alert
 
-Variants: `alerts.success`, `alerts.hint`, `alerts.warning`, `alerts.info`, `alerts.danger`,
+Variants: `alerts.success`, `alerts.hint`, `alerts.warning`, `alerts.info`, `alerts.danger`
 
 Available props:
 
diff --git a/examples/status-dashboard/src/pages/index.jsx b/examples/status-dashboard/src/pages/index.jsx
index a29c48eff..a9aa668c8 100644
--- a/examples/status-dashboard/src/pages/index.jsx
+++ b/examples/status-dashboard/src/pages/index.jsx
@@ -29,6 +29,9 @@ const Index = ({
             color: #fff;
             background-color: #3490dc;
           }
+          html {
+            -webkit-text-size-adjust: 100%;
+          }
           body {
             border: 0;
             margin: 0;
@@ -81,6 +84,7 @@ const Index = ({
         {siteDescription}
       </p>
       <Info />
+      <div css={css({ marginTop: `1rem` })} />
       <Grid />
       <footer
         css={css({
@@ -93,7 +97,7 @@ const Index = ({
       >
         Copyright &copy; {new Date().getFullYear()}. All rights reserved.
         <br />
-        <div css={css({ display: `flex`, justifyContent: `center`, alignItems: `center`, marginTop: `1.5rem` })}>
+        <div css={css({ display: `flex`, justifyContent: `center`, alignItems: `center`, marginTop: `1rem` })}>
           <img width="30" height="30" src="https://img.lekoarts.de/gatsby/logo_w30.png" alt="LekoArts Logo" />
           {` `}
           <a
diff --git a/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx b/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx
index 2ace3f23c..6a8a8dfc9 100644
--- a/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx
+++ b/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx
@@ -12,6 +12,9 @@ const Layout = ({ children }) => (
         *::after {
           box-sizing: border-box;
         }
+        html {
+          -webkit-text-size-adjust: 100%;
+        }
         body {
           border: 0;
           margin: 0;
diff --git a/themes/gatsby-theme-cara/src/components/layout.tsx b/themes/gatsby-theme-cara/src/components/layout.tsx
index 870c1b479..119ef09a9 100644
--- a/themes/gatsby-theme-cara/src/components/layout.tsx
+++ b/themes/gatsby-theme-cara/src/components/layout.tsx
@@ -21,6 +21,17 @@ const Layout = ({ children, className }: LayoutProps) => (
         },
         html: {
           fontSize: `18px`,
+          WebkitTextSizeAdjust: `100%`,
+        },
+        img: {
+          borderStyle: `none`,
+        },
+        pre: {
+          fontFamily: `monospace`,
+          fontSize: `1em`,
+        },
+        "[hidden]": {
+          display: `none`,
         },
         "::selection": {
           backgroundColor: theme.colors.primary,
diff --git a/themes/gatsby-theme-emilia/src/components/layout.tsx b/themes/gatsby-theme-emilia/src/components/layout.tsx
index caf615ba5..9c5869f78 100644
--- a/themes/gatsby-theme-emilia/src/components/layout.tsx
+++ b/themes/gatsby-theme-emilia/src/components/layout.tsx
@@ -14,6 +14,17 @@ const Layout = ({ children }: LayoutProps) => (
         },
         html: {
           fontSize: `18px`,
+          WebkitTextSizeAdjust: `100%`,
+        },
+        img: {
+          borderStyle: `none`,
+        },
+        pre: {
+          fontFamily: `monospace`,
+          fontSize: `1em`,
+        },
+        "[hidden]": {
+          display: `none`,
         },
         "::selection": {
           background: theme.colors.text,
diff --git a/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js
index a812e40a4..ca7271670 100644
--- a/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js
+++ b/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js
@@ -64,6 +64,8 @@ export default merge(tailwind, {
       padding: 0,
       boxSizing: `border-box`,
       textRendering: `optimizeLegibility`,
+      WebkitFontSmoothing: `antialiased`,
+      MozOsxFontSmoothing: `grayscale`,
     },
     a: {
       color: `primary`,
diff --git a/themes/gatsby-theme-emma/src/components/layout.tsx b/themes/gatsby-theme-emma/src/components/layout.tsx
index 3a67e0663..1805acda1 100644
--- a/themes/gatsby-theme-emma/src/components/layout.tsx
+++ b/themes/gatsby-theme-emma/src/components/layout.tsx
@@ -20,6 +20,19 @@ const Layout = ({ children, className }: LayoutProps) => {
           "*": {
             boxSizing: `inherit`,
           },
+          html: {
+            WebkitTextSizeAdjust: `100%`,
+          },
+          img: {
+            borderStyle: `none`,
+          },
+          pre: {
+            fontFamily: `monospace`,
+            fontSize: `1em`,
+          },
+          "[hidden]": {
+            display: `none`,
+          },
           "::selection": {
             backgroundColor: theme.colors.text,
             color: theme.colors.background,
diff --git a/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js
index 4557990ee..7c29bae6f 100644
--- a/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js
+++ b/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js
@@ -48,6 +48,8 @@ export default merge(tailwind, {
       padding: 0,
       boxSizing: `border-box`,
       textRendering: `optimizeLegibility`,
+      WebkitFontSmoothing: `antialiased`,
+      MozOsxFontSmoothing: `grayscale`,
     },
     p: {
       fontSize: [1, 2],
diff --git a/themes/gatsby-theme-graphql-playground/src/components/layout.tsx b/themes/gatsby-theme-graphql-playground/src/components/layout.tsx
index 9381eb683..5b14a1b1a 100644
--- a/themes/gatsby-theme-graphql-playground/src/components/layout.tsx
+++ b/themes/gatsby-theme-graphql-playground/src/components/layout.tsx
@@ -17,6 +17,19 @@ const Layout = ({ children, title }: LayoutProps) => (
         "*": {
           boxSizing: `inherit`,
         },
+        html: {
+          WebkitTextSizeAdjust: `100%`,
+        },
+        img: {
+          borderStyle: `none`,
+        },
+        pre: {
+          fontFamily: `monospace`,
+          fontSize: `1em`,
+        },
+        "[hidden]": {
+          display: `none`,
+        },
         a: {
           transition: `all 0.3s ease-in-out`,
         },
diff --git a/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js
index 4b00b7d56..5731534dc 100644
--- a/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js
+++ b/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js
@@ -56,6 +56,8 @@ const theme = merge(tailwind, {
       padding: 0,
       boxSizing: `border-box`,
       textRendering: `optimizeLegibility`,
+      WebkitFontSmoothing: `antialiased`,
+      MozOsxFontSmoothing: `grayscale`,
     },
     pre: {
       ...nightOwl,
diff --git a/themes/gatsby-theme-minimal-blog/src/components/layout.tsx b/themes/gatsby-theme-minimal-blog/src/components/layout.tsx
index 16eb0bd8d..9bd22602e 100644
--- a/themes/gatsby-theme-minimal-blog/src/components/layout.tsx
+++ b/themes/gatsby-theme-minimal-blog/src/components/layout.tsx
@@ -19,7 +19,17 @@ const Layout = ({ children, className }: LayoutProps) => (
           boxSizing: `inherit`,
         },
         html: {
-          "-webkit-text-size-adjust": `100%`,
+          WebkitTextSizeAdjust: `100%`,
+        },
+        img: {
+          borderStyle: `none`,
+        },
+        pre: {
+          fontFamily: `monospace`,
+          fontSize: `1em`,
+        },
+        "[hidden]": {
+          display: `none`,
         },
         "::selection": {
           backgroundColor: theme.colors.text,
diff --git a/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js
index c178e1720..985c8a860 100644
--- a/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js
+++ b/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js
@@ -34,6 +34,8 @@ const theme = merge(tailwind, {
       padding: 0,
       boxSizing: `border-box`,
       textRendering: `optimizeLegibility`,
+      WebkitFontSmoothing: `antialiased`,
+      MozOsxFontSmoothing: `grayscale`,
     },
     p: {
       fontSize: [1, 1, 2],
@@ -63,25 +65,27 @@ const theme = merge(tailwind, {
     h1: {
       variant: `text.heading`,
       fontSize: [5, 6, 7],
-      mt: 2,
+      mt: 4,
     },
     h2: {
       variant: `text.heading`,
       fontSize: [4, 5, 6],
-      mt: 2,
+      mt: 4,
     },
     h3: {
       variant: `text.heading`,
       fontSize: [3, 4, 5],
-      mt: 3,
+      mt: 4,
     },
     h4: {
       variant: `text.heading`,
       fontSize: [2, 3, 4],
+      mt: 3,
     },
     h5: {
       variant: `text.heading`,
       fontSize: [1, 2, 3],
+      mt: 3,
     },
     h6: {
       variant: `text.heading`,
diff --git a/themes/gatsby-theme-minimal-blog/src/styles/code.ts b/themes/gatsby-theme-minimal-blog/src/styles/code.ts
index dc03cee44..00f88c9cd 100644
--- a/themes/gatsby-theme-minimal-blog/src/styles/code.ts
+++ b/themes/gatsby-theme-minimal-blog/src/styles/code.ts
@@ -12,7 +12,7 @@ const code = {
     backgroundColor: tint(`primary`, 0.7),
   },
   ".prism-code": {
-    fontSize: 1,
+    fontSize: [1, 1, 2],
     padding: 3,
     webkitOverflowScrolling: `touch`,
     backgroundColor: `transparent`,
@@ -30,14 +30,14 @@ const code = {
     display: `inline-block`,
   },
   "p > code, li > code": {
-    bg: `rgb(1, 22, 39)`,
-    color: `rgb(214, 222, 235)`,
+    bg: `gray.2`,
+    color: `gray.8`,
     px: 2,
     py: 1,
     borderRadius: `2px`,
   },
   ".gatsby-highlight": {
-    fontSize: 1,
+    fontSize: [1, 1, 2],
     position: `relative`,
     webkitOverflowScrolling: `touch`,
     bg: `rgb(1, 22, 39)`,
@@ -174,6 +174,7 @@ const code = {
   },
   "[data-name='live-preview'], [data-name='live-editor']": {
     mx: [0, 0, 0, -3],
+    fontSize: [1, 1, 2],
   },
   ".token-line": {
     pr: 3,
diff --git a/themes/gatsby-theme-status-dashboard/src/components/info.tsx b/themes/gatsby-theme-status-dashboard/src/components/info.tsx
index a53bec756..73a47158c 100644
--- a/themes/gatsby-theme-status-dashboard/src/components/info.tsx
+++ b/themes/gatsby-theme-status-dashboard/src/components/info.tsx
@@ -7,7 +7,7 @@ import useNetlify from "../hooks/use-netlify"
 import useCircleCi from "../hooks/use-circle-ci"
 
 const Item = ({ input, icon }: { input: string; icon: React.ReactNode }) => (
-  <Flex sx={{ mr: 4, mb: 4, alignItems: `center` }}>
+  <Flex sx={{ mr: [3, 3, 4], mb: [3, 3, 4], alignItems: `center` }}>
     {icon}
     <div
       sx={{
diff --git a/themes/gatsby-theme-status-dashboard/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-status-dashboard/src/gatsby-plugin-theme-ui/index.js
index 5f2f6843e..404e20907 100644
--- a/themes/gatsby-theme-status-dashboard/src/gatsby-plugin-theme-ui/index.js
+++ b/themes/gatsby-theme-status-dashboard/src/gatsby-plugin-theme-ui/index.js
@@ -38,7 +38,7 @@ export default merge(tailwind, {
     },
     icon: {
       svg: {
-        width: [6, 6, 8],
+        width: 8,
         borderRadius: `full`,
         p: 2,
         background: `white`,