diff --git a/package.json b/package.json
index 65c0c83b7..64710d60b 100644
--- a/package.json
+++ b/package.json
@@ -109,6 +109,7 @@
     "@stripe/react-stripe-js": "~2.4.0",
     "@stripe/stripe-js": "~2.2.2",
     "@styled-system/prop-types": "~5.1.5",
+    "@techstack/styled-system": "~1.0.341",
     "@tippyjs/react": "~4.2.6",
     "@vercel/analytics": "~1.1.1",
     "beauty-error": "~1.2.18",
@@ -152,7 +153,7 @@
     "react-twitter-widgets": "~1.11.0",
     "remark-slug": "~7.0.1",
     "sass": "~1.69.6",
-    "styled-components": "5",
+    "styled-components": "~6.1.6",
     "styled-is": "~1.3.0",
     "styled-system": "~5.1.5",
     "swr": "~2.2.4",
diff --git a/src/components/elements/Box.js b/src/components/elements/Box.js
index bb54d861c..a8b60fcb0 100644
--- a/src/components/elements/Box.js
+++ b/src/components/elements/Box.js
@@ -1,63 +1,21 @@
 import {
-  compose,
-  space,
   color,
-  borders,
-  lineHeight,
-  width,
-  flex,
-  order,
-  alignSelf,
-  position,
-  fontSize,
+  space,
   variant,
-  textAlign,
-  maxWidth,
-  boxShadow,
-  display,
-  height
-} from 'styled-system'
+  border,
+  position,
+  layout
+} from '@techstack/styled-system'
 
 import styled from 'styled-components'
-import propTypes from '@styled-system/prop-types'
 
 const Box = styled('div')(
-  compose(
-    space,
-    textAlign,
-    maxWidth,
-    boxShadow,
-    display,
-    borders,
-    lineHeight,
-    height,
-    width,
-    fontSize,
-    color,
-    flex,
-    order,
-    alignSelf,
-    position,
-    variant({ key: 'boxStyles' })
-  )
+  border,
+  color,
+  layout,
+  position,
+  space,
+  variant({ key: 'button' })
 )
 
-Box.propTypes = {
-  ...propTypes.space,
-  ...propTypes.textAlign,
-  ...propTypes.maxWidth,
-  ...propTypes.boxShadow,
-  ...propTypes.border,
-  ...propTypes.display,
-  ...propTypes.width,
-  ...propTypes.height,
-  ...propTypes.fontSize,
-  ...propTypes.color,
-  ...propTypes.flex,
-  ...propTypes.order,
-  ...propTypes.alignSelf,
-  ...propTypes.position,
-  ...propTypes.lineHeight
-}
-
 export default Box
diff --git a/src/components/elements/Button/ButtonBase.js b/src/components/elements/Button/ButtonBase.js
index d87437016..36f72bcc3 100644
--- a/src/components/elements/Button/ButtonBase.js
+++ b/src/components/elements/Button/ButtonBase.js
@@ -1,37 +1,27 @@
-import { compose, borders, buttonStyle } from 'styled-system'
-import propTypes from '@styled-system/prop-types'
-import { transition } from 'theme'
 import styled from 'styled-components'
+import { transition } from 'theme'
 import Text from '../Text'
 
