diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx
index 82f81048105..29c0734eba3 100644
--- a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx
+++ b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx
@@ -474,7 +474,9 @@ function ProjectConfigVariablesInternal({ variable }: { variable: Variable }) {
 
   return (
     <div className="max-w-[min(100%, 500px)] my-6">
-      <h6 className={cn('mt-0 mb-1', 'text-foreground')}>{prettyFormatVariable[variable]}</h6>
+      <span className={cn('block mt-0 mb-1 font-heading font-semibold', 'text-foreground')}>
+        {prettyFormatVariable[variable]}
+      </span>
       <div className="flex flex-wrap gap-x-6">
         <OrgProjectSelector />
         <BranchSelector />
diff --git a/apps/docs/components/StepHikeCompact/index.tsx b/apps/docs/components/StepHikeCompact/index.tsx
index ef1a7f08af7..7d86f47884a 100644
--- a/apps/docs/components/StepHikeCompact/index.tsx
+++ b/apps/docs/components/StepHikeCompact/index.tsx
@@ -97,7 +97,11 @@ const Details: FC<PropsWithChildren<IDetails>> = ({ children, title, fullWidth =
         fullWidth && 'w-full'
       )}
     >
-      {title && <h3 className="mt-0 text-foreground text-base">{title}</h3>}
+      {title && (
+        <span className="block mt-0 mb-[18px] text-foreground text-base font-heading font-semibold">
+          {title}
+        </span>
+      )}
       {children}
     </div>
   )
diff --git a/apps/docs/features/directives/CodeTabs.components.tsx b/apps/docs/features/directives/CodeTabs.components.tsx
index c18c76aa31b..126974e1734 100644
--- a/apps/docs/features/directives/CodeTabs.components.tsx
+++ b/apps/docs/features/directives/CodeTabs.components.tsx
@@ -1,20 +1,19 @@
 import { type PropsWithChildren } from 'react'
-
 import { cn } from 'ui'
 
 export function NamedCodeBlock({ name, children }: PropsWithChildren<{ name: string }>) {
   return (
     <div className="shiki-wrapper w-full space-y-2">
-      <h6
+      <span
         className={cn(
           'w-fit flex items-center text-center',
           'shadow-xs rounded-sm border border-stronger bg-selection',
           'px-2.5 py-1',
-          'text-xs text-foreground'
+          'text-xs font-heading font-semibold text-foreground'
         )}
       >
         {name}
-      </h6>
+      </span>
       {children}
     </div>
   )