From 7cd7fcdd0ae05d5deb673a6b5667b22f8f58c190 Mon Sep 17 00:00:00 2001
From: Guilherme Albert <guilhermealbert14@gmail.com>
Date: Thu, 17 Sep 2026 13:05:26 -0300
Subject: [PATCH] fix(ui): restore mobile spacing scale

---
 src/app/authors/index.tsx                     |  4 +--
 src/app/authors/profile/index.tsx             |  4 +--
 src/app/communities/index.tsx                 |  4 +--
 src/app/communities/profile/index.tsx         |  4 +--
 src/app/home/index.tsx                        |  6 ++--
 .../components/jobs-filter-modal/index.tsx    |  8 ++---
 .../components/jobs-result-toolbar/index.tsx  |  2 +-
 .../jobs-workspace-header/index.tsx           |  6 ++--
 src/app/jobs/details/index.tsx                | 10 +++---
 src/app/jobs/index.tsx                        |  4 +--
 src/components/action-button/index.tsx        |  2 +-
 .../analytics-consent-banner/index.tsx        |  6 ++--
 src/components/app-drawer/index.tsx           |  6 ++--
 src/components/app-error-boundary/index.tsx   |  2 +-
 src/components/app-header/index.tsx           |  2 +-
 src/components/catalog-state/index.tsx        |  2 +-
 src/components/data-confidence-card/index.tsx |  8 ++---
 src/components/detail-header/index.tsx        |  2 +-
 src/components/directory-card/index.tsx       |  2 +-
 src/components/filter-chip/index.tsx          |  4 +--
 src/components/job-detail-actions/index.tsx   | 10 +++---
 src/components/new-matches-card/index.tsx     |  4 +--
 .../notification-consent-prompt/index.tsx     |  6 ++--
 src/components/opportunity-card/index.tsx     |  2 +-
 .../optional-update-banner/index.tsx          |  6 ++--
 src/components/preference-popover/index.tsx   |  4 +--
 src/components/profile-hero/index.tsx         |  8 ++---
 src/components/screen-header/index.tsx        |  2 +-
 src/components/selection-sheet/index.tsx      |  8 ++---
 src/components/support-card/index.tsx         |  4 +--
 tests/contracts/spacing-scale.test.ts         | 34 +++++++++++++++++++
 31 files changed, 105 insertions(+), 71 deletions(-)
 create mode 100644 tests/contracts/spacing-scale.test.ts

