From 5d746aa59458d06d077e2bfe74afb89d14a75c42 Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Mon, 17 Aug 2026 11:41:06 -0700
Subject: [PATCH] fix(site/src): replace hardcoded text-[13px] with scale
 tokens outside agents (#28071)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the arbitrary `text-[13px]` value with the design-system tokens
`text-sm` (14px) or `text-xs` (12px) in the 18 non-agents files that
used it. `AgentsPage` usages and `modules/resources/AgentMetadata.tsx`
are intentionally left alone; they'll be handled with the agents UI
separately.

Because the custom Tailwind scale bakes `font-weight: 500` into
`text-xs`/`text-sm`, `font-normal` was added wherever the text
previously rendered at 400 and is prose, code, or log content, so only
the size changes there. Short labels, headers, and numeric values take
the token's 500 weight as-is.

### Token decisions

| File | Token | Rationale |
|---|---|---|
| `components/Logs/LogLine.tsx` | `text-xs font-normal` | Dense mono log
output; 12px keeps line-height close to current |
| `components/PaginationWidget/PaginationAmount.tsx` | `text-xs
font-normal` | Caption-style "showing X of Y" text |
| `pages/IconsPage/IconsPage.tsx` (figcaption) | `text-xs font-normal` |
88px-wide icon captions |
| `pages/WorkspacesPage/WorkspacesButton.tsx` | `text-xs font-normal` |
Secondary line under the template name in the combobox |
| `modules/templates/TemplateExampleCard.tsx`,
`pages/CreateTemplateGalleryPage/...` | `text-xs font-normal` |
Secondary card description prose (and its "Read more" link) |
| `components/FullPageLayout/Sidebar.tsx` / `Topbar.tsx` | `text-sm`
(Topbar adds `font-normal`) | Nav chrome; Topbar is a container so
`font-normal` avoids leaking 500 into all children |
| `components/Paywall/PaywallPremium.tsx` | `text-sm font-normal` |
Feature list prose (compact variant) |
| `modules/templates/TemplateFiles/TemplateFiles.tsx` /
`TemplateFileTree.tsx` | `text-sm` | File headers/tree labels (header
already `font-medium`) |
| `modules/workspaces/WorkspaceOutdatedTooltip.tsx` | `text-sm
font-normal` | Tooltip body prose |
| `pages/WorkspacePage/ResourcesSidebar.tsx` | `text-sm font-normal` |
Help text prose |
| `pages/AISettingsPage/.../CredentialField.tsx` | `text-sm font-normal`
| Mono credential input |
| `pages/DeploymentSettingsPage/Option.tsx` | `text-sm` | Already
`font-semibold` |
| `pages/HealthPage/Content.tsx` | `text-sm font-normal` | Mono detail
block |
| `pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx` |
`text-sm` | "Files" panel header label |
| `pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx` |
`text-sm` (`font-normal` on prose/empty state) | Data labels and values
in insight panels |

### Storybook review checklist

Stories directly covering changed components:

- `Logs/LogLine` and `Logs/Logs`
- `Paywall/PaywallPremium`
- `TemplateExampleCard`
- `TemplateFiles` and `TemplateFileTree`
- `WorkspaceOutdatedTooltip`
- `CreateTemplateGalleryPageView`
- `IconsPage`
- `TemplateInsightsPage`
- `TemplateVersionEditor` (also exercises FullPageLayout
`Topbar`/`Sidebar`)

Indirect coverage for components without their own stories:

- `PaginationAmount` → `PaginationWidget/PaginationContainer` stories,
plus paginated page views (`UsersPageView`, `AuditPageView`,
`ConnectionLogPageView`)
- `WorkspacesButton` → `WorkspacesPageView` stories (open the "New
workspace" combobox)
- `HealthPage/Content` → `HealthPage/*Page` stories (`DERPPage`,
`DatabasePage`, etc.)
- `ResourcesSidebar` → `WorkspacePage/Workspace` stories (failed-build
state)
- `FullPageLayout Topbar/Sidebar` → `TemplateVersionEditor` stories
- `CredentialField` → `ProviderForm` / `AddProviderPageView` stories

No story exists for `DeploymentSettingsPage/Option`; verify on the
deployment settings page (option value pills).

---

🤖 This PR was generated by Coder Agents on behalf of @tracyjohnsonux.
---
 site/src/components/FullPageLayout/Sidebar.tsx     |  4 ++--
 site/src/components/FullPageLayout/Topbar.tsx      |  2 +-
 site/src/components/Logs/LogLine.tsx               |  2 +-
 .../PaginationWidget/PaginationAmount.tsx          |  2 +-
 site/src/components/Paywall/PaywallSmall.tsx       |  2 +-
 .../TemplateExampleCard/TemplateExampleCard.tsx    |  5 +++--
 .../templates/TemplateFiles/TemplateFileTree.tsx   |  2 +-
 .../templates/TemplateFiles/TemplateFiles.tsx      |  2 +-
 .../WorkspaceOutdatedTooltip.tsx                   | 10 ++++++----
 .../ProvidersPage/components/CredentialField.tsx   |  2 +-
 .../CreateTemplateGalleryPageView.tsx              |  2 +-
 site/src/pages/DeploymentSettingsPage/Option.tsx   |  4 ++--
 site/src/pages/HealthPage/Content.tsx              |  2 +-
 site/src/pages/IconsPage/IconsPage.tsx             |  2 +-
 .../TemplateInsightsPage/TemplateInsightsPage.tsx  | 14 +++++++-------
 .../TemplateVersionEditor.tsx                      |  2 +-
 site/src/pages/WorkspacePage/ResourcesSidebar.tsx  |  2 +-
 site/src/pages/WorkspacesPage/WorkspacesButton.tsx |  2 +-
 18 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
index 4ebc14a480..a119a584fb 100644
--- a/site/src/components/FullPageLayout/Sidebar.tsx
+++ b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -17,7 +17,7 @@ export const SidebarLink: FC<LinkProps> = ({ className, ...props }) => {
 	return (
 		<Link
 			className={cn(
-				"text-[13px] text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary cursor-pointer border-0 no-underline",
+				"text-sm text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary cursor-pointer border-0 no-underline",
 				className,
 			)}
 			{...props}
@@ -37,7 +37,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
 	return (
 		<button
 			className={cn(
-				"text-[13px] text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary opacity-75 hover:opacity-100 cursor-pointer border-0",
+				"text-sm text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary opacity-75 hover:opacity-100 cursor-pointer border-0",
 				isActive && "opacity-100 bg-surface-tertiary",
 				className,
 			)}
diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index 6f1ad8f796..27eb18cbaf 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -17,7 +17,7 @@ export const Topbar: FC<HTMLAttributes<HTMLElement>> = ({
 		<header
 			{...props}
 			className={cn(
-				"min-h-12 border-0 border-b border-border border-solid flex items-center text-[13px] leading-tight",
+				"min-h-12 border-0 border-b border-border border-solid flex items-center text-sm font-normal leading-tight",
 				className,
 			)}
 		/>
diff --git a/site/src/components/Logs/LogLine.tsx b/site/src/components/Logs/LogLine.tsx
index fc5813c563..ae6f3cd8b1 100644
--- a/site/src/components/Logs/LogLine.tsx
+++ b/site/src/components/Logs/LogLine.tsx
@@ -28,7 +28,7 @@ export const LogLine: FC<LogLineProps> = ({
 			className={cn(
 				"logs-line",
 				"m-0 break-all flex items-center h-auto",
-				"text-[13px] text-content-primary font-mono",
+				"text-xs font-normal text-content-primary font-mono",
 				level === "error" &&
 					"bg-surface-error text-content-error [&_.dashed-line]:bg-border-error",
 				level === "debug" &&
diff --git a/site/src/components/PaginationWidget/PaginationAmount.tsx b/site/src/components/PaginationWidget/PaginationAmount.tsx
index 04bdeaba10..ca2e849c9f 100644
--- a/site/src/components/PaginationWidget/PaginationAmount.tsx
+++ b/site/src/components/PaginationWidget/PaginationAmount.tsx
@@ -26,7 +26,7 @@ export const PaginationAmount: FC<PaginationHeaderProps> = ({
 		<div
 			className={cn(
 				"flex flex-row flex-nowrap items-center m-0",
-				"text-[13px] text-content-secondary",
+				"text-xs font-normal text-content-secondary",
 				"h-9", // The size of a small button
 				"[&_strong]:text-content-primary",
 				className,
diff --git a/site/src/components/Paywall/PaywallSmall.tsx b/site/src/components/Paywall/PaywallSmall.tsx
index 7a7f498ca5..e357840f4d 100644
--- a/site/src/components/Paywall/PaywallSmall.tsx
+++ b/site/src/components/Paywall/PaywallSmall.tsx
@@ -58,7 +58,7 @@ const PaywallSmall = ({
 				<PaywallFeatures className={cn(compact && "pr-0")}>
 					{features.map((feature) => (
 						<PaywallFeature
-							className={cn(compact && "text-[13px] leading-tight")}
+							className={cn(compact && "text-sm font-normal leading-tight")}
 							key={feature}
 						>
 							{feature}
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index 52f40f0480..d9319054d0 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -56,10 +56,11 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 
 			<div>
 				<h4 className="text-sm font-semibold m-0 mb-1">{example.name}</h4>
-				<span className="block text-[13px] leading-[1.6] text-content-secondary">
+				<span className="block text-xs font-normal leading-[1.6] text-content-secondary">
 					{example.description}{" "}
 					<Link
-						className="inline-block text-[13px] mt-1 p-0"
+						size="sm"
+						className="inline-block mt-1 p-0"
 						asChild
 						showExternalIcon={false}
 					>
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
index 043bdb4d57..39bd00a3a9 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
@@ -162,7 +162,7 @@ interface TreeNodeProps {
 
 const nodeClasses =
 	"flex-grow flex h-8 cursor-pointer select-none items-center gap-2 " +
-	"border-none bg-transparent px-4 text-[13px] text-left " +
+	"border-none bg-transparent px-4 text-sm text-left " +
 	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link focus-visible:ring-inset";
 
 const FileNode: FC<TreeNodeProps> = ({
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
index b7291ab255..5588063362 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -103,7 +103,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 									id={filename}
 									className="overflow-hidden rounded-lg border border-solid border-surface-quaternary"
 								>
-									<header className="flex items-center gap-2 border-0 border-b border-solid border-surface-quaternary px-4 py-2 text-[13px] font-medium">
+									<header className="flex items-center gap-2 border-0 border-b border-solid border-surface-quaternary px-4 py-2 text-sm font-medium">
 										<div className="flex items-center gap-2">
 											<TemplateFileIcon className="text-content-secondary size-icon-xs" />
 											<span
diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
index e3d68440c2..1dbd6643cd 100644
--- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
+++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
@@ -104,13 +104,13 @@ const WorkspaceOutdatedTooltipContent: FC<TooltipContentProps> = ({
 		<>
 			<HelpPopoverContent disablePortal={false}>
 				<HelpPopoverTitle>Outdated</HelpPopoverTitle>
-				<HelpPopoverText>
+				<HelpPopoverText className="text-xs font-normal">
 					This workspace version is outdated and a newer version is available.
 				</HelpPopoverText>
 
-				<div className="flex flex-col gap-2 py-2 text-[13px]">
+				<div className="flex flex-col gap-2 py-2 text-xs font-normal">
 					<div className="leading-[1.6]">
-						<div className="text-content-primary font-semibold">
+						<div className="text-content-primary text-sm font-semibold">
 							New version
 						</div>
 						<div>
@@ -132,7 +132,9 @@ const WorkspaceOutdatedTooltipContent: FC<TooltipContentProps> = ({
 					</div>
 
 					<div className="leading-[1.6]">
-						<div className="text-content-primary font-semibold">Message</div>
+						<div className="text-content-primary text-sm font-semibold">
+							Message
+						</div>
 						<div>
 							{activeVersion ? (
 								activeVersion.message || "No message"
diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/CredentialField.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/CredentialField.tsx
index b584d326cd..988189f995 100644
--- a/site/src/pages/AISettingsPage/ProvidersPage/components/CredentialField.tsx
+++ b/site/src/pages/AISettingsPage/ProvidersPage/components/CredentialField.tsx
@@ -64,7 +64,7 @@ export const CredentialField: React.FC<CredentialFieldProps> = ({
 		<Input
 			id={inputId}
 			name={helpers.name}
-			className="font-mono text-[13px]"
+			className="font-mono text-sm font-normal"
 			value={helpers.value}
 			onChange={helpers.onChange}
 			onBlur={(event) => {
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
index 33e61c7042..49d0542b2b 100644
--- a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
@@ -76,7 +76,7 @@ export const CreateTemplateGalleryPageView: FC<
 								<h4 className="m-0 mb-1 text-sm font-semibold text-content-secondary">
 									Upload Template
 								</h4>
-								<span className="block text-[13px] leading-[1.6] text-content-secondary">
+								<span className="block text-xs font-normal leading-[1.6] text-content-secondary">
 									Get started by uploading an existing template
 								</span>
 							</div>
diff --git a/site/src/pages/DeploymentSettingsPage/Option.tsx b/site/src/pages/DeploymentSettingsPage/Option.tsx
index 219f400d85..fab0129591 100644
--- a/site/src/pages/DeploymentSettingsPage/Option.tsx
+++ b/site/src/pages/DeploymentSettingsPage/Option.tsx
@@ -112,7 +112,7 @@ export const OptionConfig: FC<OptionConfigProps> = ({
 			{...attrs}
 			className={cn(
 				"inline-flex items-center gap-1.5 rounded border border-solid p-1.5",
-				"font-mono text-[13px] font-semibold leading-none",
+				"font-mono text-xs font-semibold leading-none",
 				"border-border-secondary bg-surface-secondary",
 				isSource &&
 					"border-content-link [&_[data-slot=option-config-flag]]:bg-content-link",
@@ -129,7 +129,7 @@ export const OptionConfigFlag: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 			data-slot="option-config-flag"
 			className={cn(
 				"block rounded-[1px] bg-border-secondary px-1 py-0.5",
-				"text-[10px] font-semibold leading-none text-content-primary",
+				"text-2xs font-semibold leading-none text-content-primary",
 				props.className,
 			)}
 		/>
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
index 1fa90b91c4..8bceab49f6 100644
--- a/site/src/pages/HealthPage/Content.tsx
+++ b/site/src/pages/HealthPage/Content.tsx
@@ -241,7 +241,7 @@ export const Logs: FC<LogsProps> = ({ className, lines, ...divProps }) => {
 	return (
 		<div
 			className={cn(
-				"font-mono text-[13px] leading-relaxed p-6 bg-surface-secondary overflow-x-auto whitespace-pre-wrap break-all",
+				"font-mono text-sm font-normal leading-relaxed p-6 bg-surface-secondary overflow-x-auto whitespace-pre-wrap break-all",
 				className,
 			)}
 			{...divProps}
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
index 5e022d18e6..d907fc9146 100644
--- a/site/src/pages/IconsPage/IconsPage.tsx
+++ b/site/src/pages/IconsPage/IconsPage.tsx
@@ -149,7 +149,7 @@ const IconsPage: FC = () => {
 										defaultParametersForBuiltinIcons.get(icon.url) ?? "",
 									)}
 								/>
-								<figcaption className="w-[88px] h-12 text-[13px] text-ellipsis text-center overflow-hidden">
+								<figcaption className="w-[88px] h-12 text-xs font-normal text-ellipsis text-center overflow-hidden">
 									{icon.description}
 								</figcaption>
 							</div>
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index bc98a8e653..f567747428 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -344,7 +344,7 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
 								</div>
 								<div
 									className={cn(
-										"text-right font-medium text-[13px]",
+										"text-right font-medium text-sm",
 										getLatencyColor(row.latency_ms.p50),
 									)}
 								>
@@ -398,7 +398,7 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
 									<Avatar fallback={row.username} src={row.avatar_url} />
 									<div className="font-medium">{row.username}</div>
 								</div>
-								<div className="text-right text-[13px] text-content-secondary">
+								<div className="text-right text-sm text-content-secondary">
 									{formatTime(row.seconds)}
 								</div>
 							</div>
@@ -459,7 +459,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 												className="h-full w-full object-contain"
 											/>
 										</div>
-										<div className="text-[13px] font-medium w-[200px]">
+										<div className="text-sm font-medium w-[200px]">
 											{usage.display_name}
 										</div>
 									</div>
@@ -480,7 +480,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 											<TooltipArrow className="fill-border" />
 										</TooltipContent>
 									</Tooltip>
-									<div className="flex flex-col text-[13px] shrink-0 leading-[1.5] text-content-secondary w-[120px]">
+									<div className="flex flex-col text-sm font-normal shrink-0 leading-[1.5] text-content-secondary w-[120px]">
 										{formatTime(usage.seconds)}
 										{usage.times_used > 0 && (
 											<span className="text-[12px] text-content-disabled">
@@ -532,12 +532,12 @@ const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
 								</p>
 							</div>
 							<div className="flex-1 grow-2 text-sm grid grid-cols-[1fr_auto] gap-x-4 items-baseline">
-								<div className="font-medium text-[13px] text-content-secondary py-1">
+								<div className="font-medium text-sm text-content-secondary py-1">
 									Value
 								</div>
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<div className="font-medium text-[13px] text-content-secondary text-right py-1 cursor-default">
+										<div className="font-medium text-sm text-content-secondary text-right py-1 cursor-default">
 											Count
 										</div>
 									</TooltipTrigger>
@@ -739,7 +739,7 @@ const NoDataAvailable: FC<NoDataAvailableProps> = ({ error, ...props }) => {
 	return (
 		<div
 			{...props}
-			className="flex justify-center items-center text-[13px] py-2 text-content-secondary text-center h-full min-h-[200px]"
+			className="flex justify-center items-center text-sm font-normal py-2 text-content-secondary text-center h-full min-h-[200px]"
 		>
 			{error
 				? getErrorDetail(error) ||
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 5b505b95be..f0e7a16361 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -327,7 +327,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
 					<Sidebar>
 						<div className="h-[42px] py-0 pr-2 pl-4 flex items-center">
-							<span className="text-content-primary text-[13px]">Files</span>
+							<span className="text-content-primary text-sm">Files</span>
 
 							<div className="ml-auto [&_svg]:fill-content-primary">
 								<Tooltip>
diff --git a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
index 1cad4ed698..3c7705c951 100644
--- a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
+++ b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
@@ -26,7 +26,7 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 		<Sidebar>
 			<SidebarCaption>Resources</SidebarCaption>
 			{failed && (
-				<p className="m-0 py-4 text-[13px] text-content-secondary leading-normal">
+				<p className="m-0 py-4 text-sm font-normal text-content-secondary leading-normal">
 					Your workspace build failed, so the necessary resources couldn&apos;t
 					be created.
 				</p>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index 707fa0fc34..27f649a4fa 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -102,7 +102,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 									<span className="truncate text-content-primary">
 										{template.display_name || template.name || "[Unnamed]"}
 									</span>
-									<span className="truncate text-[13px] text-content-secondary">
+									<span className="truncate text-xs font-normal text-content-secondary">
 										{activeDeveloperLabel(template.active_user_count)}
 									</span>
 								</div>