From 5f3b8755acbb63aff72431784014192c43777b3d Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Tue, 4 Aug 2026 09:29:02 -0700
Subject: [PATCH] feat(site): tighten base infra step grid and card typography
 (#27797)

Updates the base infrastructure step, base parameters step, and module
screens in the template builder for typography consistency.

**Base infra step**
- Grid gains a `xl:grid-cols-4` tier while keeping `lg:grid-cols-3`, so
no width band gets looser than before.
- Card title: `text-sm font-bold`.
- Card description and `View details` link: `text-xs font-normal`.

**Base parameters step**
- Body copy in the README markdown unified to `text-xs`.
- List item text and `::marker` inherit `text-content-secondary` so
bullets match paragraph color.
- Inline `<code>` inherits body size instead of hardcoded `text-sm`.
- `ConfigurationField` description slots (`SelectField`, `RadioField`,
`SwitchField`, `SwitchGroupField`) now use `text-xs`. The `TextField`
path already rendered `text-xs` via `FormField` and is unchanged.
- Headings unchanged.

**Module screens (for consistency)**
- `ModuleSelectStep`: same additive `xl:grid-cols-4` tier; empty-state
copy moves to `text-xs`.
- `ModuleCard`: matches `TemplateCard` (title `text-sm font-bold`,
description and link `text-xs font-normal`).
- `ModuleConfiguration`: 'No configuration required' notice moves to
`text-xs`.
- `ModuleSettingsStep`: sensitive-variable notice moves to `text-xs`.
- `TemplateCustomizationsStep` `BaseTemplateCard` heading matches card
title style (`text-sm font-bold`).

---
_This PR was generated on behalf of @tracyjohnsonux by the Coder agent._
---
 site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx    | 2 +-
 .../pages/TemplateBuilder/BaseTemplateParametersStep.tsx  | 4 +++-
 site/src/pages/TemplateBuilder/ConfigurationField.tsx     | 8 ++++----
 site/src/pages/TemplateBuilder/ModuleCard.tsx             | 6 +++---
 site/src/pages/TemplateBuilder/ModuleConfiguration.tsx    | 2 +-
 site/src/pages/TemplateBuilder/ModuleSelectStep.tsx       | 4 ++--
 site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx     | 2 +-
 site/src/pages/TemplateBuilder/TemplateCard.tsx           | 6 +++---
 .../pages/TemplateBuilder/TemplateCustomizationsStep.tsx  | 2 +-
 9 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx b/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx
index 5d4a2b48d8..91cfc8d021 100644
--- a/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx
+++ b/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx
@@ -42,7 +42,7 @@ export const BaseInfraSelectStep: FC<BaseInfraSelectStepProps> = ({
 				Select your infrastructure foundation.
 			</TemplateBuilderSubtitle>
 
-			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
 				{bases.map((base) => (
 					<TemplateCard
 						key={base.id}
diff --git a/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx b/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
index ca7b2266ad..34c547b04a 100644
--- a/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
+++ b/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
@@ -134,11 +134,13 @@ export const BaseTemplateParametersStep: FC<
 					<div className="mt-6">
 						<MemoizedMarkdown
 							className={cn(
-								"text-sm font-normal",
+								"text-xs font-normal",
 								"[&_h2]:mt-6 [&_h2]:text-base [&_h2]:font-semibold",
 								"[&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-semibold",
 								"[&_p]:mb-3 [&_p]:text-content-secondary",
+								"[&_li]:text-content-secondary",
 								"[&_a]:font-normal",
+								"[&_code]:text-[length:inherit]",
 							)}
 						>
 							{prerequisites}
diff --git a/site/src/pages/TemplateBuilder/ConfigurationField.tsx b/site/src/pages/TemplateBuilder/ConfigurationField.tsx
index b8e68550bf..26a578ccc4 100644
--- a/site/src/pages/TemplateBuilder/ConfigurationField.tsx
+++ b/site/src/pages/TemplateBuilder/ConfigurationField.tsx
@@ -135,7 +135,7 @@ const SelectField: FC<SelectFieldDefinition> = ({
 				)}
 			</Label>
 			{description && (
-				<div id={descriptionId} className="text-sm text-content-secondary">
+				<div id={descriptionId} className="text-xs text-content-secondary">
 					{description}
 				</div>
 			)}
@@ -185,7 +185,7 @@ const RadioField: FC<RadioFieldDefinition> = ({
 				)}
 			</Label>
 			{description && (
-				<div id={descriptionId} className="text-sm text-content-secondary">
+				<div id={descriptionId} className="text-xs text-content-secondary">
 					{description}
 				</div>
 			)}
@@ -276,7 +276,7 @@ const SwitchField: FC<SwitchFieldDefinition> = ({
 			{description && (
 				<div
 					id={descriptionId}
-					className="ml-[44px] text-sm font-normal text-content-secondary"
+					className="ml-[44px] text-xs font-normal text-content-secondary"
 				>
 					{description}
 				</div>
@@ -310,7 +310,7 @@ const SwitchGroupField: FC<SwitchGroupFieldDefinition> = ({
 				)}
 			</Label>
 			{description && (
-				<div id={descriptionId} className="text-sm text-content-secondary">
+				<div id={descriptionId} className="text-xs text-content-secondary">
 					{description}
 				</div>
 			)}
diff --git a/site/src/pages/TemplateBuilder/ModuleCard.tsx b/site/src/pages/TemplateBuilder/ModuleCard.tsx
index a6a0a1ad8c..bf793b414f 100644
--- a/site/src/pages/TemplateBuilder/ModuleCard.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleCard.tsx
@@ -62,7 +62,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 			</div>
 
 			<div>
-				<h3 id={nameId} className="text-md font-semibold text-content-primary">
+				<h3 id={nameId} className="text-sm font-bold text-content-primary">
 					{name}
 					{official && (
 						<>
@@ -71,7 +71,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 						</>
 					)}
 				</h3>
-				<p className="text-sm font-normal text-content-secondary">
+				<p className="text-xs font-normal text-content-secondary">
 					{description}
 				</p>
 
@@ -79,7 +79,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 					<Link
 						href={detailsUrl}
 						target="_blank"
-						className="text-sm font-normal"
+						className="text-xs font-normal"
 					>
 						View details
 					</Link>
diff --git a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
index 79a62c9027..85de9a946c 100644
--- a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
@@ -67,7 +67,7 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 					</ConfigurationFieldContainer>
 				</CollapsibleSummary>
 			) : (
-				<div className="text-sm text-content-secondary flex items-center gap-2 mt-4">
+				<div className="text-xs text-content-secondary flex items-center gap-2 mt-4">
 					<CheckIcon className="size-4" />
 					No configuration required.
 				</div>
diff --git a/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx b/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx
index a5a04e1234..86668f4b3a 100644
--- a/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx
@@ -244,7 +244,7 @@ export const ModuleSelectStep: FC<ModuleSelectStepProps> = ({
 				</TabsList>
 			</Tabs>
 
-			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
 				{visibleModules.length ? (
 					visibleModules.map((m) => (
 						<ModuleCard
@@ -260,7 +260,7 @@ export const ModuleSelectStep: FC<ModuleSelectStepProps> = ({
 				) : (
 					<div className="col-span-full my-12 flex flex-col items-center gap-1 text-content-secondary">
 						<SearchIcon />
-						<p className="m-0 text-sm font-normal">
+						<p className="m-0 text-xs font-normal">
 							{doesBaseTemplateHaveModules
 								? "No module matched your search"
 								: "No modules available for this base template"}
diff --git a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
index a156884adb..4c36def8b0 100644
--- a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
@@ -162,7 +162,7 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 							/>
 
 							{sensitiveVars.length > 0 && (
-								<div className="flex items-center gap-2 mt-2 p-3 rounded-md text-sm text-content-secondary">
+								<div className="flex items-center gap-2 mt-2 p-3 rounded-md text-xs text-content-secondary">
 									<InfoIcon className="size-icon-sm shrink-0 mt-0.5" />
 									<p>
 										{sensitiveVars.map((v) => (
diff --git a/site/src/pages/TemplateBuilder/TemplateCard.tsx b/site/src/pages/TemplateBuilder/TemplateCard.tsx
index 72074bf42e..6a987e2e47 100644
--- a/site/src/pages/TemplateBuilder/TemplateCard.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCard.tsx
@@ -61,7 +61,7 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
 			</div>
 
 			<div>
-				<h3 id={nameId} className="text-md font-semibold text-content-primary">
+				<h3 id={nameId} className="text-sm font-bold text-content-primary">
 					{name}
 					{official && (
 						<>
@@ -71,14 +71,14 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
 					)}
 				</h3>
 				<div>
-					<p className="text-sm font-normal text-content-secondary">
+					<p className="text-xs font-normal text-content-secondary">
 						{description}
 					</p>
 
 					<Link
 						href={detailsUrl}
 						target="_blank"
-						className="text-sm font-normal"
+						className="text-xs font-normal"
 					>
 						View details
 					</Link>
diff --git a/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
index 95a2aaf5fa..22885bef39 100644
--- a/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
@@ -181,7 +181,7 @@ const BaseTemplateCard: FC<{ base: SelectedBaseMeta }> = ({ base }) => {
 	return (
 		<div className="w-56 shrink-0 rounded-lg bg-surface-secondary p-4 self-start">
 			{base.iconUrl && <Avatar src={base.iconUrl} size="lg" variant="icon" />}
-			<p className="text-sm font-medium text-content-primary">{base.name}</p>
+			<p className="text-sm font-bold text-content-primary">{base.name}</p>
 			<p className="text-xs text-content-secondary mt-1">
 				Preset based on base template
 			</p>