diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4f073f..44d351e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ What changed in each release of SCN Chat, for the people who use it, run it, or
 - The new chat's "What can I help with?" draws in a touch, as other titles do. For forks: `shared/ui/Text.tsx` has a new `Text`, sized on one ladder over the type scale with Tailwind's names, `xs`, `sm`, `md`, `base`, `xl`, `2xl`, and `3xl`, with a `color` and `weight`, and `shared/ui/Title.tsx` a new `Title`, whose `order` is its heading level and `size` its look. Page titles, hints, and other plain text now use them.
 - Each step of the type scale now carries its own line height, from 1.4 for captions to 1.2 for the largest titles, and the headings and titles their letter spacing, so text that inherited the page's 1.55 sits a little tighter in settings and admin. For forks: set them in `theme.css` as `--text-*--line-height` and `--text-*--letter-spacing`. A `leading-*` or `tracking-*` utility still overrides them.
 - Corners now come from one ladder, so badges and rows share one radius, as do controls and cards, each moving by under a pixel. For forks: `theme.css` has `--radius-xs` to `--radius-xl` in place of `mark`, `badge` and `row`, `small` and `card`, `panel`, and `bubble`, so `rounded-badge` is `rounded-sm`, `rounded-small` is `rounded-md`, and so on.
+- Padding, margins, and gaps now use whole and half spacing steps only, so about a hundred of them moved by a pixel.
 
 ## [0.7.2] - 2026-10-27
 
