From 1fb88b6fc003e2f76aa7ad87448c6add76d3575e Mon Sep 17 00:00:00 2001
From: ccedrone <77400920+ccedrone@users.noreply.github.com>
Date: Tue, 5 Dec 2023 15:42:00 -0500
Subject: [PATCH] fix: Updates to the Expressive font styles for both desktop
 and mobile (#1167)

Co-authored-by: Laura Silva <silvalaurav@gmail.com>
---
 .changeset/fix-expressiveText.md              |   5 +
 .../components/Heading/Heading.stories.tsx    | 189 +++++++++---------
 .../Paragraph/Paragraph.stories.tsx           |  55 +++--
 .../src/components/Typography/index.tsx       |  29 ++-
 packages/react-magma-dom/src/theme/magma.ts   |  33 +--
 .../src/pages/api-intro/styles-and-themes.mdx |  14 +-
 .../src/pages/design-intro/typography.mdx     |  52 +++--
 7 files changed, 211 insertions(+), 166 deletions(-)
 create mode 100644 .changeset/fix-expressiveText.md

diff --git a/.changeset/fix-expressiveText.md b/.changeset/fix-expressiveText.md
new file mode 100644
index 000000000..101c589f3
--- /dev/null
+++ b/.changeset/fix-expressiveText.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix: Updates to the expressive font styles for both desktop and mobile.
diff --git a/packages/react-magma-dom/src/components/Heading/Heading.stories.tsx b/packages/react-magma-dom/src/components/Heading/Heading.stories.tsx
index 3f0fe6909..f2552808d 100644
--- a/packages/react-magma-dom/src/components/Heading/Heading.stories.tsx
+++ b/packages/react-magma-dom/src/components/Heading/Heading.stories.tsx
@@ -11,67 +11,136 @@ import { Meta } from '@storybook/react/types-6-0';
 export default {
   component: Heading,
   title: 'Heading',
+  argTypes: {
+    isInverse: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+  },
 } as Meta;
 
-export const Default = () => {
+export const Default = args => {
   return (
-    <>
-      <Heading level={1}>Heading 1 (X-Large) - Productive</Heading>
-      <Heading level={2}>Heading 2 (Large) - Productive</Heading>
-      <Heading level={3}>Heading 3 (Medium) - Productive</Heading>
-      <Heading level={4}>Heading 4 (Small) - Productive</Heading>
-      <Heading level={5}>Heading 5 (X-Small) - Productive</Heading>
-      <Heading level={6}>Heading 6 (2X-Small) - Productive</Heading>
+    <Card isInverse={args.isInverse} style={{ padding: '0 24px' }}>
+      <Heading level={1} {...args}>
+        Heading 1 (X-Large) - Productive
+      </Heading>
+      <Heading level={2} {...args}>
+        Heading 2 (Large) - Productive
+      </Heading>
+      <Heading level={3} {...args}>
+        Heading 3 (Medium) - Productive
+      </Heading>
+      <Heading level={4} {...args}>
+        Heading 4 (Small) - Productive
+      </Heading>
+      <Heading level={5} {...args}>
+        Heading 5 (X-Small) - Productive
+      </Heading>
+      <Heading level={6} {...args}>
+        Heading 6 (2X-Small) - Productive
+      </Heading>
       <br />
       <Heading
         level={1}
         contextVariant={TypographyContextVariant.expressive}
         visualStyle={TypographyVisualStyle.heading2XLarge}
+        {...args}
       >
         Heading 1 (2X-Large) - Expressive
       </Heading>
-      <Heading level={1} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={1}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 1 (X-Large) - Expressive
       </Heading>
-      <Heading level={2} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={2}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 2 (Large) - Expressive
       </Heading>
-      <Heading level={3} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={3}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 3 (Medium) - Expressive
       </Heading>
-      <Heading level={4} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={4}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 4 (Small) - Expressive
       </Heading>
-      <Heading level={5} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={5}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 5 (X-Small) - Expressive
       </Heading>
-      <Heading level={6} contextVariant={TypographyContextVariant.expressive}>
+      <Heading
+        level={6}
+        contextVariant={TypographyContextVariant.expressive}
+        {...args}
+      >
         Heading 6 (2X-Small) - Expressive
       </Heading>
       <br />
-      <Heading level={1} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={1}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 1 (X-Large) - Narrative
       </Heading>
-      <Heading level={2} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={2}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 2 (Large) - Narrative
       </Heading>
-      <Heading level={3} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={3}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 3 (Medium) - Narrative
       </Heading>
-      <Heading level={4} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={4}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 4 (Small) - Narrative
       </Heading>
-      <Heading level={5} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={5}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 5 (X-Small) - Narrative
       </Heading>
-      <Heading level={6} contextVariant={TypographyContextVariant.narrative}>
+      <Heading
+        level={6}
+        contextVariant={TypographyContextVariant.narrative}
+        {...args}
+      >
         Heading 6 (2X-Small) - Narrative
       </Heading>
-    </>
+    </Card>
   );
 };
 
-export const Colors = () => {
+export const Colors = args => {
   return (
     <>
       <Card style={{ padding: '0 24px' }}>
@@ -104,78 +173,4 @@ export const Colors = () => {
   );
 };
 
-export const Inverse = () => {
-  return (
-    <Card isInverse style={{ padding: '0 24px' }}>
-      <Heading level={1} isInverse>
-        Heading 1 (X-Large) - Productive
-      </Heading>
-      <Heading level={2} isInverse>
-        Heading 2 (Large) - Productive
-      </Heading>
-      <Heading level={3} isInverse>
-        Heading 3 (Medium) - Productive
-      </Heading>
-      <Heading level={4} isInverse>
-        Heading 4 (Small) - Productive
-      </Heading>
-      <Heading level={5} isInverse>
-        Heading 5 (X-Small) - Productive
-      </Heading>
-      <Heading level={6} isInverse>
-        Heading 6 (2X-Small) - Productive
-      </Heading>
-      <br />
-      <Heading
-        level={1}
-        contextVariant={TypographyContextVariant.expressive}
-        visualStyle={TypographyVisualStyle.heading2XLarge}
-        isInverse
-      >
-        Heading 1 (2X-Large) - Expressive
-      </Heading>
-      <Heading
-        level={1}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 1 (X-Large) - Expressive
-      </Heading>
-      <Heading
-        level={2}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 2 (Large) - Expressive
-      </Heading>
-      <Heading
-        level={3}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 3 (Medium) - Expressive
-      </Heading>
-      <Heading
-        level={4}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 4 (Small) - Expressive
-      </Heading>
-      <Heading
-        level={5}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 5 (X-Small) - Expressive
-      </Heading>
-      <Heading
-        level={6}
-        contextVariant={TypographyContextVariant.expressive}
-        isInverse
-      >
-        Heading 6 (2X-Small) - Expressive
-      </Heading>
-    </Card>
-  );
-};
+Colors.parameters = { controls: { exclude: ['isInverse'] } };
diff --git a/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx b/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx
index 0b6fea7d6..a786583ed 100644
--- a/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx
+++ b/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx
@@ -2,77 +2,94 @@ import React from 'react';
 import { Paragraph } from '.';
 import { TypographyContextVariant, TypographyVisualStyle } from '../Typography';
 import { Meta } from '@storybook/react/types-6-0';
+import { Card } from '../..';
 
 export default {
   component: Paragraph,
   title: 'Paragraph',
+  argTypes: {
+    isInverse: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+  },
 } as Meta;
 
-export const Default = () => {
+export const Default = args => {
   return (
-    <>
-      <Paragraph visualStyle={TypographyVisualStyle.bodyLarge}>
-        Body Large
+    <Card isInverse={args.isInverse} style={{ padding: '0 24px' }}>
+      <Paragraph visualStyle={TypographyVisualStyle.bodyLarge} {...args}>
+        Paragraph Body Large
       </Paragraph>
-      <Paragraph visualStyle={TypographyVisualStyle.bodyMedium}>
-        Body Medium
+      <Paragraph visualStyle={TypographyVisualStyle.bodyMedium} {...args}>
+        Paragraph Body Medium
       </Paragraph>
-      <Paragraph visualStyle={TypographyVisualStyle.bodySmall}>
-        Body Small
+      <Paragraph visualStyle={TypographyVisualStyle.bodySmall} {...args}>
+        Paragraph Body Small
       </Paragraph>
-      <Paragraph visualStyle={TypographyVisualStyle.bodyXSmall}>
-        Body X-Small
+      <Paragraph visualStyle={TypographyVisualStyle.bodyXSmall} {...args}>
+        Paragraph Body X-Small
       </Paragraph>
 
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyLarge}
         contextVariant={TypographyContextVariant.narrative}
+        {...args}
       >
-        Narrative Large
+        Paragraph Narrative Large
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyMedium}
         contextVariant={TypographyContextVariant.narrative}
+        {...args}
       >
-        Narrative Medium
+        Paragraph Narrative Medium
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodySmall}
         contextVariant={TypographyContextVariant.narrative}
+        {...args}
       >
-        Narrative Small
+        Paragraph Narrative Small
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyXSmall}
         contextVariant={TypographyContextVariant.narrative}
+        {...args}
       >
-        Narrative X-Small
+        Paragraph Narrative X-Small
       </Paragraph>
 
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyLarge}
         contextVariant={TypographyContextVariant.expressive}
+        {...args}
       >
-        Expressive Large
+        Paragraph Expressive Large
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyMedium}
         contextVariant={TypographyContextVariant.expressive}
+        {...args}
       >
-        Expressive Medium
+        Paragraph Expressive Medium
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodySmall}
         contextVariant={TypographyContextVariant.expressive}