-const Button = styled(Text)(
-  {
-    transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
-    appearance: 'none',
-    display: 'inline-block',
-    textAlign: 'center',
-    lineHeight: 16 / 14,
-    textDecoration: 'none',
-    verticalAlign: 'middle',
-    WebkitFontSmoothing: 'antialiased',
-    whiteSpace: 'nowrap',
-    outline: 0,
-    '&:hover': {
-      cursor: 'pointer'
-    }
-  },
-  compose(borders, buttonStyle)
-)
-
-Button.propTypes = {
-  ...propTypes.Text,
-  ...propTypes.border
-}
+const Button = styled(Text)({
+  transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
+  appearance: 'none',
+  display: 'inline-block',
+  textAlign: 'center',
+  lineHeight: 16 / 14,
+  textDecoration: 'none',
+  verticalAlign: 'middle',
+  WebkitFontSmoothing: 'antialiased',
+  whiteSpace: 'nowrap',
+  outline: 0,
+  '&:hover': {
+    cursor: 'pointer'
+  }
+})
 
 Button.defaultProps = {
   as: 'button',
   fontFamily: 'sans',
-  fontSize: '1',
+  fontSize: 1,
   fontWeight: 'bold',
   px: 3,
   py: 2,
diff --git a/src/components/elements/Caps.js b/src/components/elements/Caps.js
index e3df1a261..27df003fc 100644
--- a/src/components/elements/Caps.js
+++ b/src/components/elements/Caps.js
@@ -1,16 +1,11 @@
 import styled from 'styled-components'
-import { letterSpacing } from 'styled-system'
 
 import Text from './Text'
 
-const Caps = styled(Text)(
-  {
-    textTransform: 'uppercase'
-  },
-  letterSpacing
-)
+const Caps = styled(Text)``
 
 Caps.defaultProps = {
+  textTransform: 'uppercase',
   fontSize: 1,
   letterSpacing: 2
 }
diff --git a/src/components/elements/Flex.js b/src/components/elements/Flex.js
index e063349d6..aad285215 100644
--- a/src/components/elements/Flex.js
+++ b/src/components/elements/Flex.js
@@ -1,15 +1,6 @@
-import {
-  compose,
-  flexWrap,
-  flexDirection,
-  alignItems,
-  justifyContent,
-  alignContent,
-  display
-} from 'styled-system'
+import { flexbox } from '@techstack/styled-system'
 
 import styled from 'styled-components'
-import propTypes from '@styled-system/prop-types'
 
 import Box from './Box'
 
@@ -17,24 +8,7 @@ const Flex = styled(Box)(
   {
     display: 'flex'
   },
-  compose(
-    display,
-    alignContent,
-    alignItems,
-    flexDirection,
-    flexWrap,
-    justifyContent
-  )
+  flexbox
 )
 
-Flex.propTypes = {
-  ...Box.propTypes,
-  ...propTypes.alignContent,
-  ...propTypes.alignItems,
-  ...propTypes.flexDirection,
-  ...propTypes.flexWrap,
-  ...propTypes.justifyContent,
-  ...propTypes.display
-}
-
 export default Flex
diff --git a/src/components/elements/Image/Image.js b/src/components/elements/Image/Image.js
index c2dfa608b..b5a9840af 100644
--- a/src/components/elements/Image/Image.js
+++ b/src/components/elements/Image/Image.js
@@ -1,47 +1,26 @@
-import propTypes from '@styled-system/prop-types'
 import styled from 'styled-components'
 import { withLazy } from 'helpers/hoc'
 
 import {
-  compose,
   space,
   color,
-  maxWidth,
-  width,
-  height,
-  display,
-  textAlign,
-  borderRadius
-} from 'styled-system'
+  layout,
+  typography,
+  border
+} from '@techstack/styled-system'
 
 const Image = styled('img')(
   {
     display: 'block',
     maxWidth: '100%'
   },
-  compose(
-    space,
-    color,
-    width,
-    height,
-    maxWidth,
-    display,
-    textAlign,
-    borderRadius
-  )
+  space,
+  color,
+  layout,
+  typography,
+  border
 )
 
