diff --git a/packages/css/baseline/typography.css b/packages/css/baseline/typography.css
index aaa74e8d0a..d78718cb75 100644
--- a/packages/css/baseline/typography.css
+++ b/packages/css/baseline/typography.css
@@ -1,125 +1,114 @@
 /** Heading */
 .ds-heading {
-  --dsc-bottom-spacing: var(--ds-spacing-6);
+  --dsc-bottom-spacing: var(--ds-spacing-4);
 
-  margin: 0;
   color: var(--ds-color-neutral-text-default);
-}
-
-.ds-heading--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
-
-.ds-heading--2xs {
-  --dsc-bottom-spacing: var(--ds-spacing-1);
+  font-size: var(--ds-heading-md-font-size);
+  font-weight: var(--ds-heading-md-font-weight);
+  letter-spacing: var(--ds-heading-md-letter-spacing);
+  line-height: var(--ds-heading-md-line-height);
+  margin: 0;
 
-  font-weight: var(--ds-heading-2xs-font-weight);
-  line-height: var(--ds-heading-2xs-line-height);
-  font-size: var(--ds-heading-2xs-font-size);
-  letter-spacing: var(--ds-heading-2xs-letter-spacing);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-heading--xs {
-  --dsc-bottom-spacing: var(--ds-spacing-2);
+  &[data-size='2xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-1);
 
-  font-weight: var(--ds-heading-xs-font-weight);
-  line-height: var(--ds-heading-xs-line-height);
-  font-size: var(--ds-heading-xs-font-size);
-  letter-spacing: var(--ds-heading-xs-letter-spacing);
-}
+    font-weight: var(--ds-heading-2xs-font-weight);
+    line-height: var(--ds-heading-2xs-line-height);
+    font-size: var(--ds-heading-2xs-font-size);
+    letter-spacing: var(--ds-heading-2xs-letter-spacing);
+  }
 
-.ds-heading--sm {
-  --dsc-bottom-spacing: var(--ds-spacing-3);
+  &[data-size='xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-2);
 
-  font-weight: var(--ds-heading-sm-font-weight);
-  line-height: var(--ds-heading-sm-line-height);
-  font-size: var(--ds-heading-sm-font-size);
-  letter-spacing: var(--ds-heading-sm-letter-spacing);
-}
+    font-weight: var(--ds-heading-xs-font-weight);
+    line-height: var(--ds-heading-xs-line-height);
+    font-size: var(--ds-heading-xs-font-size);
+    letter-spacing: var(--ds-heading-xs-letter-spacing);
+  }
 
-.ds-heading--md {
-  --dsc-bottom-spacing: var(--ds-spacing-4);
+  &[data-size='sm'] {
+    --dsc-bottom-spacing: var(--ds-spacing-3);
 
-  font-weight: var(--ds-heading-md-font-weight);
-  line-height: var(--ds-heading-md-line-height);
-  font-size: var(--ds-heading-md-font-size);
-  letter-spacing: var(--ds-heading-md-letter-spacing);
-}
+    font-weight: var(--ds-heading-sm-font-weight);
+    line-height: var(--ds-heading-sm-line-height);
+    font-size: var(--ds-heading-sm-font-size);
+    letter-spacing: var(--ds-heading-sm-letter-spacing);
+  }
 
-.ds-heading--lg {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
+  &[data-size='lg'] {
+    --dsc-bottom-spacing: var(--ds-spacing-5);
 
-  font-weight: var(--ds-heading-lg-font-weight);
-  line-height: var(--ds-heading-lg-line-height);
-  font-size: var(--ds-heading-lg-font-size);
-  letter-spacing: var(--ds-heading-lg-letter-spacing);
-}
+    font-weight: var(--ds-heading-lg-font-weight);
+    line-height: var(--ds-heading-lg-line-height);
+    font-size: var(--ds-heading-lg-font-size);
+    letter-spacing: var(--ds-heading-lg-letter-spacing);
+  }
 
-.ds-heading--xl {
-  --dsc-bottom-spacing: var(--ds-spacing-6);
+  &[data-size='xl'] {
+    --dsc-bottom-spacing: var(--ds-spacing-6);
 
-  font-weight: var(--ds-heading-xl-font-weight);
-  line-height: var(--ds-heading-xl-line-height);
-  font-size: var(--ds-heading-xl-font-size);
-  letter-spacing: var(--ds-heading-xl-letter-spacing);
-}
+    font-weight: var(--ds-heading-xl-font-weight);
+    line-height: var(--ds-heading-xl-line-height);
+    font-size: var(--ds-heading-xl-font-size);
+    letter-spacing: var(--ds-heading-xl-letter-spacing);
+  }
 
-.ds-heading--2xl {
-  --dsc-bottom-spacing: var(--ds-spacing-7);
+  &[data-size='2xl'] {
+    --dsc-bottom-spacing: var(--ds-spacing-7);
 
-  font-weight: var(--ds-heading-2xl-font-weight);
-  line-height: var(--ds-heading-2xl-line-height);
-  font-size: var(--ds-heading-2xl-font-size);
-  letter-spacing: var(--ds-heading-2xl-letter-spacing);
+    font-weight: var(--ds-heading-2xl-font-weight);
+    line-height: var(--ds-heading-2xl-line-height);
+    font-size: var(--ds-heading-2xl-font-size);
+    letter-spacing: var(--ds-heading-2xl-letter-spacing);
+  }
 }
 
 /** Ingress */
-
 .ds-ingress {
   --dsc-bottom-spacing: var(--ds-spacing-5);
 
-  margin: 0;
   color: var(--ds-color-neutral-text-default);
-}
-
-.ds-ingress--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
-
-.ds-ingress--xs {
-  --dsc-bottom-spacing: var(--ds-spacing-8);
+  font-size: var(--ds-ingress-md-font-size);
+  font-weight: var(--ds-ingress-md-font-weight);
+  letter-spacing: var(--ds-ingress-md-letter-spacing);
+  line-height: var(--ds-ingress-md-line-height);
+  margin: 0;
 
-  font-weight: var(--ds-ingress-xs-font-weight);
-  line-height: var(--ds-ingress-xs-line-height);
-  font-size: var(--ds-ingress-xs-font-size);
-  letter-spacing: var(--ds-ingress-xs-letter-spacing);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-ingress--sm {
-  --dsc-bottom-spacing: var(--ds-spacing-7);
+  &[data-size='xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-8);
 
-  font-weight: var(--ds-ingress-sm-font-weight);
-  line-height: var(--ds-ingress-sm-line-height);
-  font-size: var(--ds-ingress-sm-font-size);
-  letter-spacing: var(--ds-ingress-sm-letter-spacing);
-}
+    font-weight: var(--ds-ingress-xs-font-weight);
+    line-height: var(--ds-ingress-xs-line-height);
+    font-size: var(--ds-ingress-xs-font-size);
+    letter-spacing: var(--ds-ingress-xs-letter-spacing);
+  }
 
-.ds-ingress--md {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
+  &[data-size='sm'] {
+    --dsc-bottom-spacing: var(--ds-spacing-7);
 
-  font-weight: var(--ds-ingress-md-font-weight);
-  line-height: var(--ds-ingress-md-line-height);
-  font-size: var(--ds-ingress-md-font-size);
-  letter-spacing: var(--ds-ingress-md-letter-spacing);
-}
+    font-weight: var(--ds-ingress-sm-font-weight);
+    line-height: var(--ds-ingress-sm-line-height);
+    font-size: var(--ds-ingress-sm-font-size);
+    letter-spacing: var(--ds-ingress-sm-letter-spacing);
+  }
 
-.ds-ingress--lg {
-  --dsc-bottom-spacing: var(--ds-spacing-6);
+  &[data-size='lg'] {
+    --dsc-bottom-spacing: var(--ds-spacing-6);
 
-  font-weight: var(--ds-ingress-lg-font-weight);
-  line-height: var(--ds-ingress-lg-line-height);
-  font-size: var(--ds-ingress-lg-font-size);
-  letter-spacing: var(--ds-ingress-lg-letter-spacing);
+    font-weight: var(--ds-ingress-lg-font-weight);
+    line-height: var(--ds-ingress-lg-line-height);
+    font-size: var(--ds-ingress-lg-font-size);
+    letter-spacing: var(--ds-ingress-lg-letter-spacing);
+  }
 }
 
 /** Paragraph */
@@ -308,103 +297,92 @@
 }
 
 /** Label */
-
 .ds-label {
   --dsc-bottom-spacing: var(--ds-spacing-1);
 
+  color: var(--ds-color-neutral-text-default);
   display: inline-block;
+  font-size: var(--ds-label-md-font-size);
+  font-weight: var(--ds-label-md-font-weight);
+  letter-spacing: var(--ds-label-md-letter-spacing);
+  line-height: var(--ds-label-md-line-height);
   margin: 0;
   padding: 0;
-  color: var(--ds-color-neutral-text-default);
-}
 
-.ds-label--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
-
-.ds-label--xs {
-  font-weight: var(--ds-label-xs-font-weight);
-  line-height: var(--ds-label-xs-line-height);
-  font-size: var(--ds-label-xs-font-size);
-  letter-spacing: var(--ds-label-xs-letter-spacing);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-label--sm {
-  font-weight: var(--ds-label-sm-font-weight);
-  line-height: var(--ds-label-sm-line-height);
-  font-size: var(--ds-label-sm-font-size);
-  letter-spacing: var(--ds-label-sm-letter-spacing);
-}
+  &[data-size='xs'] {
+    font-weight: var(--ds-label-xs-font-weight);
+    line-height: var(--ds-label-xs-line-height);
+    font-size: var(--ds-label-xs-font-size);
+    letter-spacing: var(--ds-label-xs-letter-spacing);
+  }
 
-.ds-label--md {
-  font-weight: var(--ds-label-md-font-weight);
-  line-height: var(--ds-label-md-line-height);
-  font-size: var(--ds-label-md-font-size);
-  letter-spacing: var(--ds-label-md-letter-spacing);
-}
+  &[data-size='sm'] {
+    font-weight: var(--ds-label-sm-font-weight);
+    line-height: var(--ds-label-sm-line-height);
+    font-size: var(--ds-label-sm-font-size);
+    letter-spacing: var(--ds-label-sm-letter-spacing);
+  }
 
-.ds-label--lg {
-  font-weight: var(--ds-label-lg-font-weight);
-  line-height: var(--ds-label-lg-line-height);
-  font-size: var(--ds-label-lg-font-size);
-  letter-spacing: var(--ds-label-lg-letter-spacing);
+  &[data-size='lg'] {
+    font-weight: var(--ds-label-lg-font-weight);
+    line-height: var(--ds-label-lg-line-height);
+    font-size: var(--ds-label-lg-font-size);
+    letter-spacing: var(--ds-label-lg-letter-spacing);
+  }
 }
 
-/** Error message */
-
+/** Validation message */
 .ds-validation-message {
   --dsc-bottom-spacing: var(--ds-spacing-5);
 
+  font-size: var(--ds-error_message-md-font-size);
+  font-weight: var(--ds-error_message-md-font-weight);
+  letter-spacing: var(--ds-error_message-md-letter-spacing);
+  line-height: var(--ds-error_message-md-line-height);
   margin: 0;
-}
-
-.ds-validation-message--error {
-  color: var(--ds-color-danger-text-subtle);
-}
-
-.ds-validation-message--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
 
-.ds-validation-message--xs {
-  --dsc-bottom-spacing: var(--ds-spacing-3);
+  &[data-error] {
+    color: var(--ds-color-danger-text-subtle);
+  }
 
-  font-weight: var(--ds-error_message-xs-font-weight);
-  line-height: var(--ds-error_message-xs-line-height);
-  font-size: var(--ds-error_message-xs-font-size);
-  letter-spacing: var(--ds-error_message-xs-letter-spacing);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-validation-message--sm {
-  --dsc-bottom-spacing: var(--ds-spacing-4);
+  &[data-size='xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-3);
 
-  font-weight: var(--ds-error_message-sm-font-weight);
-  line-height: var(--ds-error_message-sm-line-height);
-  font-size: var(--ds-error_message-sm-font-size);
-  letter-spacing: var(--ds-error_message-sm-letter-spacing);
-}
+    font-weight: var(--ds-error_message-xs-font-weight);
+    line-height: var(--ds-error_message-xs-line-height);
+    font-size: var(--ds-error_message-xs-font-size);
+    letter-spacing: var(--ds-error_message-xs-letter-spacing);
+  }
 
-.ds-validation-message--md {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
+  &[data-size='sm'] {
+    --dsc-bottom-spacing: var(--ds-spacing-4);
 
-  font-weight: var(--ds-error_message-md-font-weight);
-  line-height: var(--ds-error_message-md-line-height);
-  font-size: var(--ds-error_message-md-font-size);
-  letter-spacing: var(--ds-error_message-md-letter-spacing);
-}
+    font-weight: var(--ds-error_message-sm-font-weight);
+    line-height: var(--ds-error_message-sm-line-height);
+    font-size: var(--ds-error_message-sm-font-size);
+    letter-spacing: var(--ds-error_message-sm-letter-spacing);
+  }
 
-.ds-validation-message--lg {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
+  &[data-size='lg'] {
+    --dsc-bottom-spacing: var(--ds-spacing-5);
 
-  font-weight: var(--ds-error_message-lg-font-weight);
-  line-height: var(--ds-error_message-lg-line-height);
-  font-size: var(--ds-error_message-lg-font-size);
-  letter-spacing: var(--ds-error_message-lg-letter-spacing);
+    font-weight: var(--ds-error_message-lg-font-weight);
+    line-height: var(--ds-error_message-lg-line-height);
+    font-size: var(--ds-error_message-lg-font-size);
+    letter-spacing: var(--ds-error_message-lg-letter-spacing);
+  }
 }
 
 /** Font weight
  ** used for weight on Label */
-
 .ds-font-weight--medium {
   font-weight: var(--ds-font-weight-medium);
 }
@@ -419,7 +397,6 @@
 
 /** Line height
  ** used for long, short Paragraph */
-
 .ds-line-height--sm {
   line-height: var(--ds-line-height-sm);
 }
diff --git a/packages/react/src/components/Typography/Heading/Heading.tsx b/packages/react/src/components/Typography/Heading/Heading.tsx
index 2a6c5cc74e..49d70f39bd 100644
--- a/packages/react/src/components/Typography/Heading/Heading.tsx
+++ b/packages/react/src/components/Typography/Heading/Heading.tsx
@@ -30,25 +30,20 @@ export type HeadingProps = {
  * <Heading size='lg' level={2}>Heading</Heading>
  */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  (
+  function Heading(
     { size = 'xl', level = 2, spacing = false, className, asChild, ...rest },
     ref,
-  ) => {
+  ) {
     const Component = asChild ? Slot : (`h${level}` as ElementType);
 
     return (
       <Component
+        className={cl('ds-heading', className)}
+        data-size={size}
+        data-spacing={spacing || undefined}
         ref={ref}
-        className={cl(
-          'ds-heading',
-          `ds-heading--${size}`,
-          spacing && 'ds-heading--spacing',
-          className,
-        )}
         {...rest}
       />
     );
   },
 );
-
-Heading.displayName = 'Heading';
diff --git a/packages/react/src/components/Typography/Ingress/Ingress.tsx b/packages/react/src/components/Typography/Ingress/Ingress.tsx
index 9b05e7c1f1..033a932ea1 100644
--- a/packages/react/src/components/Typography/Ingress/Ingress.tsx
+++ b/packages/react/src/components/Typography/Ingress/Ingress.tsx
@@ -24,22 +24,17 @@ export type IngressProps = {
  * <Ingress size='lg'>Ingress</Ingress>
  */
 export const Ingress = forwardRef<HTMLParagraphElement, IngressProps>(
-  ({ size = 'md', className, spacing, asChild, ...rest }, ref) => {
+  function Ingress({ size = 'md', className, spacing, asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'p';
 
     return (
       <Component
         ref={ref}
-        className={cl(
-          `ds-ingress`,
-          `ds-ingress--${size}`,
-          spacing && 'ds-ingress--spacing',
-          className,
-        )}
+        className={cl(`ds-ingress`, className)}
+        data-size={size}
+        data-spacing={spacing || undefined}
         {...rest}
       />
     );
   },
 );
-
-Ingress.displayName = 'Ingress';
diff --git a/packages/react/src/components/Typography/Label/Label.tsx b/packages/react/src/components/Typography/Label/Label.tsx
index 809ebae1da..ef19ce00fb 100644
--- a/packages/react/src/components/Typography/Label/Label.tsx
+++ b/packages/react/src/components/Typography/Label/Label.tsx
@@ -29,27 +29,23 @@ export type LabelProps = {
  * @example
  * <Label size='lg'>Label</Label>
  */
-export const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  (
-    { className, spacing, size = 'md', weight = 'medium', asChild, ...rest },
-    ref,
-  ) => {
-    const Component = asChild ? Slot : 'label';
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  { className, spacing, size = 'md', weight = 'medium', asChild, ...rest },
+  ref,
+) {
+  const Component = asChild ? Slot : 'label';
 
-    return (
-      <Component
-        ref={ref}
-        className={cl(
-          'ds-label',
-          `ds-label--${size}`,
-          spacing && 'ds-label--spacing',
-          weight && `ds-font-weight--${weight}`,
-          className,
-        )}
-        {...rest}
-      />
-    );
-  },
-);
-
-Label.displayName = 'Label';
+  return (
+    <Component
+      ref={ref}
+      className={cl(
+        'ds-label',
+        weight && `ds-font-weight--${weight}`,
+        className,
+      )}
+      data-size={size}
+      data-spacing={spacing || undefined}
+      {...rest}
+    />
+  );
+});
diff --git a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
index 205d3eb9f7..0dd505dcec 100644
--- a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
@@ -32,14 +32,11 @@ export const ValidationMessage = forwardRef<
 
   return (
     <Component
+      className={cl('ds-validation-message', className)}
+      data-error={error || undefined}
+      data-size={size}
+      data-spacing={spacing || undefined}
       ref={ref}
-      className={cl(
-        'ds-validation-message',
-        `ds-error_message--${size}`,
-        spacing && 'ds-validation-message--spacing',
-        error && 'ds-validation-message--error',
-        className,
-      )}
       {...rest}
     />
   );