diff --git a/src/app/authors/index.tsx b/src/app/authors/index.tsx
index 2c9a5ff..0cf5d33 100644
--- a/src/app/authors/index.tsx
+++ b/src/app/authors/index.tsx
@@ -61,9 +61,9 @@ export function AuthorsScreen(): React.ReactNode {
   }
 
   const header = (
-    <View className="gap-3 pb-4">
+    <View className="gap-3 pb-16">
       <ScreenHeader title={messages.authors.title} description={messages.authors.description} />
-      <View className="gap-3 px-4">
+      <View className="gap-3 px-16">
         <SearchField
           label={messages.common.search}
           onChangeText={(query) => setFilters({ ...filters, query })}
diff --git a/src/app/authors/profile/index.tsx b/src/app/authors/profile/index.tsx
index 8d1eab3..9b95e1e 100644
--- a/src/app/authors/profile/index.tsx
+++ b/src/app/authors/profile/index.tsx
@@ -48,12 +48,12 @@ export function AuthorProfileScreen({ handle }: AuthorProfileScreenProps): React
           subtitle={`@${profile.handle}`}
           title={profile.name}
         />
-        <View className="mx-4 gap-3">
+        <View className="mx-16 gap-3">
           <ActionButton primary icon="github" label={messages.authors.github} onPress={() => void openHttpsUrl(githubUrl)} />
           <ActionButton icon="share-2" label={messages.authors.share} onPress={() => void shareUrl(profile.name, canonical)} />
         </View>
         <View className="gap-3">
-          <Text className="mx-4 font-display text-card-title font-semibold text-foreground">{messages.jobs.title}</Text>
+          <Text className="mx-16 font-display text-card-title font-semibold text-foreground">{messages.jobs.title}</Text>
           {jobs.map((item) => (
             <OpportunityCard
               hideAuthorIdentity
diff --git a/src/app/communities/index.tsx b/src/app/communities/index.tsx
index bc01790..923c79e 100644
--- a/src/app/communities/index.tsx
+++ b/src/app/communities/index.tsx
@@ -64,9 +64,9 @@ export function CommunitiesScreen(): React.ReactNode {
   }
 
   const header = (
-    <View className="gap-3 pb-4">
+    <View className="gap-3 pb-16">
       <ScreenHeader title={messages.communities.title} description={messages.communities.description} />
-      <View className="gap-3 px-4">
+      <View className="gap-3 px-16">
         <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerClassName="gap-2">
           <FilterChip label={`${messages.communities.active} · ${activityCounts.healthy}`} selected={activity === "healthy"} onPress={() => setActivity("healthy")} />
           <FilterChip label={`${messages.communities.noOpenings} · ${activityCounts["no-openings"]}`} selected={activity === "no-openings"} onPress={() => setActivity("no-openings")} />
diff --git a/src/app/communities/profile/index.tsx b/src/app/communities/profile/index.tsx
index be6c97d..a6fa5f6 100644
--- a/src/app/communities/profile/index.tsx
+++ b/src/app/communities/profile/index.tsx
@@ -56,12 +56,12 @@ export function CommunityProfileScreen({ repository }: CommunityProfileScreenPro
           subtitle={profile.repository}
           title={profile.name}
         />
-        <View className="mx-4 gap-3">
+        <View className="mx-16 gap-3">
           <ActionButton primary icon="github" label={messages.communities.github} onPress={() => void openHttpsUrl(profile.repositoryUrl)} />
           <ActionButton icon="share-2" label={messages.communities.share} onPress={() => void shareUrl(profile.name, canonical)} />
         </View>
         <View className="gap-3">
-          <Text className="mx-4 font-display text-card-title font-semibold text-foreground">{messages.jobs.title}</Text>
+          <Text className="mx-16 font-display text-card-title font-semibold text-foreground">{messages.jobs.title}</Text>
           {jobs.length === 0 ? (
             <CatalogState message={messages.common.noResults} />
           ) : jobs.map((item) => (
diff --git a/src/app/home/index.tsx b/src/app/home/index.tsx
index acd80a4..05a649d 100644
--- a/src/app/home/index.tsx
+++ b/src/app/home/index.tsx
@@ -19,7 +19,7 @@ export function HomeScreen(): React.ReactNode {
     >
       <StatusBar style={name === "dark" ? "light" : "dark"} />
       <View className="flex-1 justify-between px-6 py-8">
-        <View className="flex-row items-center justify-between border-b border-line pb-4">
+        <View className="flex-row items-center justify-between border-b border-line pb-16">
           <Text className="font-display text-card-title font-semibold text-foreground">
             openings.dev
           </Text>
@@ -32,13 +32,13 @@ export function HomeScreen(): React.ReactNode {
         </View>
 
         <View className="gap-6">
-          <View className="self-start rounded-pill bg-primary-soft px-4 py-2">
+          <View className="self-start rounded-pill bg-primary-soft px-16 py-2">
             <Text className="font-body text-label font-semibold text-primary-deep">
               {messages.eyebrow}
             </Text>
           </View>
 
-          <View className="gap-4">
+          <View className="gap-16">
             <Text className="font-display text-section-title font-semibold text-foreground">
               {messages.title}
             </Text>
diff --git a/src/app/jobs/components/jobs-filter-modal/index.tsx b/src/app/jobs/components/jobs-filter-modal/index.tsx
index 570d511..6f241fc 100644
--- a/src/app/jobs/components/jobs-filter-modal/index.tsx
+++ b/src/app/jobs/components/jobs-filter-modal/index.tsx
@@ -55,7 +55,7 @@ function MultiSection({
   if (options.length === 0) return null;
 
   return (
-    <View className="gap-3 rounded-card border border-line bg-paper p-4">
+    <View className="gap-3 rounded-card border border-line bg-paper p-16">
       <Text className="font-display text-card-title font-semibold text-foreground">
         {label}
       </Text>
@@ -151,7 +151,7 @@ export function JobsFilterModal({
       visible={open}
     >
       <SafeAreaView className="flex-1 bg-canvas" edges={["top", "bottom"]}>
-        <View className="min-h-16 flex-row items-center justify-between border-b border-line bg-paper px-4 py-3">
+        <View className="min-h-16 flex-row items-center justify-between border-b border-line bg-paper px-16 py-3">
           <View className="min-w-0 flex-1 gap-1">
             <Text className="font-mono text-metadata font-semibold uppercase tracking-widest text-primary-deep">
               {messages.jobs.title}
@@ -184,10 +184,10 @@ export function JobsFilterModal({
 
         <ScrollView
           className="flex-1"
-          contentContainerClassName="gap-4 p-5"
+          contentContainerClassName="gap-16 p-5"
           keyboardShouldPersistTaps="handled"
         >
-          <View className="gap-3 rounded-card border border-primary-deep bg-primary-soft p-4">
+          <View className="gap-3 rounded-card border border-primary-deep bg-primary-soft p-16">
             <View className="flex-row items-center gap-2">
               <Sparkles
                 accessibilityElementsHidden
diff --git a/src/app/jobs/components/jobs-result-toolbar/index.tsx b/src/app/jobs/components/jobs-result-toolbar/index.tsx
index 91e3d83..f0bc632 100644
--- a/src/app/jobs/components/jobs-result-toolbar/index.tsx
+++ b/src/app/jobs/components/jobs-result-toolbar/index.tsx
@@ -77,7 +77,7 @@ export function JobsResultToolbar({
     .replace("{count}", formatCount(resultCount, locale));
 
   return (
-    <View className="gap-3 border-y border-line px-4 py-3">
+    <View className="gap-3 border-y border-line px-16 py-3">
       <View className="flex-row items-center justify-between gap-3">
         <View className="gap-1">
           <Text className="font-mono text-label font-semibold text-foreground">
diff --git a/src/app/jobs/components/jobs-workspace-header/index.tsx b/src/app/jobs/components/jobs-workspace-header/index.tsx
index 1abc43e..82602e9 100644
--- a/src/app/jobs/components/jobs-workspace-header/index.tsx
+++ b/src/app/jobs/components/jobs-workspace-header/index.tsx
@@ -149,7 +149,7 @@ export function JobsWorkspaceHeader({
         );
 
   return (
-    <View className="gap-3 px-4 pb-4 pt-3">
+    <View className="gap-3 px-16 pb-16 pt-3">
       <SearchField
         label={messages.jobs.workspace.searchLabel}
         onChangeText={(query) => onChange({ ...filters, query })}
@@ -174,7 +174,7 @@ export function JobsWorkspaceHeader({
       <Pressable
         accessibilityRole="button"
         accessibilityState={{ expanded: filtersOpen }}
-        className="min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-control bg-paper px-4"
+        className="min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-control bg-paper px-16"
         onPress={onOpenFilters}
       >
         <SlidersHorizontal
@@ -195,7 +195,7 @@ export function JobsWorkspaceHeader({
         ) : null}
       </Pressable>
       {activeFilters.length > 0 ? (
-        <View className="gap-3 border-t border-line pt-4">
+        <View className="gap-3 border-t border-line pt-16">
           <View className="flex-row flex-wrap gap-2">
             {activeFilters.map((filter) => {
               const label = activeLabel(filter, messages);
diff --git a/src/app/jobs/details/index.tsx b/src/app/jobs/details/index.tsx
index abe20ed..8f17562 100644
--- a/src/app/jobs/details/index.tsx
+++ b/src/app/jobs/details/index.tsx
@@ -147,7 +147,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode
         contentContainerClassName="gap-8 py-6"
         contentContainerStyle={{ paddingBottom: dockHeight + 24 }}
       >
-        <View className="mx-4 gap-5">
+        <View className="mx-16 gap-5">
           <Text className="font-body text-label font-semibold text-primary-deep">
             {messages.jobs.detailsTitle}
           </Text>
@@ -213,7 +213,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode
           >
             {item.title}
           </Text>
-          <View className="flex-row flex-wrap items-center gap-3 border-y border-line py-4">
+          <View className="flex-row flex-wrap items-center gap-3 border-y border-line py-16">
             {salary ? (
               <View className="flex-row items-center gap-2">
                 <WalletCards
@@ -251,7 +251,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode
         </View>
 
         <Text
-          className="mx-4 font-body text-product-body leading-7 text-foreground"
+          className="mx-16 font-body text-product-body leading-7 text-foreground"
           selectable
         >
           {description}
@@ -266,7 +266,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode
         />
 
         {presentation.supportingTags.length > 0 ? (
-          <View className="mx-4 flex-row flex-wrap gap-2 border-t border-line pt-6">
+          <View className="mx-16 flex-row flex-wrap gap-2 border-t border-line pt-6">
             {presentation.supportingTags.map((tag) => (
               <View
                 className={detailTagClasses(tag.category)}
@@ -282,7 +282,7 @@ export function JobDetailsScreen({ id }: JobDetailsScreenProps): React.ReactNode
 
         {similar.length > 0 ? (
           <View className="gap-3 border-t border-line pt-6">
-            <Text className="mx-4 font-display text-card-title font-semibold text-foreground">
+            <Text className="mx-16 font-display text-card-title font-semibold text-foreground">
               {messages.jobs.similar}
             </Text>
             {similar.map((opportunity) => (
diff --git a/src/app/jobs/index.tsx b/src/app/jobs/index.tsx
index a8e8112..fb6749a 100644
--- a/src/app/jobs/index.tsx
+++ b/src/app/jobs/index.tsx
@@ -111,7 +111,7 @@ export function JobsScreen(): React.ReactNode {
     ? messages.common.offline
     : messages.common.sourceError;
   const header = (
-    <View className="pb-4">
+    <View className="pb-16">
       <JobsWorkspaceHeader
         activeFilters={activeFilters}
         filters={filters}
@@ -169,7 +169,7 @@ export function JobsScreen(): React.ReactNode {
         keyExtractor={(item) => item.id}
         ListHeaderComponent={header}
         ListEmptyComponent={emptyState}
-        ListFooterComponent={visibleCount < filtered.length ? <Pressable accessibilityRole="button" className="mx-4 min-h-12 items-center justify-center rounded-control border border-line bg-paper" onPress={() => setVisibleCount((count) => count + PAGE_SIZE)}><Text className="font-body text-label font-semibold text-primary-deep">{messages.common.loadMore}</Text></Pressable> : <View className="h-5" />}
+        ListFooterComponent={visibleCount < filtered.length ? <Pressable accessibilityRole="button" className="mx-16 min-h-12 items-center justify-center rounded-control border border-line bg-paper" onPress={() => setVisibleCount((count) => count + PAGE_SIZE)}><Text className="font-body text-label font-semibold text-primary-deep">{messages.common.loadMore}</Text></Pressable> : <View className="h-5" />}
         maxToRenderPerBatch={8}
         refreshControl={<RefreshControl refreshing={catalog.isRefreshing} onRefresh={() => void catalog.refresh()} tintColor={theme.colors["primary-deep"]} />}
         renderItem={({ item }) => {
diff --git a/src/components/action-button/index.tsx b/src/components/action-button/index.tsx
index 533d131..0169aec 100644
--- a/src/components/action-button/index.tsx
+++ b/src/components/action-button/index.tsx
@@ -21,7 +21,7 @@ export function ActionButton({ icon, label, onPress, primary }: ActionButtonProp
   const { theme } = useAppTheme();
   const Icon = ACTION_ICONS[icon];
   return (
-    <Pressable accessibilityRole="button" className={primary ? "min-h-11 flex-row items-center justify-center gap-2 rounded-pill bg-primary px-4" : "min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-line bg-paper px-4"} onPress={onPress}>
+    <Pressable accessibilityRole="button" className={primary ? "min-h-11 flex-row items-center justify-center gap-2 rounded-pill bg-primary px-16" : "min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-line bg-paper px-16"} onPress={onPress}>
       <Icon accessibilityElementsHidden size={18} strokeWidth={1.8} color={primary ? theme.colors["primary-foreground"] : theme.colors["primary-deep"]} />
       <Text className={primary ? "font-body text-label font-semibold text-primary-foreground" : "font-body text-label font-semibold text-primary-deep"}>{label}</Text>
     </Pressable>
diff --git a/src/components/analytics-consent-banner/index.tsx b/src/components/analytics-consent-banner/index.tsx
index 89f78c3..fc2985d 100644
--- a/src/components/analytics-consent-banner/index.tsx
+++ b/src/components/analytics-consent-banner/index.tsx
@@ -44,11 +44,11 @@ export function AnalyticsConsentBanner(): React.ReactNode {
     <View className="absolute inset-x-0 bottom-0 z-50 border-t border-line bg-paper px-5 pt-5" style={{ paddingBottom: Math.max(insets.bottom, 20) }}>
       <Text className="font-display text-product-title font-semibold text-foreground">{copy.title}</Text>
       <Text className="mt-2 font-body text-product-body text-muted-foreground">{copy.purpose}</Text>
-      <View className="mt-4 flex-row gap-3">
-        <Pressable accessibilityRole="button" accessibilityLabel={copy.accept} className="min-h-touch flex-1 items-center justify-center rounded-control bg-primary px-4 disabled:opacity-50" disabled={pending} onPress={() => void decide("granted")}>
+      <View className="mt-16 flex-row gap-3">
+        <Pressable accessibilityRole="button" accessibilityLabel={copy.accept} className="min-h-touch flex-1 items-center justify-center rounded-control bg-primary px-16 disabled:opacity-50" disabled={pending} onPress={() => void decide("granted")}>
           <Text className="font-body text-product-body font-semibold text-primary-foreground">{copy.accept}</Text>
         </Pressable>
-        <Pressable accessibilityRole="button" accessibilityLabel={copy.decline} className="min-h-touch flex-1 items-center justify-center rounded-control border border-line bg-canvas px-4 disabled:opacity-50" disabled={pending} onPress={() => void decide("denied")}>
+        <Pressable accessibilityRole="button" accessibilityLabel={copy.decline} className="min-h-touch flex-1 items-center justify-center rounded-control border border-line bg-canvas px-16 disabled:opacity-50" disabled={pending} onPress={() => void decide("denied")}>
           <Text className="font-body text-product-body font-semibold text-foreground">{copy.decline}</Text>
         </Pressable>
       </View>
diff --git a/src/components/app-drawer/index.tsx b/src/components/app-drawer/index.tsx
index 5076a50..16e0793 100644
--- a/src/components/app-drawer/index.tsx
+++ b/src/components/app-drawer/index.tsx
@@ -98,7 +98,7 @@ export function AppDrawer({ onClose, visible }: AppDrawerProps): React.ReactNode
             className="flex-1"
             style={{ paddingRight: insets.right, paddingTop: insets.top }}
           >
-            <View className="min-h-[72px] flex-row items-center justify-between border-b border-line px-4">
+            <View className="min-h-[72px] flex-row items-center justify-between border-b border-line px-16">
               <BrandWordmark height={32} width={176} />
               <Pressable
                 accessibilityLabel={messages.header.closeMenu}
@@ -115,7 +115,7 @@ export function AppDrawer({ onClose, visible }: AppDrawerProps): React.ReactNode
               contentContainerClassName="grow"
               testID="app-drawer-scroll"
             >
-              <View className="gap-1 p-4">
+              <View className="gap-1 p-16">
                 {navigationItems.map((item) => {
                   const Icon = item.icon;
 
@@ -139,7 +139,7 @@ export function AppDrawer({ onClose, visible }: AppDrawerProps): React.ReactNode
               </View>
 
               <View
-                className="mt-auto gap-3 border-t border-line bg-surface px-4 pt-4"
+                className="mt-auto gap-3 border-t border-line bg-surface px-16 pt-16"
                 style={{ paddingBottom: insets.bottom + DRAWER_FOOTER_PADDING }}
                 testID="app-drawer-footer"
               >
diff --git a/src/components/app-error-boundary/index.tsx b/src/components/app-error-boundary/index.tsx
index 4128f42..07fbbeb 100644
--- a/src/components/app-error-boundary/index.tsx
+++ b/src/components/app-error-boundary/index.tsx
@@ -44,7 +44,7 @@ export class AppErrorBoundary extends Component<
 
     return (
       <View className="flex-1 items-center justify-center bg-canvas px-6">
-        <View className="w-full max-w-xl items-start gap-4 rounded-panel border border-line bg-paper p-6">
+        <View className="w-full max-w-xl items-start gap-16 rounded-panel border border-line bg-paper p-6">
           <Text className="font-display text-product-title font-semibold text-foreground">
             {fallback.title}
           </Text>
diff --git a/src/components/app-header/index.tsx b/src/components/app-header/index.tsx
index 4fc0264..2bbaf4c 100644
--- a/src/components/app-header/index.tsx
+++ b/src/components/app-header/index.tsx
@@ -18,7 +18,7 @@ export function AppHeader(): React.ReactNode {
   return (
     <>
       <SafeAreaView className="bg-paper" edges={["top", "left", "right"]}>
-        <View className="h-[72px] flex-row items-center justify-between gap-3 border-b border-line px-4">
+        <View className="h-[72px] flex-row items-center justify-between gap-3 border-b border-line px-16">
           <Pressable
             accessibilityLabel={messages.header.brandLabel}
             accessibilityRole="button"
diff --git a/src/components/catalog-state/index.tsx b/src/components/catalog-state/index.tsx
index d1f19b2..bfd884e 100644
--- a/src/components/catalog-state/index.tsx
+++ b/src/components/catalog-state/index.tsx
@@ -12,7 +12,7 @@ interface CatalogStateProps {
 export function CatalogState({ actionLabel, message, onAction, pending }: CatalogStateProps): React.ReactNode {
   const { theme } = useAppTheme();
   return (
-    <View className="flex-1 items-center justify-center gap-4 px-8 py-16">
+    <View className="flex-1 items-center justify-center gap-16 px-8 py-16">
       {pending ? <ActivityIndicator color={theme.colors["primary-deep"]} /> : null}
       <Text className="text-center font-body text-product-body text-muted-foreground">{message}</Text>
       {actionLabel && onAction ? (
diff --git a/src/components/data-confidence-card/index.tsx b/src/components/data-confidence-card/index.tsx
index 8d25564..a5ace34 100644
--- a/src/components/data-confidence-card/index.tsx
+++ b/src/components/data-confidence-card/index.tsx
@@ -59,7 +59,7 @@ export function DataConfidenceCard({
     : [{ id: item.id, repository: item.repository, url: item.url }];
 
   return (
-    <View className="mx-4 gap-5 rounded-card border border-line bg-paper p-5">
+    <View className="mx-16 gap-5 rounded-card border border-line bg-paper p-5">
       <View className="gap-2">
         <Text className="font-display text-card-title font-semibold text-foreground">
           {copy.title}
@@ -70,17 +70,17 @@ export function DataConfidenceCard({
       </View>
 
       {summary.stale ? (
-        <Text className="rounded-control border border-warning-foreground/25 bg-warning px-4 py-3 font-body text-label leading-5 text-warning-foreground">
+        <Text className="rounded-control border border-warning-foreground/25 bg-warning px-16 py-3 font-body text-label leading-5 text-warning-foreground">
           {copy.staleWarning}
         </Text>
       ) : null}
       {summary.incomplete ? (
-        <Text className="rounded-control border border-line bg-surface-muted px-4 py-3 font-body text-label leading-5 text-muted-foreground">
+        <Text className="rounded-control border border-line bg-surface-muted px-16 py-3 font-body text-label leading-5 text-muted-foreground">
           {copy.incompleteWarning}
         </Text>
       ) : null}
 
-      <View className="gap-4">
+      <View className="gap-16">
         <View className="gap-1">
           <Text className="font-body text-metadata text-muted-foreground">
             {copy.lastVerified}
diff --git a/src/components/detail-header/index.tsx b/src/components/detail-header/index.tsx
index c5a33bb..f7e30f6 100644
--- a/src/components/detail-header/index.tsx
+++ b/src/components/detail-header/index.tsx
@@ -13,7 +13,7 @@ interface DetailHeaderProps {
 export function DetailHeader(props: DetailHeaderProps): React.ReactNode {
   const { theme } = useAppTheme();
   return (
-    <View className="min-h-16 flex-row items-center justify-between gap-3 border-b border-line bg-paper px-4">
+    <View className="min-h-16 flex-row items-center justify-between gap-3 border-b border-line bg-paper px-16">
       <BrandWordmark height={28} width={154} />
       <Pressable accessibilityHint={props.title} accessibilityLabel={props.backLabel} accessibilityRole="button" className="h-11 w-11 items-center justify-center rounded-control border border-line bg-paper" onPress={props.onBack}>
         <X accessibilityElementsHidden size={20} strokeWidth={1.8} color={theme.colors.foreground} />
diff --git a/src/components/directory-card/index.tsx b/src/components/directory-card/index.tsx
index ba61560..d942976 100644
--- a/src/components/directory-card/index.tsx
+++ b/src/components/directory-card/index.tsx
@@ -26,7 +26,7 @@ export function DirectoryCard(props: DirectoryCardProps): React.ReactNode {
     <Pressable
       accessibilityLabel={`${props.actionLabel}: ${props.title}`}
       accessibilityRole="button"
-      className="mx-4 mb-3 gap-4 rounded-card border border-line bg-paper p-4 active:bg-primary-soft"
+      className="mx-16 mb-3 gap-16 rounded-card border border-line bg-paper p-16 active:bg-primary-soft"
       onPress={props.onPress}
     >
       <View className="flex-row items-center gap-3">
diff --git a/src/components/filter-chip/index.tsx b/src/components/filter-chip/index.tsx
index ae06a41..1cfd947 100644
--- a/src/components/filter-chip/index.tsx
+++ b/src/components/filter-chip/index.tsx
@@ -13,8 +13,8 @@ export function FilterChip({ icon, label, onPress, selected = false }: FilterChi
       accessibilityRole="button"
       accessibilityState={{ selected }}
       className={selected
-        ? "min-h-11 flex-row items-center justify-center gap-2 rounded-pill border border-primary bg-primary px-4"
-        : "min-h-11 flex-row items-center justify-center gap-2 rounded-pill border border-line bg-paper px-4"}
+        ? "min-h-11 flex-row items-center justify-center gap-2 rounded-pill border border-primary bg-primary px-16"
+        : "min-h-11 flex-row items-center justify-center gap-2 rounded-pill border border-line bg-paper px-16"}
       onPress={onPress}
     >
       {icon}
diff --git a/src/components/job-detail-actions/index.tsx b/src/components/job-detail-actions/index.tsx
index 30d13b6..5f4514e 100644
--- a/src/components/job-detail-actions/index.tsx
+++ b/src/components/job-detail-actions/index.tsx
@@ -48,10 +48,10 @@ export function JobDetailActions({
       onLayout={handleLayout}
       testID="job-detail-actions"
     >
-      <View className="gap-2 px-4 py-3">
+      <View className="gap-2 px-16 py-3">
         <Pressable
           accessibilityRole="button"
-          className="min-h-11 flex-row items-center justify-center gap-2 rounded-pill bg-primary px-4"
+          className="min-h-11 flex-row items-center justify-center gap-2 rounded-pill bg-primary px-16"
           onPress={onOpenOriginal}
         >
           <ExternalLink accessibilityElementsHidden color={theme.colors["primary-foreground"]} size={17} strokeWidth={1.8} />
@@ -61,7 +61,7 @@ export function JobDetailActions({
         </Pressable>
         <Pressable
           accessibilityRole="button"
-          className="min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-line bg-paper px-4"
+          className="min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-line bg-paper px-16"
           onPress={onShare}
         >
           <Share2 accessibilityElementsHidden color={theme.colors.foreground} size={17} strokeWidth={1.8} />
@@ -72,7 +72,7 @@ export function JobDetailActions({
         <Pressable
           accessibilityRole="button"
           accessibilityState={{ selected: isSaved }}
-          className="min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-line bg-paper px-4"
+          className="min-h-11 flex-row items-center justify-center gap-2 rounded-control border border-line bg-paper px-16"
           onPress={onToggleSaved}
         >
           <Bookmark accessibilityElementsHidden color={theme.colors.foreground} fill={isSaved ? theme.colors.foreground : "none"} size={17} strokeWidth={1.8} />
@@ -82,7 +82,7 @@ export function JobDetailActions({
         </Pressable>
         <Pressable
           accessibilityRole="button"
-          className="min-h-11 flex-row items-center justify-center gap-2 rounded-control px-4"
+          className="min-h-11 flex-row items-center justify-center gap-2 rounded-control px-16"
           onPress={onReport}
         >
           <CircleAlert accessibilityElementsHidden color={theme.colors["muted-foreground"]} size={17} strokeWidth={1.8} />
diff --git a/src/components/new-matches-card/index.tsx b/src/components/new-matches-card/index.tsx
index 2111014..89c1b06 100644
--- a/src/components/new-matches-card/index.tsx
+++ b/src/components/new-matches-card/index.tsx
@@ -18,7 +18,7 @@ export function NewMatchesCard({
   const { theme } = useAppTheme();
 
   return (
-    <View className="mx-4 my-5 rounded-card border border-primary/40 bg-primary-soft p-5">
+    <View className="mx-16 my-5 rounded-card border border-primary/40 bg-primary-soft p-5">
       <View className="flex-row items-start gap-3">
         <View className="h-10 w-10 shrink-0 items-center justify-center rounded-pill bg-primary">
           <Sparkles
@@ -56,7 +56,7 @@ export function NewMatchesCard({
       </View>
       <Pressable
         accessibilityRole="button"
-        className="mt-4 min-h-11 self-start justify-center rounded-pill bg-primary px-5"
+        className="mt-16 min-h-11 self-start justify-center rounded-pill bg-primary px-5"
         onPress={onShow}
       >
         <Text className="font-body text-label font-semibold text-primary-foreground">
diff --git a/src/components/notification-consent-prompt/index.tsx b/src/components/notification-consent-prompt/index.tsx
index 13983a5..cbbd26d 100644
--- a/src/components/notification-consent-prompt/index.tsx
+++ b/src/components/notification-consent-prompt/index.tsx
@@ -58,11 +58,11 @@ export function NotificationConsentPrompt(): React.ReactNode {
     >
       <Text className="font-display text-product-title font-semibold text-foreground">{copy.title}</Text>
       <Text className="mt-2 font-body text-product-body text-muted-foreground">{copy.purpose}</Text>
-      <View className="mt-4 flex-row gap-3">
-        <Pressable accessibilityRole="button" accessibilityLabel={copy.accept} className="min-h-touch flex-1 items-center justify-center rounded-control bg-primary px-4 disabled:opacity-50" disabled={pending} onPress={() => void decide("accept")}>
+      <View className="mt-16 flex-row gap-3">
+        <Pressable accessibilityRole="button" accessibilityLabel={copy.accept} className="min-h-touch flex-1 items-center justify-center rounded-control bg-primary px-16 disabled:opacity-50" disabled={pending} onPress={() => void decide("accept")}>
           <Text className="font-body text-product-body font-semibold text-primary-foreground">{copy.accept}</Text>
         </Pressable>
-        <Pressable accessibilityRole="button" accessibilityLabel={copy.decline} className="min-h-touch flex-1 items-center justify-center rounded-control border border-line bg-canvas px-4 disabled:opacity-50" disabled={pending} onPress={() => void decide("decline")}>
+        <Pressable accessibilityRole="button" accessibilityLabel={copy.decline} className="min-h-touch flex-1 items-center justify-center rounded-control border border-line bg-canvas px-16 disabled:opacity-50" disabled={pending} onPress={() => void decide("decline")}>
           <Text className="font-body text-product-body font-semibold text-foreground">{copy.decline}</Text>
         </Pressable>
       </View>
diff --git a/src/components/opportunity-card/index.tsx b/src/components/opportunity-card/index.tsx
index 5860355..a5943cd 100644
--- a/src/components/opportunity-card/index.tsx
+++ b/src/components/opportunity-card/index.tsx
@@ -77,7 +77,7 @@ export function OpportunityCard({ item, ...props }: OpportunityCardProps): React
     <Pressable
       accessibilityLabel={`${messages.jobs.viewDetails}: ${item.title}`}
       accessibilityRole="button"
-      className="relative mx-4 mb-3 gap-3 overflow-hidden rounded-card border border-line bg-paper p-4 active:bg-surface-elevated"
+      className="relative mx-16 mb-3 gap-3 overflow-hidden rounded-card border border-line bg-paper p-16 active:bg-surface-elevated"
       onPress={props.onPress}
     >
       <Pressable
diff --git a/src/components/optional-update-banner/index.tsx b/src/components/optional-update-banner/index.tsx
index 4c3e293..d470b8d 100644
--- a/src/components/optional-update-banner/index.tsx
+++ b/src/components/optional-update-banner/index.tsx
@@ -41,11 +41,11 @@ export function OptionalUpdateBanner(): React.ReactNode {
       <Text className="mt-2 font-body text-product-body text-muted-foreground">
         {copy.optionalDescription}
       </Text>
-      <View className="mt-4 flex-row gap-3">
+      <View className="mt-16 flex-row gap-3">
         <Pressable
           accessibilityLabel={copy.updateAction}
           accessibilityRole="button"
-          className="min-h-touch flex-1 items-center justify-center rounded-control bg-primary px-4 disabled:opacity-50"
+          className="min-h-touch flex-1 items-center justify-center rounded-control bg-primary px-16 disabled:opacity-50"
           disabled={pending}
           onPress={() => void run(startOptionalUpdate)}
           testID="optional-update-action"
@@ -59,7 +59,7 @@ export function OptionalUpdateBanner(): React.ReactNode {
         <Pressable
           accessibilityLabel={copy.dismiss}
           accessibilityRole="button"
-          className="min-h-touch flex-1 items-center justify-center rounded-control border border-line bg-canvas px-4 disabled:opacity-50"
+          className="min-h-touch flex-1 items-center justify-center rounded-control border border-line bg-canvas px-16 disabled:opacity-50"
           disabled={pending}
           onPress={() => void run(dismissOptionalUpdate)}
           testID="optional-update-dismiss"
diff --git a/src/components/preference-popover/index.tsx b/src/components/preference-popover/index.tsx
index bc97a28..6133851 100644
--- a/src/components/preference-popover/index.tsx
+++ b/src/components/preference-popover/index.tsx
@@ -33,7 +33,7 @@ export function PreferencePopover<TValue extends string>({
     <Pressable
       accessibilityLabel={title}
       accessibilityViewIsModal
-      className="absolute inset-0 z-20 justify-end bg-overlay/20 px-4 pb-24"
+      className="absolute inset-0 z-20 justify-end bg-overlay/20 px-16 pb-24"
       onPress={onClose}
     >
       <Pressable
@@ -42,7 +42,7 @@ export function PreferencePopover<TValue extends string>({
       >
         <Text
           accessibilityRole="header"
-          className="px-4 pb-2 pt-3 font-body text-label font-semibold text-muted-foreground"
+          className="px-16 pb-2 pt-3 font-body text-label font-semibold text-muted-foreground"
         >
           {title}
         </Text>
diff --git a/src/components/profile-hero/index.tsx b/src/components/profile-hero/index.tsx
index 9602c50..c68aacb 100644
--- a/src/components/profile-hero/index.tsx
+++ b/src/components/profile-hero/index.tsx
@@ -18,8 +18,8 @@ interface ProfileHeroProps {
 export function ProfileHero(props: ProfileHeroProps): React.ReactNode {
   const { theme } = useAppTheme();
   return (
-    <View className="mx-4 gap-6">
-      <View className="flex-row items-center gap-4">
+    <View className="mx-16 gap-6">
+      <View className="flex-row items-center gap-16">
         <EntityAvatar name={props.title} size="large" uri={props.avatarUrl} />
         <View className="min-w-0 flex-1 gap-1.5">
           {props.status ? (
@@ -37,8 +37,8 @@ export function ProfileHero(props: ProfileHeroProps): React.ReactNode {
           </Text>
         </View>
       </View>
-      <View className="gap-4 rounded-card border border-line bg-surface-muted p-5">
-        <View className="flex-row items-center gap-2 border-b border-line pb-4">
+      <View className="gap-16 rounded-card border border-line bg-surface-muted p-5">
+        <View className="flex-row items-center gap-2 border-b border-line pb-16">
           <BriefcaseBusiness accessibilityElementsHidden size={19} strokeWidth={1.8} color={theme.colors["primary-deep"]} />
           <Text className="font-mono text-card-title font-semibold text-primary-deep">
             {props.countLabel}
diff --git a/src/components/screen-header/index.tsx b/src/components/screen-header/index.tsx
index 6a3c4d0..cef990c 100644
--- a/src/components/screen-header/index.tsx
+++ b/src/components/screen-header/index.tsx
@@ -12,7 +12,7 @@ export function ScreenHeader({
   title,
 }: ScreenHeaderProps): React.ReactNode {
   return (
-    <View className="gap-3 px-4 pb-4 pt-5">
+    <View className="gap-3 px-16 pb-16 pt-5">
       <Text className="font-body text-label font-semibold text-primary-deep">
         {eyebrow}
       </Text>
diff --git a/src/components/selection-sheet/index.tsx b/src/components/selection-sheet/index.tsx
index 57d3908..ed0dddd 100644
--- a/src/components/selection-sheet/index.tsx
+++ b/src/components/selection-sheet/index.tsx
@@ -64,7 +64,7 @@ export function SelectionSheet<TValue extends string>({
       visible={visible}
     >
       <SafeAreaView className="flex-1 bg-canvas" edges={["top", "bottom"]}>
-        <View className="min-h-14 flex-row items-center justify-between border-b border-line bg-paper px-4">
+        <View className="min-h-14 flex-row items-center justify-between border-b border-line bg-paper px-16">
           <Text
             accessibilityRole="header"
             className="flex-1 font-display text-card-title font-semibold text-foreground"
@@ -80,7 +80,7 @@ export function SelectionSheet<TValue extends string>({
             <X accessibilityElementsHidden size={20} strokeWidth={1.8} color={theme.colors.foreground} />
           </Pressable>
         </View>
-        <ScrollView className="flex-1" contentContainerClassName="p-4">
+        <ScrollView className="flex-1" contentContainerClassName="p-16">
           {options.length === 0 ? (
             <Text className="py-12 text-center font-body text-product-body text-muted-foreground">
               {emptyLabel}
@@ -97,8 +97,8 @@ export function SelectionSheet<TValue extends string>({
                     accessibilityRole="button"
                     accessibilityState={{ selected }}
                     className={index === 0
-                      ? "min-h-[52px] flex-row items-center gap-3 px-4"
-                      : "min-h-[52px] flex-row items-center gap-3 border-t border-line px-4"}
+                      ? "min-h-[52px] flex-row items-center gap-3 px-16"
+                      : "min-h-[52px] flex-row items-center gap-3 border-t border-line px-16"}
                     onPress={() => select(option.value)}
                   >
                     <Text
diff --git a/src/components/support-card/index.tsx b/src/components/support-card/index.tsx
index 18fa894..5d4e517 100644
--- a/src/components/support-card/index.tsx
+++ b/src/components/support-card/index.tsx
@@ -13,7 +13,7 @@ export function SupportCard(): React.ReactNode {
   const copy = messages.header.support;
 
   return (
-    <View className="rounded-card border border-primary/40 bg-primary-soft p-4">
+    <View className="rounded-card border border-primary/40 bg-primary-soft p-16">
       <View className="flex-row items-start gap-3">
         <View className="h-9 w-9 shrink-0 items-center justify-center rounded-pill bg-primary">
           <Star color={theme.colors["primary-foreground"]} size={17} strokeWidth={1.8} />
@@ -30,7 +30,7 @@ export function SupportCard(): React.ReactNode {
       <Pressable
         accessibilityLabel={copy.ariaLabel}
         accessibilityRole="link"
-        className="mt-4 min-h-11 flex-row items-center justify-center gap-2 rounded-pill bg-primary px-4"
+        className="mt-16 min-h-11 flex-row items-center justify-center gap-2 rounded-pill bg-primary px-16"
         onPress={() => void openHttpsUrl(OPENINGS_WEB_REPOSITORY_URL)}
       >
         <Star color={theme.colors["primary-foreground"]} size={16} strokeWidth={1.8} />
diff --git a/tests/contracts/spacing-scale.test.ts b/tests/contracts/spacing-scale.test.ts
new file mode 100644
index 0000000..3587ca9
--- /dev/null
+++ b/tests/contracts/spacing-scale.test.ts
@@ -0,0 +1,34 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import path from "node:path";
+
+const sourceRoot = path.resolve(__dirname, "../../src");
+
+function tsxFiles(directory: string): string[] {
+  return readdirSync(directory).flatMap((entry) => {
+    const entryPath = path.join(directory, entry);
+
+    if (statSync(entryPath).isDirectory()) return tsxFiles(entryPath);
+    return entryPath.endsWith(".tsx") ? [entryPath] : [];
+  });
+}
+
+describe("mobile spacing scale", () => {
+  it("does not confuse the literal 4dp token with Tailwind's former 16dp spacing", () => {
+    const ambiguousSpacing = /(?:^|\s)(?:m[trblxy]?|p[trblxy]?|gap)-4(?=\s|$)/g;
+    const violations = tsxFiles(sourceRoot).flatMap((file) => {
+      const source = readFileSync(file, "utf8");
+      const matches = [...source.matchAll(/(?:contentContainerClassName|className)="([^"]*)"/g)];
+
+      return matches.flatMap((match) => {
+        const classes = match[1] ?? "";
+        const offending = classes.match(ambiguousSpacing) ?? [];
+
+        return offending.map((className) =>
+          `${path.relative(sourceRoot, file)}: ${className.trim()}`,
+        );
+      });
+    });
+
+    expect(violations).toEqual([]);
+  });
+});