diff --git a/apps/web/src/features/admin/components/SuspendControl.tsx b/apps/web/src/features/admin/components/SuspendControl.tsx
index 46d30ed..cfad5ba 100644
--- a/apps/web/src/features/admin/components/SuspendControl.tsx
+++ b/apps/web/src/features/admin/components/SuspendControl.tsx
@@ -32,7 +32,7 @@ export function SuspendControl(props: Props) {
     return (
       <span className={access}>
         <span className="flex flex-col @max-narrow:items-start items-end gap-0.5">
-          <Badge tone="danger" className="mt-1.25">
+          <Badge tone="danger" className="mt-1">
             Suspended
           </Badge>
           <Text as="small" title={note} size="sm" color="muted" className="max-w-40 truncate">
@@ -48,7 +48,7 @@ export function SuspendControl(props: Props) {
   if (!suspending)
     return (
       <span className={access}>
-        <Badge tone="good" className="mt-1.25">
+        <Badge tone="good" className="mt-1">
           Active
         </Badge>
         <Button tone="quiet" onClick={() => setSuspending(true)}>
diff --git a/apps/web/src/features/admin/components/UserRow.tsx b/apps/web/src/features/admin/components/UserRow.tsx
index b421577..80d7a14 100644
--- a/apps/web/src/features/admin/components/UserRow.tsx
+++ b/apps/web/src/features/admin/components/UserRow.tsx
@@ -42,7 +42,7 @@ export function UserRow(props: Props) {
           <TimeAgo key="active" date={user.lastActiveAt} prefix="Last active" />,
         ]}
       >
-        <span className="mt-1.5 flex flex-wrap items-center gap-1.25">
+        <span className="mt-1.5 flex flex-wrap items-center gap-1">
           {user.roles.map((grant) => (
             <Chip
               key={`${grant.role}:${grant.source}`}
diff --git a/apps/web/src/features/auth/components/HandleField.tsx b/apps/web/src/features/auth/components/HandleField.tsx
index efa8904..784d4eb 100644
--- a/apps/web/src/features/auth/components/HandleField.tsx
+++ b/apps/web/src/features/auth/components/HandleField.tsx
@@ -31,7 +31,7 @@ const panel = cn(
 )
 
 /** What the panel says when it has no accounts to offer. */
-const note = 'px-2.25 py-1.25 text-muted text-small'
+const note = 'px-2 py-1 text-muted text-small'
 
 /** An account's row, a step tighter than a menu's, since its avatar and two lines already fill it. */
 const row = cn(menuRow, 'px-2 py-1')
diff --git a/apps/web/src/features/auth/components/ThemeSwitch.tsx b/apps/web/src/features/auth/components/ThemeSwitch.tsx
index e90e3c9..5ec1095 100644
--- a/apps/web/src/features/auth/components/ThemeSwitch.tsx
+++ b/apps/web/src/features/auth/components/ThemeSwitch.tsx
@@ -28,7 +28,7 @@ export function ThemeSwitch() {
   return (
     // The label half of sidebarRow, without its hover, and tinting only its own icon, since the
     // buttons' icons follow whether they are pressed.
-    <div className="flex min-h-row items-center gap-2.25 whitespace-nowrap ps-row-inset font-medium text-ink leading-[1.45] [&>svg]:text-muted">
+    <div className="flex min-h-row items-center gap-2 whitespace-nowrap ps-row-inset font-medium text-ink leading-[1.45] [&>svg]:text-muted">
       <ContrastIcon />
       <span id={label}>Theme</span>
       <fieldset aria-labelledby={label} className="ms-auto flex gap-0.5">
diff --git a/apps/web/src/features/auth/pages/LoginPage.tsx b/apps/web/src/features/auth/pages/LoginPage.tsx
index 3725a02..2baa502 100644
--- a/apps/web/src/features/auth/pages/LoginPage.tsx
+++ b/apps/web/src/features/auth/pages/LoginPage.tsx
@@ -44,7 +44,7 @@ export function LoginPage(props: Props) {
           // Why a signed-in viewer is here: a quiet note over the form.
           <p
             role="status"
-            className="-mt-3 mb-6 rounded-md bg-surface px-3.5 py-2.75 text-start text-ink text-ui"
+            className="-mt-3 mb-6 rounded-md bg-surface px-3.5 py-3 text-start text-ink text-ui"
           >
             {props.notice}
           </p>
diff --git a/apps/web/src/features/chat-list/components/ChatItem.tsx b/apps/web/src/features/chat-list/components/ChatItem.tsx
index 0146afa..1e212e2 100644
--- a/apps/web/src/features/chat-list/components/ChatItem.tsx
+++ b/apps/web/src/features/chat-list/components/ChatItem.tsx
@@ -128,7 +128,7 @@ function MoreButton(props: MoreProps) {
         aria-label={`More for ${props.title}`}
         tone="firm"
         size="sm"
-        className="absolute end-0.75 top-1/2 -translate-y-1/2 opacity-0 touch:opacity-100 transition-[background-color,color,opacity] focus-visible:opacity-100 group-hover/row:opacity-100 aria-expanded:opacity-100"
+        className="absolute end-1 top-1/2 -translate-y-1/2 opacity-0 touch:opacity-100 transition-[background-color,color,opacity] focus-visible:opacity-100 group-hover/row:opacity-100 aria-expanded:opacity-100"
       >
         <MoreIcon />
       </Menu.Trigger>
diff --git a/apps/web/src/features/chat-list/components/ChatList.tsx b/apps/web/src/features/chat-list/components/ChatList.tsx
index 3b94ed6..6c0139a 100644
--- a/apps/web/src/features/chat-list/components/ChatList.tsx
+++ b/apps/web/src/features/chat-list/components/ChatList.tsx
@@ -121,7 +121,7 @@ export function ChatList() {
           type="button"
           // The chat is created by its first message, on the page without an open chat.
           onClick={() => void navigate({ to: '/' })}
-          className={cn(tool, 'min-w-0 flex-1 gap-2.25 px-row-inset font-semibold text-ink')}
+          className={cn(tool, 'min-w-0 flex-1 gap-2 px-row-inset font-semibold text-ink')}
         >
           <NewChatIcon /> New chat
         </button>
diff --git a/apps/web/src/features/chat-list/components/ChatMenuActions.tsx b/apps/web/src/features/chat-list/components/ChatMenuActions.tsx
index 6dd61d6..6df4369 100644
--- a/apps/web/src/features/chat-list/components/ChatMenuActions.tsx
+++ b/apps/web/src/features/chat-list/components/ChatMenuActions.tsx
@@ -183,7 +183,7 @@ function EditCard(props: EditCardProps) {
   return (
     <li
       onKeyDown={(event) => event.key === 'Escape' && props.onCancel()}
-      className="mt-0.75 mb-1.5 rounded-editor border border-line bg-raised p-2.5 text-small"
+      className="mt-1 mb-1.5 rounded-editor border border-line bg-raised p-2.5 text-small"
     >
       {props.children}
       {props.error}
diff --git a/apps/web/src/features/chat-list/components/SearchResults.tsx b/apps/web/src/features/chat-list/components/SearchResults.tsx
index 20ea6ad..da989b0 100644
--- a/apps/web/src/features/chat-list/components/SearchResults.tsx
+++ b/apps/web/src/features/chat-list/components/SearchResults.tsx
@@ -200,7 +200,7 @@ function ChatResults(props: ChatResultsProps) {
                 <span className="line-clamp-2 min-w-0 flex-1 font-normal text-row-ink text-small leading-[1.4] [&_code]:rounded-sm [&_code]:bg-surface [&_code]:px-1 [&_code]:text-code [&_strong]:font-semibold [&_strong]:text-ink">
                   {result.role === 'user' && (
                     // Who said it, as a small grey badge before their words.
-                    <span className="me-1.5 inline-block rounded-sm bg-row-active px-1.25 font-medium text-caption text-muted">
+                    <span className="me-1.5 inline-block rounded-sm bg-row-active px-1 font-medium text-caption text-muted">
                       You<span className="sr-only">: </span>
                     </span>
                   )}
diff --git a/apps/web/src/features/chat-list/components/SyncStatus.tsx b/apps/web/src/features/chat-list/components/SyncStatus.tsx
index 9bd4403..d5c5251 100644
--- a/apps/web/src/features/chat-list/components/SyncStatus.tsx
+++ b/apps/web/src/features/chat-list/components/SyncStatus.tsx
@@ -93,7 +93,7 @@ export function SyncDot(props: Props) {
       title={sync.text}
       className={cn(
         dot(sync.dot),
-        'absolute -end-0.75 -bottom-0.75 size-2.5 border-2 border-sidebar group-hover/account:border-row-hover-solid group-aria-expanded/account:border-row-hover-solid',
+        'absolute -end-1 -bottom-1 size-2.5 border-2 border-sidebar group-hover/account:border-row-hover-solid group-aria-expanded/account:border-row-hover-solid',
       )}
     >
       <span className="sr-only" aria-live="polite">
@@ -114,9 +114,9 @@ export function SyncPanel(props: Props) {
   return (
     <div
       data-state={sync.dot}
-      className="group/sync mb-(--menu-pad) flex flex-col gap-0.75 rounded-sm bg-row-hover ps-row-inset pe-1.25 pt-2 pb-1.25"
+      className="group/sync mb-(--menu-pad) flex flex-col gap-1 rounded-sm bg-row-hover ps-row-inset pe-1 pt-2 pb-1"
     >
-      <p className="flex items-center gap-2.25 font-medium text-ink leading-[1.35]">
+      <p className="flex items-center gap-2 font-medium text-ink leading-[1.35]">
         {sync.local ? <DriveIcon /> : <CloudIcon />}
         <span className="flex min-w-0 flex-col">
           {sync.local ? 'Stored on this server' : 'Stored on your PDS'}
@@ -127,7 +127,7 @@ export function SyncPanel(props: Props) {
           )}
         </span>
       </p>
-      <div className="flex items-center gap-2.25 font-medium text-muted text-small leading-[1.35] group-data-[state=failed]/sync:text-danger">
+      <div className="flex items-center gap-2 font-medium text-muted text-small leading-[1.35] group-data-[state=failed]/sync:text-danger">
         <span
           aria-hidden="true"
           className={cn(
diff --git a/apps/web/src/features/conversation/components/Composer.tsx b/apps/web/src/features/conversation/components/Composer.tsx
index f0d6af8..bb1c134 100644
--- a/apps/web/src/features/conversation/components/Composer.tsx
+++ b/apps/web/src/features/conversation/components/Composer.tsx
@@ -166,7 +166,7 @@ interface EditingNoteProps {
 /** That the composer is editing an earlier message, above the box, with a way back. */
 export function EditingNote(props: EditingNoteProps) {
   return (
-    <div className="mx-1.5 mb-2 flex items-center gap-1.75 text-caption text-muted">
+    <div className="mx-1.5 mb-2 flex items-center gap-2 text-caption text-muted">
       <PencilIcon className="size-3.75" />
       <span>Editing your message. Sending adds it as a new version.</span>
       <Button
@@ -188,13 +188,13 @@ export function Quotes() {
   return (
     <ul
       aria-label="Quotes"
-      className={cn(composerPart, 'flex flex-col gap-1.5 px-2.75 pt-2.5 pb-0.5')}
+      className={cn(composerPart, 'flex flex-col gap-1.5 px-3 pt-2.5 pb-0.5')}
     >
       {draft.quotes.map((quote) => (
         <li
           key={quote.id}
           title={quote.text}
-          className="flex w-full items-start gap-2 rounded-quote bg-well py-1.5 ps-2.75 pe-1 text-caption"
+          className="flex w-full items-start gap-2 rounded-quote bg-well py-1.5 ps-3 pe-1 text-caption"
         >
           <blockquote className="line-clamp-2 flex-1 text-muted">
             {quote.text.trim().replace(/\s+/g, ' ')}
@@ -217,7 +217,7 @@ export function Attachments() {
     <AttachmentChips
       attachments={draft.attachments}
       onRemove={draft.removeAttachment}
-      className={cn(composerPart, 'px-2.75 pt-2.5 pb-0.5')}
+      className={cn(composerPart, 'px-3 pt-2.5 pb-0.5')}
     />
   )
 }
diff --git a/apps/web/src/features/conversation/components/ConversationHeader.tsx b/apps/web/src/features/conversation/components/ConversationHeader.tsx
index 84eb544..2de3dfc 100644
--- a/apps/web/src/features/conversation/components/ConversationHeader.tsx
+++ b/apps/web/src/features/conversation/components/ConversationHeader.tsx
@@ -92,7 +92,7 @@ export function ConversationHeader(props: Props) {
             type="button"
             title="Rename"
             onClick={() => setPanel('rename')}
-            className="group/title inline-flex max-w-full cursor-text items-center gap-1.5 whitespace-nowrap rounded-md px-2.25 py-1.25 hover:bg-row-hover focus-visible:bg-row-hover"
+            className="group/title inline-flex max-w-full cursor-text items-center gap-1.5 whitespace-nowrap rounded-md px-2 py-1 hover:bg-row-hover focus-visible:bg-row-hover"
           >
             <span dir="auto" className="truncate">
               {props.title}
@@ -190,7 +190,7 @@ export function ConversationHeader(props: Props) {
 
 /** A panel dropping down from the header's right edge, over the messages, settling into place. */
 const dropdown =
-  'absolute end-2.75 top-[calc(100%-(--spacing(1.5)))] z-2 animate-panel-in motion-reduce:animate-fade-in'
+  'absolute end-3 top-[calc(100%-(--spacing(1.5)))] z-2 animate-panel-in motion-reduce:animate-fade-in'
 
 interface RenameFormProps {
   title: string
@@ -214,7 +214,7 @@ function RenameForm(props: RenameFormProps) {
               aria-label="Title"
               // The field opens because the user asked to rename.
               autoFocus
-              className="min-w-0 max-w-112 flex-1 px-2.25 py-1.25 font-semibold text-ink text-ui"
+              className="min-w-0 max-w-112 flex-1 px-2 py-1 font-semibold text-ink text-ui"
             />
           )}
         </form.AppField>
diff --git a/apps/web/src/features/conversation/components/HeaderFrame.tsx b/apps/web/src/features/conversation/components/HeaderFrame.tsx
index f62d332..1e13a19 100644
--- a/apps/web/src/features/conversation/components/HeaderFrame.tsx
+++ b/apps/web/src/features/conversation/components/HeaderFrame.tsx
@@ -4,7 +4,7 @@ import { SkeletonText } from '../../../shared/ui/Skeleton.tsx'
 /** The conversation header's row, shared with its frame so the two sit in the same place. */
 export const headerBar = cn(
   // Out of the centered column to the panel's edges.
-  'group/header sticky top-0 isolate z-1 mx-[calc((100%-100cqi)/2)] flex min-h-bar items-center gap-4 px-2.75 transition-[padding-inline-start] duration-(--dur-slide) ease-slide before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:-bottom-6 before:-z-1 before:bg-panel motion-reduce:transition-none before:[mask-image:linear-gradient(black_calc(100%-(--spacing(10))),transparent)]',
+  'group/header sticky top-0 isolate z-1 mx-[calc((100%-100cqi)/2)] flex min-h-bar items-center gap-4 px-3 transition-[padding-inline-start] duration-(--dur-slide) ease-slide before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:-bottom-6 before:-z-1 before:bg-panel motion-reduce:transition-none before:[mask-image:linear-gradient(black_calc(100%-(--spacing(10))),transparent)]',
   // The title moves aside for the sidebar's toggle as the sidebar slides away, and back, and
   // stays clear of it on a narrow screen, where the sidebar is a drawer.
   'in-data-sidebar-collapsed:ps-[calc(--spacing(2.75)+var(--spacing-toggle)+--spacing(1.5))] max-wide:ps-[calc(--spacing(2.75)+var(--spacing-toggle)+--spacing(1.5))]',
@@ -13,7 +13,7 @@ export const headerBar = cn(
 /** The title on its way, a line where the title's text will be. */
 export function TitleSkeleton() {
   return (
-    <span className="min-w-0 flex-1 px-2.25 py-1.25 text-ui">
+    <span className="min-w-0 flex-1 px-2 py-1 text-ui">
       <SkeletonText className="w-40 max-w-full" />
     </span>
   )
diff --git a/apps/web/src/features/conversation/components/MessageView.tsx b/apps/web/src/features/conversation/components/MessageView.tsx
index d62f088..d7ce0e6 100644
--- a/apps/web/src/features/conversation/components/MessageView.tsx
+++ b/apps/web/src/features/conversation/components/MessageView.tsx
@@ -80,10 +80,10 @@ export function MessageView(props: MessageViewProps) {
     >
       <header
         className={cn(
-          'mb-0.75 flex items-center gap-2 text-caption text-muted',
+          'mb-1 flex items-center gap-2 text-caption text-muted',
           // The model's name, faint, after a quiet dot that breathes in green while it replies and
           // turns red when it failed.
-          '[&>strong]:inline-flex [&>strong]:items-center [&>strong]:gap-1.75 [&>strong]:font-medium [&>strong]:text-caption [&>strong]:text-muted-quiet',
+          '[&>strong]:inline-flex [&>strong]:items-center [&>strong]:gap-2 [&>strong]:font-medium [&>strong]:text-caption [&>strong]:text-muted-quiet',
           user
             ? '[&>strong]:hidden'
             : "[&>strong]:before:size-1.75 [&>strong]:before:rounded-full [&>strong]:before:bg-author-dot [&>strong]:before:content-['']",
diff --git a/apps/web/src/features/conversation/components/MoreActions.tsx b/apps/web/src/features/conversation/components/MoreActions.tsx
index 5000306..67c67da 100644
--- a/apps/web/src/features/conversation/components/MoreActions.tsx
+++ b/apps/web/src/features/conversation/components/MoreActions.tsx
@@ -133,7 +133,7 @@ export function MoreActions(props: Props) {
           type="button"
           aria-label="Back from Details"
           onClick={() => setView('menu')}
-          className="-ms-1.75 -mt-1.25 mb-2 inline-flex cursor-pointer items-center gap-1.5 rounded-sm px-1.75 py-0.75 text-caption text-muted hover:bg-row-hover hover:text-ink"
+          className="-ms-2 -mt-1 mb-2 inline-flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1 text-caption text-muted hover:bg-row-hover hover:text-ink"
         >
           <ArrowLeftIcon /> Details
         </button>
diff --git a/apps/web/src/features/conversation/components/PartsView.tsx b/apps/web/src/features/conversation/components/PartsView.tsx
index e8febfb..7d744f4 100644
--- a/apps/web/src/features/conversation/components/PartsView.tsx
+++ b/apps/web/src/features/conversation/components/PartsView.tsx
@@ -113,7 +113,7 @@ function Sources(props: SourcesProps) {
   return (
     <section aria-label="Sources" className="my-3.5">
       <Disclosure.Root data-sources>
-        <Disclosure.Summary className="inline-flex items-center gap-1.5 rounded-md bg-well px-2.25 py-1 font-medium text-caption text-ink transition-colors duration-(--dur-feedback) hover:bg-accent-soft">
+        <Disclosure.Summary className="inline-flex items-center gap-1.5 rounded-md bg-well px-2 py-1 font-medium text-caption text-ink transition-colors duration-(--dur-feedback) hover:bg-accent-soft">
           <LinkIcon className="size-3.5 flex-none text-muted" />
           {plural(props.sources.length, { one: '# source', other: '# sources' })}
           <Disclosure.Chevron points="down" />
@@ -125,7 +125,7 @@ function Sources(props: SourcesProps) {
             return (
               <li
                 key={part.url as string}
-                className="flex w-fit min-w-0 max-w-full items-baseline gap-1.5 rounded-md bg-well px-2.25 py-1 text-caption transition-colors duration-(--dur-feedback) [counter-increment:source] before:flex-none before:text-muted before:tabular-nums before:content-[counter(source)] has-[a:hover]:bg-accent-soft"
+                className="flex w-fit min-w-0 max-w-full items-baseline gap-1.5 rounded-md bg-well px-2 py-1 text-caption transition-colors duration-(--dur-feedback) [counter-increment:source] before:flex-none before:text-muted before:tabular-nums before:content-[counter(source)] has-[a:hover]:bg-accent-soft"
               >
                 {View && <View part={part} record={props.record} blobUrl={props.blobUrl} />}
               </li>
diff --git a/apps/web/src/features/conversation/components/PendingReply.tsx b/apps/web/src/features/conversation/components/PendingReply.tsx
index a526faf..8152332 100644
--- a/apps/web/src/features/conversation/components/PendingReply.tsx
+++ b/apps/web/src/features/conversation/components/PendingReply.tsx
@@ -41,7 +41,7 @@ export function WaitingAuthor(props: WaitingAuthorProps) {
     <strong className="in-data-arrived:animate-fade-in-late motion-reduce:animate-none">
       <span className="animate-breathe motion-reduce:animate-none">{props.model}</span>
       {seconds !== undefined && seconds > 0 && (
-        <span className="animate-fade-in font-normal tabular-nums before:me-1.75 before:content-['·'] motion-reduce:animate-none">
+        <span className="animate-fade-in font-normal tabular-nums before:me-2 before:content-['·'] motion-reduce:animate-none">
           {formatSeconds(seconds)}
         </span>
       )}
diff --git a/apps/web/src/features/conversation/components/RecordDetails.tsx b/apps/web/src/features/conversation/components/RecordDetails.tsx
index 673f8c6..209cdbd 100644
--- a/apps/web/src/features/conversation/components/RecordDetails.tsx
+++ b/apps/web/src/features/conversation/components/RecordDetails.tsx
@@ -61,7 +61,7 @@ interface DetailsListProps {
 /** The record's rows as terms and values. */
 export function DetailsList(props: DetailsListProps) {
   return (
-    <dl className="grid grid-cols-[max-content_1fr] gap-x-5 gap-y-1.25">
+    <dl className="grid grid-cols-[max-content_1fr] gap-x-5 gap-y-1">
       {props.rows.map(([term, value]) => (
         <div key={term} className="contents">
           <dt className="text-muted">{term}</dt>
diff --git a/apps/web/src/features/conversation/components/composer-parts.tsx b/apps/web/src/features/conversation/components/composer-parts.tsx
index 28d7ced..a567968 100644
--- a/apps/web/src/features/conversation/components/composer-parts.tsx
+++ b/apps/web/src/features/conversation/components/composer-parts.tsx
@@ -82,7 +82,7 @@ export function ComposerToolbar(props: ChildrenProps) {
     <div
       className={cn(
         composerPart,
-        'flex items-center gap-1.75 rounded-b-composer border-b ps-3.25 pe-2.25 pt-1.75 pb-2.25',
+        'flex items-center gap-2 rounded-b-composer border-b ps-3 pe-2 pt-2 pb-2',
       )}
     >
       {props.children}
diff --git a/apps/web/src/features/settings/pages/ApiKeySettings.tsx b/apps/web/src/features/settings/pages/ApiKeySettings.tsx
index 201aab8..95c0317 100644
--- a/apps/web/src/features/settings/pages/ApiKeySettings.tsx
+++ b/apps/web/src/features/settings/pages/ApiKeySettings.tsx
@@ -153,7 +153,7 @@ function KeyHint(props: KeyHintProps) {
   return (
     <code
       title="The key's last four characters"
-      className="rounded-sm bg-surface px-1.75 py-0.5 text-caption text-muted tracking-key"
+      className="rounded-sm bg-surface px-2 py-0.5 text-caption text-muted tracking-key"
     >
       <span aria-hidden="true">••••</span>
       <span className="sr-only">ending </span>
diff --git a/apps/web/src/parts/TextView.tsx b/apps/web/src/parts/TextView.tsx
index e0592af..b8726fe 100644
--- a/apps/web/src/parts/TextView.tsx
+++ b/apps/web/src/parts/TextView.tsx
@@ -38,7 +38,7 @@ function UserText(props: UserTextProps) {
               // biome-ignore lint/suspicious/noArrayIndexKey: blocks have no identity beyond their place.
               key={i}
               dir="auto"
-              className="-mx-1.75 mb-2.25 rounded-[calc(var(--radius-xl)-(--spacing(2.5)))] bg-bubble-quote px-2.75 py-1.5 font-normal text-ui last:mb-0"
+              className="-mx-2 mb-2 rounded-[calc(var(--radius-xl)-(--spacing(2.5)))] bg-bubble-quote px-3 py-1.5 font-normal text-ui last:mb-0"
             >
               {block.text}
             </blockquote>
diff --git a/apps/web/src/parts/WorkSteps.tsx b/apps/web/src/parts/WorkSteps.tsx
index 97286ac..beea095 100644
--- a/apps/web/src/parts/WorkSteps.tsx
+++ b/apps/web/src/parts/WorkSteps.tsx
@@ -53,7 +53,7 @@ const summary =
   'flex items-center font-medium text-muted transition-colors duration-(--dur-feedback) hover:text-ink'
 
 /** The summary's chevron, drawn a little into its padding so the label lines up with the body. */
-const chevron = '-ms-0.75 me-1'
+const chevron = '-ms-1 me-1'
 
 interface ElapsedProps {
   seconds: number
@@ -102,10 +102,10 @@ const finishedSummary = (steps: Step[], scope: string | undefined) =>
  * Each step is a tinted row, numbered in a grey circle like a tracking history: green when it is
  * done, red when it failed, and breathing in the accent while it runs.
  */
-const timeline = 'mt-2.25 flex flex-col gap-1.5 [counter-reset:step]'
+const timeline = 'mt-2 flex flex-col gap-1.5 [counter-reset:step]'
 const stepRow = cn(
   'relative rounded-md bg-sunken py-1.5 ps-10 pe-3 [counter-increment:step]',
-  'before:absolute before:start-2.75 before:top-2 before:grid before:size-5.25 before:place-items-center before:rounded-full before:bg-hover before:font-semibold before:text-caption before:text-muted before:content-[counter(step)]',
+  'before:absolute before:start-3 before:top-2 before:grid before:size-5.25 before:place-items-center before:rounded-full before:bg-hover before:font-semibold before:text-caption before:text-muted before:content-[counter(step)]',
   'has-[>[data-state=done]]:before:bg-accent-soft has-[>[data-state=done]]:before:text-accent-strong',
   'has-[>[data-state=error]]:before:bg-danger-soft has-[>[data-state=error]]:before:text-danger',
   'has-[>[data-current]]:before:animate-breathe has-[>[data-state=running]]:before:animate-breathe has-[>[data-current]]:before:bg-accent has-[>[data-state=running]]:before:bg-accent has-[>[data-current]]:before:text-on-accent has-[>[data-state=running]]:before:text-on-accent motion-reduce:before:animate-none',
@@ -206,7 +206,7 @@ interface WorkListProps {
 const rail = 'isolate mt-2.5 flex flex-col gap-0.5 ps-6.5'
 const railRow = cn(
   'relative py-0.5 pe-3 last:after:hidden',
-  'after:absolute after:-start-4.25 after:top-5.5 after:-bottom-2 after:w-0.5 after:rounded-full after:bg-line',
+  'after:absolute after:-start-4 after:top-5.5 after:-bottom-2 after:w-0.5 after:rounded-full after:bg-line',
 )
 
 interface RailDotProps {
@@ -223,7 +223,7 @@ function RailDot(props: RailDotProps) {
   return (
     <span
       aria-hidden="true"
-      className="absolute -start-6.5 top-0.75 z-1 flex h-5.5 w-5 items-center justify-center"
+      className="absolute -start-6.5 top-1 z-1 flex h-5.5 w-5 items-center justify-center"
     >
       <span
         className={cn(
@@ -365,7 +365,7 @@ function Thought(props: ThoughtProps) {
         <Markdown
           text={props.text}
           streaming={props.current}
-          className="mt-0.75 mb-1 text-muted leading-[1.6] [font-size:inherit] [&>*>:first-child]:mt-0 [&>*>:last-child]:mb-0 [&_strong]:text-ink"
+          className="mt-1 mb-1 text-muted leading-[1.6] [font-size:inherit] [&>*>:first-child]:mt-0 [&>*>:last-child]:mb-0 [&_strong]:text-ink"
         />
       )}
     </Disclosure.Root>
@@ -435,7 +435,7 @@ function ToolStep(props: ToolStepProps) {
         {status !== 'done' && (
           <Badge
             tone={status === 'running' ? 'good' : status === 'error' ? 'danger' : undefined}
-            className={cn('ms-1.25', status === 'running' && breathe)}
+            className={cn('ms-1', status === 'running' && breathe)}
           >
             {badges[status]}
           </Badge>
diff --git a/apps/web/src/parts/tools/ui.tsx b/apps/web/src/parts/tools/ui.tsx
index 2929766..5a40669 100644
--- a/apps/web/src/parts/tools/ui.tsx
+++ b/apps/web/src/parts/tools/ui.tsx
@@ -46,7 +46,7 @@ export function StepCode(props: StepCodeProps) {
   return (
     <pre
       dir={props.dir}
-      className="mt-1.25 mb-0.75 max-h-80 overflow-auto whitespace-pre-wrap rounded-md bg-surface px-3.5 py-3 font-mono text-code-block text-ink leading-normal"
+      className="mt-1 mb-1 max-h-80 overflow-auto whitespace-pre-wrap rounded-md bg-surface px-3.5 py-3 font-mono text-code-block text-ink leading-normal"
     >
       {props.children}
     </pre>
diff --git a/apps/web/src/parts/tools/web-search/index.tsx b/apps/web/src/parts/tools/web-search/index.tsx
index ffc5d5e..e5229b4 100644
--- a/apps/web/src/parts/tools/web-search/index.tsx
+++ b/apps/web/src/parts/tools/web-search/index.tsx
@@ -79,7 +79,7 @@ function ResultList(props: ResultListProps) {
           aria-expanded={fold.open}
           aria-controls={id}
           onClick={fold.toggle}
-          className="mb-0.75 block cursor-pointer rounded-sm py-0.5 text-caption text-tint-quiet transition-colors duration-(--dur-feedback) hover:text-ink focus-visible:text-ink"
+          className="mb-1 block cursor-pointer rounded-sm py-0.5 text-caption text-tint-quiet transition-colors duration-(--dur-feedback) hover:text-ink focus-visible:text-ink"
         >
           {fold.open ? 'Show less' : `Show ${fold.hidden} more`}
         </button>
diff --git a/apps/web/src/shared/ErrorPage.tsx b/apps/web/src/shared/ErrorPage.tsx
index e4584b8..6ee5c06 100644
--- a/apps/web/src/shared/ErrorPage.tsx
+++ b/apps/web/src/shared/ErrorPage.tsx
@@ -28,7 +28,7 @@ export function ErrorPage(props: Props) {
       {message && (
         <p
           role="alert"
-          className="mt-5 max-w-120 rounded-md border border-line bg-sunken px-3.25 py-2.25 font-mono text-caption text-danger leading-normal [overflow-wrap:anywhere]"
+          className="mt-5 max-w-120 rounded-md border border-line bg-sunken px-3 py-2 font-mono text-caption text-danger leading-normal [overflow-wrap:anywhere]"
         >
           {message}
         </p>
diff --git a/apps/web/src/shared/SectionNav.tsx b/apps/web/src/shared/SectionNav.tsx
index 48ad41a..106cc25 100644
--- a/apps/web/src/shared/SectionNav.tsx
+++ b/apps/web/src/shared/SectionNav.tsx
@@ -34,7 +34,7 @@ export function SectionNav(props: Props) {
           size="xs"
           color="muted"
           weight="semibold"
-          className="mt-3 mb-0.75 px-row-inset tracking-label"
+          className="mt-3 mb-1 px-row-inset tracking-label"
         >
           {props.label}
         </Text>
@@ -85,7 +85,7 @@ const areas = [
 
 /** A tab of `AreaTabs`, its icon a step smaller to suit its text. */
 const areaTab =
-  'flex flex-1 items-center justify-center gap-1.5 rounded-sm py-1.25 font-medium text-small no-underline [&_svg]:size-3.75'
+  'flex flex-1 items-center justify-center gap-1.5 rounded-sm py-1 font-medium text-small no-underline [&_svg]:size-3.75'
 
 interface TabsProps {
   /** The area open, which the tabs name in place of a title. */
@@ -102,7 +102,7 @@ export function AreaTabs(props: TabsProps) {
   return (
     <>
       <BackToChats />
-      <div className="mb-2 flex gap-0.5 rounded-md bg-row-active p-0.75">
+      <div className="mb-2 flex gap-0.5 rounded-md bg-row-active p-1">
         {areas.map((area) => {
           if (area.area === props.open)
             return (
diff --git a/apps/web/src/shared/SidebarLayout.tsx b/apps/web/src/shared/SidebarLayout.tsx
index 8d166ae..5176c1b 100644
--- a/apps/web/src/shared/SidebarLayout.tsx
+++ b/apps/web/src/shared/SidebarLayout.tsx
@@ -114,7 +114,7 @@ const sidebarClass = cn(
 function MainBar() {
   return (
     <div className="sticky top-0 z-3 h-0">
-      <SidebarToggle className="wide:not-in-data-sidebar-collapsed:invisible absolute start-2.75 top-[calc((var(--spacing-bar)-var(--spacing-toggle))/2)] border border-line bg-raised wide:not-in-data-sidebar-collapsed:opacity-0 transition-[opacity,visibility] wide:in-data-sidebar-collapsed:delay-[calc(var(--dur-slide)/2)] duration-(--dur-feedback) motion-reduce:transition-none" />
+      <SidebarToggle className="wide:not-in-data-sidebar-collapsed:invisible absolute start-3 top-[calc((var(--spacing-bar)-var(--spacing-toggle))/2)] border border-line bg-raised wide:not-in-data-sidebar-collapsed:opacity-0 transition-[opacity,visibility] wide:in-data-sidebar-collapsed:delay-[calc(var(--dur-slide)/2)] duration-(--dur-feedback) motion-reduce:transition-none" />
     </div>
   )
 }
diff --git a/apps/web/src/shared/ui/Alert.tsx b/apps/web/src/shared/ui/Alert.tsx
index 09003c4..18bf802 100644
--- a/apps/web/src/shared/ui/Alert.tsx
+++ b/apps/web/src/shared/ui/Alert.tsx
@@ -13,11 +13,11 @@ const alert = cva('block text-danger', {
       /** Red words in the flow, as large as the text around them unless `size` is `sm`. */
       plain: '',
       /** Under a setting or a field, after its description. */
-      field: 'mt-0.75 text-small',
+      field: 'mt-1 text-small',
       /** Across the foot of a card, on a soft red ground. */
       card: 'bg-danger-soft p-card-pad text-small',
       /** Under a form's lone field, in a soft red box of its own, as when signing in. */
-      form: 'mt-0.75 rounded-md bg-danger-soft px-3 py-2.25 text-small',
+      form: 'mt-1 rounded-md bg-danger-soft px-3 py-2 text-small',
     },
     size: {
       /** Small words, for a plain alert under a list or beside a form's buttons. */
diff --git a/apps/web/src/shared/ui/Badge.tsx b/apps/web/src/shared/ui/Badge.tsx
index 487d145..ec7bdd0 100644
--- a/apps/web/src/shared/ui/Badge.tsx
+++ b/apps/web/src/shared/ui/Badge.tsx
@@ -15,7 +15,7 @@ export function Badge(props: BadgeProps) {
     <span
       title={props.title}
       className={cn(
-        'inline-flex items-center whitespace-nowrap rounded-sm bg-hover px-1.75 py-px font-semibold text-caption text-muted',
+        'inline-flex items-center whitespace-nowrap rounded-sm bg-hover px-2 py-px font-semibold text-caption text-muted',
         props.tone === 'good' && 'bg-accent-soft text-accent-strong',
         props.tone === 'warning' && 'bg-highlight text-highlight-ink',
         props.tone === 'danger' && 'bg-danger-soft text-danger',
@@ -40,7 +40,7 @@ export function Chip(props: ChipProps) {
     <span
       title={props.title}
       className={cn(
-        'inline-flex min-w-0 items-center gap-1.25 whitespace-nowrap rounded-sm bg-surface px-1.75 py-px font-medium text-caption text-ink',
+        'inline-flex min-w-0 items-center gap-1 whitespace-nowrap rounded-sm bg-surface px-2 py-px font-medium text-caption text-ink',
         props.end && 'gap-0.5 pe-0.5',
       )}
     >
@@ -58,7 +58,7 @@ interface ChipsProps {
 export function Chips(props: ChipsProps) {
   if (!props.values.length) return <span className="text-muted text-small">None</span>
   return (
-    <span className="flex flex-wrap items-center gap-1.25">
+    <span className="flex flex-wrap items-center gap-1">
       {props.values.map((value) => (
         <Chip key={value}>{value}</Chip>
       ))}
diff --git a/apps/web/src/shared/ui/Button.tsx b/apps/web/src/shared/ui/Button.tsx
index ae27922..57398b7 100644
--- a/apps/web/src/shared/ui/Button.tsx
+++ b/apps/web/src/shared/ui/Button.tsx
@@ -25,12 +25,12 @@ export const button = cva(
         link: 'border-transparent bg-transparent text-muted text-small underline decoration-faint underline-offset-(--underline-offset) hover:not-disabled:text-ink motion-safe:active:not-disabled:scale-100',
       },
       size: {
-        sm: 'px-2.75 py-1 text-small',
-        md: 'px-3 py-1.25',
+        sm: 'px-3 py-1 text-small',
+        md: 'px-3 py-1',
       },
     },
     compoundVariants: [
-      { tone: 'quiet', size: 'md', className: 'px-2 py-0.75 text-small' },
+      { tone: 'quiet', size: 'md', className: 'px-2 py-1 text-small' },
       { tone: 'link', className: 'p-0' },
     ],
     defaultVariants: { tone: 'default', size: 'md' },
@@ -88,7 +88,7 @@ const iconButton = cva(
       // The button's own size, from a 16px box with a smaller icon up to a sidebar row's height.
       size: {
         xs: 'p-0.5 [&>svg]:size-3',
-        sm: 'p-0.75',
+        sm: 'p-1',
         md: 'p-1.5',
         lg: 'size-toggle',
         xl: 'size-row',
@@ -101,7 +101,7 @@ const iconButton = cva(
       },
     },
     // An action's size comes with its tone, so the message's actions stay one size.
-    compoundVariants: [{ tone: 'action', className: 'size-action p-0.75' }],
+    compoundVariants: [{ tone: 'action', className: 'size-action p-1' }],
     defaultVariants: { tone: 'default', size: 'md' },
   },
 )
diff --git a/apps/web/src/shared/ui/Secret.tsx b/apps/web/src/shared/ui/Secret.tsx
index 5e1076c..5027b50 100644
--- a/apps/web/src/shared/ui/Secret.tsx
+++ b/apps/web/src/shared/ui/Secret.tsx
@@ -12,7 +12,7 @@ export function Secret(props: Props) {
       <code className="min-w-0 flex-1 whitespace-pre-wrap py-0.5 text-ink text-small leading-normal [overflow-wrap:anywhere]">
         {props.text}
       </code>
-      <CopyButton text={props.text} className="flex-none px-2.5 py-0.75 text-caption" />
+      <CopyButton text={props.text} className="flex-none px-2.5 py-1 text-caption" />
     </div>
   )
 }
diff --git a/apps/web/src/shared/ui/Select.tsx b/apps/web/src/shared/ui/Select.tsx
index 58acd94..f2d6a81 100644
--- a/apps/web/src/shared/ui/Select.tsx
+++ b/apps/web/src/shared/ui/Select.tsx
@@ -269,7 +269,7 @@ export function Select(props: Props) {
         data-quiet={props.quiet || undefined}
         className={cn(
           field,
-          'inline-flex max-w-full cursor-pointer items-center justify-between gap-1.5 pe-2.25 text-start disabled:cursor-default aria-expanded:border-focus aria-expanded:ring-3 aria-expanded:ring-accent-soft',
+          'inline-flex max-w-full cursor-pointer items-center justify-between gap-1.5 pe-2 text-start disabled:cursor-default aria-expanded:border-focus aria-expanded:ring-3 aria-expanded:ring-accent-soft',
           // Quiet, it reads as the text around it until hovered or open.
           props.quiet &&
             'min-w-0 border-transparent bg-transparent px-2 py-1 font-medium text-muted-quiet hover:not-disabled:bg-hover hover:not-disabled:text-ink aria-expanded:border-transparent aria-expanded:text-ink aria-expanded:ring-0',
@@ -304,7 +304,7 @@ export function Select(props: Props) {
             {/* The list's name already says this to screen readers, so it is only seen. */}
             {props.heading && (
               <div
-                className="mb-0.5 flex-none px-2.25 py-0.75 font-medium text-caption text-muted"
+                className="mb-0.5 flex-none px-2 py-1 font-medium text-caption text-muted"
                 aria-hidden
               >
                 {props.heading}
diff --git a/apps/web/src/shared/ui/SettingsPage.tsx b/apps/web/src/shared/ui/SettingsPage.tsx
index 5556908..80a6438 100644
--- a/apps/web/src/shared/ui/SettingsPage.tsx
+++ b/apps/web/src/shared/ui/SettingsPage.tsx
@@ -41,7 +41,7 @@ export function SettingsPage(props: PageProps) {
         <div className="min-w-0 shrink grow basis-80">
           <Title order={2}>{props.title}</Title>
           {props.description && (
-            <Text as="p" size="md" color="muted" className="mt-0.75">
+            <Text as="p" size="md" color="muted" className="mt-1">
               {props.description}
             </Text>
           )}
@@ -84,7 +84,7 @@ export function SettingsGroup(props: GroupProps) {
     // A group named by its heading when it has one, as one plugin's settings are.
     <fieldset aria-labelledby={props.title ? id : undefined} className="mb-8 min-w-0">
       {props.title && (
-        <h3 id={id} className={cn(heading, 'mb-2.25')}>
+        <h3 id={id} className={cn(heading, 'mb-2')}>
           {props.title}
         </h3>
       )}
@@ -131,7 +131,7 @@ interface ChoicesProps {
 export function Choices(props: ChoicesProps) {
   return (
     <fieldset className="mb-8 min-w-0">
-      <legend className={cn(heading, 'float-start mb-2.25 w-full')}>{props.title}</legend>
+      <legend className={cn(heading, 'float-start mb-2 w-full')}>{props.title}</legend>
       {props.description && <p className={groupDescription}>{props.description}</p>}
       <div className="clear-both">
         <SettingsCard>{props.children}</SettingsCard>
@@ -393,7 +393,7 @@ function FormBar(props: FormBarProps) {
       {/* The status is always there, so screen readers announce it when it fills. */}
       <span
         role="status"
-        className="inline-flex items-center gap-1.25 font-medium text-small empty:hidden"
+        className="inline-flex items-center gap-1 font-medium text-small empty:hidden"
       >
         {props.status}
       </span>
@@ -415,7 +415,7 @@ function SaveStatus(props: SaveStatusProps) {
   if (props.changed) return <span className="text-muted">Unsaved changes</span>
   if (!props.saved) return null
   return (
-    <span className="inline-flex items-center gap-1.25 text-accent-strong">
+    <span className="inline-flex items-center gap-1 text-accent-strong">
       <CheckIcon /> Saved
     </span>
   )
diff --git a/apps/web/src/shared/ui/SettingsPageSkeleton.tsx b/apps/web/src/shared/ui/SettingsPageSkeleton.tsx
index b59376c..a8e42f8 100644
--- a/apps/web/src/shared/ui/SettingsPageSkeleton.tsx
+++ b/apps/web/src/shared/ui/SettingsPageSkeleton.tsx
@@ -25,9 +25,9 @@ export function SettingsPageSkeleton() {
     <Loading immediate className="mx-auto w-full max-w-settings pt-9.5 pb-12 max-wide:pt-0">
       <div className="mb-9">
         <SkeletonText className="w-40 text-title" />
-        <SkeletonText className="mt-0.75 w-80 max-w-full text-ui" />
+        <SkeletonText className="mt-1 w-80 max-w-full text-ui" />
       </div>
-      <SkeletonText className="ms-card-pad mb-2.25 w-24 text-small leading-tight" />
+      <SkeletonText className="ms-card-pad mb-2 w-24 text-small leading-tight" />
       <div className={cn('rounded-lg bg-card', dividedRows)}>
         {skeletonRows.map((row) => (
           <SettingRowShape key={row.name} name={row.name} about={row.about} />
diff --git a/apps/web/src/shared/ui/ToggleChip.tsx b/apps/web/src/shared/ui/ToggleChip.tsx
index 1900063..a3913a5 100644
--- a/apps/web/src/shared/ui/ToggleChip.tsx
+++ b/apps/web/src/shared/ui/ToggleChip.tsx
@@ -14,7 +14,7 @@ const chip = cva(
         default:
           'gap-1 rounded-sm border border-line px-2 py-0.5 text-muted text-small hover:bg-hover aria-pressed:border-accent-border',
         quiet:
-          'gap-1.5 rounded-md px-2.25 py-1 font-medium text-caption text-muted hover:bg-row-hover [&_svg]:size-3.5',
+          'gap-1.5 rounded-md px-2 py-1 font-medium text-caption text-muted hover:bg-row-hover [&_svg]:size-3.5',
       },
     },
     defaultVariants: { tone: 'default' },
diff --git a/apps/web/src/shared/ui/actions.ts b/apps/web/src/shared/ui/actions.ts
index 9241848..4d60b88 100644
--- a/apps/web/src/shared/ui/actions.ts
+++ b/apps/web/src/shared/ui/actions.ts
@@ -6,4 +6,4 @@
 
 /** A worded control, tinting when hovered or open. */
 export const action =
-  'inline-flex cursor-pointer items-center gap-1 rounded-md border border-transparent bg-transparent px-2 py-0.75 text-caption text-muted transition-colors duration-(--dur-feedback) hover:not-disabled:bg-hover hover:not-disabled:text-ink aria-expanded:bg-hover aria-expanded:text-ink disabled:cursor-default disabled:opacity-40'
+  'inline-flex cursor-pointer items-center gap-1 rounded-md border border-transparent bg-transparent px-2 py-1 text-caption text-muted transition-colors duration-(--dur-feedback) hover:not-disabled:bg-hover hover:not-disabled:text-ink aria-expanded:bg-hover aria-expanded:text-ink disabled:cursor-default disabled:opacity-40'
diff --git a/apps/web/src/shared/ui/controls.tsx b/apps/web/src/shared/ui/controls.tsx
index 055e9b8..e4590ec 100644
--- a/apps/web/src/shared/ui/controls.tsx
+++ b/apps/web/src/shared/ui/controls.tsx
@@ -14,7 +14,7 @@ const fieldCard =
   'rounded-md border border-line bg-raised text-ink transition-[border-color,box-shadow] duration-(--dur-feedback)'
 
 /** The room around a field's text, and its placeholder's grey. */
-const fieldText = 'px-2.75 py-1.5 placeholder:text-faint'
+const fieldText = 'px-3 py-1.5 placeholder:text-faint'
 
 /**
  * A text field, select, or textarea: a white card with a hairline border that rings green while
@@ -130,10 +130,10 @@ export function Input(props: InputProps) {
         inputRef.current?.focus()
       }}
     >
-      {start && <span className="flex flex-none items-center ps-2.75 text-muted">{start}</span>}
+      {start && <span className="flex flex-none items-center ps-3 text-muted">{start}</span>}
       {control}
       {(end || isSecret) && (
-        <span className="flex flex-none items-center gap-1 pe-2.75 text-muted">
+        <span className="flex flex-none items-center gap-1 pe-3 text-muted">
           {end}
           {isSecret && (
             <IconButton
@@ -292,7 +292,7 @@ export function TagsInput(props: TagsInputProps) {
     <div
       data-input
       ref={fieldRef}
-      className={cn(slottedField, 'flex flex-wrap gap-1 p-0.75', className)}
+      className={cn(slottedField, 'flex flex-wrap gap-1 p-1', className)}
       onPointerDown={(event) => {
         if (event.target instanceof Element && event.target.closest('input, button')) return
         event.preventDefault()
@@ -376,7 +376,7 @@ export function TagsInput(props: TagsInputProps) {
           if (draft) add(draft)
           input.onBlur?.(event)
         }}
-        className="min-w-16 flex-1 bg-transparent px-2 py-0.75 outline-none placeholder:text-faint"
+        className="min-w-16 flex-1 bg-transparent px-2 py-1 outline-none placeholder:text-faint"
       />
       <span className="sr-only" aria-live="polite">
         <span key={announcement.count}>{announcement.text}</span>
diff --git a/apps/web/src/shared/ui/menu.ts b/apps/web/src/shared/ui/menu.ts
index 162aa55..39107bd 100644
--- a/apps/web/src/shared/ui/menu.ts
+++ b/apps/web/src/shared/ui/menu.ts
@@ -10,4 +10,4 @@ export const floating =
 
 /** A row of a floating menu, such as an action or an option. */
 export const menuRow =
-  'flex min-h-row items-center gap-2.25 rounded-sm px-2.25 py-1.25 text-start font-medium text-ink text-ui'
+  'flex min-h-row items-center gap-2 rounded-sm px-2 py-1 text-start font-medium text-ink text-ui'
diff --git a/apps/web/src/shared/ui/sidebar.ts b/apps/web/src/shared/ui/sidebar.ts
index 17d4903..2febf94 100644
--- a/apps/web/src/shared/ui/sidebar.ts
+++ b/apps/web/src/shared/ui/sidebar.ts
@@ -3,7 +3,7 @@
  * tint marks when hovered or open, rather than a card.
  */
 export const sidebarRow =
-  'flex min-h-row w-full items-center gap-2.25 overflow-hidden whitespace-nowrap rounded-sm px-row-inset py-1.25 text-start font-medium text-ink no-underline leading-[1.45] transition-colors duration-(--dur-feedback) hover:bg-row-hover aria-[current=page]:bg-row-current [&_svg]:text-muted aria-[current=page]:[&_svg]:text-current'
+  'flex min-h-row w-full items-center gap-2 overflow-hidden whitespace-nowrap rounded-sm px-row-inset py-1 text-start font-medium text-ink no-underline leading-[1.45] transition-colors duration-(--dur-feedback) hover:bg-row-hover aria-[current=page]:bg-row-current [&_svg]:text-muted aria-[current=page]:[&_svg]:text-current'
 
 /**
  * A section of the sidebar, such as the tags or the chats, with room above to close off the
@@ -15,7 +15,7 @@ export const sidebarSection = 'mt-4.5 first:mt-0'
  * What the sidebar's headings share: small text in line with the rows' text. They scroll with
  * their rows, since one held at the top would sit in the list's fade.
  */
-const heading = 'mb-1 flex items-center gap-1.5 px-row-inset py-0.75 text-caption'
+const heading = 'mb-1 flex items-center gap-1.5 px-row-inset py-1 text-caption'
 
 /** A section's heading, such as Tags or Chats, a step bolder and darker than those inside it. */
 export const sectionHeading = `${heading} font-semibold text-ink`
diff --git a/specs/styling.md b/specs/styling.md
index 0719b7c..9d0168f 100644
--- a/specs/styling.md
+++ b/specs/styling.md
@@ -144,7 +144,7 @@ The port is done. Main's stand-in sheets, the `legacy` layer they loaded in, and
 
 ## Edge Cases and Decisions
 
-- **Snapped spacing.** Snapping to a sixteenth of a rem moves no size by more than half a pixel at the 15.5px root, and spacing becomes a token a theme can change.
+- **Snapped spacing.** Padding, margins, gaps, and offsets use whole and half steps of `--spacing` (0.25rem), such as `p-1`, `gap-1.5`, and `mt-2.5`, never quarter steps like `gap-2.25`, so spacing is a short ladder a theme can change through one token. Sizes such as an icon's `size-3.75` and the named sizes, such as `row-inset`, are outside it.
 - **No `dark:` variant.** With `light-dark()` in every token, a component never needs to know the mode. The picker only sets `color-scheme`.
 - **Picker on the device.** The setting is kept per device rather than in the preferences record, so it applies before the first paint without waiting for the PDS, and it can differ between devices.
 - **Components over `@apply`.** A reused look is a component, so it can take variants and carry its markup and accessibility along with its look.