fix(site/src): replace hardcoded text-[13px] with scale tokens outside agents (#28071)

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

@@ -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,
 			)}

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,
 			)}
 		/>

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" &&

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,

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}

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}
 					>

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> = ({

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

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"

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) => {

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>

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,
 			)}
 		/>

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}

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>

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) ||

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>

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>

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>