+        {...args}
       >
-        Expressive Small
+        Paragraph Expressive Small
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyXSmall}
         contextVariant={TypographyContextVariant.expressive}
+        {...args}
       >
-        Expressive X-Small
+        Paragraph Expressive X-Small
       </Paragraph>
-    </>
+    </Card>
   );
 };
diff --git a/packages/react-magma-dom/src/components/Typography/index.tsx b/packages/react-magma-dom/src/components/Typography/index.tsx
index 5d94e0cc1..1c51b60ab 100644
--- a/packages/react-magma-dom/src/components/Typography/index.tsx
+++ b/packages/react-magma-dom/src/components/Typography/index.tsx
@@ -58,12 +58,23 @@ export function getBodyFontFamily(props) {
   }
 }
 
-export const colorStyles = props => css`
-  color: ${props.isInverse
-    ? props.theme.colors.neutral100
-    : props.contextVariant === 'expressive'
-    ? props.theme.colors.primary600
-    : props.theme.colors.neutral700};
+export function getBaseFontColor(props, isHeading = false) {
+  if (props.isInverse) {
+    return props.theme.colors.neutral100;
+  }
+
+  // Expressive headings use primary color
+  if (
+    props.contextVariant === TypographyContextVariant.expressive &&
+    isHeading
+  ) {
+    return props.theme.colors.primary600;
+  }
+  return props.theme.colors.neutral700;
+}
+
+export const colorStyles = (props, isHeading: boolean) => css`
+  color: ${getBaseFontColor(props, isHeading)};
 
   ${props.color === TypographyColor.danger &&
   !props.isInverse &&
@@ -104,7 +115,7 @@ ${props.color === TypographyColor.subdued &&
 `;
 
 const baseParagraphStyles = props => css`
-  ${colorStyles(props)}
+  ${colorStyles(props, false)}
   font-family: ${getBodyFontFamily(props)};
   font-weight: normal;
 `;
@@ -220,7 +231,7 @@ const baseHeadingStyles = props => css`
     transition: border 0.1s linear;
   }
 
-  ${colorStyles(props)}
+  ${colorStyles(props, true)}
 `;
 
 export const heading2XLargeStyles = props => css`
@@ -378,6 +389,8 @@ export const headingMediumStyles = props => css`
     @media (min-width: ${props.theme.breakpoints.small}px) {
       font-size: ${props.theme.typographyExpressiveVisualStyles.headingMedium
         .desktop.fontSize};
+      font-weight: ${props.theme.typographyExpressiveVisualStyles.headingMedium
+        .fontWeight};
       line-height: ${props.theme.typographyExpressiveVisualStyles.headingMedium
         .desktop.lineHeight};
     }
diff --git a/packages/react-magma-dom/src/theme/magma.ts b/packages/react-magma-dom/src/theme/magma.ts
index 60fe99d25..a23f11222 100644
--- a/packages/react-magma-dom/src/theme/magma.ts
+++ b/packages/react-magma-dom/src/theme/magma.ts
@@ -143,6 +143,7 @@ export interface TypeScale {
   size13: TypeScaleSize;
   size14: TypeScaleSize;
   size15: TypeScaleSize;
+  size16: TypeScaleSize;
 }
 
 export interface VisualStyle {
@@ -354,11 +355,11 @@ const typeScale = {
   },
   size11: {
     fontSize: '48px',
-    lineHeight: '56px',
+    lineHeight: '64px',
   },
   size12: {
     fontSize: '52px',
-    lineHeight: '68px',
+    lineHeight: '64px',
   },
   size13: {
     fontSize: '54px',
@@ -369,6 +370,10 @@ const typeScale = {
     lineHeight: '72px',
   },
   size15: {
+    fontSize: '64px',
+    lineHeight: '84px',
+  },
+  size16: {
     fontSize: '72px',
     lineHeight: '84px',
   },
@@ -575,43 +580,43 @@ export const magma = {
   },
   typographyExpressiveVisualStyles: {
     heading2XLarge: {
-      mobile: typeScale.size13,
+      mobile: typeScale.size11,
       desktop: typeScale.size15,
-      fontWeight: 600,
+      fontWeight: 500,
     },
     headingXLarge: {
-      mobile: typeScale.size10,
-      desktop: typeScale.size12,
-      fontWeight: 400,
+      mobile: typeScale.size09,
+      desktop: typeScale.size11,
+      fontWeight: 600,
     },
     headingLarge: {
       mobile: typeScale.size07,
       desktop: typeScale.size09,
-      fontWeight: 300,
+      fontWeight: 600,
     },
     headingMedium: {
       mobile: typeScale.size06,
       desktop: typeScale.size07,
-      fontWeight: 300,
+      fontWeight: 600,
     },
     headingSmall: {
       mobile: typeScale.size05,
       desktop: typeScale.size06,
-      fontWeight: 300,
+      fontWeight: 500,
     },
     headingXSmall: {
       mobile: typeScale.size04,
       desktop: typeScale.size05,
-      fontWeight: 300,
+      fontWeight: 500,
     },
     heading2XSmall: {
       mobile: typeScale.size03,
-      desktop: typeScale.size03,
-      fontWeight: 700,
+      desktop: typeScale.size04,
+      fontWeight: 500,
     },
     bodyLarge: {
       mobile: typeScale.size05,
-      desktop: typeScale.size06,
+      desktop: typeScale.size05,
     },
     bodyMedium: {
       mobile: typeScale.size03,
diff --git a/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx b/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx
index a2f5b60c7..1d8e42e3f 100644
--- a/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx
+++ b/website/react-magma-docs/src/pages/api-intro/styles-and-themes.mdx
@@ -516,24 +516,24 @@ typographyVisualStyles: {
 },
 typographyExpressiveVisualStyles: {
   heading2XLarge: {
-    mobile: typeScale.size13,
+    mobile: typeScale.size11,
     desktop: typeScale.size15,
-    fontWeight: 600,
+    fontWeight: 500,
   },
   headingXLarge: {
-    mobile: typeScale.size10,
-    desktop: typeScale.size12,
-    fontWeight: 400,
+    mobile: typeScale.size09,
+    desktop: typeScale.size11,
+    fontWeight: 600,
   },
   headingLarge: {
     mobile: typeScale.size07,
     desktop: typeScale.size09,
-    fontWeight: 300,
+    fontWeight: 600,
   },
   headingMedium: {
     mobile: typeScale.size06,
     desktop: typeScale.size07,
-    fontWeight: 300,
+    fontWeight: 600,
   },
   ...
 },
diff --git a/website/react-magma-docs/src/pages/design-intro/typography.mdx b/website/react-magma-docs/src/pages/design-intro/typography.mdx
index 9135a22b9..9370d0995 100644
--- a/website/react-magma-docs/src/pages/design-intro/typography.mdx
+++ b/website/react-magma-docs/src/pages/design-intro/typography.mdx
@@ -292,7 +292,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
         <strong>Body / Large</strong>
       </p>
       <p>Typeface: Work Sans</p>
-      <p>Size: 24px / 1.5em</p>
+      <p>Size: 20px / 1.5em</p>
       <p>Line-height: 32px / 2em</p>
       <p>Weight: Regular / 400</p>
       <p>Letter-spacing: 0px</p>
@@ -331,9 +331,9 @@ Expressive type is reserved for use in editorial and digital marketing experienc
         <strong>Heading / 2X-Large</strong>
       </p>
       <p>Typeface: Work Sans</p>
-      <p>Size: 72px / 4.5em</p>
+      <p>Size: 64px / 4em</p>
       <p>Line-height: 84px / 5.25em</p>
-      <p>Weight: Semibold / 600</p>
+      <p>Weight: Medium / 500</p>
       <p>Letter-spacing: 0px</p>
     </div>
     <div class="type-specs specs-mobile">
@@ -341,9 +341,9 @@ Expressive type is reserved for use in editorial and digital marketing experienc
         <strong>Heading / 2X-Large</strong>
       </p>
       <p>Typeface: Work Sans</p>
-      <p>Size: 54px / 3.375em</p>
+      <p>Size: 48px / 3em</p>
       <p>Line-height: 64px / 4em</p>
-      <p>Weight: Semibold / 600</p>
+      <p>Weight: Medium / 500</p>
       <p>Letter-spacing: 0px</p>
     </div>
   </div>
@@ -362,9 +362,9 @@ Expressive type is reserved for use in editorial and digital marketing experienc
         <strong>Heading / X-Large</strong>
       </p>
       <p>Typeface: Work Sans</p>
-      <p>Size: 52px / 3.25em</p>
-      <p>Line-height: 68px / 4.25em</p>
-      <p>Weight: Regular / 400</p>
+      <p>Size: 48px / 3em</p>
+      <p>Line-height: 64px / 4em</p>
+      <p>Weight: Semibold / 600</p>
       <p>Letter-spacing: 0px</p>
     </div>
     <div class="type-specs specs-mobile">
@@ -372,9 +372,9 @@ Expressive type is reserved for use in editorial and digital marketing experienc
         <strong>Heading / X-Large</strong>
       </p>
       <p>Typeface: Work Sans</p>
-      <p>Size: 42px / 2.625em</p>
+      <p>Size: 36px / 2.25em</p>
       <p>Line-height: 48px / 3em</p>
-      <p>Weight: Regular / 400</p>
+      <p>Weight: Semibold / 600</p>
       <p>Letter-spacing: 0px</p>
     </div>
   </div>
@@ -395,7 +395,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
       <p>Typeface: Work Sans</p>
       <p>Size: 36px / 2.25em</p>
       <p>Line-height: 48px / 3em</p>
-      <p>Weight: Light / 300</p>
+      <p>Weight: Semibold / 600</p>
       <p>Letter-spacing: 0px</p>
     </div>
     <div class="type-specs specs-mobile">
@@ -405,7 +405,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
       <p>Typeface: Work Sans</p>
       <p>Size: 28px / 1.75em</p>
       <p>Line-height: 40px / 2.5em</p>
-      <p>Weight: Light / 300</p>
+      <p>Weight: Semibold / 600</p>
       <p>Letter-spacing: 0px</p>
     </div>
   </div>
@@ -426,7 +426,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
       <p>Typeface: Work Sans</p>
       <p>Size: 28px / 1.75em</p>
       <p>Line-height: 40px / 2.5em</p>
-      <p>Weight: Light / 300</p>
+      <p>Weight: Semibold / 600</p>
       <p>Letter-spacing: 0px</p>
     </div>
     <div class="type-specs specs-mobile">
@@ -436,7 +436,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
       <p>Typeface: Work Sans</p>
       <p>Size: 24px / 1.5em</p>
       <p>Line-height: 32px / 2em</p>
-      <p>Weight: Light / 300</p>
+      <p>Weight: Semibold / 600</p>
       <p>Letter-spacing: 0px</p>
     </div>
   </div>
@@ -457,7 +457,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
       <p>Typeface: Work Sans</p>
       <p>Size: 24px / 1.5em</p>
       <p>Line-height: 32px / 2em</p>
-      <p>Weight: Light / 300</p>
+      <p>Weight: Medium / 500</p>
       <p>Letter-spacing: 0px</p>
     </div>
     <div class="type-specs specs-mobile">
@@ -465,9 +465,9 @@ Expressive type is reserved for use in editorial and digital marketing experienc
         <strong>Heading / Small</strong>
       </p>
       <p>Typeface: Work Sans</p>
-      <p>Size: 20px / 1.5em</p>
+      <p>Size: 20px / 1.25em</p>
       <p>Line-height: 32px / 2em</p>
-      <p>Weight: Light / 300</p>
+      <p>Weight: Medium / 500</p>
       <p>Letter-spacing: 0px</p>
     </div>
   </div>
@@ -488,7 +488,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
       <p>Typeface: Work Sans</p>
       <p>Size: 20px / 1.25em</p>
       <p>Line-height: 32px / 2em</p>
-      <p>Weight: Light / 300</p>
+      <p>Weight: Medium / 500</p>
       <p>Letter-spacing: 0px</p>
     </div>
     <div class="type-specs specs-mobile">
@@ -498,7 +498,7 @@ Expressive type is reserved for use in editorial and digital marketing experienc
       <p>Typeface: Work Sans</p>
       <p>Size: 18px / 1.25em</p>
       <p>Line-height: 24px / 1.5em</p>
-      <p>Weight: Light / 300</p>
+      <p>Weight: Medium / 500</p>
       <p>Letter-spacing: 0px</p>
     </div>
   </div>
@@ -512,14 +512,24 @@ Expressive type is reserved for use in editorial and digital marketing experienc
         This is used for layout headings and component titles
       </Paragraph>
     </div>
-    <div class="type-specs">
+    <div class="type-specs specs-desktop">
+      <p>
+        <strong>Heading / 2X-Small</strong>
+      </p>
+      <p>Typeface: Work Sans</p>
+      <p>Size: 18px / 1.125em</p>
+      <p>Line-height: 24px / 1.5em</p>
+      <p>Weight: Medium / 500</p>
+      <p>Letter-spacing: .32px</p>
+    </div>
+    <div class="type-specs specs-mobile">
       <p>
         <strong>Heading / 2X-Small</strong>
       </p>
       <p>Typeface: Work Sans</p>
       <p>Size: 16px / 1em</p>
       <p>Line-height: 24px / 1.5em</p>
-      <p>Weight: Bold / 700</p>
+      <p>Weight: Medium / 500</p>
       <p>Letter-spacing: .32px</p>
     </div>
   </div>