diff --git a/.storybook/preview.js b/.storybook/preview.js
index 6a4dabd..577de29 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,3 +1,10 @@
+import { roleypolyTheme } from './theme';
+import { mdxComponents } from '../src/design-system/atoms/typography/mdx';
+
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    docs: {
+        theme: roleypolyTheme,
+        components: mdxComponents,
+    },
 };
diff --git a/.storybook/theme.js b/.storybook/theme.js
index 09d1e77..54c6d43 100644
--- a/.storybook/theme.js
+++ b/.storybook/theme.js
@@ -9,7 +9,7 @@ export const roleypolyTheme = create({
 
     // UI
     appBg: palette.taupe300,
-    appContentBg: palette.taupe300,
+    appContentBg: palette.taupe200,
     appBorderColor: palette.taupe100,
     appBorderRadius: 0,
 
diff --git a/src/design-system/BUILD.bazel b/src/design-system/BUILD.bazel
deleted file mode 100644
index bfd29b8..0000000
--- a/src/design-system/BUILD.bazel
+++ /dev/null
@@ -1,8 +0,0 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_library")
-
-package(default_visibility = ["//visibility:public"])
-
-ts_library(
-    name = "lib",
-    srcs = glob(["*.ts"]),
-)
diff --git a/src/design-system/Intro.stories.mdx b/src/design-system/Intro.stories.mdx
new file mode 100644
index 0000000..6c3c409
--- /dev/null
+++ b/src/design-system/Intro.stories.mdx
@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Logotype } from 'roleypoly/src/design-system/atoms/branding';
+import { Space } from 'roleypoly/src/design-system/atoms/space';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+
+<Meta title="Roleypoly Design System" />
+
+<Logotype height="4em" circleFill={palette.taupe100} />
+<Space />
+
+# Rapid UI
+
+#### Roleypoly Design System
+
+This is a tool for Roleypoly developers to design and show off UI
+components as they build them.
+
+If you're interested in helping build Roleypoly, [please visit the GitHub project.][roleypoly]
+
+All components here follow the [Atomic Design System][atomic], and might be used in any number of Roleypoly UI systems, not limited to
+just the end user web application.
+
+[roleypoly]: https://github.com/roleypoly/roleypoly
+[atomic]: https://bradfrost.com/blog/post/atomic-web-design/
diff --git a/src/design-system/README.md b/src/design-system/README.md
index baf6f95..11498d0 100644
--- a/src/design-system/README.md
+++ b/src/design-system/README.md
@@ -8,7 +8,7 @@ The Roleypoly Design System (rapid) is an atomic design system to help rapidly a
 
 **Please follow hermeticity considerations.**
 
-This package cannot reference RPC types, as they do not exist in the outside world. Storybook is the core component of this, and Storybook doesn't know how to find RPC types at CI build time, as Bazel is also not present.
+This package cannot reference RPC types, as they do not exist in the outside world. Storybook is the core component of this, and Storybook doesn't know how to find RPC types at CI build time, as Bazel is also not present. If you are worried about RPC types being compatible, please write a unit test and include the RPC types then.
 
 You need:
 
diff --git a/src/design-system/atoms/typography/BUILD.bazel b/src/design-system/atoms/typography/BUILD.bazel
index a85a703..c1c8044 100644
--- a/src/design-system/atoms/typography/BUILD.bazel
+++ b/src/design-system/atoms/typography/BUILD.bazel
@@ -6,6 +6,8 @@ react_library(
     name = "typography",
     deps = [
         "styled-components",
+        "//src/design-system/atoms/colors",
+        "//src/design-system/atoms/timings",
         "@types/styled-components",
     ],
 )
diff --git a/src/design-system/atoms/typography/mdx.tsx b/src/design-system/atoms/typography/mdx.tsx
new file mode 100644
index 0000000..0a837b6
--- /dev/null
+++ b/src/design-system/atoms/typography/mdx.tsx
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import {
+    AccentTitle,
+    LargeTitle,
+    Link,
+    MediumTitle,
+    SmallTitle,
+    Text,
+    text600,
+    text700,
+    text800,
+    text900,
+} from './typography';
+
+export const mdxComponents = {
+    h1: styled.h1`
+        ${text900}
+    `,
+    h2: styled.h2`
+        ${text800}
+    `,
+    h3: styled.h3`
+        ${text700}
+    `,
+    h4: styled.h4`
+        ${text600}
+    `,
+    p: styled.p`
+        ${Text}
+    `,
+    a: Link,
+};
diff --git a/src/design-system/atoms/typography/typography.stories.tsx b/src/design-system/atoms/typography/typography.stories.tsx
index 044d50d..a86527a 100644
--- a/src/design-system/atoms/typography/typography.stories.tsx
+++ b/src/design-system/atoms/typography/typography.stories.tsx
@@ -107,3 +107,12 @@ export const Spacing = () => (
         })}
     </div>
 );
+
+export const Link = () => (
+    <typography.Link
+        target="_blank"
+        href="https://images.boredomfiles.com/wp-content/uploads/sites/5/2016/03/fox-door-5.png"
+    >
+        Here is a link &lt;3
+    </typography.Link>
+);
diff --git a/src/design-system/atoms/typography/typography.tsx b/src/design-system/atoms/typography/typography.tsx
index c660a3b..8c9641a 100644
--- a/src/design-system/atoms/typography/typography.tsx
+++ b/src/design-system/atoms/typography/typography.tsx
@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
 import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
 
 const reset = css`
@@ -86,3 +88,12 @@ export const AmbientLarge = styled.span`
 export const AmbientSmall = styled.span`
     ${text100}
 `;
+
+export const Link = styled.a`
+    color: ${palette.taupe500};
+    text-decoration: none;
+    transition: color ${transitions.actionable}s ease-in-out;
+    &:hover {
+        color: ${palette.taupe600};
+    }
+`;