refactor(native): replace hardcoded pixel font sizes with semantic Tailwind classes and add ScaledIcon

Replace all `text-[Npx]` arbitrary size utilities with their nearest semantic Tailwind equivalents (`text-sm`, `text-base`, `text-xs`, `text-3xl`, etc.) across every component so text participates properly in the system font-scale pipeline.

Introduce a `ScaledIcon` component backed by a `useScaledSize` hook that multiplies a base icon size by the current font-scale factor, then replace every bare Tabler icon with `ScaledIcon` so icons grow and shrink in proportion with the surrounding text.

- Add `maxFontSizeMultiplier={1.0}` to badge and label text that must not reflow at large accessibility sizes (the "Admin" pill, type/rating chips, provider name labels, and the TMDB attribution line).

.vscode/settings.json

@@ -37,5 +37,36 @@
   },
   "[css]": {
     "editor.defaultFormatter": "biomejs.biome"
-  }
+  },
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "headerClassName",
+    "contentContainerClassName",
+    "columnWrapperClassName",
+    "endFillColorClassName",
+    "imageClassName",
+    "tintColorClassName",
+    "ios_backgroundColorClassName",
+    "thumbColorClassName",
+    "trackColorOnClassName",
+    "trackColorOffClassName",
+    "selectionColorClassName",
+    "cursorColorClassName",
+    "underlineColorAndroidClassName",
+    "placeholderTextColorClassName",
+    "selectionHandleColorClassName",
+    "colorsClassName",
+    "progressBackgroundColorClassName",
+    "titleColorClassName",
+    "underlayColorClassName",
+    "colorClassName",
+    "backdropColorClassName",
+    "backgroundColorClassName",
+    "statusBarBackgroundColorClassName",
+    "drawerBackgroundColorClassName",
+    "ListFooterComponentClassName",
+    "ListHeaderComponentClassName"
+  ],
+  "tailwindCSS.classFunctions": ["useResolveClassNames"]
 }

apps/native/src/app/(auth)/server-url.tsx

