diff --git a/packages/component-faraday-ui/package.json b/packages/component-faraday-ui/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..7e3257b544a4993a3a7733839d5b7abeb918bb65
--- /dev/null
+++ b/packages/component-faraday-ui/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "component-faraday-ui",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@pubsweet/ui": "^8.3.0",
+    "@pubsweet/ui-toolkit": "^1.2.0",
+    "react": "^16.4.2",
+    "styled-components": "^3.4.2"
+  }
+}
diff --git a/packages/component-faraday-ui/src/Text.js b/packages/component-faraday-ui/src/Text.js
new file mode 100644
index 0000000000000000000000000000000000000000..313d90e6b78bbc2965fab24132d3c549945049ef
--- /dev/null
+++ b/packages/component-faraday-ui/src/Text.js
@@ -0,0 +1,17 @@
+import { th } from '@pubsweet/ui-toolkit'
+import styled, { css } from 'styled-components'
+
+const fontSize = css`
+  color: ${props => (props.secondary ? th('colorSecondary') : th('colorText'))};
+  font-size: ${props =>
+    props.small ? th('fontSizeBaseSmall') : th('fontSizeBase')};
+  line-height: ${props =>
+    props.small ? th('lineHeightBaseSmall') : th('lineHeightBase')};
+`
+
+const Text = styled.span`
+  font-family: ${th('fontReading')};
+  ${fontSize};
+`
+
+export default Text
diff --git a/packages/component-faraday-ui/src/Text.md b/packages/component-faraday-ui/src/Text.md
new file mode 100644
index 0000000000000000000000000000000000000000..5290ec35f78e51685c0af0f0b354e5cc9294350e
--- /dev/null
+++ b/packages/component-faraday-ui/src/Text.md
@@ -0,0 +1,23 @@
+A piece of text. (Body 1)
+
+```js
+<Text>my boy is amazing</Text>
+```
+
+A secondary text. (Body 2)
+
+```js
+<Text secondary>my boy is amazing</Text>
+```
+
+A small text.
+
+```js
+<Text small>my boy is amazing</Text>
+```
+
+A small secondary text.
+
+```js
+<Text small secondary>my boy is amazing</Text>
+```
diff --git a/packages/styleguide/src/webpack-config.js b/packages/styleguide/src/webpack-config.js
index 42809e49e3b13b6408d98ac207d814d79e21c141..dc1e10097308c27cfd6a806a592f65ec0dc0593e 100644
--- a/packages/styleguide/src/webpack-config.js
+++ b/packages/styleguide/src/webpack-config.js
@@ -7,7 +7,11 @@ const path = require('path')
 // const nodeExternals = require('webpack-node-externals')
 
 module.exports = dir => {
-  const include = [path.join(dir, 'src'), /@pubsweet\/[^/]+\/src/]
+  const include = [
+    path.join(dir, 'src'),
+    /@pubsweet\/[^/]+\/src/,
+    /component-faraday-ui\/src/,
+  ]
   return {
     devtool: 'cheap-module-source-map',
     entry: './src/index.js',
diff --git a/packages/styleguide/styleguide.config.js b/packages/styleguide/styleguide.config.js
index 8f3c2d20f26eb982615ffc423176ed9193baa1ac..98c42dfbae283600112f90e19ad5b534865e2708 100644
--- a/packages/styleguide/styleguide.config.js
+++ b/packages/styleguide/styleguide.config.js
@@ -1,6 +1,7 @@
 const path = require('path')
 
 module.exports = {
+  components: ['src/components/**/*.js', '../component-faraday-ui/src/**/*.js'],
   styleguideComponents: {
     Wrapper: path.join(__dirname, 'src/config/Wrapper'),
   },