diff --git a/cl2-component-library/src/design/colors/Colors.stories.mdx b/cl2-component-library/src/design/colors/Colors.stories.mdx
new file mode 100644
index 000000000000..210edd98ec54
--- /dev/null
+++ b/cl2-component-library/src/design/colors/Colors.stories.mdx
@@ -0,0 +1,12 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import Colors from './';
+
+<Meta title="Design/Colors" />
+
+# Colors
+
+<Canvas>
+  <Story name="default">
+    <Colors />
+  </Story>
+</Canvas>
diff --git a/cl2-component-library/src/design/colors/index.tsx b/cl2-component-library/src/design/colors/index.tsx
new file mode 100644
index 000000000000..8adc7510588b
--- /dev/null
+++ b/cl2-component-library/src/design/colors/index.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import { fontSizes, themeColors, semanticColors } from '../../utils/styleUtils';
+import Title from '../../components/Title';
+
+const Container = styled.div<{ borderColor: string }>`
+  width: 500px;
+  line-height: normal;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding-right: 10px;
+  margin: 20px;
+  border-radius: ${(props) => props.theme.borderRadius};
+  border: ${(props) => '2px solid ' + props.borderColor};
+`;
+const Color = styled.div<{ backgroundColor?: string }>`
+  min-height: 60px;
+  min-width: 120px;
+  background: ${(props) => props.backgroundColor};
+`;
+
+const ColorText = styled.div`
+  padding-left: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ColorTextKey = styled.div`
+  font-weight: 500;
+  font-size: ${fontSizes.xl}px;
+`;
+
+const ColorTextValue = styled.p`
+  font-weight: 400;
+  font-size: ${fontSizes.xs}px;
+`;
+
+const Colors = () => {
+  return (
+    <>
+      <Title> Semantic colors</Title>
+      {Object.entries(semanticColors)
+        .sort()
+        .map(([key, value]) => {
+          return (
+            <Container key={key} borderColor={value}>
+              <Color backgroundColor={value} />
+              <ColorText>
+                <ColorTextKey>{key}</ColorTextKey>
+                <ColorTextValue>{value}</ColorTextValue>
+              </ColorText>
+            </Container>
+          );
+        })}
+      <Title> Theme colors</Title>
+      {Object.entries(themeColors)
+        .sort()
+        .map(([key, value]) => {
+          return (
+            <Container key={key} borderColor={value}>
+              <Color backgroundColor={value} />
+              <ColorText>
+                <ColorTextKey>{key}</ColorTextKey>
+                <ColorTextValue>{value}</ColorTextValue>
+              </ColorText>
+            </Container>
+          );
+        })}
+    </>
+  );
+};
+
+export default Colors;
diff --git a/cl2-component-library/src/design/icons/Icons.stories.mdx b/cl2-component-library/src/design/icons/Icons.stories.mdx
new file mode 100644
index 000000000000..23b3e10014ea
--- /dev/null
+++ b/cl2-component-library/src/design/icons/Icons.stories.mdx
@@ -0,0 +1,12 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import Icons from './';
+
+<Meta title="Design/Icons" />
+
+# Icons
+
+<Canvas>
+  <Story name="default">
+    <Icons />
+  </Story>
+</Canvas>
diff --git a/cl2-component-library/src/design/icons/index.tsx b/cl2-component-library/src/design/icons/index.tsx
new file mode 100644
index 000000000000..f7e89c2db60c
--- /dev/null
+++ b/cl2-component-library/src/design/icons/index.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import { fontSizes } from '../../utils/styleUtils';
+import Icon, { icons, IconNames } from '../../components/Icon';
+
+const Container = styled.div`
+  width: 500px;
+  line-height: normal;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding-right: 10px;
+  margin: 20px;
+  border-radius: ${(props) => props.theme.borderRadius};
+`;
+
+const IconText = styled.div`
+  padding-left: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  div {
+    font-weight: 500;
+    font-size: ${fontSizes.xl}px;
+  }
+  p {
+    font-weight: 400;
+    font-size: ${fontSizes.xs}px;
+  }
+`;
+
+const Icons = () => {
+  return (
+    <>
+      {Object.keys(icons)
+        .sort()
+        .map((key) => {
+          return (
+            <Container key={key}>
+              <Icon name={key as IconNames} width="24px" height="24px" />
+              <IconText>
+                <div>{key}</div>
+              </IconText>
+            </Container>
+          );
+        })}
+    </>
+  );
+};
+
+export default Icons;