Merge pull request #2834 from generalaction/emdash/font-change

arnestrickmann · web-flow · commit 17b75afa9234 · 2026-07-13T16:16:46.000-07:00
style(ui): use sans-serif typography for app chrome
diff --git a/apps/emdash-desktop/src/renderer/features/command-palette/resource-monitor-view.tsx b/apps/emdash-desktop/src/renderer/features/command-palette/resource-monitor-view.tsx
@@ -330,7 +330,7 @@ function StopButton({
 
 function Badge({ children }: { children: ReactNode }) {
   return (
-    <span className="shrink-0 rounded bg-background-2 px-1.5 py-px font-mono text-[9px] tracking-wider text-foreground/50 uppercase">
+    <span className="shrink-0 rounded bg-background-2 px-1.5 py-px font-sans text-[9px] text-foreground/50">
       {children}
     </span>
   );
diff --git a/apps/emdash-desktop/src/renderer/features/conversations/sidebar-conversations-list.tsx b/apps/emdash-desktop/src/renderer/features/conversations/sidebar-conversations-list.tsx
@@ -161,7 +161,7 @@ const ConversationRow = observer(function ConversationRow({
             ) : (
               <RelativeTime
                 value={conversation.data.lastInteractedAt ?? ''}
-                className="flex h-full items-center pr-1 font-mono text-xs text-foreground-passive"
+                className="flex h-full items-center pr-1 font-sans text-xs text-foreground-passive"
                 compact
               />
             )}
@@ -236,7 +236,7 @@ export const SidebarConversationsList = observer(function SidebarConversationsLi
   return (
     <div className="flex h-full w-full flex-col">
       <div className="flex shrink-0 items-center justify-between pt-2 pr-2 pb-1 pl-4">
-        <MicroLabel>Conversations</MicroLabel>
+        <MicroLabel className="font-medium">Conversations</MicroLabel>
         <Button size="icon-sm" variant="ghost" onClick={handleCreate}>
           <Plus className="size-3.5" />
         </Button>
diff --git a/apps/emdash-desktop/src/renderer/features/projects/components/main-panel/main-panel.tsx b/apps/emdash-desktop/src/renderer/features/projects/components/main-panel/main-panel.tsx
@@ -60,7 +60,7 @@ function ProjectBootstrappingPanel() {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-3">
       <Loader2 className="h-5 w-5 animate-spin text-foreground-passive" />
-      <p className="font-mono text-xs text-foreground-passive">Setting up project…</p>
+      <p className="font-sans text-xs text-foreground-passive">Setting up project…</p>
     </div>
   );
 }
@@ -69,10 +69,10 @@ function ProjectBootstrapErrorPanel({ message }: { message: string }) {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center p-8">
       <div className="flex max-w-xs flex-col items-center gap-2 text-center">
-        <p className="font-mono text-sm font-medium text-foreground-destructive">
+        <p className="font-sans text-sm font-medium text-foreground-destructive">
           Failed to set up project
         </p>
-        <p className="font-mono text-xs text-foreground-passive">{message}</p>
+        <p className="font-sans text-xs text-foreground-passive">{message}</p>
       </div>
     </div>
   );
@@ -96,7 +96,7 @@ function ProjectSshDisconnectedPanel({
     <div className="flex h-full w-full flex-col items-center justify-center p-8">
       <div className="flex max-w-sm flex-col items-center gap-3 text-center">
         <Unplug className="h-6 w-6 text-foreground-passive" />
-        <p className="font-mono text-sm font-medium text-foreground">SSH not connected</p>
+        <p className="font-sans text-sm font-medium text-foreground">SSH not connected</p>
         <p className="text-xs text-foreground-passive">
           The SSH connection for this project is unavailable.
         </p>
@@ -127,7 +127,7 @@ function ProjectPathNotFoundPanel({
     <div className="flex h-full w-full flex-col items-center justify-center p-8">
       <div className="flex max-w-sm flex-col items-center gap-3 text-center">
         <TriangleAlert className="h-6 w-6 text-foreground-destructive" />
-        <p className="font-mono text-sm font-medium text-foreground-destructive">
+        <p className="font-sans text-sm font-medium text-foreground-destructive">
           Project not found
         </p>
         {path && <p className="font-mono text-xs break-all text-foreground-passive">{path}</p>}
diff --git a/apps/emdash-desktop/src/renderer/features/projects/components/settings-view/sections/shareable-project-settings-section.tsx b/apps/emdash-desktop/src/renderer/features/projects/components/settings-view/sections/shareable-project-settings-section.tsx
@@ -142,7 +142,7 @@ export function ShareableSettingsSection({
               className="group text-muted-foreground inline-flex h-auto cursor-pointer items-center gap-1 px-0 text-sm font-normal hover:text-foreground hover:no-underline focus-visible:ring-0 focus-visible:outline-none"
               onClick={() => rpc.app.openExternal('https://www.emdash.sh/docs/project-config')}
             >
-              <span className="font-mono text-xs transition-colors group-hover:text-foreground">
+              <span className="font-sans text-xs transition-colors group-hover:text-foreground">
                 docs
               </span>
               <span className="text-muted-foreground text-sm transition-colors group-hover:text-foreground">
diff --git a/apps/emdash-desktop/src/renderer/features/projects/components/ssh-channel-unavailable-panel.tsx b/apps/emdash-desktop/src/renderer/features/projects/components/ssh-channel-unavailable-panel.tsx
@@ -5,7 +5,7 @@ export function SshChannelUnavailablePanel() {
     <div className="flex h-full w-full flex-col items-center justify-center p-8">
       <div className="flex max-w-md flex-col items-center gap-3 text-center">
         <Unplug className="h-6 w-6 text-foreground-passive" />
-        <p className="font-mono text-sm font-medium text-foreground">SSH channel unavailable</p>
+        <p className="font-sans text-sm font-medium text-foreground">SSH channel unavailable</p>
         <p className="text-xs text-foreground-passive">
           The remote server hit its SSH session limit and refused to open another channel. emdash
           opens several channels per task, so the default{' '}
diff --git a/apps/emdash-desktop/src/renderer/features/projects/components/task-view/task-row.tsx b/apps/emdash-desktop/src/renderer/features/projects/components/task-view/task-row.tsx
@@ -123,7 +123,7 @@ export const TaskRow = observer(function TaskRow({
           ) : (
             <RelativeTime
               value={task.data.createdAt}
-              className="pr-1 font-mono text-xs text-foreground-passive"
+              className="pr-1 font-sans text-xs text-foreground-passive"
               compact
             />
           )}
diff --git a/apps/emdash-desktop/src/renderer/features/settings/agents-page/DependencyInstallationStatusCard.tsx b/apps/emdash-desktop/src/renderer/features/settings/agents-page/DependencyInstallationStatusCard.tsx
@@ -105,7 +105,7 @@ export const DependencyInstallationStatusCard = observer(function DependencyInst
             <>
               <span>Found</span>
               {versionText && (
-                <span className="ml-1 rounded-md bg-background-quaternary-2 px-1 py-0.5 font-mono text-xs text-foreground-muted">
+                <span className="ml-1 rounded-md bg-background-quaternary-2 px-1 py-0.5 font-sans text-xs text-foreground-muted">
                   {versionText}
                 </span>
               )}
diff --git a/apps/emdash-desktop/src/renderer/features/settings/agents-page/DependencyInstallationUpdateCard.tsx b/apps/emdash-desktop/src/renderer/features/settings/agents-page/DependencyInstallationUpdateCard.tsx
@@ -60,9 +60,9 @@ export function DependencyInstallationUpdateCard({
   const versionArrow =
     usedInstallation.version && usedInstallation.latestVersion ? (
       <span className="flex items-center gap-1 text-xs text-foreground-muted">
-        <span className="font-mono">{usedInstallation.version}</span>
+        <span className="font-sans">{usedInstallation.version}</span>
         <ArrowRight className="h-3 w-3 shrink-0" />
-        <span className="font-mono">{usedInstallation.latestVersion}</span>
+        <span className="font-sans">{usedInstallation.latestVersion}</span>
       </span>
     ) : null;
 
diff --git a/apps/emdash-desktop/src/renderer/features/settings/components/UpdateCard.tsx b/apps/emdash-desktop/src/renderer/features/settings/components/UpdateCard.tsx
@@ -16,7 +16,7 @@ export const UpdateCard = observer(function UpdateCard(): React.JSX.Element {
     <div className="flex items-center gap-2">
       Version
       {update.currentVersion && (
-        <Badge variant="outline" className="h-5 px-2 font-mono text-xs leading-none">
+        <Badge variant="outline" className="h-5 px-2 font-sans text-xs leading-none">
           v{update.currentVersion}
         </Badge>
       )}
diff --git a/apps/emdash-desktop/src/renderer/features/sidebar/pinned-task-list.tsx b/apps/emdash-desktop/src/renderer/features/sidebar/pinned-task-list.tsx
@@ -11,7 +11,7 @@ export const SidebarPinnedTaskList = observer(function SidebarPinnedTaskList() {
   return (
     <SidebarGroup className="flex shrink-0 flex-col">
       <div className="flex h-[40px] items-center justify-between pr-2.5 pl-5">
-        <MicroLabel className="text-foreground-tertiary-passive">Pinned</MicroLabel>
+        <MicroLabel className="font-medium text-foreground-tertiary-passive">Pinned</MicroLabel>
       </div>
       <SidebarMenu className="px-3 pb-2">
         {entries.map(({ projectId, taskId }) => (
diff --git a/apps/emdash-desktop/src/renderer/features/sidebar/projects-group-label.tsx b/apps/emdash-desktop/src/renderer/features/sidebar/projects-group-label.tsx
@@ -21,7 +21,7 @@ export const ProjectsGroupLabel = observer(function ProjectsGroupLabel() {
 
   return (
     <div className="flex h-[40px] items-center justify-between pr-2.5 pl-5">
-      <MicroLabel className="text-foreground-tertiary-passive">Projects</MicroLabel>
+      <MicroLabel className="font-medium text-foreground-tertiary-passive">Projects</MicroLabel>
       <div className="flex items-center gap-1">
         <DropdownMenu>
           <Tooltip>
diff --git a/apps/emdash-desktop/src/renderer/features/sidebar/task-sidebar-agent-status.tsx b/apps/emdash-desktop/src/renderer/features/sidebar/task-sidebar-agent-status.tsx
@@ -63,7 +63,7 @@ export const TaskSidebarTrailingSlot = observer(function TaskSidebarTrailingSlot
     <Slot>
       <RelativeTime
         value={instant}
-        className="font-mono text-xs text-foreground-passive tabular-nums"
+        className="font-sans text-xs text-foreground-passive tabular-nums"
         compact
       />
     </Slot>
diff --git a/apps/emdash-desktop/src/renderer/features/tasks/components/issue-selector/issue-selector.tsx b/apps/emdash-desktop/src/renderer/features/tasks/components/issue-selector/issue-selector.tsx
@@ -45,7 +45,7 @@ export function IssueIdentifier({
   return (
     <span
       className={cn(
-        'shrink-0 font-mono text-xs font-medium whitespace-nowrap text-foreground-muted',
+        'shrink-0 font-sans text-xs font-medium whitespace-nowrap text-foreground-muted',
         className
       )}
     >
diff --git a/apps/emdash-desktop/src/renderer/features/tasks/components/pr-selector/pr-selector.tsx b/apps/emdash-desktop/src/renderer/features/tasks/components/pr-selector/pr-selector.tsx
@@ -46,7 +46,7 @@ export function PrRow({ pr }: { pr: PullRequest }) {
         <div className="flex min-w-0 items-center gap-1.5">
           <span className="truncate text-sm text-foreground">{pr.title}</span>
           {pr.identifier && (
-            <span className="shrink-0 font-mono text-xs text-foreground-muted">
+            <span className="shrink-0 font-sans text-xs text-foreground-muted">
               {pr.identifier}
             </span>
           )}
diff --git a/apps/emdash-desktop/src/renderer/features/tasks/diff-view/main-panel/image-diff-view.tsx b/apps/emdash-desktop/src/renderer/features/tasks/diff-view/main-panel/image-diff-view.tsx
@@ -164,11 +164,9 @@ function ImageSidePanel({ label, state, side }: { label: string; state: SideStat
   return (
     <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
       <div className="flex shrink-0 items-baseline gap-2 border-b border-border px-3 py-2">
-        <span className="font-mono text-xs tracking-wide text-foreground-muted uppercase">
-          {label}
-        </span>
+        <span className="font-sans text-xs text-foreground-muted">{label}</span>
         {state.status === 'ready' && (
-          <span className="font-mono text-[10px] text-foreground-passive">
+          <span className="font-sans text-[10px] text-foreground-passive">
             {formatBytes(state.size)}
           </span>
         )}
diff --git a/apps/emdash-desktop/src/renderer/features/tasks/main-panel.tsx b/apps/emdash-desktop/src/renderer/features/tasks/main-panel.tsx
@@ -25,7 +25,7 @@ export const TaskMainPanel = observer(function TaskMainPanel() {
     return (
       <div className="flex h-full w-full flex-col items-center justify-center gap-3">
         <Loader2 className="h-5 w-5 animate-spin text-foreground-muted" />
-        <p className="font-mono text-xs text-foreground-muted">Creating task</p>
+        <p className="font-sans text-xs text-foreground-muted">Creating task</p>
       </div>
     );
   }
@@ -34,10 +34,10 @@ export const TaskMainPanel = observer(function TaskMainPanel() {
     return (
       <div className="flex h-full w-full flex-col items-center justify-center p-8">
         <div className="flex max-w-xs flex-col items-center gap-2 text-center">
-          <p className="font-mono text-sm font-medium text-foreground-destructive">
+          <p className="font-sans text-sm font-medium text-foreground-destructive">
             Error creating task
           </p>
-          <p className="font-mono text-xs text-foreground-passive">{taskErrorMessage(taskStore)}</p>
+          <p className="font-sans text-xs text-foreground-passive">{taskErrorMessage(taskStore)}</p>
         </div>
       </div>
     );
@@ -48,7 +48,7 @@ export const TaskMainPanel = observer(function TaskMainPanel() {
     return (
       <div className="flex h-full w-full flex-col items-center justify-center gap-3">
         <Loader2 className="h-5 w-5 animate-spin text-foreground-muted" />
-        <p className="font-mono text-xs text-foreground-muted">{progressMessage}</p>
+        <p className="font-sans text-xs text-foreground-muted">{progressMessage}</p>
       </div>
     );
   }
@@ -57,10 +57,10 @@ export const TaskMainPanel = observer(function TaskMainPanel() {
     return (
       <div className="flex h-full w-full flex-col items-center justify-center p-8">
         <div className="flex max-w-xs flex-col items-center gap-2 text-center">
-          <p className="font-mono text-sm font-medium text-foreground-destructive">
+          <p className="font-sans text-sm font-medium text-foreground-destructive">
             Failed to set up workspace
           </p>
-          <p className="font-mono text-xs text-foreground-muted">{taskErrorMessage(taskStore)}</p>
+          <p className="font-sans text-xs text-foreground-muted">{taskErrorMessage(taskStore)}</p>
         </div>
       </div>
     );
@@ -71,7 +71,7 @@ export const TaskMainPanel = observer(function TaskMainPanel() {
     return (
       <div className="flex h-full w-full flex-col items-center justify-center gap-3">
         <Loader2 className="h-5 w-5 animate-spin text-foreground-muted" />
-        <p className="font-mono text-xs text-foreground-muted">{progressMessage}</p>
+        <p className="font-sans text-xs text-foreground-muted">{progressMessage}</p>
       </div>
     );
   }
@@ -80,10 +80,10 @@ export const TaskMainPanel = observer(function TaskMainPanel() {
     return (
       <div className="flex h-full w-full flex-col items-center justify-center p-8">
         <div className="flex max-w-xs flex-col items-center gap-2 text-center">
-          <p className="font-mono text-sm font-medium text-foreground-destructive">
+          <p className="font-sans text-sm font-medium text-foreground-destructive">
             Failed to tear down workspace
           </p>
-          <p className="font-mono text-xs text-foreground-muted">{taskErrorMessage(taskStore)}</p>
+          <p className="font-sans text-xs text-foreground-muted">{taskErrorMessage(taskStore)}</p>
         </div>
       </div>
     );
diff --git a/apps/emdash-desktop/src/renderer/features/tasks/task-config/setup-step-preview.tsx b/apps/emdash-desktop/src/renderer/features/tasks/task-config/setup-step-preview.tsx
@@ -25,7 +25,7 @@ export function SetupStepPreview({ steps }: SetupStepPreviewProps) {
         <ol className="flex flex-col gap-0.5 border-t border-border px-2.5 py-2">
           {steps.map((step, i) => (
             <li key={i} className="flex items-start gap-2 text-xs text-foreground-muted">
-              <span className="mt-px shrink-0 font-mono text-foreground-passive">{i + 1}.</span>
+              <span className="mt-px shrink-0 font-sans text-foreground-passive">{i + 1}.</span>
               <span>{step}</span>
             </li>
           ))}
diff --git a/apps/emdash-desktop/src/renderer/features/tasks/task-config/workspace-summary-alert.tsx b/apps/emdash-desktop/src/renderer/features/tasks/task-config/workspace-summary-alert.tsx
@@ -66,7 +66,7 @@ export function WorkspaceSummaryAlert({
           <ol className="flex flex-col gap-0.5 border-t border-border px-3 py-2">
             {steps.map((step, i) => (
               <li key={i} className="flex items-start gap-2 text-foreground-muted">
-                <span className="mt-px shrink-0 font-mono text-foreground-passive">{i + 1}.</span>
+                <span className="mt-px shrink-0 font-sans text-foreground-passive">{i + 1}.</span>
                 <span>{step}</span>
               </li>
             ))}
diff --git a/apps/emdash-desktop/src/renderer/features/tasks/task-titlebar.tsx b/apps/emdash-desktop/src/renderer/features/tasks/task-titlebar.tsx
@@ -432,7 +432,7 @@ function LinkedIssueBadge({ issue }: { issue: LinkedIssue }) {
           >
             <ProviderLogo provider={issue.provider} className="h-3 w-3" />
             {displayIdentifier ? (
-              <span className="font-mono">{displayIdentifier}</span>
+              <span className="font-sans">{displayIdentifier}</span>
             ) : (
               <span className="max-w-[180px] truncate">{issue.title || 'Linked issue'}</span>
             )}
diff --git a/apps/emdash-desktop/src/renderer/lib/components/pr-badge.tsx b/apps/emdash-desktop/src/renderer/lib/components/pr-badge.tsx
@@ -29,7 +29,7 @@ export function PrBadge({ variant = 'default', pr, className, hoverDelay }: PrBa
             )}
           >
             <StatusIcon className="size-3" pr={pr} disableTooltip />
-            <span className="shrink-0 font-mono text-xs leading-none tracking-wide text-foreground-muted">
+            <span className="shrink-0 font-sans text-xs leading-none text-foreground-muted">
               #{getPrNumber(pr) ?? 0}
             </span>
             <span className="truncate text-xs leading-none text-foreground-muted">{pr.title}</span>
diff --git a/apps/emdash-desktop/src/renderer/lib/components/pr-number-badge.tsx b/apps/emdash-desktop/src/renderer/lib/components/pr-number-badge.tsx
@@ -2,9 +2,7 @@ import { cn } from '@renderer/utils/utils';
 
 export function PrNumberBadge({ number, className }: { number: number; className?: string }) {
   return (
-    <span
-      className={cn('font-mono text-xs text-foreground-muted shrink-0 tracking-wide', className)}
-    >
+    <span className={cn('font-sans text-xs text-foreground-muted shrink-0', className)}>
       #{number}
     </span>
   );
diff --git a/apps/emdash-desktop/src/renderer/lib/ui/dialog.tsx b/apps/emdash-desktop/src/renderer/lib/ui/dialog.tsx
@@ -118,10 +118,7 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn(
-        'text-xs font-mono tracking-wider uppercase text-foreground-tertiary-passive',
-        className
-      )}
+      className={cn('text-xs font-sans text-foreground-tertiary-passive', className)}
       {...props}
     />
   );
diff --git a/apps/emdash-desktop/src/renderer/lib/ui/empty-state.tsx b/apps/emdash-desktop/src/renderer/lib/ui/empty-state.tsx
@@ -17,7 +17,7 @@ export function EmptyState({ label, description, action, className }: EmptyState
       )}
     >
       <div className="flex max-w-xs flex-col items-center text-center">
-        <h2 className="font-mono text-sm font-medium text-foreground-muted">{label}</h2>
+        <h2 className="font-sans text-sm font-medium text-foreground-muted">{label}</h2>
         {description && (
           <p className="mt-1.5 text-xs leading-relaxed font-normal tracking-tight text-foreground-passive">
             {description}
diff --git a/apps/emdash-desktop/src/renderer/lib/ui/label.tsx b/apps/emdash-desktop/src/renderer/lib/ui/label.tsx
@@ -19,7 +19,7 @@ export function MicroLabel({ className, ...props }: React.ComponentProps<'label'
     <label
       data-slot="label"
       className={cn(
-        'cursor-default uppercase font-mono tracking-widest text-foreground-passive select-none text-xs',
+        'cursor-default font-sans text-foreground-passive select-none text-xs',
         className
       )}
       {...props}

Original file line number	Diff line number	Diff line change
`@@ -142,7 +142,7 @@ export function ShareableSettingsSection({`
`142`	`142`	`className="group text-muted-foreground inline-flex h-auto cursor-pointer items-center gap-1 px-0 text-sm font-normal hover:text-foreground hover:no-underline focus-visible:ring-0 focus-visible:outline-none"`
`143`	`143`	`onClick={() => rpc.app.openExternal('https://www.emdash.sh/docs/project-config')}`
`144`	`144`	`>`
`145`		`- <span className="font-mono text-xs transition-colors group-hover:text-foreground">`
	`145`	`+ <span className="font-sans text-xs transition-colors group-hover:text-foreground">`
`146`	`146`	`docs`
`147`	`147`	`</span>`
`148`	`148`	`<span className="text-muted-foreground text-sm transition-colors group-hover:text-foreground">`