diff --git a/src/components/link.js b/src/components/link.js
new file mode 100644
index 0000000..24e2099
--- /dev/null
+++ b/src/components/link.js
@@ -0,0 +1,18 @@
+import React from "react";
+import styled from "styled-components";
+import { Link as GatsbyLink } from "gatsby";
+
+const StyledLink = styled.a`
+  font-size: ${props => `var(--font-size-${props.size})`};
+  color: ${props => `var(--theme-color-${props.color})`};
+  text-decoration: none;
+`;
+
+export default function Link({ children, to, ...other }) {
+  const isInternal = /^\/(?!\/)/.test(to);
+  return (
+    <StyledLink href={to} as={isInternal ? GatsbyLink : "a"} {...other}>
+      {children}
+    </StyledLink>
+  );
+}