diff --git a/.changeset/neat-ducks-wish.md b/.changeset/neat-ducks-wish.md
new file mode 100644
index 0000000000..2568e438c9
--- /dev/null
+++ b/.changeset/neat-ducks-wish.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+Improve class name structure using data attributes instead of class names.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 8cebf1937b..9a276a3a0a 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -300,32 +300,32 @@
   line-height: 100%;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant="display"] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant="title1"] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant="title2"] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant="title3"] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant="title4"] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant="title5"] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/css/heading.css b/packages/canon/css/heading.css
index 615e7a6e8b..f1bea873b4 100644
--- a/packages/canon/css/heading.css
+++ b/packages/canon/css/heading.css
@@ -6,32 +6,32 @@
   line-height: 100%;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant="display"] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant="title1"] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant="title2"] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant="title3"] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant="title4"] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant="title5"] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index fd9e19a392..d3e61ff556 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9524,32 +9524,32 @@
   line-height: 100%;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant="display"] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant="title1"] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant="title2"] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant="title3"] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant="title4"] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant="title5"] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 5fe69bbc57..994b1de06e 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -45,11 +45,8 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
     return (
       <Component
         ref={ref}
-        className={clsx(
-          'canon-Heading',
-          responsiveVariant && `canon-Heading--variant-${responsiveVariant}`,
-          className,
-        )}
+        className={clsx('canon-Heading', className)}
+        data-variant={responsiveVariant}
         {...restProps}
       >
         {children}
diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css
index 2db11d7eb2..c85bbca135 100644
--- a/packages/canon/src/components/Heading/styles.css
+++ b/packages/canon/src/components/Heading/styles.css
@@ -22,32 +22,32 @@
   margin: 0;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant='display'] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant='title1'] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant='title2'] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant='title3'] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant='title4'] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant='title5'] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }