diff --git a/src/design-system/index.css b/src/design-system/index.css
index 4fdd3204..99c52fb4 100644
--- a/src/design-system/index.css
+++ b/src/design-system/index.css
@@ -12,4 +12,4 @@
 @import './code-snippet.css';
 @import './abbreviate.css';
 @import './keyboard-input.css';
-
+@import './preformattedText.css';
diff --git a/src/design-system/preformattedText.css b/src/design-system/preformattedText.css
new file mode 100644
index 00000000..ef851f16
--- /dev/null
+++ b/src/design-system/preformattedText.css
@@ -0,0 +1,7 @@
+.dcx-pre {
+  color: token('color-text-pre_body');
+  background-color: token('color-background-pre_box');
+  font-size: token('font-size-pre_body');
+  font-family: token('font-family-pre_body');
+  font-weight: token('font-weight-pre_body');
+}
\ No newline at end of file
diff --git a/src/design-system/tokens.json b/src/design-system/tokens.json
index d4fa9c80..15467b65 100644
--- a/src/design-system/tokens.json
+++ b/src/design-system/tokens.json
@@ -119,7 +119,7 @@
   "font-size-formcontrol_label": "16px",
   "font-size-highlight_body": "12px",
   "font-size-paragraph": "12px",
-  "font-size-pre_body": "12px",
+  "font-size-pre_body": "16px",
   "font-weight-body": "normal",
   "font-weight-formcontrol_label": "normal",
   "font-weight-highlight_body": "normal",
diff --git a/stories/PreformattedText/design-system/AccessibleTheme.stories.js b/stories/PreformattedText/design-system/AccessibleTheme.stories.js
new file mode 100644
index 00000000..6588aab5
--- /dev/null
+++ b/stories/PreformattedText/design-system/AccessibleTheme.stories.js
@@ -0,0 +1,53 @@
+import { PreformattedText } from '../../../src/preformattedText/PreformattedText';
+import style from '!raw-loader!../../themes/accessible.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme aimed at easing the vizualization of the different elements of the component in order to improve the experience for people that have visual impairments.
+ */
+export default {
+  title: 'DCXLibrary/Typography/PreformattedText/Design system/Accessible',
+  component: PreformattedText,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/accessible.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-pre', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    value: `Text in a pre element is displayed in a fixed-width font, and it preserves both   spaces and 
+  line breaks.`,
+  },
+};
diff --git a/stories/PreformattedText/design-system/DarkTheme.stories.js b/stories/PreformattedText/design-system/DarkTheme.stories.js
new file mode 100644
index 00000000..93ee070d
--- /dev/null
+++ b/stories/PreformattedText/design-system/DarkTheme.stories.js
@@ -0,0 +1,63 @@
+import { PreformattedText } from '../../../src/preformattedText/PreformattedText';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import style from '!raw-loader!../../themes/dark.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme showcases how to customize the component so it can be used on dark backgrounds.
+ */
+export default {
+  title: 'DCXLibrary/Typography/PreformattedText/Design system/Dark',
+  component: PreformattedText,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/dark.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-pre', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  args: {
+    value: `Text in a pre element is displayed in a fixed-width font, and it preserves both   spaces and 
+line breaks.`,
+  },
+};
diff --git a/stories/PreformattedText/design-system/Default.stories.js b/stories/PreformattedText/design-system/Default.stories.js
new file mode 100644
index 00000000..3df33478
--- /dev/null
+++ b/stories/PreformattedText/design-system/Default.stories.js
@@ -0,0 +1,27 @@
+import { PreformattedText } from '../../../src/preformattedText/PreformattedText';
+/**
+ * Here we display the component in its natural preformattedText, importing only the base Design System styles.
+ */
+export default {
+  title: 'DCXLibrary/Typography/PreformattedText/Design system/Default',
+  component: PreformattedText,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    value: `Text in a pre element is displayed in a fixed-width font, and it preserves both   spaces and 
+line breaks.`,
+  },
+};
diff --git a/stories/PreformattedText/design-system/MaterialTheme.stories.js b/stories/PreformattedText/design-system/MaterialTheme.stories.js
new file mode 100644
index 00000000..dde014ad
--- /dev/null
+++ b/stories/PreformattedText/design-system/MaterialTheme.stories.js
@@ -0,0 +1,55 @@
+import { PreformattedText } from '../../../src/preformattedText/PreformattedText';
+import { LiveProvider, LiveEditor } from 'react-live';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import style from '!raw-loader!../../themes/material.theme.css';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme showcases an appearance similar to Material UI can be achieved.
+ * If you copy paste this snippet inside your css file you'll get a material design style
+ */
+export default {
+  title: 'DCXLibrary/Typography/PreformattedText/Design system/Material',
+  component: PreformattedText,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/material.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-pre', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    value: `Text in a pre element is displayed in a fixed-width font, and it preserves both   spaces and 
+line breaks.`,
+  },
+};
diff --git a/stories/PreformattedText/design-system/Playground.stories.js b/stories/PreformattedText/design-system/Playground.stories.js
new file mode 100644
index 00000000..86e7a38e
--- /dev/null
+++ b/stories/PreformattedText/design-system/Playground.stories.js
@@ -0,0 +1,24 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../../dist/design-system/preformattedText.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
+import { PreformattedText } from '../../../src/preformattedText/PreformattedText';
+
+export default {
+  title: 'DCXLibrary/Typography/PreformattedText/Design system',
+  component: PreformattedText,
+  decorators: [
+    getStory => <TokensDecorator style={style}>{getStory()}</TokensDecorator>,
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+};
+
+export const Playground = {
+  name: 'Playground',
+  args: {
+    value: `Text in a pre element is displayed in a fixed-width font, and it preserves both   spaces and 
+line breaks.`,
+  },
+};
diff --git a/stories/themes/dark.theme.css b/stories/themes/dark.theme.css
index 7093d3c3..538e4eed 100644
--- a/stories/themes/dark.theme.css
+++ b/stories/themes/dark.theme.css
@@ -59,6 +59,11 @@
   --dcx-color-text-body: white;
 }
 
+.dcx-pre {
+  --dcx-color-text-pre_body: white;
+  --dcx-color-background-pre_box: transparent;
+}
+
 .dcx-insert-text {
   --dcx-color-text-body: white;
 }
diff --git a/stories/themes/material.theme.css b/stories/themes/material.theme.css
index c114154e..b546a6b8 100644
--- a/stories/themes/material.theme.css
+++ b/stories/themes/material.theme.css
@@ -20,7 +20,10 @@
   --dcx-color-marker: rgba(0, 0, 0, 0.6);
 }
 
+.dcx-pre {
+  --dcx-color-text-pre_body: rgba(0, 0, 0, 0.6);
+}
 
 .dcx-abbreviate {
   --dcx-border-radius-abbreviate: 8px;
-}
\ No newline at end of file
+}