diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx
index ae6e18c3..885a4e41 100644
--- a/docs/BrandColors.mdx
+++ b/docs/BrandColors.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import LinkTo from '@storybook/addon-links/react';
 
 <Meta title="Design Tokens/Brand Colors" />
diff --git a/docs/ThemeColors.mdx b/docs/ThemeColors.mdx
index 351faac3..b476ee17 100644
--- a/docs/ThemeColors.mdx
+++ b/docs/ThemeColors.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
 
 import tokens from '../src/figma/tokens.json';
 
diff --git a/docs/Typography.mdx b/docs/Typography.mdx
new file mode 100644
index 00000000..ddfd57cd
--- /dev/null
+++ b/docs/Typography.mdx
@@ -0,0 +1,60 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+
+import tokens from '../src/figma/tokens.json';
+
+<Meta title="Typography / Introduction" />
+
+# Typography
+
+Good typography improves readability and prioritization of information.
+
+## Font Family
+
+The main font family used in MetaMask products is **Euclid Circular B**
+
+## Scale
+
+There are 2 sets of typography scales for MetaMask products.
+
+### **Small screen**
+
+The typography scale for small screen sizes
+
+<Canvas>
+  <Story id="typography-typography--small-screen" />
+</Canvas>
+
+### **Large screen**
+
+The typography scale for large screen sizes
+
+<Canvas>
+  <Story id="typography-typography--large-screen" />
+</Canvas>
+
+<br />
+
+## Font Weight
+
+There are three available font weights
+
+<Canvas>
+  <Story id="typography-typography--font-weight" />
+</Canvas>
+
+#### CSS IN JS
+
+```
+export const fontWeights = {
+  regular: 400,
+  medium: 500,
+  bold: 700,
+};
+```
+
+#### CSS
+
+## References
+
+- [Figma Typography (Large screen)](https://www.figma.com/file/likmuA72JatXDKDChibHBG/%5BTypo%5D-Large-screen?node-id=2%3A134)(internal use only)
+- [Figma Typography (Small screen)](https://www.figma.com/file/Na8UKll7g12UywIPGEVLvX/%5BTypo%5D-Small-screen?node-id=2%3A134)(internal use only)
diff --git a/docs/Typography.stories.tsx b/docs/Typography.stories.tsx
new file mode 100644
index 00000000..e3a571b3
--- /dev/null
+++ b/docs/Typography.stories.tsx
@@ -0,0 +1,204 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import {
+  typography,
+  fontSizes,
+  lineHeights,
+  fontFamilies,
+  fontWeights,
+  letterSpacing,
+} from '../src/typography';
+
+import { Text } from './components';
+
+import README from './Typography.mdx';
+
+export default {
+  title: 'Typography/Typography',
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+} as ComponentMeta<typeof Text>;
+
+export const SmallScreen = (...args) => {
+  const styles = {
+    displayMD: {
+      fontFamily: typography.displayMD.fontFamily,
+      fontSize: typography.displayMD.fontSize,
+      lineHeight: `${typography.displayMD.lineHeight}px`,
+      fontWeight: typography.displayMD.fontWeight,
+    },
+    headingLG: {
+      fontFamily: typography.headingLG.fontFamily,
+      fontSize: typography.headingLG.fontSize,
+      lineHeight: `${typography.headingLG.lineHeight}px`,
+      fontWeight: typography.headingLG.fontWeight,
+    },
+    headingMD: {
+      fontFamily: typography.headingMD.fontFamily,
+      fontSize: typography.headingMD.fontSize,
+      lineHeight: `${typography.headingMD.lineHeight}px`,
+      fontWeight: typography.headingMD.fontWeight,
+    },
+    headingSM: {
+      fontFamily: typography.headingSM.fontFamily,
+      fontSize: typography.headingSM.fontSize,
+      lineHeight: `${typography.headingSM.lineHeight}px`,
+      fontWeight: typography.headingSM.fontWeight,
+    },
+    bodyMD: {
+      fontFamily: typography.bodyMD.fontFamily,
+      fontSize: typography.bodyMD.fontSize,
+      lineHeight: `${typography.bodyMD.lineHeight}px`,
+      fontWeight: typography.bodyMD.fontWeight,
+    },
+    bodySM: {
+      fontFamily: typography.bodySM.fontFamily,
+      fontSize: typography.bodySM.fontSize,
+      lineHeight: `${typography.bodySM.lineHeight}px`,
+      fontWeight: typography.bodySM.fontWeight,
+    },
+    bodyXS: {
+      fontFamily: typography.bodyXS.fontFamily,
+      fontSize: typography.bodyXS.fontSize,
+      lineHeight: `${typography.bodyXS.lineHeight}px`,
+      fontWeight: typography.bodyXS.fontWeight,
+      letterSpacing: typography.bodyXS.letterSpacing,
+    },
+  };
+  return (
+    <>
+      <Text as="h1" style={styles.displayMD} {...args}>
+        DisplayMD 32px/40px 2rem
+      </Text>
+      <Text as="h2" style={styles.headingLG} {...args}>
+        HeadingLG 24px/32px 1.5rem
+      </Text>
+      <Text as="h3" style={styles.headingMD} {...args}>
+        HeadingMD 18px/24px 1.125rem
+      </Text>
+      <Text as="h4" style={styles.headingSM} {...args}>
+        HeadingSM 16px/24px 1rem
+      </Text>
+      <Text as="p" style={styles.bodyMD} {...args}>
+        BodyMD 14px/22px 0.875rem
+      </Text>
+      <Text as="p" style={styles.bodySM} {...args}>
+        BodySM 12px/20px 0.75rem
+      </Text>
+      <Text as="p" style={styles.bodyXS} {...args}>
+        BodyXS 10px/16px 0.625rem
+      </Text>
+    </>
+  );
+};
+
+export const LargeScreen = (...args) => {
+  const styles = {
+    displayMD: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize8,
+      lineHeight: `${lineHeights.lineHeight7}px`,
+      fontWeight: fontWeights.medium,
+    },
+    headingLG: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize7,
+      lineHeight: `${lineHeights.lineHeight6}px`,
+      fontWeight: fontWeights.bold,
+    },
+    headingMD: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize6,
+      lineHeight: `${lineHeights.lineHeight5}px`,
+      fontWeight: fontWeights.bold,
+    },
+    headingSM: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize5,
+      lineHeight: `${lineHeights.lineHeight4}px`,
+      fontWeight: fontWeights.bold,
+    },
+    bodyMD: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize4,
+      lineHeight: `${lineHeights.lineHeight4}px`,
+      fontWeight: fontWeights.regular,
+    },
+    bodySM: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize3,
+      lineHeight: `${lineHeights.lineHeight3}px`,
+      fontWeight: fontWeights.regular,
+    },
+    bodyXS: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize2,
+      lineHeight: `${lineHeights.lineHeight2}px`,
+      fontWeight: fontWeights.regular,
+      letterSpacing: letterSpacing.letterSpacing1,
+    },
+  };
+  return (
+    <>
+      <Text as="h1" style={styles.displayMD} {...args}>
+        DisplayMD 48px/56px 3rem
+      </Text>
+      <Text as="h2" style={styles.headingLG} {...args}>
+        HeadingLG 32px/40px 2rem
+      </Text>
+      <Text as="h3" style={styles.headingMD} {...args}>
+        HeadingMD 24px/32px 1.5rem
+      </Text>
+      <Text as="h4" style={styles.headingSM} {...args}>
+        HeadingSM 18px/24px 1.125rem
+      </Text>
+      <Text as="p" style={styles.bodyMD} {...args}>
+        BodyMD 16px/24px 1rem
+      </Text>
+      <Text as="p" style={styles.bodySM} {...args}>
+        BodySM 14px/22px 0.875rem
+      </Text>
+      <Text as="p" style={styles.bodyXS} {...args}>
+        BodyXS 12px/20px 0.75rem
+      </Text>
+    </>
+  );
+};
+
+export const FontWeight = (...args) => {
+  const styles = {
+    regular: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize4,
+      lineHeight: `${lineHeights.lineHeight5}px`,
+      fontWeight: fontWeights.regular,
+    },
+    medium: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize4,
+      lineHeight: `${lineHeights.lineHeight5}px`,
+      fontWeight: fontWeights.medium,
+    },
+    bold: {
+      fontFamily: fontFamilies.euclidCircularB,
+      fontSize: fontSizes.fontSize4,
+      lineHeight: `${lineHeights.lineHeight5}px`,
+      fontWeight: fontWeights.bold,
+    },
+  };
+  return (
+    <>
+      <Text as="h3" style={styles.regular} {...args}>
+        Regular 400
+      </Text>
+      <Text as="h3" style={styles.medium} {...args}>
+        Medium 500
+      </Text>
+      <Text as="h3" style={styles.bold} {...args}>
+        Bold 700
+      </Text>
+    </>
+  );
+};
diff --git a/docs/components/Text/Text.stories.tsx b/docs/components/Text/Text.stories.tsx
new file mode 100644
index 00000000..d242e80d
--- /dev/null
+++ b/docs/components/Text/Text.stories.tsx
@@ -0,0 +1,90 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { typography } from '../../../src/typography';
+
+import { Text } from '.';
+
+export default {
+  title: 'Doc components/Text',
+} as ComponentMeta<typeof Text>;
+
+const Template: ComponentStory<typeof Text> = (args) => <Text {...args} />;
+
+export const DefaultStory = Template.bind({});
+
+DefaultStory.args = {
+  children: 'Text',
+};
+
+DefaultStory.storyName = 'Default';
+
+export const SmallScreenTypographyScale = (...args) => {
+  const styles = {
+    displayMD: {
+      fontFamily: typography.displayMD.fontFamily,
+      fontSize: typography.displayMD.fontSize,
+      // lineHeight: typography.displayMD.lineHeight,
+      fontWeight: typography.displayMD.fontWeight,
+    },
+    headingLG: {
+      fontFamily: typography.headingLG.fontFamily,
+      fontSize: typography.headingLG.fontSize,
+      // lineHeight: typography.headingLG.lineHeight,
+      fontWeight: typography.headingLG.fontWeight,
+    },
+    headingMD: {
+      fontFamily: typography.headingMD.fontFamily,
+      fontSize: typography.headingMD.fontSize,
+      // lineHeight: typography.headingMD.lineHeight,
+      fontWeight: typography.headingMD.fontWeight,
+    },
+    headingSM: {
+      fontFamily: typography.headingSM.fontFamily,
+      fontSize: typography.headingSM.fontSize,
+      // lineHeight: typography.headingSM.lineHeight,
+      fontWeight: typography.headingSM.fontWeight,
+    },
+    bodyMD: {
+      fontFamily: typography.bodyMD.fontFamily,
+      fontSize: typography.bodyMD.fontSize,
+      // lineHeight: typography.bodyMD.lineHeight,
+      fontWeight: typography.bodyMD.fontWeight,
+    },
+    bodySM: {
+      fontFamily: typography.bodySM.fontFamily,
+      fontSize: typography.bodySM.fontSize,
+      // lineHeight: typography.bodySM.lineHeight,
+      fontWeight: typography.bodySM.fontWeight,
+    },
+    bodyXS: {
+      fontFamily: typography.bodyXS.fontFamily,
+      fontSize: typography.bodyXS.fontSize,
+      // lineHeight: typography.bodyXS.lineHeight,
+      fontWeight: typography.bodyXS.fontWeight,
+    },
+  };
+  return (
+    <>
+      <Text as="h1" style={styles.displayMD} {...args}>
+        Display MD 32px 2rem 32px/40px
+      </Text>
+      <Text as="h2" style={styles.headingLG} {...args}>
+        HeadingLG
+      </Text>
+      <Text as="h3" style={styles.headingMD} {...args}>
+        HeadingMD
+      </Text>
+      <Text as="h4" style={styles.headingSM} {...args}>
+        HeadingSM
+      </Text>
+      <Text as="p" style={styles.bodyMD} {...args}>
+        BodyMD
+      </Text>
+      <Text as="p" style={styles.bodySM} {...args}>
+        BodySM
+      </Text>
+      <Text as="p" style={styles.bodyXS} {...args}>
+        BodyXS
+      </Text>
+    </>
+  );
+};
diff --git a/docs/components/Text/Text.tsx b/docs/components/Text/Text.tsx
new file mode 100644
index 00000000..3318fcd9
--- /dev/null
+++ b/docs/components/Text/Text.tsx
@@ -0,0 +1,28 @@
+import React, { FunctionComponent } from 'react';
+
+interface Props<C extends React.ElementType> {
+  /**
+   * The size of the text
+   */
+  children?: React.ReactChild;
+  /**
+   * Polymorphic prop to change the html root element of the component
+   */
+  as?: string;
+  /**
+   * The style prop of the Text component
+   */
+  style?: object;
+}
+
+type TextProps<C extends React.ElementType> = Props<C> &
+  Omit<React.ComponentPropsWithoutRef<C>, keyof Props<C>>;
+
+export const Text = <C extends React.ElementType = 'span'>({
+  style,
+  children,
+  as,
+}) => {
+  const Component = as || 'span';
+  return <Component style={style}>{children}</Component>;
+};
diff --git a/docs/components/Text/index.tsx b/docs/components/Text/index.tsx
new file mode 100644
index 00000000..3db2d7e7
--- /dev/null
+++ b/docs/components/Text/index.tsx
@@ -0,0 +1 @@
+export { Text } from './Text';
diff --git a/docs/components/index.tsx b/docs/components/index.tsx
index f033d46a..9868799e 100644
--- a/docs/components/index.tsx
+++ b/docs/components/index.tsx
@@ -1,2 +1,3 @@
 export { ColorSwatch } from './ColorSwatch';
 export { ColorSwatchGroup } from './ColorSwatchGroup';
