diff --git a/.storybook/config.ts b/.storybook/config.ts
index f8948da..06440b4 100644
--- a/.storybook/config.ts
+++ b/.storybook/config.ts
@@ -18,13 +18,4 @@ addParameters({
   },
 });
 
-// automatically import all files ending in *.stories.js
-const componentStories = require.context(
-  `../src/components/`,
-  true,
-  /stories\.tsx$/
-);
-const tokenStories = require.context(`../src/tokens/`, true, /stories\.tsx$/);
-
-configure(componentStories, module);
-configure(tokenStories, module);
+configure(require.context('../src/', true, /stories\.tsx$/), module);
diff --git a/.storybook/presets.js b/.storybook/presets.js
index b1d4634..0f688a0 100644
--- a/.storybook/presets.js
+++ b/.storybook/presets.js
@@ -1 +1,8 @@
-module.exports = ['@storybook/addon-docs/react/preset'];
+module.exports = [
+  {
+    name: '@storybook/addon-docs/react/preset',
+    options: {
+      sourceLoaderOptions: null,
+    },
+  },
+];
diff --git a/src/components/button/stories.tsx b/src/components/button/button.stories.tsx
similarity index 93%
rename from src/components/button/stories.tsx
rename to src/components/button/button.stories.tsx
index be379ae..bab8e97 100644
--- a/src/components/button/stories.tsx
+++ b/src/components/button/button.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button } from './';
+import { Button } from '.';
 
 export default { title: 'Components | Button', component: Button };
 
diff --git a/src/components/paragraph/stories.tsx b/src/components/paragraph/paragraph.stories.tsx
similarity index 100%
rename from src/components/paragraph/stories.tsx
rename to src/components/paragraph/paragraph.stories.tsx
diff --git a/src/tokens/colors/colors.stories.tsx b/src/tokens/colors/colors.stories.tsx
new file mode 100644
index 0000000..2086bf9
--- /dev/null
+++ b/src/tokens/colors/colors.stories.tsx
@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import { storiesOf } from '@storybook/react';
+import styled from 'styled-components';
+import { Paragraph } from '../../components';
+import { colors } from './colors';
+
+interface CircleProps {
+  color: string;
+}
+
+const StyledCircle = styled.div<CircleProps>`
+  height: 100px;
+  width: 100px;
+  margin: 20px;
+  border-radius: 50%;
+  background-color: ${props => props.color};
+`;
+
+const StyledParagraph = styled(Paragraph)<{ color: string }>`
+  color: ${props => props.color};
+  line-height: 100px;
+`;
+
+const Container = styled.div<{ color?: string }>`
+  background-color: ${props => props.color};
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+`;
+
+const Circle: FC<CircleProps> = ({ color }) => {
+  return <StyledCircle color={color} />;
+};
+
+export default { title: 'Tokens | Colors' };
+
+export const palette = () => (
+  <Container>
+    <StyledParagraph color={colors.light.body}>Light</StyledParagraph>
+    <StyledParagraph color={colors.light.body}>Dark</StyledParagraph>
+
+    <Container color={colors.light.accent}>
+      <Circle color={colors.light.primary} />
+      <StyledParagraph color={colors.light.body}>Primary</StyledParagraph>
+      <Circle color={colors.light.secondary} />
+      <StyledParagraph color={colors.light.body}>Secondary</StyledParagraph>
+      <Circle color={colors.light.body} />
+      <StyledParagraph color={colors.light.body}>Body</StyledParagraph>
+    </Container>
+
+    <Container color={colors.dark.accent}>
+      <Circle color={colors.dark.primary} />
+      <StyledParagraph color={colors.dark.body}>Primary</StyledParagraph>
+      <Circle color={colors.dark.secondary} />
+      <StyledParagraph color={colors.dark.body}>Secondary</StyledParagraph>
+      <Circle color={colors.dark.body} />
+      <StyledParagraph color={colors.dark.body}>Body</StyledParagraph>
+    </Container>
+  </Container>
+);
diff --git a/src/tokens/colors/stories.tsx b/src/tokens/colors/stories.tsx
deleted file mode 100644
index b1cb0a2..0000000
--- a/src/tokens/colors/stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { FC } from 'react';
-import { storiesOf } from '@storybook/react';
-import styled from 'styled-components';
-import { Paragraph } from '../../components';
-import { colors } from './colors';
-
-interface CircleProps {
-  colour: string;
-}
-
-const StyledCircle = styled.div<CircleProps>`
-  height: 100px;
-  width: 100px;
-  margin: 20px;
-  border-radius: 50%;
-  background-color: ${props => props.colour};
-`;
-
-const StyledParagraph = styled(Paragraph)<{ colour: string }>`
-  color: ${props => props.colour};
-  line-height: 100px;
-`;
-
-const Container = styled.div<{ colour?: string }>`
-  background-color: ${props => props.colour};
-  padding: 20px;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-`;
-
-const Circle: FC<CircleProps> = ({ colour }) => {
-  return <StyledCircle colour={colour} />;
-};
-
-export default { title: 'Tokens | Colours' };
-
-export const palette = () => (
-  <Container>
-    <StyledParagraph colour={colors.light.body}>Light</StyledParagraph>
-    <StyledParagraph colour={colors.light.body}>Dark</StyledParagraph>
-
-    <Container colour={colors.light.accent}>
-      <Circle colour={colors.light.primary} />
-      <StyledParagraph colour={colors.light.body}>Primary</StyledParagraph>
-      <Circle colour={colors.light.secondary} />
-      <StyledParagraph colour={colors.light.body}>Secondary</StyledParagraph>
-      <Circle colour={colors.light.body} />
-      <StyledParagraph colour={colors.light.body}>Body</StyledParagraph>
-    </Container>
-
-    <Container colour={colors.dark.accent}>
-      <Circle colour={colors.dark.primary} />
-      <StyledParagraph colour={colors.dark.body}>Primary</StyledParagraph>
-      <Circle colour={colors.dark.secondary} />
-      <StyledParagraph colour={colors.dark.body}>Secondary</StyledParagraph>
-      <Circle colour={colors.dark.body} />
-      <StyledParagraph colour={colors.dark.body}>Body</StyledParagraph>
-    </Container>
-  </Container>
-);
diff --git a/src/tokens/typography/stories.tsx b/src/tokens/typography/typography.stories.tsx
similarity index 100%
rename from src/tokens/typography/stories.tsx
rename to src/tokens/typography/typography.stories.tsx