diff --git a/packages/ui/app/src/api-page/endpoints/EndpointParameter.tsx b/packages/ui/app/src/api-page/endpoints/EndpointParameter.tsx
index 604a53cdb3..1c27f10f87 100644
--- a/packages/ui/app/src/api-page/endpoints/EndpointParameter.tsx
+++ b/packages/ui/app/src/api-page/endpoints/EndpointParameter.tsx
@@ -37,7 +37,7 @@ export const EndpointParameter = memo<EndpointParameter.Props>(
         <EndpointParameterContent
             name={name}
             description={description}
-            typeShorthand={renderTypeShorthandRoot(shape, types)}
+            typeShorthand={renderTypeShorthandRoot(shape, types, false, "t-muted")}
             anchorIdParts={anchorIdParts}
             route={route}
             availability={availability}
diff --git a/packages/ui/app/src/api-page/types/object/ObjectProperty.tsx b/packages/ui/app/src/api-page/types/object/ObjectProperty.tsx
index 5585b43ac8..1f9394ff62 100644
--- a/packages/ui/app/src/api-page/types/object/ObjectProperty.tsx
+++ b/packages/ui/app/src/api-page/types/object/ObjectProperty.tsx
@@ -125,7 +125,7 @@ const UnmemoizedObjectPropertyInternal = forwardRef<HTMLDivElement, ObjectProper
                         {property.key}
                     </span>
                 </div>
-                {renderTypeShorthandRoot(property.valueShape, types, contextValue.isResponse)}
+                {renderTypeShorthandRoot(property.valueShape, types, contextValue.isResponse, "t-muted")}
                 {property.availability != null && (
                     <EndpointAvailabilityTag availability={property.availability} minimal={true} />
                 )}
diff --git a/packages/ui/app/src/api-page/types/type-shorthand/TypeShorthand.tsx b/packages/ui/app/src/api-page/types/type-shorthand/TypeShorthand.tsx
index 1a0cd9975a..07812dd919 100644
--- a/packages/ui/app/src/api-page/types/type-shorthand/TypeShorthand.tsx
+++ b/packages/ui/app/src/api-page/types/type-shorthand/TypeShorthand.tsx
@@ -1,4 +1,5 @@
 import { visitDiscriminatedUnion } from "@fern-ui/core-utils";
+import clsx from "clsx";
 import { ReactNode } from "react";
 import {
     ResolvedTypeDefinition,
@@ -19,11 +20,12 @@ export function renderTypeShorthandRoot(
     shape: ResolvedTypeShape,
     types: Record<string, ResolvedTypeDefinition>,
     isResponse: boolean = false,
+    className?: string,
 ): ReactNode {
     const typeShorthand = renderTypeShorthand(unwrapOptional(shape, types), { nullable: isResponse }, types);
     const unaliasedShape = unwrapAlias(shape, types);
     return (
-        <span className="text-inherit inline-flex items-baseline gap-2 text-xs">
+        <span className={clsx("text-inherit inline-flex items-baseline gap-2 text-xs", className)}>
             <span>{typeShorthand}</span>
             {unaliasedShape.type === "optional" ? (
                 <span>{isResponse ? "Optional" : "Optional"}</span>