diff --git a/docs/src/components/Hero/SelectedLabel/index.tsx b/docs/src/components/Hero/SelectedLabel/index.tsx
index e901cd2b3063..b580ef1306ac 100644
--- a/docs/src/components/Hero/SelectedLabel/index.tsx
+++ b/docs/src/components/Hero/SelectedLabel/index.tsx
@@ -15,9 +15,9 @@ const SelectedLabel: React.FC<{
   isInteractive: boolean;
 }> = ({ children, isInteractive = false }) => {
   // DOM refs
-  const selectionRef = useRef(null);
-  const selectionContainerRef = useRef(null);
-  const textLabelRef = useRef(null);
+  const selectionRef = useRef<HTMLSpanElement | null>(null);
+  const selectionContainerRef = useRef<HTMLDivElement | null>(null);
+  const textLabelRef = useRef<HTMLSpanElement | null>(null);
 
   // Render-persistent label positioning styles
   const dynamicStyles = useRef<DynamicStyles>({
@@ -30,7 +30,6 @@ const SelectedLabel: React.FC<{
   const staticStyles = useRef<StaticStyles>({
     initialWidth: null,
     initialHeight: null,
-    enabledTextInteractivity: false,
   });
 
   const applyDynamicStyles = (newDynamicStyles: DynamicStyles) => {
@@ -59,7 +58,6 @@ const SelectedLabel: React.FC<{
     staticStyles.current = {
       initialWidth: rect.width,
       initialHeight: rect.height,
-      enabledTextInteractivity: true,
     };
 
     applyDynamicStyles({
@@ -68,6 +66,8 @@ const SelectedLabel: React.FC<{
       width: rect.width,
       height: rect.height,
     });
+
+    textLabelRef.current.className = clsx(styles.interactiveHeaderText);
   }, [isInteractive]);
 
   const movementPropagator = (
@@ -88,13 +88,6 @@ const SelectedLabel: React.FC<{
     );
   };
 
-  const classList = clsx(
-    isInteractive ? styles.preEnabledTextInteractivity : null,
-    staticStyles.current.enabledTextInteractivity
-      ? styles.interactiveHeaderText
-      : styles.headerText
-  );
-
   return (
     <span ref={selectionRef} className={styles.selection}>
       <div ref={selectionContainerRef} className={styles.selectionContainer}>
@@ -118,7 +111,7 @@ const SelectedLabel: React.FC<{
           propagationFunction={movementPropagator}
           draggableIdentifier={DraggableId.CENTER}
           isInteractive={isInteractive}>
-          <span ref={textLabelRef} className={classList}>
+          <span ref={textLabelRef} className={styles.headerText}>
             {children}
           </span>
         </SelectionBox>
diff --git a/docs/src/components/Hero/SelectedLabel/styles.module.css b/docs/src/components/Hero/SelectedLabel/styles.module.css
index a578b10f7364..f1b4c2137c00 100644
--- a/docs/src/components/Hero/SelectedLabel/styles.module.css
+++ b/docs/src/components/Hero/SelectedLabel/styles.module.css
@@ -31,6 +31,7 @@
 
 .headerText {
   position: relative;
+  margin-right: 4px;
 }
 
 .interactiveHeaderText {
@@ -41,10 +42,6 @@
   user-select: none;
 }
 
-.preEnabledTextInteractivity {
-  margin-right: 24px;
-}
-
 @media (max-width: 768px) {
   :root {
     --swm-dash-spacing: 20px;
diff --git a/docs/src/components/Hero/SelectedLabel/utils.ts b/docs/src/components/Hero/SelectedLabel/utils.ts
index 09ade9b2e3ec..af1b80ff8d06 100644
--- a/docs/src/components/Hero/SelectedLabel/utils.ts
+++ b/docs/src/components/Hero/SelectedLabel/utils.ts
@@ -10,7 +10,6 @@ export type DynamicStyles = {
 export type StaticStyles = {
   initialWidth: number;
   initialHeight: number;
-  enabledTextInteractivity: boolean;
 };
 
 export type TextScaleStyles = {
@@ -18,6 +17,9 @@ export type TextScaleStyles = {
   y: number;
 };
 
+const SCALING_OFFSET_X = 1.0;
+const SCALING_OFFSET_Y = 1.22;
+
 export const computeSelectionStyles = (
   position: { x: number; y: number },
   draggableIdentifier: DraggableId,
@@ -78,18 +80,18 @@ export const computeTextStyles = (
   staticStyles: StaticStyles
 ): TextScaleStyles => {
   // these magic numbers are a result of disparity between font's apparent and actual size
-  const sizeOffsetX = 0.99;
-  const sizeOffsetY = 1.21;
+  const scaleOffsetX = SCALING_OFFSET_X;
+  const scaleOffsetY = SCALING_OFFSET_Y;
 
   // scale starts at 1 and as it gets larger approaches sizeOffset
   const textScale = {
     x:
-      (dynamicStyles.width / staticStyles.initialWidth) * sizeOffsetX -
-      sizeOffsetX +
+      (dynamicStyles.width / staticStyles.initialWidth) * scaleOffsetX -
+      scaleOffsetX +
       1,
     y:
-      (dynamicStyles.height / staticStyles.initialHeight) * sizeOffsetY -
-      sizeOffsetY +
+      (dynamicStyles.height / staticStyles.initialHeight) * scaleOffsetY -
+      scaleOffsetY +
       1,
   };
 
diff --git a/docs/src/components/Hero/StartScreen/styles.module.css b/docs/src/components/Hero/StartScreen/styles.module.css
index 390e228545e3..43c293112b63 100644
--- a/docs/src/components/Hero/StartScreen/styles.module.css
+++ b/docs/src/components/Hero/StartScreen/styles.module.css
@@ -27,7 +27,7 @@
 }
 
 .rnLabel {
-  margin-right: 10px;
+  margin-right: 12px;
 }
 
 .subheadingLabel {