diff --git a/docs/guides/typography-system.md b/docs/guides/typography-system.md
new file mode 100644
index 0000000000..36db6f3afd
--- /dev/null
+++ b/docs/guides/typography-system.md
@@ -0,0 +1,73 @@
+---
+title: Typography
+category: Guides
+order: 8
+---
+
+# Typography
+
+InstUI provides various typography tokens on theme and component level as well.
+
+## Typography components
+
+Your every text-based need should be covered by one of our two typography components, namely `<Text>` and `<Heading>`.
+These components have a `variant` prop with a handful of semantic values to choose from. These values describe multiple aspects of the text, such as `font-weight`, `font-size`, `line-height` and for `<Heading>` the DOM element that should be rendered, (i.e.:`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`).
+
+While you can set all these properties separately as well, our strong recommendation is to use the variant with semantic values and only deviate from it in cases absolutely necessary.
+
+## <Text>
+
+Here is the list of semantic variant values and what they do in `<Text>`
+
+This is always rendered as `<span>`
+
+The values (e.g.:`weightRegular`) are from the currently used theme's typography sections, for example:
+[Canvas Theme](https://instructure.design/#canvas)
+
+| variant            | fontStyle | weight          | size               | lineHeight    |
+| ------------------ | --------- | --------------- | ------------------ | ------------- |
+| descriptionPage    | normal    | weightRegular   | descriptionPage    | lineHeight150 |
+| descriptionSection | normal    | weightRegular   | descriptionSection | lineHeight150 |
+| content            | normal    | weightRegular   | content            | lineHeight150 |
+| contentImportant   | normal    | weightImportant | content            | lineHeight150 |
+| contentQuote       | normal    | weightRegular   | content            | lineHeight150 |
+| contentSmall       | normal    | weightRegular   | contentSmall       | lineHeight150 |
+| legend             | normal    | weightRegular   | legend             | lineHeight150 |
+
+## <Heading>
+
+Here is the list of semantic variant values and how are they rendered in `<Heading>`
+
+| variant          | dom element |
+| ---------------- | ----------- |
+| titlePageDesktop | h1          |
+| titlePageMobile  | h1          |
+| titleSection     | h2          |
+| titleCardSection | h2          |
+| titleModule      | h3          |
+| titleCardLarge   | h4          |
+| titleCardRegular | h4          |
+| titleCardMini    | h4          |
+| label            | h5          |
+| labelInline      | h5          |
+
+## Legacy values
+
+For compatibility reasons we still provide the legacy typography tokens (xxLarge, medium, etc.) so updating InstUI is easier but these tokens shouldn't be used when creating new screens. The following tokens are deprecated from the `themes`, more specifically from `theme.typography`
+
+Deprecated theme tokens:
+
+- fontSizeXSmall
+- fontSizeSmall
+- fontSizeMedium
+- fontSizeLarge
+- fontSizeXLarge
+- fontSizeXXLarge
+- fontWeightLight
+- fontWeightNormal
+- fontWeightBold
+- lineHeight
+- lineHeightFit
+- lineHeightCondensed
+- lineHeightDouble
+- letterSpacingNormal
diff --git a/packages/shared-types/src/BaseTheme.ts b/packages/shared-types/src/BaseTheme.ts
index 33a904489e..26784a7e4e 100644
--- a/packages/shared-types/src/BaseTheme.ts
+++ b/packages/shared-types/src/BaseTheme.ts
@@ -111,6 +111,26 @@ type Typography = {
   letterSpacingNormal: number | 0
   letterSpacingCondensed: string | 0
   letterSpacingExpanded: string | 0
+
+  titlePageDesktop: string
+  titlePageMobile: string
+  titleSection: string
+  titleModule: string
+  titleCardLarge: string
+  titleCardRegular: string
+  titleCardMini: string
+  descriptionPage: string
+  descriptionSection: string
+  label: string
+  content: string
+  contentSmall: string
+  legend: string
+
+  lineHeight100: number
+  lineHeight125: number
+  lineHeight150: number
+  weightRegular: number
+  weightImportant: number
 }
 
 type Size = {
diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
index 1f3d63b80a..16449381f8 100644
--- a/packages/shared-types/src/ComponentThemeVariables.ts
+++ b/packages/shared-types/src/ComponentThemeVariables.ts
@@ -603,7 +603,7 @@ export type GridTheme = {
   spacingLarge: Spacing['large']
 } & Media
 
-export type HeadingTheme = {
+export type HeadingTheme = Typography & {
   lineHeight: Typography['lineHeightCondensed']
   h1FontSize: Typography['fontSizeXXLarge']
   h1FontWeight: Typography['fontWeightBold']
diff --git a/packages/ui-heading/src/Heading/README.md b/packages/ui-heading/src/Heading/README.md
index f865e3ffc6..0a953f813d 100644
--- a/packages/ui-heading/src/Heading/README.md
+++ b/packages/ui-heading/src/Heading/README.md
@@ -4,6 +4,31 @@ describes: Heading
 
 Heading is a component for creating typographic headings.
 
+## Variant
+
+Variant takes care of - almost - all use-cases when it comes hedings on pages. Their name reflects the places they meant to be used. It sets the `level` prop and takes care of the style of the heading
+We recommend using `variants` instead of the `level` (and `as`) props.
+
+NOTE: when `variant` is set, `level` and `as` props are ignored
+
+```js
+---
+type: example
+---
+  <div>
+    <Heading variant="titlePageDesktop"> titlePageDesktop </Heading><br/>
+    <Heading variant="titlePageMobile"> titlePageMobile </Heading><br/>
+    <Heading variant="titleSection"> titleSection </Heading><br/>
+    <Heading variant="titleCardSection"> titleCardSection </Heading><br/>
+    <Heading variant="titleModule"> titleModule </Heading><br/>
+    <Heading variant="titleCardLarge"> titleCardLarge </Heading><br/>
+    <Heading variant="titleCardRegular"> titleCardRegular </Heading><br/>
+    <Heading variant="titleCardMini"> titleCardMini </Heading><br/>
+    <Heading variant="label"> label </Heading><br/>
+    <Heading variant="labelInline"> labelInline </Heading><br/>
+  </div>
+```
+
 ```js
 ---
 type: example
@@ -24,11 +49,7 @@ type: example
 ---
 <div>
   <Heading level="h1" as="h2" margin="0 0 x-small">Heading level One</Heading>
-  <Heading level="h2" as="h1" margin="0 0 x-small">Heading level Two</Heading>
-  <Heading level="h3" margin="0 0 x-small">Heading level Three</Heading>
-  <Heading level="h4" margin="0 0 x-small">Heading level Four</Heading>
-  <Heading level="h5" margin="0 0 x-small">Heading level Five</Heading>
-  <Heading level="reset" as="h2">Heading level reset as a Two</Heading>
+
 </div>
 ```
 
diff --git a/packages/ui-heading/src/Heading/__examples__/Heading.examples.ts b/packages/ui-heading/src/Heading/__examples__/Heading.examples.ts
index 5b11f61b38..7c3091b0b9 100644
--- a/packages/ui-heading/src/Heading/__examples__/Heading.examples.ts
+++ b/packages/ui-heading/src/Heading/__examples__/Heading.examples.ts
@@ -26,7 +26,7 @@ import type { StoryConfig } from '@instructure/ui-test-utils'
 import type { HeadingProps } from '../props'
 
 export default {
-  sectionProp: 'level',
+  sectionProp: 'variant',
   propValues: {
     color: [
       'primary',
@@ -34,7 +34,10 @@ export default {
       'primary-inverse',
       'secondary-inverse',
       'inherit'
-    ]
+    ],
+
+    level: [undefined],
+    as: [undefined]
   },
   getComponentProps: () => {
     return {
diff --git a/packages/ui-heading/src/Heading/index.tsx b/packages/ui-heading/src/Heading/index.tsx
index e7cb967e34..e4ceaa5eba 100644
--- a/packages/ui-heading/src/Heading/index.tsx
+++ b/packages/ui-heading/src/Heading/index.tsx
@@ -36,6 +36,22 @@ import generateComponentTheme from './theme'
 import { propTypes, allowedProps } from './props'
 import type { HeadingProps } from './props'
 
+const variantLevels: Record<
+  NonNullable<HeadingProps['variant']>,
+  'h1' | 'h2' | 'h3' | 'h4' | 'h5'
+> = {
+  titlePageDesktop: 'h1',
+  titlePageMobile: 'h1',
+  titleSection: 'h2',
+  titleCardSection: 'h2',
+  titleModule: 'h3',
+  titleCardLarge: 'h4',
+  titleCardRegular: 'h4',
+  titleCardMini: 'h4',
+  label: 'h5',
+  labelInline: 'h5'
+}
+
 /**
 ---
 category: components
@@ -67,12 +83,26 @@ class Heading extends Component<HeadingProps> {
     }
   }
 
+  checkProps() {
+    const { variant, level, as } = this.props
+    if (variant) {
+      if (level) {
+        console.warn("[Heading]: Don't use 'level' with 'variant' ")
+      }
+      if (as) {
+        console.warn("[Heading]: Don't use 'as' with 'variant' ")
+      }
+    }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.()
+    this.checkProps()
   }
 
   componentDidUpdate() {
     this.props.makeStyles?.()
+    this.checkProps()
   }
 
   render() {
@@ -84,10 +114,16 @@ class Heading extends Component<HeadingProps> {
       margin,
       elementRef,
       makeStyles,
+      variant,
       ...props
     } = this.props
 
-    const ElementType = getElementType(Heading, this.props, () => {
+    const propsForGetElementType = variant ? {} : this.props
+
+    const ElementType = getElementType(Heading, propsForGetElementType, () => {
+      if (variant) {
+        return variantLevels[variant]
+      }
       if (level === 'reset') {
         return 'span'
       } else {
diff --git a/packages/ui-heading/src/Heading/props.ts b/packages/ui-heading/src/Heading/props.ts
index 8a3cf5e304..6a5d16d795 100644
--- a/packages/ui-heading/src/Heading/props.ts
+++ b/packages/ui-heading/src/Heading/props.ts
@@ -78,6 +78,21 @@ type HeadingOwnProps = {
    * Provides a ref to the underlying HTML element
    */
   elementRef?: (element: Element | null) => void
+  /**
+   * Sets style and level at once. The as property will be the same as the level.
+   * NOTE: this is the recommended way of setting the appearance, instead of level
+   */
+  variant?:
+    | 'titlePageDesktop'
+    | 'titlePageMobile'
+    | 'titleSection'
+    | 'titleCardSection'
+    | 'titleModule'
+    | 'titleCardLarge'
+    | 'titleCardRegular'
+    | 'titleCardMini'
+    | 'label'
+    | 'labelInline'
 }
 
 type PropKeys = keyof HeadingOwnProps
@@ -103,7 +118,19 @@ const propTypes: PropValidators<PropKeys> = {
   level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
   as: PropTypes.elementType,
   margin: ThemeablePropTypes.spacing,
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  variant: PropTypes.oneOf([
+    'titlePageDesktop',
+    'titlePageMobile',
+    'titleSection',
+    'titleCardSection',
+    'titleModule',
+    'titleCardLarge',
+    'titleCardRegular',
+    'titleCardMini',
+    'label',
+    'labelInline'
+  ])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -113,7 +140,8 @@ const allowedProps: AllowedPropKeys = [
   'level',
   'as',
   'margin',
-  'elementRef'
+  'elementRef',
+  'variant'
 ]
 
 export type { HeadingProps, HeadingStyle }
diff --git a/packages/ui-heading/src/Heading/styles.ts b/packages/ui-heading/src/Heading/styles.ts
index a588b53984..5bd60262b4 100644
--- a/packages/ui-heading/src/Heading/styles.ts
+++ b/packages/ui-heading/src/Heading/styles.ts
@@ -39,7 +39,70 @@ const generateStyle = (
   componentTheme: HeadingTheme,
   props: HeadingProps
 ): HeadingStyle => {
-  const { level, color, border } = props
+  const { level, color, border, variant } = props
+
+  const variants: Record<NonNullable<HeadingProps['variant']>, object> = {
+    titlePageDesktop: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titlePageDesktop,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titlePageMobile: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titlePageMobile,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleSection,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleSection,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleModule: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleModule,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardLarge: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleCardLarge,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardRegular: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleCardRegular,
+      lineHeight: componentTheme.lineHeight125
+    },
+    titleCardMini: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.titleCardMini,
+      lineHeight: componentTheme.lineHeight125
+    },
+    label: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.label,
+      lineHeight: componentTheme.lineHeight125
+    },
+    labelInline: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.label,
+      lineHeight: componentTheme.lineHeight150
+    }
+  }
 
   const levelStyles = {
     h1: {
@@ -125,7 +188,7 @@ const generateStyle = (
       '&:is(input)[type]': inputStyles,
       '&:-webkit-any(input)[type]': inputStyles,
 
-      ...levelStyles[level!],
+      ...(variant ? variants[variant] : levelStyles[level!]),
       ...colorStyles[color!],
       ...borderStyles[border!]
     }
diff --git a/packages/ui-heading/src/Heading/theme.ts b/packages/ui-heading/src/Heading/theme.ts
index 90b81e2f50..69d192f202 100644
--- a/packages/ui-heading/src/Heading/theme.ts
+++ b/packages/ui-heading/src/Heading/theme.ts
@@ -50,6 +50,8 @@ const generateComponentTheme = (theme: Theme): HeadingTheme => {
   }
 
   const componentVariables: HeadingTheme = {
+    ...typography,
+
     lineHeight: typography?.lineHeightCondensed,
 
     h1FontSize: typography?.fontSizeXXLarge,
diff --git a/packages/ui-text/src/Text/README.md b/packages/ui-text/src/Text/README.md
index 5c42e43065..6f145a43e5 100644
--- a/packages/ui-text/src/Text/README.md
+++ b/packages/ui-text/src/Text/README.md
@@ -4,6 +4,28 @@ describes: Text
 
 A component for styling textual content
 
+## Variant
+
+Variant takes care of - almost - all use-cases when it comes to texts on pages. Their name reflects the places they meant to be used. It sets `size`, `weight`, `fontStyle` and `lineHeight`
+We recommend using `variants` instead of the aforementioned props.
+
+NOTE: when `variant` is set, `size`, `weight`, `fontStyle` and `lineHeight` props are ignored
+
+```js
+---
+type: example
+---
+<div>
+  <Text variant="descriptionPage"> descriptionPage </Text><br/>
+  <Text variant="descriptionSection"> descriptionSection </Text><br/>
+  <Text variant="content"> content </Text><br/>
+  <Text variant="contentImportant"> contentImportant </Text><br/>
+  <Text variant="contentQuote"> contentQuote </Text><br/>
+  <Text variant="contentSmall"> contentSmall </Text><br/>
+  <Text variant="legend"> legend </Text><br/>
+</div>
+```
+
 ### Font sizes
 
 ```js
@@ -11,12 +33,11 @@ A component for styling textual content
 type: example
 ---
 <div>
-  <Text size="x-small">I&#39;m extra small</Text><br/>
-  <Text size="small">I&#39;m small</Text><br/>
-  <Text>I&#39;m medium</Text><br/>
-  <Text size="large">I&#39;m large</Text><br/>
-  <Text size="x-large">I&#39;m extra large</Text><br/>
-  <Text size="xx-large">I&#39;m extra extra large</Text>
+  <Text size='descriptionPage'>descriptionPage</Text><br/>
+  <Text size='descriptionSection'>descriptionSection</Text><br/>
+  <Text size='content'>content</Text><br/>
+  <Text size='contentSmall'>contentSmall</Text><br/>
+  <Text size='legend'>legend</Text>
 </div>
 ```
 
@@ -27,9 +48,8 @@ type: example
 type: example
 ---
 <div>
-  <Text weight="light">I&#39;m light text</Text><br/>
-  <Text>I&#39;m normal text</Text><br/>
-  <Text weight="bold">I&#39;m bold text</Text>
+  <Text weight="weightRegular">weightRegular</Text><br/>
+  <Text weight="weightImportant">weightImportant</Text>
 </div>
 ```
 
@@ -52,16 +72,14 @@ type: example
 type: example
 ---
 <div>
-  <Text lineHeight="fit">
+  <br/><br/>
+  <Text lineHeight="lineHeight100">
     <p>{lorem.paragraph()}</p>
   </Text>
-  <Text>
+  <Text lineHeight="lineHeight125">
     <p>{lorem.paragraph()}</p>
   </Text>
-  <Text lineHeight="condensed">
-    <p>{lorem.paragraph()}</p>
-  </Text>
-  <Text lineHeight="double">
+  <Text lineHeight="lineHeight150">
     <p>{lorem.paragraph()}</p>
   </Text>
 </div>
@@ -158,3 +176,29 @@ type: example
   This<sup>is</sup> some<sub>text</sub>.
 </Text>
 ```
+
+### DEPRECATED legacy values
+
+Multiple values from `size`, `weight` and `lineHeight` are deprecated, but still supported for backward compatibility reasons. Please only use the above listed, semantic values.
+
+Deprecated `size` values:
+
+- x-small
+- small
+- medium
+- large
+- x-large
+- xx-large
+
+Deprecated `weight` values:
+
+- normal
+- light
+- bold
+
+Deprecated `lineHeight` values:
+
+- default
+- fit
+- condensed
+- double
diff --git a/packages/ui-text/src/Text/__examples__/Text.examples.ts b/packages/ui-text/src/Text/__examples__/Text.examples.ts
index 7e121db106..65b85f95dc 100644
--- a/packages/ui-text/src/Text/__examples__/Text.examples.ts
+++ b/packages/ui-text/src/Text/__examples__/Text.examples.ts
@@ -26,16 +26,13 @@ import type { StoryConfig } from '@instructure/ui-test-utils'
 import type { TextProps } from '../props'
 
 export default {
-  sectionProp: 'weight',
+  sectionProp: 'variant',
   maxExamplesPerPage: 50,
   maxExamples: 1000,
-  getComponentProps: (props) => {
+  getComponentProps: () => {
     return {
       children:
-        props.size &&
-        ['x-small', 'small', 'medium', 'large'].includes(props.size)
-          ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
-          : 'Lorem ipsum dolor sit amet, consectetur'
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
     }
   },
   getExampleProps: (props) => {
@@ -46,24 +43,23 @@ export default {
       maxWidth: '25rem'
     }
   },
+  propValues: {
+    weight: [undefined],
+    lineHeight: [undefined],
+    size: [undefined],
+    fontStyle: [undefined]
+  },
   filter: (props) => {
     return (
       // Only generate a 1 variation for non-'primary' color
       (props.color !== 'primary' &&
-        (props.fontStyle !== 'normal' ||
-          props.letterSpacing !== 'normal' ||
-          props.lineHeight !== 'default' ||
-          props.size !== 'medium' ||
+        (props.letterSpacing !== 'normal' ||
           props.transform !== 'none' ||
-          props.weight !== 'normal' ||
           props.wrap !== 'normal')) ||
       // Only generate a 1 variation for non-'medium' size
       (props.size !== 'medium' &&
-        (props.fontStyle !== 'normal' ||
-          props.letterSpacing !== 'normal' ||
-          props.lineHeight !== 'default' ||
+        (props.letterSpacing !== 'normal' ||
           props.transform !== 'none' ||
-          props.weight !== 'normal' ||
           props.wrap !== 'normal'))
     )
   }
diff --git a/packages/ui-text/src/Text/index.tsx b/packages/ui-text/src/Text/index.tsx
index 8ea5bb08c3..c460a6ced1 100644
--- a/packages/ui-text/src/Text/index.tsx
+++ b/packages/ui-text/src/Text/index.tsx
@@ -53,12 +53,32 @@ class Text extends Component<TextProps> {
     children: null
   } as const
 
+  checkProps() {
+    const { variant, size, lineHeight, weight, fontStyle } = this.props
+    if (variant) {
+      if (size) {
+        console.warn("[Text]: Don't use 'size' with 'variant' ")
+      }
+      if (lineHeight) {
+        console.warn("[Text]: Don't use 'lineHeight' with 'variant' ")
+      }
+      if (weight) {
+        console.warn("[Text]: Don't use 'weight' with 'variant' ")
+      }
+      if (fontStyle) {
+        console.warn("[Text]: Don't use 'fontStyle' with 'variant' ")
+      }
+    }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.()
+    this.checkProps()
   }
 
   componentDidUpdate() {
     this.props.makeStyles?.()
+    this.checkProps()
   }
 
   render() {
diff --git a/packages/ui-text/src/Text/props.ts b/packages/ui-text/src/Text/props.ts
index ae120628a8..1e15de34cc 100644
--- a/packages/ui-text/src/Text/props.ts
+++ b/packages/ui-text/src/Text/props.ts
@@ -57,10 +57,41 @@ type TextOwnProps = {
   elementRef?: (element: Element | null) => void
   fontStyle?: 'italic' | 'normal'
   letterSpacing?: 'normal' | 'condensed' | 'expanded'
-  lineHeight?: 'default' | 'fit' | 'condensed' | 'double'
-  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'
+  lineHeight?:
+    | 'default'
+    | 'fit'
+    | 'condensed'
+    | 'double'
+    | 'lineHeight100'
+    | 'lineHeight125'
+    | 'lineHeight150'
+  size?:
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+    | 'descriptionPage'
+    | 'descriptionSection'
+    | 'content'
+    | 'contentSmall'
+    | 'legend'
   transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
-  weight?: 'normal' | 'light' | 'bold'
+  /**
+   * Sets multiple props at once. (size, fontStyle, lineHeight, weight)
+   * If set, these props are not allowed.
+   * NOTE: this is the recommended way of setting these values
+   */
+  variant?:
+    | 'descriptionPage'
+    | 'descriptionSection'
+    | 'content'
+    | 'contentImportant'
+    | 'contentQuote'
+    | 'contentSmall'
+    | 'legend'
+  weight?: 'normal' | 'light' | 'bold' | 'weightRegular' | 'weightImportant'
   wrap?: 'normal' | 'break-word'
   children?: React.ReactNode
 }
@@ -91,17 +122,45 @@ const propTypes: PropValidators<PropKeys> = {
   elementRef: PropTypes.func,
   fontStyle: PropTypes.oneOf(['italic', 'normal']),
   letterSpacing: PropTypes.oneOf(['normal', 'condensed', 'expanded']),
-  lineHeight: PropTypes.oneOf(['default', 'fit', 'condensed', 'double']),
+  lineHeight: PropTypes.oneOf([
+    'default',
+    'fit',
+    'condensed',
+    'double',
+    'lineHeight100',
+    'lineHeight125',
+    'lineHeight150'
+  ]),
   size: PropTypes.oneOf([
     'x-small',
     'small',
     'medium',
     'large',
     'x-large',
-    'xx-large'
+    'xx-large',
+    'descriptionPage',
+    'descriptionSection',
+    'content',
+    'contentSmall',
+    'legend'
   ]),
   transform: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
-  weight: PropTypes.oneOf(['normal', 'light', 'bold']),
+  variant: PropTypes.oneOf([
+    'descriptionPage',
+    'descriptionSection',
+    'content',
+    'contentImportant',
+    'contentQuote',
+    'contentSmall',
+    'legend'
+  ]),
+  weight: PropTypes.oneOf([
+    'normal',
+    'light',
+    'bold',
+    'weightRegular',
+    'weightImportant'
+  ]),
   wrap: PropTypes.oneOf(['normal', 'break-word'])
 }
 
@@ -115,6 +174,7 @@ const allowedProps: AllowedPropKeys = [
   'lineHeight',
   'size',
   'transform',
+  'variant',
   'weight',
   'wrap'
 ]
diff --git a/packages/ui-text/src/Text/styles.ts b/packages/ui-text/src/Text/styles.ts
index c4b2b024b0..117c57435c 100644
--- a/packages/ui-text/src/Text/styles.ts
+++ b/packages/ui-text/src/Text/styles.ts
@@ -47,9 +47,55 @@ const generateStyle = (
     transform,
     lineHeight,
     letterSpacing,
-    color
+    color,
+    variant
   } = props
 
+  const variants: Record<NonNullable<TextProps['variant']>, object> = {
+    descriptionPage: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.descriptionPage,
+      lineHeight: componentTheme.lineHeight150
+    },
+    descriptionSection: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.descriptionSection,
+      lineHeight: componentTheme.lineHeight150
+    },
+    content: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentImportant: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightImportant,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentQuote: {
+      fontStyle: 'italic',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.content,
+      lineHeight: componentTheme.lineHeight150
+    },
+    contentSmall: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.contentSmall,
+      lineHeight: componentTheme.lineHeight150
+    },
+    legend: {
+      fontStyle: 'normal',
+      fontWeight: componentTheme.weightRegular,
+      fontSize: componentTheme.legend,
+      lineHeight: componentTheme.lineHeight150
+    }
+  }
+
   const colorVariants = {
     primary: { color: componentTheme.primaryColor },
     secondary: { color: componentTheme.secondaryColor },
@@ -70,7 +116,9 @@ const generateStyle = (
   const weightStyle = {
     normal: { fontWeight: componentTheme.fontWeightNormal },
     light: { fontWeight: componentTheme.fontWeightLight },
-    bold: { fontWeight: componentTheme.fontWeightBold }
+    bold: { fontWeight: componentTheme.fontWeightBold },
+    weightRegular: { fontWeight: componentTheme.weightRegular },
+    weightImportant: { fontWeight: componentTheme.weightImportant }
   }
 
   const fontSizeVariants = {
@@ -79,14 +127,22 @@ const generateStyle = (
     medium: componentTheme.fontSizeMedium,
     large: componentTheme.fontSizeLarge,
     'x-large': componentTheme.fontSizeXLarge,
-    'xx-large': componentTheme.fontSizeXXLarge
+    'xx-large': componentTheme.fontSizeXXLarge,
+    descriptionPage: componentTheme.descriptionPage,
+    descriptionSection: componentTheme.descriptionSection,
+    content: componentTheme.content,
+    contentSmall: componentTheme.contentSmall,
+    legend: componentTheme.legend
   }
 
   const lineHeightVariants = {
     default: { lineHeight: componentTheme.lineHeight },
     fit: { lineHeight: componentTheme.lineHeightFit },
     condensed: { lineHeight: componentTheme.lineHeightCondensed },
-    double: { lineHeight: componentTheme.lineHeightDouble }
+    double: { lineHeight: componentTheme.lineHeightDouble },
+    lineHeight100: { lineHeight: componentTheme.lineHeight100 },
+    lineHeight125: { lineHeight: componentTheme.lineHeight125 },
+    lineHeight150: { lineHeight: componentTheme.lineHeight150 }
   }
 
   const letterSpacingVariants = {
@@ -95,18 +151,27 @@ const generateStyle = (
     expanded: componentTheme.letterSpacingExpanded
   }
 
+  const calcTextStyles = () => {
+    if (variant) {
+      return variants[variant]
+    }
+    return {
+      ...(weight ? weightStyle[weight] : {}),
+      ...(fontStyle ? { fontStyle: fontStyle } : {}),
+      fontSize: fontSizeVariants[size!],
+      ...(lineHeight ? lineHeightVariants[lineHeight] : {})
+    }
+  }
+
   const baseStyles = {
     '&:focus': {
       outline: 'none'
     },
     ...(color ? colorVariants[color] : {}),
     ...(wrap === 'break-word' ? wrapStyle : {}),
-    ...(weight ? weightStyle[weight] : {}),
-    ...(fontStyle ? { fontStyle: fontStyle } : {}),
-    fontSize: fontSizeVariants[size!],
-    ...(lineHeight ? lineHeightVariants[lineHeight] : {}),
     letterSpacing: letterSpacingVariants[letterSpacing!],
-    ...(transform ? { textTransform: transform } : {})
+    ...(transform ? { textTransform: transform } : {}),
+    ...calcTextStyles()
   }
 
   const inputStyles = {
diff --git a/packages/ui-themes/src/sharedThemeTokens/typography.ts b/packages/ui-themes/src/sharedThemeTokens/typography.ts
index c0562d4164..a0f7d8317e 100644
--- a/packages/ui-themes/src/sharedThemeTokens/typography.ts
+++ b/packages/ui-themes/src/sharedThemeTokens/typography.ts
@@ -28,6 +28,12 @@ const typography: Typography = Object.freeze({
   fontFamily: 'LatoWeb, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif',
   fontFamilyMonospace: 'Menlo, Consolas, Monaco, "Andale Mono", monospace',
 
+  letterSpacingNormal: 0,
+  letterSpacingCondensed: '-0.0625rem',
+  letterSpacingExpanded: '0.0625rem',
+
+  // deprecated values
+
   fontSizeXSmall: '0.75rem', // 12px
   fontSizeSmall: '0.875rem', // 14px
   fontSizeMedium: '1rem', // 16px
@@ -44,9 +50,26 @@ const typography: Typography = Object.freeze({
   lineHeightCondensed: 1.25,
   lineHeightDouble: 2,
 
-  letterSpacingNormal: 0,
-  letterSpacingCondensed: '-0.0625rem',
-  letterSpacingExpanded: '0.0625rem'
+  // new values
+  titlePageDesktop: '2.25rem',
+  titlePageMobile: '2rem',
+  titleSection: '1.75rem',
+  titleModule: '1.5rem',
+  titleCardLarge: '1.5rem',
+  titleCardRegular: '1.25rem',
+  titleCardMini: '1rem',
+  descriptionPage: '1.25rem',
+  descriptionSection: '1rem',
+  label: '1rem',
+  content: '1rem',
+  contentSmall: '0.875rem',
+  legend: '0.75rem',
+
+  lineHeight100: 1,
+  lineHeight125: 1.25,
+  lineHeight150: 1.5,
+  weightRegular: 400,
+  weightImportant: 700
 })
 
 export default typography