diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index 47fa65aa2..6ec09c3b6 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -748,7 +748,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         )}
         <div className="flex items-center">
           <ChatToggles modelString={preferredModel}>
-            <div className="mr-3 flex h-[11px] items-center gap-1 @[700px]:[&_.help-indicator-wrapper]:hidden">
+            <div className="mr-3 flex items-center gap-1.5">
               <ModelSelector
                 ref={modelSelectorRef}
                 value={preferredModel}
@@ -756,27 +756,25 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                 recentModels={recentModels}
                 onComplete={() => inputRef.current?.focus()}
               />
-              <span className="help-indicator-wrapper">
-                <TooltipWrapper inline>
-                  <HelpIndicator>?</HelpIndicator>
-                  <Tooltip className="tooltip" align="left" width="wide">
-                    <strong>Click to edit</strong> or use{" "}
-                    {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
-                    <br />
-                    <br />
-                    <strong>Abbreviations:</strong>
-                    <br />• <code>/model opus</code> - Claude Opus 4.1
-                    <br />• <code>/model sonnet</code> - Claude Sonnet 4.5
-                    <br />
-                    <br />
-                    <strong>Full format:</strong>
-                    <br />
-                    <code>/model provider:model-name</code>
-                    <br />
-                    (e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
-                  </Tooltip>
-                </TooltipWrapper>
-              </span>
+              <TooltipWrapper inline>
+                <HelpIndicator>?</HelpIndicator>
+                <Tooltip className="tooltip" align="left" width="wide">
+                  <strong>Click to edit</strong> or use{" "}
+                  {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
+                  <br />
+                  <br />
+                  <strong>Abbreviations:</strong>
+                  <br />• <code>/model opus</code> - Claude Opus 4.1
+                  <br />• <code>/model sonnet</code> - Claude Sonnet 4.5
+                  <br />
+                  <br />
+                  <strong>Full format:</strong>
+                  <br />
+                  <code>/model provider:model-name</code>
+                  <br />
+                  (e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
+                </Tooltip>
+              </TooltipWrapper>
             </div>
           </ChatToggles>
           <div className="max-@[700px]:hidden ml-auto flex items-center gap-1.5">
@@ -799,20 +797,18 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                 onChange={setMode}
               />
             </div>
-            <span className="help-indicator-wrapper">
-              <TooltipWrapper inline>
-                <HelpIndicator>?</HelpIndicator>
-                <Tooltip className="tooltip" align="center" width="wide">
-                  <strong>Exec Mode:</strong> AI edits files and execute commands
-                  <br />
-                  <br />
-                  <strong>Plan Mode:</strong> AI proposes plans but does not edit files
-                  <br />
-                  <br />
-                  Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
-                </Tooltip>
-              </TooltipWrapper>
-            </span>
+            <TooltipWrapper inline>
+              <HelpIndicator>?</HelpIndicator>
+              <Tooltip className="tooltip" align="center" width="wide">
+                <strong>Exec Mode:</strong> AI edits files and execute commands
+                <br />
+                <br />
+                <strong>Plan Mode:</strong> AI proposes plans but does not edit files
+                <br />
+                <br />
+                Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
+              </Tooltip>
+            </TooltipWrapper>
           </div>
         </div>
       </div>
diff --git a/src/components/Context1MCheckbox.tsx b/src/components/Context1MCheckbox.tsx
index ea474c208..acaf9f266 100644
--- a/src/components/Context1MCheckbox.tsx
+++ b/src/components/Context1MCheckbox.tsx
@@ -18,12 +18,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
   return (
     <div className="ml-2 flex items-center gap-1.5">
       <label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-white">
-        <input
-          type="checkbox"
-          checked={use1M}
-          onChange={(e) => setUse1M(e.target.checked)}
-          className="border-border-light bg-dark hover:border-accent checked:bg-accent checked:border-accent relative m-0 h-[11px] w-3 cursor-pointer appearance-none rounded-sm border checked:after:absolute checked:after:top-0 checked:after:left-[3px] checked:after:h-[6px] checked:after:w-1 checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:border-solid checked:after:border-white checked:after:content-['']"
-        />
+        <input type="checkbox" checked={use1M} onChange={(e) => setUse1M(e.target.checked)} />
         1M Context
       </label>
       <TooltipWrapper inline>
diff --git a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
index 98a007875..3ebff7b4b 100644
--- a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
@@ -23,9 +23,7 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
         {tokenCount !== undefined && (
           <span className="text-assistant-border font-mono text-[11px] whitespace-nowrap select-none">
             ~{tokenCount.toLocaleString()} tokens
-            {tps !== undefined && tps > 0 && (
-              <span className="text-text-dim ml-1">@ {tps} t/s</span>
-            )}
+            {tps !== undefined && tps > 0 && <span className="text-dim ml-1">@ {tps} t/s</span>}
           </span>
         )}
       </div>
diff --git a/src/components/ProjectSidebar.tsx b/src/components/ProjectSidebar.tsx
index 35732ab8b..17ada1e8e 100644
--- a/src/components/ProjectSidebar.tsx
+++ b/src/components/ProjectSidebar.tsx
@@ -137,7 +137,7 @@ const ProjectDragLayer: React.FC = () => {
     <div className="pointer-events-none fixed inset-0 z-[9999] cursor-grabbing">
       <div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
         <div className="bg-hover/95 text-foreground border-l-accent flex w-fit max-w-72 min-w-44 items-center rounded border-l-[3px] px-3 py-1.5 shadow-[0_6px_24px_rgba(0,0,0,0.4)]">
-          <span className="text-text-dim mr-1.5 text-xs">⠿</span>
+          <span className="text-dim mr-1.5 text-xs">⠿</span>
           <span className="text-muted mr-2 text-[10px]">▶</span>
           <div className="min-w-0 flex-1">
             <div className="text-foreground truncate text-sm font-medium tracking-[0.2px]">
@@ -482,7 +482,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                           <span
                             data-drag-handle
                             aria-hidden
-                            className="text-text-dim mr-1.5 cursor-grab text-xs opacity-0 transition-opacity duration-150 select-none"
+                            className="text-dim mr-1.5 cursor-grab text-xs opacity-0 transition-opacity duration-150 select-none"
                           >
                             ⠿
                           </span>
@@ -596,12 +596,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                       >
                                         <div className="flex items-center gap-1.5">
                                           <span>Older than {formatOldWorkspaceThreshold()}</span>
-                                          <span className="text-text-dim font-normal">
+                                          <span className="text-dim font-normal">
                                             ({old.length})
                                           </span>
                                         </div>
                                         <span
-                                          className="arrow text-text-dim text-[11px] transition-transform duration-200 ease-in-out"
+                                          className="arrow text-dim text-[11px] transition-transform duration-200 ease-in-out"
                                           style={{
                                             transform: showOldWorkspaces
                                               ? "rotate(90deg)"
diff --git a/src/components/RightSidebar/CodeReview/FileTree.tsx b/src/components/RightSidebar/CodeReview/FileTree.tsx
index e1531ae58..40e53d900 100644
--- a/src/components/RightSidebar/CodeReview/FileTree.tsx
+++ b/src/components/RightSidebar/CodeReview/FileTree.tsx
@@ -146,8 +146,8 @@ const TreeNodeContent: React.FC<{
               className={cn(
                 "flex-1",
                 isFullyRead &&
-                  "text-text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
-                isUnknownState && !isFullyRead && "text-text-dim",
+                  "text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
+                isUnknownState && !isFullyRead && "text-dim",
                 !isFullyRead && !isUnknownState && "text-muted"
               )}
             >
@@ -181,8 +181,8 @@ const TreeNodeContent: React.FC<{
               className={cn(
                 "flex-1",
                 isFullyRead &&
-                  "text-text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
-                isUnknownState && !isFullyRead && "text-text-dim",
+                  "text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
+                isUnknownState && !isFullyRead && "text-dim",
                 !isFullyRead && !isUnknownState && "text-foreground"
               )}
             >
diff --git a/src/components/RightSidebar/CodeReview/ReviewControls.tsx b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
index b97918755..a4989c207 100644
--- a/src/components/RightSidebar/CodeReview/ReviewControls.tsx
+++ b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
@@ -93,7 +93,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onBlur={handleBaseBlur}
         onKeyDown={handleBaseKeyDown}
         placeholder="HEAD, main, etc."
-        className="bg-dark text-foreground border-border-medium hover:border-accent focus:border-accent placeholder:text-text-dim w-36 rounded border px-2 py-1 font-mono text-[11px] transition-[border-color] duration-200 focus:outline-none"
+        className="bg-dark text-foreground border-border-medium hover:border-accent focus:border-accent placeholder:text-dim w-36 rounded border px-2 py-1 font-mono text-[11px] transition-[border-color] duration-200 focus:outline-none"
       />
       <datalist id="base-suggestions">
         <option value="HEAD" />
diff --git a/src/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
index 861588b8f..78203cd30 100644
--- a/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
+++ b/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
@@ -571,7 +571,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                   placeholder={`Search in files and hunks... (${formatKeybind(KEYBINDS.FOCUS_REVIEW_SEARCH)})`}
                   value={searchState.input}
                   onChange={(e) => setSearchState({ ...searchState, input: e.target.value })}
-                  className="text-foreground placeholder:text-text-dim focus:bg-separator flex h-full flex-1 items-center border-none bg-transparent px-2.5 py-1.5 font-sans text-xs leading-[1.4] outline-none"
+                  className="text-foreground placeholder:text-dim focus:bg-separator flex h-full flex-1 items-center border-none bg-transparent px-2.5 py-1.5 font-sans text-xs leading-[1.4] outline-none"
                 />
                 <TooltipWrapper inline>
                   <button
diff --git a/src/components/RightSidebar/ConsumerBreakdown.tsx b/src/components/RightSidebar/ConsumerBreakdown.tsx
index 41f638998..21893ddbd 100644
--- a/src/components/RightSidebar/ConsumerBreakdown.tsx
+++ b/src/components/RightSidebar/ConsumerBreakdown.tsx
@@ -16,7 +16,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
   }
 
   if (consumers.consumers.length === 0) {
-    return <div className="text-text-dim py-3 text-left italic">No consumer data available</div>;
+    return <div className="text-dim py-3 text-left italic">No consumer data available</div>;
   }
 
   return (
@@ -85,7 +85,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
                   )}
                 </div>
                 {consumer.fixedTokens && consumer.variableTokens && (
-                  <div className="text-text-dim text-left text-[11px]">
+                  <div className="text-dim text-left text-[11px]">
                     Tool definition: {formatTokens(consumer.fixedTokens)} • Usage:{" "}
                     {formatTokens(consumer.variableTokens)}
                   </div>
diff --git a/src/components/RightSidebar/CostsTab.tsx b/src/components/RightSidebar/CostsTab.tsx
index c4699e365..5808da625 100644
--- a/src/components/RightSidebar/CostsTab.tsx
+++ b/src/components/RightSidebar/CostsTab.tsx
@@ -449,7 +449,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                             </td>
                             <td className="text-foreground py-1 pr-2 [&:last-child]:pr-0 [&:last-child]:text-right">
                               {isNegligible ? (
-                                <span className="text-text-dim italic">{costDisplay}</span>
+                                <span className="text-dim italic">{costDisplay}</span>
                               ) : (
                                 costDisplay
                               )}
diff --git a/src/components/RightSidebar/VerticalTokenMeter.tsx b/src/components/RightSidebar/VerticalTokenMeter.tsx
index 83785e391..f4eee373c 100644
--- a/src/components/RightSidebar/VerticalTokenMeter.tsx
+++ b/src/components/RightSidebar/VerticalTokenMeter.tsx
@@ -88,7 +88,7 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
                     {data.maxTokens && ` / ${formatTokens(data.maxTokens)}`}
                     {data.maxTokens && ` (${data.totalPercentage.toFixed(1)}%)`}
                   </div>
-                  <div className="text-text-dim mt-2 text-[10px] italic">
+                  <div className="text-dim mt-2 text-[10px] italic">
                     💡 Expand your viewport to see full details
                   </div>
                 </div>
diff --git a/src/components/SecretsModal.tsx b/src/components/SecretsModal.tsx
index 13845920a..b05c1fac9 100644
--- a/src/components/SecretsModal.tsx
+++ b/src/components/SecretsModal.tsx
@@ -155,7 +155,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   onChange={(e) => updateSecret(index, "key", e.target.value)}
                   placeholder="SECRET_NAME"
                   disabled={isLoading}
-                  className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none"
+                  className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none"
                 />
                 <input
                   type={visibleSecrets.has(index) ? "text" : "password"}
@@ -163,7 +163,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   onChange={(e) => updateSecret(index, "value", e.target.value)}
                   placeholder="secret value"
                   disabled={isLoading}
-                  className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none"
+                  className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none"
                 />
                 <button
                   type="button"
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index d164f0e2b..a07b8506d 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -243,12 +243,7 @@ export const HelpIndicator: React.FC<{ className?: string; children?: React.Reac
   children,
 }) => (
   <span
-    className={cn(
-      "text-text-dim text-[7px] cursor-help inline-block align-baseline",
-      "border border-border-subtle rounded-full w-2.5 h-[10px] leading-[8px]",
-      "text-center font-bold mb-[2px]",
-      className
-    )}
+    className={cn("text-muted flex cursor-help items-center text-[10px] leading-none", className)}
   >
     {children}
   </span>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2f08dafe2..c3d79d409 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -205,16 +205,21 @@
   --color-token-cached: hsl(0 0% 50%);
 
   /* Font Variables */
-  --font-primary: IBM Plex Sans, sans-serif;
-  --font-monospace: JetBrains Mono, Consolas, Monaco, monospace;
+  /* Primary UI Font - System fonts for best native appearance */
+  --font-primary:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  
+  /* Monospace Font - Code and technical content */
+  --font-monospace:
+    "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "Courier New", monospace,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 body {
   background-color: var(--color-background);
   color: var(--color-foreground);
-  font-family:
-    IBM Plex Sans,
-    sans-serif;
+  font-family: var(--font-primary);
   font-size: 14px;
 }
 
@@ -271,11 +276,7 @@ body,
 }
 
 code {
-  font-family:
-    JetBrains Mono,
-    Consolas,
-    Monaco,
-    monospace;
+  font-family: var(--font-monospace);
 }
 
 /* Native tooltips */
@@ -493,7 +494,8 @@ code {
 }
 
 .markdown-content li {
-  margin: 0.4em 0;
+  margin: 0;
+  padding: 0 0 4px 0;
   display: list-item;
 }
 
@@ -773,3 +775,30 @@ pre code {
     background-position: 0% 50%;
   }
 }
+
+/* Font utility classes */
+.font-primary {
+  font-family: var(--font-primary);
+}
+
+.font-monospace {
+  font-family: var(--font-monospace);
+}
+
+/* Text color utility classes */
+
+/* Checkbox utility classes */
+input[type="checkbox"] {
+  @apply relative m-0 h-3 w-3 cursor-pointer appearance-none rounded-sm border border-border-light bg-dark;
+  @apply hover:border-accent;
+  @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2;
+  @apply checked:bg-accent checked:border-accent;
+  @apply checked:after:absolute checked:after:top-[2px] checked:after:left-[4px] checked:after:h-[6px] checked:after:w-[2.5px];
+  @apply checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px];
+  @apply checked:after:border-solid checked:after:border-white checked:after:content-[''];
+}
+
+.text-dim {
+  color: var(--color-dim);
+}
+