-Image.propTypes = {
-  ...propTypes.space,
-  ...propTypes.color,
-  ...propTypes.width,
-  ...propTypes.height,
-  ...propTypes.maxWidth,
-  ...propTypes.display,
-  ...propTypes.textAlign,
-  ...propTypes.borderRadius
-}
-
 Image.defaultProps = {
   decoding: 'async',
   loading: 'lazy'
diff --git a/src/components/elements/Svg.js b/src/components/elements/Svg.js
index 62edecdc4..9f9db44be 100644
--- a/src/components/elements/Svg.js
+++ b/src/components/elements/Svg.js
@@ -1,31 +1,15 @@
-import { compose, color, space, height, width, style } from 'styled-system'
-import propTypes from '@styled-system/prop-types'
+import { compose, color, space, layout, system } from '@techstack/styled-system'
 import styled from 'styled-components'
 
-const transform = style({
+const transform = system({
   prop: 'transform',
   cssProperty: 'transform'
 })
 
-const Svg = styled('svg')(
-  compose(
-    color,
-    space,
-    height,
-    width,
-    transform
-  )
-)
+const Svg = styled('svg')(color, space, layout, transform)
 
 Svg.defaultProps = {
   fill: 'currentColor'
 }
 
-Svg.propTypes = {
-  ...propTypes.space,
-  ...propTypes.width,
-  ...propTypes.height,
-  ...propTypes.color
-}
-
 export default Svg
diff --git a/src/components/elements/Text.js b/src/components/elements/Text.js
index 7237f2b78..ab83e61e0 100644
--- a/src/components/elements/Text.js
+++ b/src/components/elements/Text.js
@@ -1,26 +1,9 @@
-import {
-  compose,
-  variant,
-  fontFamily,
-  fontWeight,
-  letterSpacing
-} from 'styled-system'
-
+import { variant, typography } from '@techstack/styled-system'
 import styled from 'styled-components'
-import propTypes from '@styled-system/prop-types'
 
 import Box from './Box'
 
-const Text = styled(Box)(
-  compose(fontFamily, fontWeight, letterSpacing, variant({ key: 'textStyles' }))
-)
-
-Text.propTypes = {
-  ...Box.propTypes,
-  ...propTypes.fontFamily,
-  ...propTypes.fontWeight,
-  ...propTypes.letterSpacing
-}
+const Text = styled(Box)(typography, variant({ key: 'text' }))
 
 Text.defaultProps = {
   fontWeight: 'normal',
diff --git a/src/components/patterns/Toolbar/NavLink.js b/src/components/patterns/Toolbar/NavLink.js
index 9ea087dc0..c854fce7d 100644
--- a/src/components/patterns/Toolbar/NavLink.js
+++ b/src/components/patterns/Toolbar/NavLink.js
@@ -21,7 +21,6 @@ const style = css`
 
 const NavLink = styled(Caps)(
   {
-    bg: 'transparent',
     display: 'inline-flex',
     alignItems: 'center',
     alignSelf: 'stretch',
@@ -36,9 +35,10 @@ const NavLink = styled(Caps)(
 )
 
 NavLink.defaultProps = {
-  pl: 3,
-  fontSize: 0,
-  as: 'div'
+  // TODO: this seems like a bug
+  // https://github.com/The-Code-Monkey/styled-system/issues/640
+  fontSize: [0, 0, 0, 0],
+  pl: 3
 }
 
 export default withAnalytics(withLink(NavLink))
diff --git a/src/theme/index.js b/src/theme/index.js
index d8db7b18e..f0c03a295 100644
--- a/src/theme/index.js
+++ b/src/theme/index.js
@@ -225,8 +225,7 @@ export const colors = Object.assign({}, flattened, {
 
 export const fonts = {
   sans: "'Inter', sans-serif",
-  mono:
-    '"Operator Mono", "Fira Code", "SF Mono", "Roboto Mono", Menlo, monospace'
+  mono: '"Operator Mono", "Fira Code", "SF Mono", "Roboto Mono", Menlo, monospace'
 }
 
 export const cx = key => colors[key] || key
@@ -249,24 +248,7 @@ export const shadows = shadowOffsets.map(
 export const lineHeights = ['normal', 1.25, 1.5, 1.6, 1.65]
 
 export const sizes = [
-  1,
-  2,
-  4,
-  8,
-  12,
-  16,
-  20,
-  24,
-  28,
-  32,
-  36,
-  40,
-  44,
-  48,
-  64,
-  72,
-  82,
-  96
+  1, 2, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 72, 82, 96
 ].map(toEm)
 
 export const speed = {
@@ -301,13 +283,12 @@ export const textGradient = {
   }
 }
 
-export const textStyles = {
-  gradient: textGradient
-}
-
-export const boxStyles = {
-  gradient: {
-    backgroundImage: gradient
+export const variants = {
+  text: {
+    gradient: textGradient
+  },
+  button: {
+    gradient
   }
 }
 
@@ -321,7 +302,6 @@ export const letterSpacings = [0, -0.025, 0.025, 0.1, 0.25].map(toEm)
 
 const theme = {
   borders,
-  boxStyles,
   breakpoints,
   colors,
   fonts,
@@ -337,9 +317,9 @@ const theme = {
   sizes,
   space,
   speed,
-  textStyles,
   timings,
-  transition
+  transition,
+  variants
 }
 
 export default theme