@@ -17,6 +17,7 @@ import Animated, {
 import { useCSSVariable } from "uniwind";
 import { AuthScreen } from "@/components/auth-screen";
 import { Button, ButtonLabel } from "@/components/ui/button";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 import {
   getServerUrl,
@@ -172,7 +173,7 @@ export default function ServerUrlScreen() {
             returnKeyType="go"
             editable={!isDisabled}
             onSubmitEditing={handleConnect}
-            className="flex-1 py-3 font-mono text-[15px] text-foreground"
+            className="flex-1 py-3 font-mono text-base text-foreground"
           />
         </View>
       </Animated.View>
@@ -188,14 +189,18 @@ export default function ServerUrlScreen() {
               className="size-1.5 rounded-full bg-primary"
               style={dotAnimatedStyle}
             />
-            <Text className="text-[13px] text-muted-foreground">
+            <Text className="text-muted-foreground text-sm">
               Connecting to server...
             </Text>
           </View>
         ) : isSuccess ? (
           <View className="min-h-12 flex-row items-center justify-center gap-1.5 py-2">
-            <IconCircleCheck size={16} color={statusCompletedColor} />
-            <Text className="font-medium font-sans text-[13px] text-status-completed">
+            <ScaledIcon
+              icon={IconCircleCheck}
+              size={16}
+              color={statusCompletedColor}
+            />
+            <Text className="font-medium font-sans text-sm text-status-completed">
               Connected
             </Text>
           </View>
@@ -216,12 +221,13 @@ export default function ServerUrlScreen() {
             entering={FadeIn.duration(200)}
             className="flex-row items-start gap-2 px-1"
           >
-            <IconAlertCircle
+            <ScaledIcon
+              icon={IconAlertCircle}
               size={16}
               color={destructiveColor}
               style={{ marginTop: 1 }}
             />
-            <Text selectable className="flex-1 text-[13px] text-destructive">
+            <Text selectable className="flex-1 text-destructive text-sm">
               {ERROR_MESSAGES[connection.error]}
             </Text>
           </Animated.View>
@@ -236,8 +242,8 @@ export default function ServerUrlScreen() {
           onPress={() => Linking.openURL("https://sofa.watch")}
           className="flex-row items-center gap-1.5"
         >
-          <IconInfoCircle size={16} color={mutedFgColor} />
-          <Text className="font-medium font-sans text-[13px] text-primary">
+          <ScaledIcon icon={IconInfoCircle} size={16} color={mutedFgColor} />
+          <Text className="font-medium font-sans text-primary text-sm">
             Don't have a server?
           </Text>
         </Pressable>

apps/native/src/app/(tabs)/(search)/index.tsx

@@ -166,7 +166,7 @@ export default function SearchScreen() {
           entering={FadeIn.duration(300)}
           className="flex-1 items-center justify-center"
         >
-          <Text className="text-[15px] text-muted-foreground">
+          <Text className="text-base text-muted-foreground">
             No results for "{debouncedQuery}"
           </Text>
         </Animated.View>

apps/native/src/app/(tabs)/(settings)/index.tsx

@@ -39,6 +39,7 @@ import { SettingsRow } from "@/components/settings/settings-row";
 import { SettingsSection } from "@/components/settings/settings-section";
 import { TmdbLogo } from "@/components/tmdb-logo";
 import { Image } from "@/components/ui/image";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
 import { Text } from "@/components/ui/text";
@@ -305,7 +306,7 @@ export default function SettingsScreen() {
                     value={nameInput}
                     accessibilityLabel="Display name"
                     onChangeText={setNameInput}
-                    className="min-h-10 flex-1 border-primary border-b py-2 font-sans text-[15px] text-foreground"
+                    className="min-h-10 flex-1 border-primary border-b py-2 font-sans text-base text-foreground"
                     autoFocus
                   />
                   <Pressable
@@ -331,16 +332,16 @@ export default function SettingsScreen() {
                   </Text>
                 </Pressable>
               )}
-              <Text
-                selectable
-                className="mt-0.5 text-[13px] text-muted-foreground"
-              >
+              <Text selectable className="mt-0.5 text-muted-foreground text-sm">
                 {session?.user?.email}
               </Text>
             </View>
             {isAdmin && (
               <View className="rounded-full bg-primary/10 px-2 py-0.5">
-                <Text className="font-medium font-sans text-[10px] text-primary">
+                <Text
+                  maxFontSizeMultiplier={1.0}
+                  className="font-medium font-sans text-primary text-xs"
+                >
                   Admin
                 </Text>
               </View>
@@ -485,7 +486,7 @@ export default function SettingsScreen() {
             />
             {updateCheck.data?.updateCheck?.updateAvailable && (
               <View className="py-3.5">
-                <Text className="font-medium font-sans text-[13px] text-status-completed">
+                <Text className="font-medium font-sans text-sm text-status-completed">
                   Update available: {updateCheck.data.updateCheck.latestVersion}
                 </Text>
               </View>
@@ -501,11 +502,15 @@ export default function SettingsScreen() {
             onPress={() => Linking.openURL(`${serverUrl}/settings`)}
             className="flex-row items-center justify-center py-3.5 active:opacity-70"
           >
-            <IconWorld size={18} color={mutedFgColor} />
-            <Text className="ml-2 flex-1 text-[15px] text-foreground">
+            <ScaledIcon icon={IconWorld} size={18} color={mutedFgColor} />
+            <Text className="ml-2 flex-1 text-base text-foreground">
               Open in browser…
             </Text>
-            <IconArrowUpRight size={16} color={mutedFgColor} />
+            <ScaledIcon
+              icon={IconArrowUpRight}
+              size={16}
+              color={mutedFgColor}
+            />
           </Pressable>
         </SettingsSection>
       </Animated.View>
@@ -538,7 +543,7 @@ export default function SettingsScreen() {
           onPress={() => Linking.openURL("https://github.com/jakejarvis/sofa")}
           className="flex-row items-center gap-1.5 active:opacity-70"
         >
-          <IconBrandGithub size={14} color={mutedFgColor} />
+          <ScaledIcon icon={IconBrandGithub} size={14} color={mutedFgColor} />
           <Text className="text-muted-foreground text-xs">GitHub</Text>
         </Pressable>
       </Animated.View>
@@ -553,7 +558,10 @@ export default function SettingsScreen() {
           className="items-center gap-2 active:opacity-70"
         >
           <TmdbLogo height={12} />
-          <Text className="text-center text-[10px] text-muted-foreground leading-relaxed">
+          <Text
+            maxFontSizeMultiplier={1.0}
+            className="text-center text-muted-foreground text-xs leading-relaxed"
+          >
             This product uses the TMDB API but is not endorsed or certified by
             TMDB.
           </Text>

apps/native/src/app/change-password.tsx

@@ -185,7 +185,7 @@ export default function ChangePasswordScreen() {
               className="flex-row items-center justify-between rounded-xl border border-border bg-input px-3.5 py-3"
               style={{ borderCurve: "continuous" }}
             >
-              <Text className="text-[15px] text-foreground">
+              <Text className="text-base text-foreground">
                 Sign out of other sessions
               </Text>
               <Switch

apps/native/src/app/person/[id].tsx

@@ -24,6 +24,7 @@ import { useCSSVariable } from "uniwind";
 import { ExpandableText } from "@/components/ui/expandable-text";
 import { Image } from "@/components/ui/image";
 import { PosterCard } from "@/components/ui/poster-card";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { SectionHeader } from "@/components/ui/section-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Text } from "@/components/ui/text";
@@ -294,7 +295,7 @@ export default function PersonDetailScreen() {
           )}
         </View>
 
-        <Text className="mt-4 text-center font-display text-[28px] text-foreground">
+        <Text className="mt-4 text-center font-display text-3xl text-foreground">
           {person.name}
         </Text>
 
@@ -311,8 +312,12 @@ export default function PersonDetailScreen() {
           <View className="mt-3 items-center gap-1.5">
             {person.birthday ? (
               <View className="flex-row items-center gap-1.5">
-                <IconCalendar size={14} color={primaryColor} />
-                <Text selectable className="text-[13px] text-muted-foreground">
+                <ScaledIcon
+                  icon={IconCalendar}
+                  size={14}
+                  color={primaryColor}
+                />
+                <Text selectable className="text-muted-foreground text-sm">
                   {format(parseISO(person.birthday), "MMMM d, yyyy")}
                   {(() => {
                     const age = calculateAge(person.birthday, person.deathday);
@@ -325,8 +330,8 @@ export default function PersonDetailScreen() {
             ) : null}
             {person.placeOfBirth ? (
               <View className="flex-row items-center gap-1.5">
-                <IconMapPin size={14} color={primaryColor} />
-                <Text selectable className="text-[13px] text-muted-foreground">
+                <ScaledIcon icon={IconMapPin} size={14} color={primaryColor} />
+                <Text selectable className="text-muted-foreground text-sm">
                   {person.placeOfBirth}
                 </Text>
               </View>

apps/native/src/app/title/[id].tsx

@@ -36,6 +36,7 @@ import {
   horizontalListStyle,
 } from "@/components/ui/horizontal-list-spacing";
 import { Image } from "@/components/ui/image";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { SectionHeader } from "@/components/ui/section-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
@@ -444,12 +445,15 @@ export default function TitleDetailScreen() {
               </Text>
               <View className="mt-1.5 flex-row flex-wrap items-center gap-2">
                 <View className="rounded-full bg-title-accent px-2 py-0.5">
-                  <Text className="font-medium font-sans text-[10px] text-title-accent-foreground">
+                  <Text
+                    maxFontSizeMultiplier={1.0}
+                    className="font-medium font-sans text-title-accent-foreground text-xs"
+                  >
                     {title.type === "movie" ? "Movie" : "TV"}
                   </Text>
                 </View>
                 {year ? (
-                  <Text className="text-[13px] text-white/70">{year}</Text>
+                  <Text className="text-sm text-white/70">{year}</Text>
                 ) : null}
                 {title.contentRating ? (
                   <Text className="text-white/50 text-xs">
@@ -458,7 +462,11 @@ export default function TitleDetailScreen() {
                 ) : null}
                 {title.voteAverage != null && title.voteAverage > 0 && (
                   <View className="flex-row items-center gap-0.5">
-                    <IconStarFilled size={12} color={titleAccent} />
+                    <ScaledIcon
+                      icon={IconStarFilled}
+                      size={12}
+                      color={titleAccent}
+                    />
                     <Text className="text-title-accent text-xs">
                       {title.voteAverage.toFixed(1)}
                     </Text>
@@ -483,9 +491,7 @@ export default function TitleDetailScreen() {
                   key={genre}
                   className="mr-2 rounded-full bg-secondary px-2.5 py-1"
                 >
-                  <Text className="text-[11px] text-muted-foreground">
-                    {genre}
-                  </Text>
+                  <Text className="text-muted-foreground text-xs">{genre}</Text>
                 </View>
               ))}
             </ScrollView>
@@ -527,7 +533,11 @@ export default function TitleDetailScreen() {
                   <Spinner size="sm" />
                 ) : (
                   <>
-                    <IconCheck size={16} color={titleAccentForeground} />
+                    <ScaledIcon
+                      icon={IconCheck}
+                      size={16}
+                      color={titleAccentForeground}
+                    />
                     <Text className="font-medium font-sans text-sm text-title-accent-foreground">
                       Mark Watched
                     </Text>
@@ -586,7 +596,8 @@ export default function TitleDetailScreen() {
                     />
                   )}
                   <Text
-                    className="mt-1 max-w-[60px] text-center text-[10px] text-muted-foreground"
+                    maxFontSizeMultiplier={1.0}
+                    className="mt-1 max-w-[60px] text-center text-muted-foreground text-xs"
                     numberOfLines={1}
                   >
                     {offer.providerName}
@@ -633,7 +644,7 @@ export default function TitleDetailScreen() {
         {hydrateMutation.isPending && (
           <View className="items-center py-6">
             <Spinner colorClassName="accent-title-accent" />
-            <Text className="mt-2 text-[13px] text-muted-foreground">
+            <Text className="mt-2 text-muted-foreground text-sm">
               Loading season data...
             </Text>
           </View>

apps/native/src/components/auth-screen.tsx

@@ -49,7 +49,10 @@ export function AuthScreen({
           ) : (
             <SofaLogo size={48} />
           )}
-          <Text className="mt-1 font-display text-[32px] text-foreground">
+          <Text
+            maxFontSizeMultiplier={1.3}
+            className="mt-1 font-display text-3xl text-foreground"
+          >
             {title}
           </Text>
           {subtitle && (

apps/native/src/components/dashboard/continue-watching-card.tsx

@@ -97,7 +97,7 @@ export function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
                 <View className="absolute right-2.5 bottom-3 left-2.5">
                   <Text
                     numberOfLines={1}
-                    className="font-medium font-sans text-[11px] text-white/80"
+                    className="font-medium font-sans text-white/80 text-xs"
                   >
                     S{item.nextEpisode.seasonNumber} E
                     {item.nextEpisode.episodeNumber}
@@ -119,14 +119,14 @@ export function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
             <View className="p-2.5">
               <Text
                 numberOfLines={1}
-                className="font-medium font-sans text-[13px] text-foreground"
+                className="font-medium font-sans text-foreground text-sm"
               >
                 {item.title.title}
               </Text>
               {item.nextEpisode && (
                 <Text
                   numberOfLines={1}
-                  className="mt-0.5 text-[11px] text-muted-foreground"
+                  className="mt-0.5 text-muted-foreground text-xs"
                 >
                   {item.nextEpisode.name}
                 </Text>

apps/native/src/components/dashboard/stats-card.tsx

@@ -14,12 +14,12 @@ export function StatsCard({
       style={{ borderCurve: "continuous" }}
     >
       <Text
-        className="font-bold font-sans text-[24px] text-primary"
+        className="font-bold font-sans text-2xl text-primary"
         style={{ fontVariant: ["tabular-nums"] }}
       >
         {value ?? "—"}
       </Text>
-      <Text className="mt-0.5 text-[11px] text-muted-foreground">{label}</Text>
+      <Text className="mt-0.5 text-muted-foreground text-xs">{label}</Text>
     </View>
   );
 }

apps/native/src/components/explore/filterable-title-row.tsx

@@ -135,7 +135,7 @@ export function FilterableTitleRow({
 
       {!showLoading && items.length === 0 && selectedGenre !== null ? (
         <View className="items-center py-6">
-          <Text className="text-[13px] text-muted-foreground">
+          <Text className="text-muted-foreground text-sm">
             No titles found for this genre.
           </Text>
         </View>

apps/native/src/components/explore/genre-chip.tsx

@@ -28,7 +28,7 @@ export function GenreChip({
       className={`mr-2 rounded-full px-3 py-1.5 ${isSelected ? "bg-primary" : "bg-secondary"}`}
     >
       <Text
-        className={`font-medium font-sans text-[12px] ${isSelected ? "text-primary-foreground" : "text-foreground"}`}
+        className={`font-medium font-sans text-xs ${isSelected ? "text-primary-foreground" : "text-foreground"}`}
       >
         {label}
       </Text>

apps/native/src/components/explore/hero-banner.tsx

@@ -13,6 +13,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useCSSVariable } from "uniwind";
 import { Image } from "@/components/ui/image";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 import { orpc } from "@/lib/orpc";
 import { toast } from "@/lib/toast";
@@ -119,7 +120,7 @@ export function HeroBanner({ item }: { item: HeroBannerItem }) {
             <View className="mt-2 flex-row items-center gap-2">
               {item.voteAverage != null && item.voteAverage > 0 && (
                 <View className="flex-row items-center gap-1">
-                  <IconStarFilled size={12} color={primary} />
+                  <ScaledIcon icon={IconStarFilled} size={12} color={primary} />
                   <Text className="text-primary text-xs">
                     {item.voteAverage.toFixed(1)}
                   </Text>

apps/native/src/components/header-avatar.tsx

@@ -37,7 +37,10 @@ export function HeaderAvatar() {
               />
             ) : (
               <View className="flex-1 items-center justify-center bg-primary/[0.08]">
-                <Text className="font-medium font-sans text-[13px] text-primary">
+                <Text
+                  maxFontSizeMultiplier={1.0}
+                  className="font-medium font-sans text-primary text-sm"
+                >
                   {user.name?.charAt(0)?.toUpperCase() ?? "?"}
                 </Text>
               </View>

apps/native/src/components/navigation/native-tab-bar.android.tsx

@@ -20,9 +20,7 @@ export function NativeTabBar() {
     }),
     [],
   );
-  const labelTextStyle = useResolveClassNames(
-    "font-sans font-medium text-[11.5px]",
-  );
+  const labelTextStyle = useResolveClassNames("font-medium font-sans text-xs");
 
   return (
     <NativeTabs

apps/native/src/components/search/recently-viewed-list.ios.tsx

@@ -75,7 +75,7 @@ export function RecentlyViewedList() {
         className="flex-1 items-center justify-center"
       >
         <IconSearch size={64} color={mutedForeground} />
-        <Text className="mt-3 text-[15px] text-muted-foreground">
+        <Text className="mt-3 text-base text-muted-foreground">
           Search for movies, shows, or people
         </Text>
       </Animated.View>
@@ -100,7 +100,7 @@ export function RecentlyViewedList() {
               <View className="flex-row items-center justify-between bg-background px-2">
                 <View className="flex-row items-center gap-2">
                   <IconHistory size={20} color={primaryColor} />
-                  <Text className="font-display text-[20px] text-foreground tracking-tight">
+                  <Text className="font-display text-foreground text-xl tracking-tight">
                     Recently Viewed
                   </Text>
                 </View>
@@ -109,7 +109,7 @@ export function RecentlyViewedList() {
                   hitSlop={8}
                   style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
                 >
-                  <Text className="text-[13px] text-primary">Clear</Text>
+                  <Text className="text-primary text-sm">Clear</Text>
                 </Pressable>
               </View>
             </RNHostView>

apps/native/src/components/search/recently-viewed-list.tsx

@@ -76,7 +76,7 @@ export function RecentlyViewedList() {
         className="flex-1 items-center justify-center"
       >
         <IconSearch size={64} color={mutedForeground} />
-        <Text className="mt-3 text-[15px] text-muted-foreground">
+        <Text className="mt-3 text-base text-muted-foreground">
           Search for movies, shows, or people
         </Text>
       </Animated.View>
@@ -98,7 +98,7 @@ export function RecentlyViewedList() {
           >
             <View className="flex-row items-center gap-2">
               <IconHistory size={20} color={primaryColor} />
-              <Text className="font-display text-[20px] text-foreground tracking-tight">
+              <Text className="font-display text-foreground text-xl tracking-tight">
                 Recently Viewed
               </Text>
             </View>
@@ -107,7 +107,7 @@ export function RecentlyViewedList() {
               hitSlop={8}
               style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
             >
-              <Text className="text-[13px] text-primary">Clear</Text>
+              <Text className="text-primary text-sm">Clear</Text>
             </Pressable>
           </Animated.View>
         }

apps/native/src/components/search/recently-viewed-row-content.tsx

@@ -53,13 +53,16 @@ export function RecentlyViewedRowContent({
       <View className="flex-1">
         <Text
           numberOfLines={1}
-          className="font-medium font-sans text-[15px] text-foreground"
+          className="font-medium font-sans text-base text-foreground"
         >
           {item.title}
         </Text>
         <View className="mt-1 flex-row items-center gap-2">
           <View className="rounded-full bg-secondary px-2 py-0.5">
-            <Text className="text-[10px] text-muted-foreground">
+            <Text
+              maxFontSizeMultiplier={1.0}
+              className="text-muted-foreground text-xs"
+            >
               {TypeLabel[item.type]}
             </Text>
           </View>

apps/native/src/components/search/search-result-row.tsx

@@ -3,6 +3,7 @@ import { memo } from "react";
 import { Pressable, View } from "react-native";
 import { useCSSVariable } from "uniwind";
 import { Image } from "@/components/ui/image";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Spinner } from "@/components/ui/spinner";
 import { Text } from "@/components/ui/text";
 
@@ -80,13 +81,16 @@ export const SearchResultRow = memo(function SearchResultRow({
         <View className="flex-1">
           <Text
             numberOfLines={1}
-            className="font-medium font-sans text-[15px] text-foreground"
+            className="font-medium font-sans text-base text-foreground"
           >
             {item.title}
           </Text>
           <View className="mt-1 flex-row items-center gap-2">
             <View className="rounded-full bg-secondary px-2 py-0.5">
-              <Text className="text-[10px] text-muted-foreground">
+              <Text
+                maxFontSizeMultiplier={1.0}
+                className="text-muted-foreground text-xs"
+              >
                 {item.type === "movie"
                   ? "Movie"
                   : item.type === "tv"
@@ -113,9 +117,9 @@ export const SearchResultRow = memo(function SearchResultRow({
           className="ml-2 items-center justify-center self-stretch"
         >
           {isAdding ? (
-            <IconLoader size={22} color={primary} />
+            <ScaledIcon icon={IconLoader} size={22} color={primary} />
           ) : (
-            <IconPlus size={22} color={primary} />
+            <ScaledIcon icon={IconPlus} size={22} color={primary} />
           )}
         </Pressable>
       )}

apps/native/src/components/settings/integration-card.tsx

@@ -20,6 +20,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useCSSVariable } from "uniwind";
 import type { IntegrationConfig } from "@/components/settings/integration-configs";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 import { orpc } from "@/lib/orpc";
 import { queryClient } from "@/lib/query-client";
@@ -176,13 +177,13 @@ export function IntegrationCard({ config, connection }: IntegrationCardProps) {
         className="flex-row items-center justify-between p-3"
       >
         <View className="flex-row items-center gap-3">
-          <Icon
-            width={18}
-            height={18}
+          <ScaledIcon
+            icon={Icon}
+            size={18}
             color={connection ? primaryColor : mutedFgColor}
           />
           <View>
-            <Text className="font-medium font-sans text-[15px] text-foreground">
+            <Text className="font-medium font-sans text-base text-foreground">
               {label}
             </Text>
             <Text className="mt-0.5 text-muted-foreground text-xs">
@@ -194,7 +195,7 @@ export function IntegrationCard({ config, connection }: IntegrationCardProps) {
         </View>
 
         <Animated.View style={chevronStyle}>
-          <IconChevronDown size={18} color={mutedFgColor} />
+          <ScaledIcon icon={IconChevronDown} size={18} color={mutedFgColor} />
         </Animated.View>
       </Pressable>
 
@@ -208,12 +209,13 @@ export function IntegrationCard({ config, connection }: IntegrationCardProps) {
           {/* Requirement note */}
           {config.requirementNote && (
             <View className="mb-3 flex-row items-start gap-2 rounded-lg bg-primary/[0.06] px-3 py-2.5">
-              <IconInfoCircle
+              <ScaledIcon
+                icon={IconInfoCircle}
                 size={14}
                 color={primaryColor}
                 className="mt-px"
               />
-              <Text className="flex-1 text-[12px] text-foreground/80">
+              <Text className="flex-1 text-foreground/80 text-xs">
                 {config.requirementNote}
               </Text>
             </View>
@@ -241,7 +243,8 @@ export function IntegrationCard({ config, connection }: IntegrationCardProps) {
                 </Text>
                 <View className="flex-row items-center rounded-lg bg-secondary/50 px-3 py-2.5">
                   <Text
-                    className="flex-1 font-mono text-[11px] text-muted-foreground"
+                    maxFontSizeMultiplier={1.0}
+                    className="flex-1 font-mono text-muted-foreground text-xs"
                     numberOfLines={1}
                   >
                     {url}
@@ -254,9 +257,13 @@ export function IntegrationCard({ config, connection }: IntegrationCardProps) {
                     hitSlop={8}
                   >
                     {copied ? (
-                      <IconCheck size={16} color="#4ade80" />
+                      <ScaledIcon icon={IconCheck} size={16} color="#4ade80" />
                     ) : (
-                      <IconCopy size={16} color={mutedFgColor} />
+                      <ScaledIcon
+                        icon={IconCopy}
+                        size={16}
+                        color={mutedFgColor}
+                      />
                     )}
                   </Pressable>
                 </View>
@@ -269,8 +276,12 @@ export function IntegrationCard({ config, connection }: IntegrationCardProps) {
                   disabled={regenerateMutation.isPending}
                   className="flex-1 flex-row items-center justify-center gap-1.5 rounded-lg bg-secondary py-2.5 active:opacity-80"
                 >
-                  <IconRefresh size={14} color={mutedFgColor} />
-                  <Text className="font-medium font-sans text-[13px] text-foreground">
+                  <ScaledIcon
+                    icon={IconRefresh}
+                    size={14}
+                    color={mutedFgColor}
+                  />
+                  <Text className="font-medium font-sans text-foreground text-sm">
                     Regenerate
                   </Text>
                 </Pressable>
@@ -278,8 +289,8 @@ export function IntegrationCard({ config, connection }: IntegrationCardProps) {
                   onPress={handleDisconnect}
                   className="flex-1 flex-row items-center justify-center gap-1.5 rounded-lg bg-destructive/10 py-2.5 active:opacity-80"
                 >
-                  <IconTrash size={14} color="#ef4444" />
-                  <Text className="font-medium font-sans text-[13px] text-destructive">
+                  <ScaledIcon icon={IconTrash} size={14} color="#ef4444" />
+                  <Text className="font-medium font-sans text-destructive text-sm">
                     Disconnect
                   </Text>
                 </Pressable>
@@ -294,7 +305,11 @@ export function IntegrationCard({ config, connection }: IntegrationCardProps) {
               className="flex-row items-center gap-1.5"
             >
               <Animated.View style={setupChevronStyle}>
-                <IconChevronDown size={12} color={mutedFgColor} />
+                <ScaledIcon
+                  icon={IconChevronDown}
+                  size={12}
+                  color={mutedFgColor}
+                />
               </Animated.View>
               <Text className="text-muted-foreground text-xs">
                 Setup instructions

apps/native/src/components/settings/integrations-section.tsx

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Pressable, View } from "react-native";
 import { IntegrationCard } from "@/components/settings/integration-card";
 import { INTEGRATION_CONFIGS } from "@/components/settings/integration-configs";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { SectionHeader } from "@/components/ui/section-header";
 import { Spinner } from "@/components/ui/spinner";
 import { Text } from "@/components/ui/text";
@@ -21,7 +22,7 @@ export function IntegrationsSection() {
         </View>
       ) : integrations.isError ? (
         <View className="items-center gap-2 py-4">
-          <Text className="text-[13px] text-muted-foreground">
+          <Text className="text-muted-foreground text-sm">
             Could not load integrations
           </Text>
           <Pressable
@@ -29,8 +30,12 @@ export function IntegrationsSection() {
             className="flex-row items-center gap-1.5 rounded-lg bg-secondary px-3 py-1.5"
             style={{ borderCurve: "continuous" }}
           >
-            <IconRefresh size={14} className="accent-primary" />
-            <Text className="font-medium font-sans text-[13px] text-primary">
+            <ScaledIcon
+              icon={IconRefresh}
+              size={14}
+              className="accent-primary"
+            />
+            <Text className="font-medium font-sans text-primary text-sm">
               Retry
             </Text>
           </Pressable>

apps/native/src/components/settings/settings-row.tsx

@@ -3,6 +3,7 @@ import { IconChevronRight } from "@tabler/icons-react-native";
 import type { ReactNode } from "react";
 import { Pressable, View } from "react-native";
 import { useCSSVariable } from "uniwind";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 
 export function SettingsRow({
@@ -29,13 +30,14 @@ export function SettingsRow({
   const content = (
     <>
       {IconComponent && (
-        <IconComponent
+        <ScaledIcon
+          icon={IconComponent}
           size={18}
           color={destructive ? destructiveColor : mutedFgColor}
         />
       )}
       <Text
-        className={`flex-1 text-[15px] ${destructive ? "text-destructive" : "text-foreground"} ${IconComponent ? "ml-2" : ""}`}
+        className={`flex-1 text-base ${destructive ? "text-destructive" : "text-foreground"} ${IconComponent ? "ml-2" : ""}`}
       >
         {label}
       </Text>
@@ -43,14 +45,19 @@ export function SettingsRow({
       {!right && value ? (
         <Text
           selectable={!onPress}
-          className="mr-1 max-w-[180px] shrink text-right text-[14px] text-muted-foreground"
+          className="mr-1 max-w-[180px] shrink text-right text-muted-foreground text-sm"
           numberOfLines={2}
         >
           {value}
         </Text>
       ) : null}
       {!right && onPress && (
-        <IconChevronRight size={16} color={mutedFgColor} accessible={false} />
+        <ScaledIcon
+          icon={IconChevronRight}
+          size={16}
+          color={mutedFgColor}
+          accessible={false}
+        />
       )}
     </>
   );

apps/native/src/components/settings/settings-section.tsx

@@ -33,11 +33,14 @@ export function SettingsSection({
 
   return (
     <View className="mb-6">
-      <View className="mb-2 flex-row items-center gap-2">
+      <View className="flex-row items-center gap-2">
         <SectionHeader title={title} icon={icon} />
         {badge ? (
           <View className="mb-2.5 rounded-full bg-primary/10 px-2 py-0.5">
-            <Text className="font-medium font-sans text-[10px] text-primary">
+            <Text
+              maxFontSizeMultiplier={1.0}
+              className="font-medium font-sans text-primary text-xs"
+            >
               {badge}
             </Text>
           </View>

apps/native/src/components/titles/cast-card.tsx

@@ -43,14 +43,16 @@ export function CastCard({
         </View>
         <Text
           numberOfLines={1}
-          className="text-center font-medium font-sans text-[11px] text-foreground"
+          maxFontSizeMultiplier={1.2}
+          className="text-center font-medium font-sans text-foreground text-xs"
         >
           {person.name}
         </Text>
         {person.character ? (
           <Text
             numberOfLines={1}
-            className="text-center text-[10px] text-muted-foreground"
+            maxFontSizeMultiplier={1.0}
+            className="text-center text-muted-foreground text-xs"
           >
             {person.character}
           </Text>

apps/native/src/components/titles/continue-watching-banner.tsx

@@ -70,15 +70,18 @@ export function ContinueWatchingBanner({
           <View className="absolute right-3 bottom-2.5 left-3">
             <View className="flex-row items-center gap-1.5">
               <View className="h-1.5 w-1.5 rounded-full bg-title-accent" />
-              <Text className="font-medium font-sans text-[10px] text-title-accent uppercase tracking-wider">
+              <Text
+                maxFontSizeMultiplier={1.0}
+                className="font-medium font-sans text-title-accent text-xs uppercase tracking-wider"
+              >
                 Up next
               </Text>
             </View>
             <Text
               numberOfLines={1}
-              className="mt-0.5 font-medium font-sans text-[13px] text-white"
+              className="mt-0.5 font-medium font-sans text-sm text-white"
             >
-              <Text className="font-medium font-sans text-[11px] text-white/60">
+              <Text className="font-medium font-sans text-white/60 text-xs">
                 S{nextEpisode.seasonNumber} E{nextEpisode.episodeNumber}
               </Text>
               {"  "}

apps/native/src/components/titles/episode-row.tsx

@@ -3,6 +3,7 @@ import {
   IconCircleDashed,
 } from "@tabler/icons-react-native";
 import { Pressable, View } from "react-native";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 
 export function EpisodeRow({
@@ -35,9 +36,13 @@ export function EpisodeRow({
       style={{ borderBottomWidth: 0.5 }}
     >
       {isWatched ? (
-        <IconCircleCheckFilled size={22} color={accentColor} />
+        <ScaledIcon
+          icon={IconCircleCheckFilled}
+          size={22}
+          color={accentColor}
+        />
       ) : (
-        <IconCircleDashed size={22} color={mutedColor} />
+        <ScaledIcon icon={IconCircleDashed} size={22} color={mutedColor} />
       )}
       <View className="ml-3 flex-1">
         <Text
@@ -48,7 +53,7 @@ export function EpisodeRow({
           {episode.name ?? `Episode ${episode.episodeNumber}`}
         </Text>
         {episode.airDate ? (
-          <Text className="mt-0.5 text-[11px] text-muted-foreground">
+          <Text className="mt-0.5 text-muted-foreground text-xs">
             {episode.airDate}
           </Text>
         ) : null}

apps/native/src/components/titles/season-accordion.tsx

@@ -12,6 +12,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useCSSVariable } from "uniwind";
 import { EpisodeRow } from "@/components/titles/episode-row";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 import { orpc } from "@/lib/orpc";
 import { queryClient } from "@/lib/query-client";
@@ -150,7 +151,7 @@ export function SeasonAccordion({
         className="flex-row items-center justify-between p-4"
       >
         <View className="flex-1">
-          <Text className="font-medium font-sans text-[15px] text-foreground">
+          <Text className="font-medium font-sans text-base text-foreground">
             {season.name ?? `Season ${season.seasonNumber}`}
           </Text>
           <Text className="mt-0.5 text-muted-foreground text-xs">
@@ -172,7 +173,7 @@ export function SeasonAccordion({
         </View>
 
         <Animated.View style={chevronStyle}>
-          <IconChevronDown size={18} color={mutedFgColor} />
+          <ScaledIcon icon={IconChevronDown} size={18} color={mutedFgColor} />
         </Animated.View>
       </Pressable>
 

apps/native/src/components/titles/status-action-button.tsx

@@ -6,6 +6,7 @@ import {
 } from "@tabler/icons-react-native";
 import { Pressable } from "react-native";
 import { useCSSVariable } from "uniwind";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 import * as Haptics from "@/utils/haptics";
 
@@ -62,7 +63,12 @@ export function StatusActionButton({
         accessibilityLabel="Add to watchlist"
         className="flex-row items-center gap-1.5 rounded-lg border border-title-accent/20 bg-title-accent/10 px-4 py-2"
       >
-        <IconPlus size={14} color={titleAccent} strokeWidth={2.5} />
+        <ScaledIcon
+          icon={IconPlus}
+          size={14}
+          color={titleAccent}
+          strokeWidth={2.5}
+        />
         <Text className="font-medium font-sans text-sm text-title-accent">
           Watchlist
         </Text>
@@ -84,7 +90,7 @@ export function StatusActionButton({
       accessibilityLabel={`${config.label}, double tap to remove`}
       className={`flex-row items-center gap-1.5 rounded-lg border px-4 py-2 ${config.bgClass}`}
     >
-      <config.Icon size={14} color={iconColor} />
+      <ScaledIcon icon={config.Icon} size={14} color={iconColor} />
       <Text className={`font-medium font-sans text-sm ${config.textClass}`}>
         {config.label}
       </Text>

apps/native/src/components/ui/button.tsx

@@ -67,7 +67,7 @@ export function ButtonLabel({ style, className, ...props }: ButtonLabelProps) {
   return (
     <Text
       className={cn(
-        "text-center font-medium font-sans text-[15px]",
+        "text-center font-medium font-sans text-base",
         variant === "secondary"
           ? "text-secondary-foreground"
           : "text-primary-foreground",

apps/native/src/components/ui/empty-state.tsx

@@ -32,11 +32,11 @@ export function EmptyState({
       <View accessible={false}>
         <IconComponent size={48} color={mutedForeground} />
       </View>
-      <Text className="mt-3 text-center font-medium font-sans text-[16px] text-foreground">
+      <Text className="mt-3 text-center font-medium font-sans text-base text-foreground">
         {title}
       </Text>
       {description && (
-        <Text className="mt-1 text-center text-[13px] text-muted-foreground">
+        <Text className="mt-1 text-center text-muted-foreground text-sm">
           {description}
         </Text>
       )}

apps/native/src/components/ui/expandable-text.tsx

@@ -41,7 +41,7 @@ export function ExpandableText({
       {/* Hidden text without numberOfLines to measure true line count */}
       <Text
         onTextLayout={onMeasureLayout}
-        className="pointer-events-none absolute text-[14px] leading-[22px] opacity-0"
+        className="pointer-events-none absolute text-sm leading-relaxed opacity-0"
       >
         {text}
       </Text>
@@ -49,7 +49,7 @@ export function ExpandableText({
       <Text
         selectable={Platform.OS === "ios"}
         numberOfLines={expanded ? undefined : maxLines}
-        className="text-[14px] text-foreground leading-[22px]"
+        className="text-foreground text-sm leading-relaxed"
       >
         {text}
       </Text>
@@ -61,7 +61,7 @@ export function ExpandableText({
           className="mt-1"
         >
           <Text
-            className="font-medium font-sans text-[13px] text-primary"
+            className="font-medium font-sans text-primary text-sm"
             style={actionColor ? { color: actionColor } : undefined}
           >
             {expanded ? "Show less" : "Show more"}

apps/native/src/components/ui/offline-banner.ios.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import Animated, { SlideInUp, SlideOutUp } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 import * as Haptics from "@/utils/haptics";
 
@@ -67,15 +68,15 @@ export function OfflineBanner() {
             paddingVertical: 10,
           }}
         >
-          <IconWifiOff size={16} color="white" />
-          <Text className="font-medium font-sans text-[13px] text-white">
+          <ScaledIcon icon={IconWifiOff} size={16} color="white" />
+          <Text className="font-medium font-sans text-sm text-white">
             No internet connection
           </Text>
         </GlassView>
       ) : (
         <View className="mx-4 flex-row items-center justify-center gap-2 rounded-xl bg-destructive px-4 py-2.5">
-          <IconWifiOff size={16} color="white" />
-          <Text className="font-medium font-sans text-[13px] text-white">
+          <ScaledIcon icon={IconWifiOff} size={16} color="white" />
+          <Text className="font-medium font-sans text-sm text-white">
             No internet connection
           </Text>
         </View>

apps/native/src/components/ui/offline-banner.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import Animated, { SlideInUp, SlideOutUp } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 import * as Haptics from "@/utils/haptics";
 
@@ -52,8 +53,8 @@ export function OfflineBanner() {
       }}
     >
       <View className="mx-4 flex-row items-center justify-center gap-2 rounded-xl bg-destructive px-4 py-2.5">
-        <IconWifiOff size={16} color="white" />
-        <Text className="font-medium font-sans text-[13px] text-white">
+        <ScaledIcon icon={IconWifiOff} size={16} color="white" />
+        <Text className="font-medium font-sans text-sm text-white">
           No internet connection
         </Text>
       </View>

apps/native/src/components/ui/poster-card.tsx

@@ -21,6 +21,7 @@ import Animated, {
 import { useCSSVariable } from "uniwind";
 import * as ContextMenu from "zeego/context-menu";
 import { Image } from "@/components/ui/image";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Text } from "@/components/ui/text";
 import { client, orpc } from "@/lib/orpc";
@@ -156,7 +157,7 @@ export function PosterCard({
           />
         ) : (
           <View className="flex-1 items-center justify-center bg-secondary p-3">
-            <Text className="text-center font-display text-[13px] text-foreground/[0.44]">
+            <Text className="text-center font-display text-foreground/[0.44] text-sm">
               {title}
             </Text>
           </View>
@@ -207,7 +208,7 @@ export function PosterCard({
             />
           )}
           <Text
-            className="flex-1 font-medium font-sans text-[13px] text-foreground"
+            className="flex-1 font-medium font-sans text-foreground text-sm"
             numberOfLines={1}
           >
             {title}
@@ -215,17 +216,21 @@ export function PosterCard({
         </View>
         <View className="mt-1 flex-row items-center gap-1" accessible={false}>
           {type === "movie" ? (
-            <IconMovie size={12} color={primaryColor} />
+            <ScaledIcon icon={IconMovie} size={12} color={primaryColor} />
           ) : (
-            <IconDeviceTv size={12} color={primaryColor} />
+            <ScaledIcon icon={IconDeviceTv} size={12} color={primaryColor} />
           )}
           {year ? (
-            <Text className="text-[11px] text-muted-foreground">{year}</Text>
+            <Text className="text-muted-foreground text-xs">{year}</Text>
           ) : null}
           {voteAverage != null && voteAverage > 0 && (
             <View className="ml-auto flex-row items-center gap-1">
-              <IconStarFilled size={10} color={primaryColor} />
-              <Text className="text-[11px] text-primary">
+              <ScaledIcon
+                icon={IconStarFilled}
+                size={10}
+                color={primaryColor}
+              />
+              <Text className="text-primary text-xs">
                 {voteAverage.toFixed(1)}
               </Text>
             </View>

apps/native/src/components/ui/scaled-icon.tsx

@@ -0,0 +1,24 @@
+import type { ComponentType } from "react";
+import type { SvgProps } from "react-native-svg";
+import { useScaledSize } from "@/hooks/use-scaled-size";
+
+interface ScaledIconProps extends SvgProps {
+  icon: ComponentType<SvgProps & { size?: number }>;
+  size: number;
+}
+
+/**
+ * Renders an icon scaled proportionally to the system font scale
+ * (iOS Dynamic Type / Android font size), capped at 1.5x.
+ *
+ * Use this for icons that sit inline with text so they grow alongside it.
+ */
+export function ScaledIcon({
+  icon: IconComponent,
+  size,
+  ...props
+}: ScaledIconProps) {
+  const scaled = useScaledSize();
+  const s = scaled(size);
+  return <IconComponent size={s} width={s} height={s} {...props} />;
+}

apps/native/src/components/ui/section-header.tsx

@@ -1,6 +1,7 @@
 import type { Icon } from "@tabler/icons-react-native";
 import { View } from "react-native";
 import { useCSSVariable } from "uniwind";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 
 interface SectionHeaderProps {
@@ -19,8 +20,10 @@ export function SectionHeader({
 
   return (
     <View className="mb-3 flex-row items-center gap-2">
-      {IconComponent && <IconComponent size={20} color={resolvedColor} />}
-      <Text className="font-display text-[20px] text-foreground tracking-tight">
+      {IconComponent && (
+        <ScaledIcon icon={IconComponent} size={20} color={resolvedColor} />
+      )}
+      <Text className="font-display text-foreground text-xl tracking-tight">
         {title}
       </Text>
     </View>

apps/native/src/components/ui/server-unreachable-banner.ios.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import { Pressable, View } from "react-native";
 import Animated, { SlideInUp, SlideOutUp } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 import { authClient } from "@/lib/auth-client";
 import { queryClient } from "@/lib/query-client";
@@ -60,17 +61,15 @@ export function ServerUnreachableBanner() {
 
   const content = (
     <>
-      <IconCloudOff size={16} color="white" />
-      <Text className="font-medium font-sans text-[13px] text-white">
+      <ScaledIcon icon={IconCloudOff} size={16} color="white" />
+      <Text className="font-medium font-sans text-sm text-white">
         Can't reach server
       </Text>
       <Pressable
         onPress={handleRetry}
         className="ml-1 rounded-md bg-white/20 px-2 py-0.5"
       >
-        <Text className="font-medium font-sans text-[12px] text-white">
-          Retry
-        </Text>
+        <Text className="font-medium font-sans text-white text-xs">Retry</Text>
       </Pressable>
     </>
   );

apps/native/src/components/ui/server-unreachable-banner.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { Pressable, View } from "react-native";
 import Animated, { SlideInUp, SlideOutUp } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 import { authClient } from "@/lib/auth-client";
 import { queryClient } from "@/lib/query-client";
@@ -68,15 +69,15 @@ export function ServerUnreachableBanner() {
       }}
     >
       <View className="mx-4 flex-row items-center justify-center gap-2 rounded-xl bg-status-watching px-4 py-2.5">
-        <IconCloudOff size={16} color="white" />
-        <Text className="font-medium font-sans text-[13px] text-white">
+        <ScaledIcon icon={IconCloudOff} size={16} color="white" />
+        <Text className="font-medium font-sans text-sm text-white">
           Can't reach server
         </Text>
         <Pressable
           onPress={handleRetry}
           className="ml-1 rounded-md bg-white/20 px-2 py-0.5"
         >
-          <Text className="font-medium font-sans text-[12px] text-white">
+          <Text className="font-medium font-sans text-white text-xs">
             Retry
           </Text>
         </Pressable>

apps/native/src/components/ui/status-badge.tsx

@@ -6,6 +6,7 @@ import {
 } from "@tabler/icons-react-native";
 import { View } from "react-native";
 import { useCSSVariable } from "uniwind";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import { Text } from "@/components/ui/text";
 
 type TitleStatus = "watchlist" | "in_progress" | "completed";
@@ -44,9 +45,10 @@ export function StatusBadge({ status }: { status: TitleStatus }) {
     <View
       className={`flex-row items-center gap-1.5 rounded-full px-2.5 py-1 ${bgClasses[status]}`}
     >
-      <StatusIcon size={12} color={colorMap[status]} />
+      <ScaledIcon icon={StatusIcon} size={12} color={colorMap[status]} />
       <Text
-        className={`font-medium font-sans text-[11px] ${textClasses[status]}`}
+        maxFontSizeMultiplier={1.0}
+        className={`font-medium font-sans text-xs ${textClasses[status]}`}
       >
         {label}
       </Text>

apps/native/src/components/ui/swipeable-row.tsx

@@ -7,6 +7,7 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
 } from "react-native-reanimated";
+import { ScaledIcon } from "@/components/ui/scaled-icon";
 import * as Haptics from "@/utils/haptics";
 
 const ACTION_WIDTH = 80;
@@ -26,7 +27,7 @@ function RightAction({ drag }: { drag: SharedValue<number> }) {
       style={{ width: ACTION_WIDTH }}
     >
       <Animated.View style={animatedStyle}>
-        <IconTrash size={22} color="#fff" />
+        <ScaledIcon icon={IconTrash} size={22} color="#fff" />
       </Animated.View>
     </View>
   );

apps/native/src/components/ui/text-field.tsx

@@ -52,7 +52,7 @@ export const Input = forwardRef<
       accessibilityLabelledBy={ctxId}
       placeholderTextColorClassName="accent-muted-foreground/70"
       className={cn(
-        "min-h-12 rounded-[12px] border border-border bg-input px-3.5 py-3 font-sans text-[15px] text-foreground",
+        "min-h-12 rounded-[12px] border border-border bg-input px-3.5 py-3 font-sans text-base text-foreground",
         className,
       )}
       style={[{ borderCurve: "continuous" }, style]}
@@ -73,7 +73,7 @@ export function FieldError({
   return (
     <Text
       selectable
-      className={cn("text-[13px] text-destructive", className)}
+      className={cn("text-destructive text-sm", className)}
       {...props}
     >
       {children}

apps/native/src/components/ui/text.tsx

@@ -4,7 +4,7 @@ import { cn } from "@/utils/cn";
 
 export function Text({
   className,
-  maxFontSizeMultiplier,
+  maxFontSizeMultiplier = 1.5,
   ...props
 }: TextProps & { className?: string }) {
   return (

apps/native/src/hooks/use-scaled-size.ts

@@ -0,0 +1,16 @@
+import { useWindowDimensions } from "react-native";
+
+const MAX_MULTIPLIER = 1.5;
+
+/**
+ * Returns a function that scales a base pixel size proportionally
+ * to the system font scale (iOS Dynamic Type / Android font size).
+ * Capped at 1.5x to match the Text component's maxFontSizeMultiplier.
+ *
+ * At the default font scale (1.0), returned values are unchanged.
+ */
+export function useScaledSize() {
+  const { fontScale } = useWindowDimensions();
+  const scale = Math.min(fontScale, MAX_MULTIPLIER);
+  return (baseSize: number) => Math.round(baseSize * scale);
+}

apps/native/src/hooks/use-tab-screen-options.android.tsx

@@ -10,7 +10,7 @@ type ScreenOptions = NonNullable<
 export function useTabScreenOptions() {
   const backgroundColor = useCSSVariable("--color-background") as string;
   const headerTitleStyle = useResolveClassNames(
-    "font-sans font-semibold text-lg text-foreground",
+    "font-sans font-semibold text-foreground text-lg",
   );
   const contentStyle = useResolveClassNames("bg-background");
 

apps/native/src/hooks/use-tab-screen-options.tsx

@@ -12,7 +12,7 @@ export function useTabScreenOptions() {
     "font-display text-foreground",
   );
   const headerTitleStyle = useResolveClassNames(
-    "font-display text-lg text-foreground",
+    "font-display text-foreground text-lg",
   );
   const contentStyle = useResolveClassNames("bg-background");
 

biome.json

@@ -46,8 +46,38 @@
         "useSortedClasses": {
           "level": "error",
           "options": {
-            "attributes": ["classList"],
-            "functions": ["cn", "clsx", "cva"]
+            "attributes": [
+              "class",
+              "classList",
+              "className",
+              "headerClassName",
+              "contentContainerClassName",
+              "columnWrapperClassName",
+              "endFillColorClassName",
+              "imageClassName",
+              "tintColorClassName",
+              "ios_backgroundColorClassName",
+              "thumbColorClassName",
+              "trackColorOnClassName",
+              "trackColorOffClassName",
+              "selectionColorClassName",
+              "cursorColorClassName",
+              "underlineColorAndroidClassName",
+              "placeholderTextColorClassName",
+              "selectionHandleColorClassName",
+              "colorsClassName",
+              "progressBackgroundColorClassName",
+              "titleColorClassName",
+              "underlayColorClassName",
+              "colorClassName",
+              "backdropColorClassName",
+              "backgroundColorClassName",
+              "statusBarBackgroundColorClassName",
+              "drawerBackgroundColorClassName",
+              "ListFooterComponentClassName",
+              "ListHeaderComponentClassName"
+            ],
+            "functions": ["cn", "clsx", "cva", "useResolveClassNames"]
           }
         }
       }