+export { Text } from './Text';
diff --git a/src/css/design-tokens.css b/src/css/design-tokens.css
index 298766aa..3132f28e 100644
--- a/src/css/design-tokens.css
+++ b/src/css/design-tokens.css
@@ -67,6 +67,32 @@
   --brand-colors-yellow-yellow400: #ffdf70;
   --brand-colors-yellow-yellow500: #ffd33d;
   --brand-colors-yellow-yellow600: #ffc70a;
+
+  --font-family: 'Euclid Circular B';
+
+  --font-size-base: 16px;
+  --font-size-1: 0.75rem;
+  --font-size-2: 0.875rem;
+  --font-size-3: 1rem;
+  --font-size-4: 1.125rem;
+  --font-size-5: 1.5rem;
+  --font-size-6: 2rem;
+  --font-size-7: 2.5rem;
+  --font-size-8: 3rem;
+
+  --line-height-1: 1.2;
+  --line-height-2: 1.2555555;
+  --line-height-3: 1.3333333;
+  --line-height-4: 1.5;
+  --line-height-5: 1.6;
+  --line-height-6: 1.6666666;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  --letter-spacing-0: 0;
+  --letter-spacing-1: 2.5%;
 }
 
 /*
diff --git a/src/figma/tokens.json b/src/figma/tokens.json
index be5b2b3c..118c5915 100644
--- a/src/figma/tokens.json
+++ b/src/figma/tokens.json
@@ -322,6 +322,339 @@
           "type": "color"
         }
       }
+    },
+    "fontFamilies": {
+      "euclid-circular-b": {
+        "value": "Euclid Circular B",
+        "type": "fontFamilies"
+      }
+    },
+    "lineHeights": {
+      "0": {
+        "value": "64",
+        "type": "lineHeights"
+      },
+      "1": {
+        "value": "40",
+        "type": "lineHeights"
+      },
+      "2": {
+        "value": "32",
+        "type": "lineHeights"
+      },
+      "3": {
+        "value": "24",
+        "type": "lineHeights"
+      },
+      "4": {
+        "value": "22",
+        "type": "lineHeights"
+      },
+      "5": {
+        "value": "20",
+        "type": "lineHeights"
+      },
+      "6": {
+        "value": "16",
+        "type": "lineHeights"
+      }
+    },
+    "fontWeights": {
+      "euclid-circular-b-0": {
+        "value": "Medium",
+        "type": "fontWeights"
+      },
+      "euclid-circular-b-1": {
+        "value": "Bold",
+        "type": "fontWeights"
+      },
+      "euclid-circular-b-2": {
+        "value": "Regular",
+        "type": "fontWeights"
+      }
+    },
+    "fontSize": {
+      "0": {
+        "value": "10",
+        "type": "fontSizes"
+      },
+      "1": {
+        "value": "12",
+        "type": "fontSizes"
+      },
+      "2": {
+        "value": "14",
+        "type": "fontSizes"
+      },
+      "3": {
+        "value": "16",
+        "type": "fontSizes"
+      },
+      "4": {
+        "value": "18",
+        "type": "fontSizes"
+      },
+      "5": {
+        "value": "24",
+        "type": "fontSizes"
+      },
+      "6": {
+        "value": "32",
+        "type": "fontSizes"
+      },
+      "7": {
+        "value": "48",
+        "type": "fontSizes"
+      }
+    },
+    "letterSpacing": {
+      "0": {
+        "value": "0",
+        "type": "letterSpacing"
+      },
+      "1": {
+        "value": "0.25",
+        "type": "letterSpacing"
+      }
+    },
+    "paragraphSpacing": {
+      "0": {
+        "value": "0",
+        "type": "paragraphSpacing"
+      }
+    },
+    "L-Display-MD": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-0",
+        "lineHeight": "$lineHeights.0",
+        "fontSize": "$fontSize.7",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "L-Heading-LG": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-1",
+        "lineHeight": "$lineHeights.1",
+        "fontSize": "$fontSize.6",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "L-Heading-MD": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-1",
+        "lineHeight": "$lineHeights.2",
+        "fontSize": "$fontSize.5",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "L-Heading-SM": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-1",
+        "lineHeight": "$lineHeights.3",
+        "fontSize": "$fontSize.4",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "L-Body-MD (default)": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-2",
+        "lineHeight": "$lineHeights.3",
+        "fontSize": "$fontSize.3",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "L-Body-SM": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-2",
+        "lineHeight": "$lineHeights.4",
+        "fontSize": "$fontSize.2",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "L-Body-XS": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-2",
+        "lineHeight": "$lineHeights.5",
+        "fontSize": "$fontSize.1",
+        "letterSpacing": "$letterSpacing.1",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "textCase": {
+      "none": {
+        "value": "none",
+        "type": "textCase"
+      }
+    },
+    "textDecoration": {
+      "none": {
+        "value": "none",
+        "type": "textDecoration"
+      }
+    },
+    "S-Display-MD": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-0",
+        "lineHeight": "$lineHeights.0",
+        "fontSize": "$fontSize.6",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "S-Heading-LG": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-0",
+        "lineHeight": "$lineHeights.1",
+        "fontSize": "$fontSize.5",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "S-Heading-MD": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-0",
+        "lineHeight": "$lineHeights.2",
+        "fontSize": "$fontSize.4",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "S-Heading-SM-Bold": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-0",
+        "lineHeight": "$lineHeights.2",
+        "fontSize": "$fontSize.3",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "S-Heading-SM": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-1",
+        "lineHeight": "$lineHeights.2",
+        "fontSize": "$fontSize.3",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "S-Body-MD-Bold": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-0",
+        "lineHeight": "$lineHeights.3",
+        "fontSize": "$fontSize.2",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "S-Body-MD (default)": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-2",
+        "lineHeight": "$lineHeights.3",
+        "fontSize": "$fontSize.2",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "S-Body-SM-Bold": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-0",
+        "lineHeight": "$lineHeights.4",
+        "fontSize": "$fontSize.1",
+        "letterSpacing": "$letterSpacing.1",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "S-Body-SM": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-2",
+        "lineHeight": "$lineHeights.4",
+        "fontSize": "$fontSize.1",
+        "letterSpacing": "$letterSpacing.1",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
+    "S-Body-XS": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-2",
+        "lineHeight": "$lineHeights.5",
+        "fontSize": "$fontSize.0",
+        "letterSpacing": "$letterSpacing.1",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
     }
   },
   "light": {
diff --git a/src/typography/fontFamilies.ts b/src/typography/fontFamilies.ts
new file mode 100644
index 00000000..737e44a9
--- /dev/null
+++ b/src/typography/fontFamilies.ts
@@ -0,0 +1,3 @@
+export const fontFamilies = {
+  euclidCircularB: 'Euclid Circular B',
+};
diff --git a/src/typography/fontSizes.ts b/src/typography/fontSizes.ts
new file mode 100644
index 00000000..eed2628a
--- /dev/null
+++ b/src/typography/fontSizes.ts
@@ -0,0 +1,10 @@
+export const fontSizes = {
+  fontSize1: 10,
+  fontSize2: 12,
+  fontSize3: 14,
+  fontSize4: 16,
+  fontSize5: 18,
+  fontSize6: 24,
+  fontSize7: 32,
+  fontSize8: 48,
+};
diff --git a/src/typography/fontWeights.ts b/src/typography/fontWeights.ts
new file mode 100644
index 00000000..21fa14b8
--- /dev/null
+++ b/src/typography/fontWeights.ts
@@ -0,0 +1,5 @@
+export const fontWeights = {
+  regular: 400,
+  medium: 500,
+  bold: 700,
+};
diff --git a/src/typography/index.ts b/src/typography/index.ts
new file mode 100644
index 00000000..8f6edfd7
--- /dev/null
+++ b/src/typography/index.ts
@@ -0,0 +1,6 @@
+export { fontFamilies } from './fontFamilies';
+export { fontSizes } from './fontSizes';
+export { fontWeights } from './fontWeights';
+export { lineHeights } from './lineHeights';
+export { letterSpacing } from './letterSpacing';
+export { typography } from './typography';
diff --git a/src/typography/letterSpacing.ts b/src/typography/letterSpacing.ts
new file mode 100644
index 00000000..970bdf43
--- /dev/null
+++ b/src/typography/letterSpacing.ts
@@ -0,0 +1,4 @@
+export const letterSpacing = {
+  letterSpacing0: 0,
+  letterSpacing1: 0.25,
+};
diff --git a/src/typography/lineHeights.ts b/src/typography/lineHeights.ts
new file mode 100644
index 00000000..e8a725db
--- /dev/null
+++ b/src/typography/lineHeights.ts
@@ -0,0 +1,9 @@
+export const lineHeights = {
+  lineHeight1: 16,
+  lineHeight2: 20,
+  lineHeight3: 22,
+  lineHeight4: 24,
+  lineHeight5: 32,
+  lineHeight6: 40,
+  lineHeight7: 56,
+};
diff --git a/src/typography/typography.ts b/src/typography/typography.ts
new file mode 100644
index 00000000..a82e0c3b
--- /dev/null
+++ b/src/typography/typography.ts
@@ -0,0 +1,78 @@
+import {
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  letterSpacing,
+  lineHeights,
+} from '.';
+
+export interface TypeStyle {
+  fontFamily: string;
+  fontSize: number;
+  fontWeight: number;
+  lineHeight: number;
+  letterSpacing: number;
+}
+
+export interface ThemeTypography {
+  displayMD: TypeStyle;
+  headingLG: TypeStyle;
+  headingMD: TypeStyle;
+  headingSM: TypeStyle;
+  bodyMD: TypeStyle;
+  bodySM: TypeStyle;
+  bodyXS: TypeStyle;
+}
+
+/* eslint-enable jsdoc/check-property-names, jsdoc/tag-lines */
+export const typography: ThemeTypography = {
+  displayMD: {
+    fontFamily: fontFamilies.euclidCircularB,
+    fontWeight: fontWeights.bold,
+    fontSize: fontSizes.fontSize7,
+    lineHeight: lineHeights.lineHeight6,
+    letterSpacing: letterSpacing.letterSpacing0,
+  },
+  headingLG: {
+    fontFamily: fontFamilies.euclidCircularB,
+    fontWeight: fontWeights.bold,
+    fontSize: fontSizes.fontSize6,
+    lineHeight: lineHeights.lineHeight5,
+    letterSpacing: letterSpacing.letterSpacing0,
+  },
+  headingMD: {
+    fontFamily: fontFamilies.euclidCircularB,
+    fontWeight: fontWeights.bold,
+    fontSize: fontSizes.fontSize5,
+    lineHeight: lineHeights.lineHeight4,
+    letterSpacing: letterSpacing.letterSpacing0,
+  },
+  headingSM: {
+    fontFamily: fontFamilies.euclidCircularB,
+    fontWeight: fontWeights.bold,
+    fontSize: fontSizes.fontSize4,
+    lineHeight: lineHeights.lineHeight4,
+    letterSpacing: letterSpacing.letterSpacing0,
+  },
+  bodyMD: {
+    fontFamily: fontFamilies.euclidCircularB,
+    fontWeight: fontWeights.regular,
+    fontSize: fontSizes.fontSize3,
+    lineHeight: lineHeights.lineHeight3,
+    letterSpacing: letterSpacing.letterSpacing0,
+  },
+  bodySM: {
+    fontFamily: fontFamilies.euclidCircularB,
+    fontWeight: fontWeights.regular,
+    fontSize: fontSizes.fontSize2,
+    lineHeight: lineHeights.lineHeight2,
+    letterSpacing: letterSpacing.letterSpacing0,
+  },
+  bodyXS: {
+    fontFamily: fontFamilies.euclidCircularB,
+    fontWeight: fontWeights.regular,
+    fontSize: fontSizes.fontSize1,
+    lineHeight: lineHeights.lineHeight1,
+    letterSpacing: letterSpacing.letterSpacing1,
+  },
+};