fix(tv): font sizes

components/Badge.tsx

@@ -1,5 +1,7 @@
+import { BlurView } from "expo-blur";
 import { Platform, StyleSheet, View, type ViewProps } from "react-native";
 import { GlassEffectView } from "react-native-glass-effect-view";
+import { TVTypography } from "@/constants/TVTypography";
 import { Text } from "./common/Text";
 
 interface Props extends ViewProps {
@@ -38,8 +40,45 @@ export const Badge: React.FC<Props> = ({
     );
   }
 
-  // On TV, use transparent backgrounds for a cleaner look
+  // On TV, use BlurView for consistent styling
-  const isTV = Platform.isTV;
+  if (Platform.isTV) {
+    return (
+      <BlurView
+        intensity={10}
+        tint='light'
+        style={{
+          borderRadius: 8,
+          overflow: "hidden",
+          alignSelf: "flex-start",
+          flexShrink: 1,
+          flexGrow: 0,
+        }}
+      >
+        <View
+          style={[
+            {
+              paddingVertical: 10,
+              paddingHorizontal: 16,
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: "rgba(0,0,0,0.3)",
+            },
+            props.style,
+          ]}
+        >
+          {iconLeft && <View style={{ marginRight: 8 }}>{iconLeft}</View>}
+          <Text
+            style={{
+              fontSize: TVTypography.callout,
+              color: "#E5E7EB",
+            }}
+          >
+            {text}
+          </Text>
+        </View>
+      </BlurView>
+    );
+  }
 
   return (
     <View
@@ -54,11 +93,7 @@ export const Badge: React.FC<Props> = ({
           alignSelf: "flex-start",
           flexDirection: "row",
           alignItems: "center",
-          backgroundColor: isTV
+          backgroundColor: variant === "purple" ? "#9333ea" : "#262626",
-            ? "rgba(255,255,255,0.1)"
-            : variant === "purple"
-              ? "#9333ea"
-              : "#262626",
         },
         props.style,
       ]}

components/GenreTags.tsx

@@ -1,4 +1,5 @@
 // GenreTags.tsx
+import { BlurView } from "expo-blur";
 import type React from "react";
 import {
   Platform,
@@ -9,6 +10,7 @@ import {
   type ViewProps,
 } from "react-native";
 import { GlassEffectView } from "react-native-glass-effect-view";
+import { TVTypography } from "@/constants/TVTypography";
 import { Text } from "./common/Text";
 
 interface TagProps {
@@ -40,6 +42,32 @@ export const Tag: React.FC<
     );
   }
 
+  // TV-specific styling with blur background
+  if (Platform.isTV) {
+    return (
+      <BlurView
+        intensity={10}
+        tint='light'
+        style={{
+          borderRadius: 8,
+          overflow: "hidden",
+        }}
+      >
+        <View
+          style={{
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            backgroundColor: "rgba(0,0,0,0.3)",
+          }}
+        >
+          <Text style={{ fontSize: TVTypography.callout, color: "#E5E7EB" }}>
+            {text}
+          </Text>
+        </View>
+      </BlurView>
+    );
+  }
+
   return (
     <View className='bg-neutral-800 rounded-full px-2 py-1' {...props}>
       <Text className={textClass} style={textStyle}>
@@ -66,7 +94,8 @@ export const Tags: React.FC<
 
   return (
     <View
-      className={`flex flex-row flex-wrap gap-1 ${props.className}`}
+      className={`flex flex-row flex-wrap ${props.className}`}
+      style={{ gap: Platform.isTV ? 12 : 4 }}
       {...props}
     >
       {tags.map((tag, idx) => (

components/ItemContent.tv.tsx

@@ -6,6 +6,7 @@ import type {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQueryClient } from "@tanstack/react-query";
+import { BlurView } from "expo-blur";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
@@ -28,6 +29,7 @@ import {
   TVSeriesNavigation,
   TVTechnicalDetails,
 } from "@/components/tv";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useImageColorsReturn } from "@/hooks/useImageColorsReturn";
@@ -453,7 +455,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                 <Image
                   source={{ uri: logoUrl }}
                   style={{
-                    height: 100,
+                    height: 150,
                     width: "80%",
                     marginBottom: 24,
                   }}
@@ -463,10 +465,10 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
               ) : (
                 <Text
                   style={{
-                    fontSize: 52,
+                    fontSize: TVTypography.display,
                     fontWeight: "bold",
                     color: "#FFFFFF",
-                    marginBottom: 16,
+                    marginBottom: 20,
                   }}
                   numberOfLines={2}
                 >
@@ -476,10 +478,10 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
 
               {/* Episode info for TV shows */}
               {item.Type === "Episode" && (
-                <View style={{ marginBottom: 12 }}>
+                <View style={{ marginBottom: 16 }}>
                   <Text
                     style={{
-                      fontSize: 24,
+                      fontSize: TVTypography.title,
                       color: "#FFFFFF",
                       fontWeight: "600",
                     }}
@@ -488,9 +490,9 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                   </Text>
                   <Text
                     style={{
-                      fontSize: 20,
+                      fontSize: TVTypography.body,
-                      color: "#9CA3AF",
+                      color: "white",
-                      marginTop: 4,
+                      marginTop: 6,
                     }}
                   >
                     S{item.ParentIndexNumber} E{item.IndexNumber} · {item.Name}
@@ -515,18 +517,34 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
 
               {/* Overview */}
               {item.Overview && (
-                <Text
+                <BlurView
+                  intensity={10}
+                  tint='light'
                   style={{
-                    fontSize: 18,
+                    borderRadius: 8,
-                    color: "#D1D5DB",
+                    overflow: "hidden",
-                    lineHeight: 28,
                     maxWidth: SCREEN_WIDTH * 0.45,
                     marginBottom: 32,
                   }}
-                  numberOfLines={4}
                 >
-                  {item.Overview}
+                  <View
-                </Text>
+                    style={{
+                      padding: 16,
+                      backgroundColor: "rgba(0,0,0,0.3)",
+                    }}
+                  >
+                    <Text
+                      style={{
+                        fontSize: TVTypography.body,
+                        color: "#E5E7EB",
+                        lineHeight: 32,
+                      }}
+                      numberOfLines={4}
+                    >
+                      {item.Overview}
+                    </Text>
+                  </View>
+                </BlurView>
               )}
 
               {/* Action buttons */}
@@ -550,7 +568,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                   />
                   <Text
                     style={{
-                      fontSize: 20,
+                      fontSize: TVTypography.callout,
                       fontWeight: "bold",
                       color: "#000000",
                     }}
@@ -673,6 +691,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
                     (item.UserData?.PlaybackPositionTicks || 0) /
                     item.RunTimeTicks
                   }
+                  fillColor='#FFFFFF'
                 />
               )}
             </View>

components/home/Favorites.tv.tsx

@@ -11,6 +11,7 @@ import heart from "@/assets/icons/heart.fill.png";
 import { Text } from "@/components/common/Text";
 import { InfiniteScrollingCollectionList } from "@/components/home/InfiniteScrollingCollectionList.tv";
 import { Colors } from "@/constants/Colors";
+import { TVTypography } from "@/constants/TVTypography";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 
 const HORIZONTAL_PADDING = 60;
@@ -147,7 +148,7 @@ export const Favorites = () => {
         />
         <Text
           style={{
-            fontSize: 32,
+            fontSize: TVTypography.heading,
             fontWeight: "bold",
             marginBottom: 8,
             color: "#FFFFFF",
@@ -159,7 +160,7 @@ export const Favorites = () => {
           style={{
             textAlign: "center",
             opacity: 0.7,
-            fontSize: 18,
+            fontSize: TVTypography.body,
             color: "#FFFFFF",
           }}
         >

components/home/Home.tv.tsx

@@ -31,6 +31,7 @@ import { InfiniteScrollingCollectionList } from "@/components/home/InfiniteScrol
 import { StreamystatsPromotedWatchlists } from "@/components/home/StreamystatsPromotedWatchlists.tv";
 import { StreamystatsRecommendations } from "@/components/home/StreamystatsRecommendations.tv";
 import { Loader } from "@/components/Loader";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
@@ -525,7 +526,7 @@ export const Home = () => {
       >
         <Text
           style={{
-            fontSize: 32,
+            fontSize: TVTypography.heading,
             fontWeight: "bold",
             marginBottom: 8,
             color: "#FFFFFF",
@@ -537,7 +538,7 @@ export const Home = () => {
           style={{
             textAlign: "center",
             opacity: 0.7,
-            fontSize: 18,
+            fontSize: TVTypography.body,
             color: "#FFFFFF",
           }}
         >
@@ -577,7 +578,7 @@ export const Home = () => {
       >
         <Text
           style={{
-            fontSize: 32,
+            fontSize: TVTypography.heading,
             fontWeight: "bold",
             marginBottom: 8,
             color: "#FFFFFF",
@@ -589,7 +590,7 @@ export const Home = () => {
           style={{
             textAlign: "center",
             opacity: 0.7,
-            fontSize: 18,
+            fontSize: TVTypography.body,
             color: "#FFFFFF",
           }}
         >

components/home/InfiniteScrollingCollectionList.tv.tsx

@@ -21,6 +21,7 @@ import MoviePoster, {
 } from "@/components/posters/MoviePoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
 import { Colors } from "@/constants/Colors";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
 import ContinueWatchingPoster, {
@@ -54,12 +55,19 @@ const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => {
     <View style={{ marginTop: 12, flexDirection: "column" }}>
       {item.Type === "Episode" ? (
         <>
-          <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
+          <Text
+            numberOfLines={1}
+            style={{ fontSize: TVTypography.callout, color: "#FFFFFF" }}
+          >
             {item.Name}
           </Text>
           <Text
             numberOfLines={1}
-            style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}
+            style={{
+              fontSize: TVTypography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
           >
             {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
             {" - "}
@@ -68,10 +76,19 @@ const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => {
         </>
       ) : (
         <>
-          <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
+          <Text
+            numberOfLines={1}
+            style={{ fontSize: TVTypography.callout, color: "#FFFFFF" }}
+          >
             {item.Name}
           </Text>
-          <Text style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}>
+          <Text
+            style={{
+              fontSize: TVTypography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
+          >
             {item.ProductionYear}
           </Text>
         </>
@@ -119,7 +136,13 @@ const TVSeeAllCard: React.FC<{
             color='white'
             style={{ marginBottom: 8 }}
           />
-          <Text style={{ fontSize: 18, color: "#FFFFFF", fontWeight: "600" }}>
+          <Text
+            style={{
+              fontSize: TVTypography.callout,
+              color: "#FFFFFF",
+              fontWeight: "600",
+            }}
+          >
             {t("common.seeAll", { defaultValue: "See all" })}
           </Text>
         </View>
@@ -369,7 +392,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
       {/* Section Header */}
       <Text
         style={{
-          fontSize: 22,
+          fontSize: TVTypography.body,
           fontWeight: "600",
           color: "#FFFFFF",
           marginBottom: 16,
@@ -381,7 +404,11 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
 
       {isLoading === false && allItems.length === 0 && (
         <Text
-          style={{ color: "#737373", fontSize: 16, marginLeft: SCALE_PADDING }}
+          style={{
+            color: "#737373",
+            fontSize: TVTypography.callout,
+            marginLeft: SCALE_PADDING,
+          }}
         >
           {t("home.no_items")}
         </Text>
@@ -420,7 +447,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
                     color: "#262626",
                     backgroundColor: "#262626",
                     borderRadius: 6,
-                    fontSize: 16,
+                    fontSize: TVTypography.callout,
                   }}
                   numberOfLines={1}
                 >

components/home/StreamystatsPromotedWatchlists.tv.tsx

@@ -16,6 +16,7 @@ import MoviePoster, {
 } from "@/components/posters/MoviePoster.tv";
 import SeriesPoster from "@/components/posters/SeriesPoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -28,10 +29,19 @@ const SCALE_PADDING = 20;
 const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   return (
     <View style={{ marginTop: 12, flexDirection: "column" }}>
-      <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
+      <Text
+        numberOfLines={1}
+        style={{ fontSize: TVTypography.callout, color: "#FFFFFF" }}
+      >
         {item.Name}
       </Text>
-      <Text style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}>
+      <Text
+        style={{
+          fontSize: TVTypography.callout,
+          color: "#9CA3AF",
+          marginTop: 2,
+        }}
+      >
         {item.ProductionYear}
       </Text>
     </View>
@@ -145,7 +155,7 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
     <View style={{ overflow: "visible" }} {...props}>
       <Text
         style={{
-          fontSize: 22,
+          fontSize: TVTypography.body,
           fontWeight: "600",
           color: "#FFFFFF",
           marginBottom: 16,

components/home/StreamystatsRecommendations.tv.tsx

@@ -16,6 +16,7 @@ import MoviePoster, {
 } from "@/components/posters/MoviePoster.tv";
 import SeriesPoster from "@/components/posters/SeriesPoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -36,10 +37,19 @@ interface Props extends ViewProps {
 const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   return (
     <View style={{ marginTop: 12, flexDirection: "column" }}>
-      <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
+      <Text
+        numberOfLines={1}
+        style={{ fontSize: TVTypography.callout, color: "#FFFFFF" }}
+      >
         {item.Name}
       </Text>
-      <Text style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}>
+      <Text
+        style={{
+          fontSize: TVTypography.callout,
+          color: "#9CA3AF",
+          marginTop: 2,
+        }}
+      >
         {item.ProductionYear}
       </Text>
     </View>
@@ -208,7 +218,7 @@ export const StreamystatsRecommendations: React.FC<Props> = ({
     <View style={{ overflow: "visible" }} {...props}>
       <Text
         style={{
-          fontSize: 22,
+          fontSize: TVTypography.body,
           fontWeight: "600",
           color: "#FFFFFF",
           marginBottom: 16,

components/series/TVEpisodeCard.tsx

@@ -7,6 +7,7 @@ import { ProgressBar } from "@/components/common/ProgressBar";
 import { Text } from "@/components/common/Text";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
 import { WatchedIndicator } from "@/components/WatchedIndicator";
+import { TVTypography } from "@/constants/TVTypography";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { runtimeTicksToMinutes } from "@/utils/time";
 
@@ -75,11 +76,9 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
           style={{
             width: TV_EPISODE_WIDTH,
             aspectRatio: 16 / 9,
-            borderRadius: 12,
+            borderRadius: 24,
             overflow: "hidden",
             backgroundColor: "#1a1a1a",
-            borderWidth: 1,
-            borderColor: "#262626",
           }}
         >
           {thumbnailUrl ? (
@@ -109,7 +108,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
           {episodeLabel && (
             <Text
               style={{
-                fontSize: 14,
+                fontSize: TVTypography.callout,
                 color: "#9CA3AF",
                 fontWeight: "500",
               }}
@@ -119,15 +118,23 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
           )}
           {duration && (
             <>
-              <Text style={{ color: "#6B7280", fontSize: 14 }}>•</Text>
+              <Text
-              <Text style={{ fontSize: 14, color: "#9CA3AF" }}>{duration}</Text>
+                style={{ color: "#6B7280", fontSize: TVTypography.callout }}
+              >
+                •
+              </Text>
+              <Text
+                style={{ fontSize: TVTypography.callout, color: "#9CA3AF" }}
+              >
+                {duration}
+              </Text>
             </>
           )}
         </View>
         <Text
           numberOfLines={2}
           style={{
-            fontSize: 16,
+            fontSize: TVTypography.callout,
             color: "#FFFFFF",
             marginTop: 4,
             fontWeight: "500",

components/series/TVSeriesHeader.tsx

@@ -1,5 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { BlurView } from "expo-blur";
 import { Image } from "expo-image";
 import { useAtomValue } from "jotai";
 import React, { useMemo } from "react";
@@ -7,6 +8,7 @@ import { Dimensions, View } from "react-native";
 import { Badge } from "@/components/Badge";
 import { Text } from "@/components/common/Text";
 import { GenreTags } from "@/components/GenreTags";
+import { TVTypography } from "@/constants/TVTypography";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 
@@ -56,7 +58,7 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
       ) : (
         <Text
           style={{
-            fontSize: 52,
+            fontSize: TVTypography.display,
             fontWeight: "bold",
             color: "#FFFFFF",
             marginBottom: 16,
@@ -78,7 +80,9 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
         }}
       >
         {yearString && (
-          <Text style={{ color: "#9CA3AF", fontSize: 18 }}>{yearString}</Text>
+          <Text style={{ color: "#9CA3AF", fontSize: TVTypography.body }}>
+            {yearString}
+          </Text>
         )}
         {item.OfficialRating && (
           <Badge text={item.OfficialRating} variant='gray' />
@@ -101,17 +105,34 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
 
       {/* Overview */}
       {item.Overview && (
-        <Text
+        <BlurView
+          intensity={10}
+          tint='light'
           style={{
-            fontSize: 18,
+            borderRadius: 8,
-            color: "#D1D5DB",
+            overflow: "hidden",
-            lineHeight: 28,
             maxWidth: SCREEN_WIDTH * 0.45,
+            alignSelf: "flex-start",
           }}
-          numberOfLines={4}
         >
-          {item.Overview}
+          <View
-        </Text>
+            style={{
+              padding: 16,
+              backgroundColor: "rgba(0,0,0,0.3)",
+            }}
+          >
+            <Text
+              style={{
+                fontSize: TVTypography.body,
+                color: "#E5E7EB",
+                lineHeight: 32,
+              }}
+              numberOfLines={4}
+            >
+              {item.Overview}
+            </Text>
+          </View>
+        </BlurView>
       )}
     </View>
   );

components/series/TVSeriesPage.tsx

@@ -32,6 +32,7 @@ import {
   TVEpisodeCard,
 } from "@/components/series/TVEpisodeCard";
 import { TVSeriesHeader } from "@/components/series/TVSeriesHeader";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import { useDownload } from "@/providers/DownloadProvider";
@@ -146,7 +147,7 @@ const TVSeasonButton: React.FC<{
   const animateTo = (v: number) =>
     Animated.timing(scale, {
       toValue: v,
-      duration: 120,
+      duration: 150,
       easing: Easing.out(Easing.quad),
       useNativeDriver: true,
     }).start();
@@ -156,7 +157,7 @@ const TVSeasonButton: React.FC<{
       onPress={onPress}
       onFocus={() => {
         setFocused(true);
-        animateTo(1.02);
+        animateTo(1.05);
       }}
       onBlur={() => {
         setFocused(false);
@@ -170,33 +171,34 @@ const TVSeasonButton: React.FC<{
           transform: [{ scale }],
           shadowColor: "#fff",
           shadowOffset: { width: 0, height: 0 },
-          shadowOpacity: focused ? 0.4 : 0,
+          shadowOpacity: focused ? 0.6 : 0,
-          shadowRadius: focused ? 12 : 0,
+          shadowRadius: focused ? 20 : 0,
         }}
       >
         <View
           style={{
             backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.1)",
-            borderRadius: 10,
+            borderRadius: 12,
-            paddingVertical: 14,
+            paddingVertical: 18,
-            paddingHorizontal: 20,
+            paddingHorizontal: 32,
             flexDirection: "row",
             alignItems: "center",
-            gap: 8,
+            justifyContent: "center",
+            gap: 10,
           }}
         >
           <Text
             style={{
-              fontSize: 16,
+              fontSize: TVTypography.body,
               color: focused ? "#000" : "#FFFFFF",
-              fontWeight: "500",
+              fontWeight: "bold",
             }}
           >
             {seasonName}
           </Text>
           <Ionicons
             name='chevron-down'
-            size={18}
+            size={28}
             color={focused ? "#000" : "#FFFFFF"}
           />
         </View>
@@ -572,7 +574,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
                 />
                 <Text
                   style={{
-                    fontSize: 20,
+                    fontSize: TVTypography.body,
                     fontWeight: "bold",
                     color: "#000000",
                   }}
@@ -595,7 +597,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
         <View style={{ marginTop: 40, overflow: "visible" }}>
           <Text
             style={{
-              fontSize: 22,
+              fontSize: TVTypography.body,
               fontWeight: "600",
               color: "#FFFFFF",
               marginBottom: 16,
@@ -626,7 +628,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
               <Text
                 style={{
                   color: "#737373",
-                  fontSize: 16,
+                  fontSize: TVTypography.callout,
                   marginLeft: SCALE_PADDING,
                 }}
               >

components/tv/TVActorCard.tsx

@@ -3,6 +3,7 @@ import { Image } from "expo-image";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
 
 export interface TVActorCardProps {
@@ -22,7 +23,7 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
       useTVFocusAnimation({ scaleAmount: 1.08 });
 
     const imageUrl = person.Id
-      ? `${apiBasePath}/Items/${person.Id}/Images/Primary?fillWidth=200&fillHeight=200&quality=90`
+      ? `${apiBasePath}/Items/${person.Id}/Images/Primary?fillWidth=280&fillHeight=280&quality=90`
       : null;
 
     return (
@@ -38,7 +39,7 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
             animatedStyle,
             {
               alignItems: "center",
-              width: 120,
+              width: 160,
               shadowColor: "#fff",
               shadowOffset: { width: 0, height: 0 },
               shadowOpacity: focused ? 0.5 : 0,
@@ -48,12 +49,12 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
         >
           <View
             style={{
-              width: 100,
+              width: 140,
-              height: 100,
+              height: 140,
-              borderRadius: 50,
+              borderRadius: 70,
               overflow: "hidden",
               backgroundColor: "rgba(255,255,255,0.1)",
-              marginBottom: 12,
+              marginBottom: 14,
               borderWidth: focused ? 3 : 0,
               borderColor: "#fff",
             }}
@@ -74,7 +75,7 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
               >
                 <Ionicons
                   name='person'
-                  size={40}
+                  size={56}
                   color='rgba(255,255,255,0.4)'
                 />
               </View>
@@ -83,11 +84,11 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
 
           <Text
             style={{
-              fontSize: 14,
+              fontSize: TVTypography.body,
               fontWeight: "600",
               color: focused ? "#fff" : "rgba(255,255,255,0.9)",
               textAlign: "center",
-              marginBottom: 2,
+              marginBottom: 4,
             }}
             numberOfLines={1}
           >
@@ -97,7 +98,7 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
           {person.Role && (
             <Text
               style={{
-                fontSize: 12,
+                fontSize: TVTypography.callout,
                 color: focused
                   ? "rgba(255,255,255,0.8)"
                   : "rgba(255,255,255,0.5)",

components/tv/TVCancelButton.tsx

@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
 
 export interface TVCancelButtonProps {
@@ -47,7 +48,7 @@ export const TVCancelButton: React.FC<TVCancelButtonProps> = ({
         />
         <Text
           style={{
-            fontSize: 16,
+            fontSize: TVTypography.callout,
             color: focused ? "#000" : "rgba(255,255,255,0.8)",
             fontWeight: "500",
           }}

components/tv/TVCastCrewText.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 
 export interface TVCastCrewTextProps {
   director?: BaseItemPerson | null;
@@ -23,7 +24,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
       <View style={{ marginBottom: 32 }}>
         <Text
           style={{
-            fontSize: 22,
+            fontSize: TVTypography.heading,
             fontWeight: "600",
             color: "#FFFFFF",
             marginBottom: 16,
@@ -36,7 +37,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
             <View>
               <Text
                 style={{
-                  fontSize: 14,
+                  fontSize: TVTypography.callout,
                   color: "#6B7280",
                   textTransform: "uppercase",
                   letterSpacing: 1,
@@ -45,7 +46,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
               >
                 {t("item_card.director")}
               </Text>
-              <Text style={{ fontSize: 18, color: "#FFFFFF" }}>
+              <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
                 {director.Name}
               </Text>
             </View>
@@ -54,7 +55,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
             <View style={{ flex: 1 }}>
               <Text
                 style={{
-                  fontSize: 14,
+                  fontSize: TVTypography.callout,
                   color: "#6B7280",
                   textTransform: "uppercase",
                   letterSpacing: 1,
@@ -63,7 +64,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
               >
                 {t("item_card.cast")}
               </Text>
-              <Text style={{ fontSize: 18, color: "#FFFFFF" }}>
+              <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
                 {cast.map((c) => c.Name).join(", ")}
               </Text>
             </View>

components/tv/TVCastSection.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, TVFocusGuideView, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { TVActorCard } from "./TVActorCard";
 
 export interface TVCastSectionProps {
@@ -30,13 +31,13 @@ export const TVCastSection: React.FC<TVCastSectionProps> = React.memo(
     }
 
     return (
-      <View style={{ marginBottom: 32 }}>
+      <View style={{ marginBottom: 40 }}>
         <Text
           style={{
-            fontSize: 22,
+            fontSize: TVTypography.heading,
             fontWeight: "600",
             color: "#FFFFFF",
-            marginBottom: 20,
+            marginBottom: 24,
           }}
         >
           {t("item_card.cast")}
@@ -54,8 +55,8 @@ export const TVCastSection: React.FC<TVCastSectionProps> = React.memo(
           style={{ marginHorizontal: -80, overflow: "visible" }}
           contentContainerStyle={{
             paddingHorizontal: 80,
-            paddingVertical: 12,
+            paddingVertical: 16,
-            gap: 20,
+            gap: 28,
           }}
         >
           {cast.map((person, index) => (

components/tv/TVLanguageCard.tsx

@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
 
 export interface TVLanguageCardProps {
@@ -81,11 +82,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
   },
   languageCardText: {
-    fontSize: 15,
+    fontSize: TVTypography.callout,
     fontWeight: "500",
   },
   languageCardCode: {
-    fontSize: 11,
+    fontSize: TVTypography.callout,
     marginTop: 2,
   },
   checkmark: {

components/tv/TVMetadataBadges.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { View } from "react-native";
 import { Badge } from "@/components/Badge";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 
 export interface TVMetadataBadgesProps {
   year?: number | null;
@@ -19,15 +20,19 @@ export const TVMetadataBadges: React.FC<TVMetadataBadgesProps> = React.memo(
           flexDirection: "row",
           alignItems: "center",
           flexWrap: "wrap",
-          gap: 12,
+          gap: 16,
-          marginBottom: 20,
+          marginBottom: 24,
         }}
       >
         {year != null && (
-          <Text style={{ color: "#9CA3AF", fontSize: 18 }}>{year}</Text>
+          <Text style={{ color: "white", fontSize: TVTypography.body }}>
+            {year}
+          </Text>
         )}
         {duration && (
-          <Text style={{ color: "#9CA3AF", fontSize: 18 }}>{duration}</Text>
+          <Text style={{ color: "white", fontSize: TVTypography.body }}>
+            {duration}
+          </Text>
         )}
         {officialRating && <Badge text={officialRating} variant='gray' />}
         {communityRating != null && (

components/tv/TVNextEpisodeCountdown.tsx

@@ -13,6 +13,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
 export interface TVNextEpisodeCountdownProps {
@@ -129,19 +130,19 @@ const styles = StyleSheet.create({
     width: 280,
   },
   label: {
-    fontSize: 13,
+    fontSize: TVTypography.callout,
     color: "rgba(255,255,255,0.5)",
     textTransform: "uppercase",
     letterSpacing: 1,
     marginBottom: 4,
   },
   seriesName: {
-    fontSize: 16,
+    fontSize: TVTypography.callout,
     color: "rgba(255,255,255,0.7)",
     marginBottom: 2,
   },
   episodeInfo: {
-    fontSize: 20,
+    fontSize: TVTypography.body,
     color: "#fff",
     fontWeight: "600",
     marginBottom: 12,

components/tv/TVOptionButton.tsx

@@ -1,6 +1,8 @@
+import { BlurView } from "expo-blur";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
 
 export interface TVOptionButtonProps {
@@ -34,36 +36,77 @@ export const TVOptionButton = React.forwardRef<View, TVOptionButtonProps>(
             },
           ]}
         >
-          <View
+          {focused ? (
-            style={{
+            <View
-              backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.1)",
-              borderRadius: 10,
-              paddingVertical: 10,
-              paddingHorizontal: 16,
-              flexDirection: "row",
-              alignItems: "center",
-              gap: 8,
-            }}
-          >
-            <Text
               style={{
-                fontSize: 14,
+                backgroundColor: "#fff",
-                color: focused ? "#444" : "#bbb",
+                borderRadius: 8,
+                paddingVertical: 10,
+                paddingHorizontal: 16,
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 8,
               }}
             >
-              {label}
+              <Text
-            </Text>
+                style={{
-            <Text
+                  fontSize: TVTypography.callout,
+                  color: "#444",
+                }}
+              >
+                {label}
+              </Text>
+              <Text
+                style={{
+                  fontSize: TVTypography.callout,
+                  color: "#000",
+                  fontWeight: "500",
+                }}
+                numberOfLines={1}
+              >
+                {value}
+              </Text>
+            </View>
+          ) : (
+            <BlurView
+              intensity={10}
+              tint='light'
               style={{
-                fontSize: 14,
+                borderRadius: 8,
-                color: focused ? "#000" : "#FFFFFF",
+                overflow: "hidden",
-                fontWeight: "500",
               }}
-              numberOfLines={1}
             >
-              {value}
+              <View
-            </Text>
+                style={{
-          </View>
+                  backgroundColor: "rgba(0,0,0,0.3)",
+                  paddingVertical: 10,
+                  paddingHorizontal: 16,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 8,
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize: TVTypography.callout,
+                    color: "#bbb",
+                  }}
+                >
+                  {label}
+                </Text>
+                <Text
+                  style={{
+                    fontSize: TVTypography.callout,
+                    color: "#E5E7EB",
+                    fontWeight: "500",
+                  }}
+                  numberOfLines={1}
+                >
+                  {value}
+                </Text>
+              </View>
+            </BlurView>
+          )}
         </Animated.View>
       </Pressable>
     );

components/tv/TVOptionCard.tsx

@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
 
 export interface TVOptionCardProps {
@@ -58,7 +59,7 @@ export const TVOptionCard = React.forwardRef<View, TVOptionCardProps>(
         >
           <Text
             style={{
-              fontSize: 16,
+              fontSize: TVTypography.callout,
               color: focused ? "#000" : "#fff",
               fontWeight: focused || selected ? "600" : "400",
               textAlign: "center",
@@ -70,7 +71,7 @@ export const TVOptionCard = React.forwardRef<View, TVOptionCardProps>(
           {sublabel && (
             <Text
               style={{
-                fontSize: 12,
+                fontSize: TVTypography.callout,
                 color: focused ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.5)",
                 textAlign: "center",
                 marginTop: 2,

components/tv/TVOptionSelector.tsx

@@ -9,6 +9,7 @@ import {
   View,
 } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { TVCancelButton } from "./TVCancelButton";
 import { TVOptionCard } from "./TVOptionCard";
 
@@ -175,7 +176,7 @@ const styles = StyleSheet.create({
     overflow: "visible",
   },
   title: {
-    fontSize: 18,
+    fontSize: TVTypography.callout,
     fontWeight: "500",
     color: "rgba(255,255,255,0.6)",
     marginBottom: 16,

components/tv/TVSeriesNavigation.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { TVSeriesSeasonCard } from "./TVSeriesSeasonCard";
 
 export interface TVSeriesNavigationProps {
@@ -26,10 +27,10 @@ export const TVSeriesNavigation: React.FC<TVSeriesNavigationProps> = React.memo(
       <View style={{ marginBottom: 32 }}>
         <Text
           style={{
-            fontSize: 22,
+            fontSize: TVTypography.heading,
             fontWeight: "600",
             color: "#FFFFFF",
-            marginBottom: 20,
+            marginBottom: 24,
           }}
         >
           {t("item_card.from_this_series") || "From this Series"}

components/tv/TVSeriesSeasonCard.tsx

@@ -3,6 +3,7 @@ import { Image } from "expo-image";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
 
 export interface TVSeriesSeasonCardProps {
@@ -34,22 +35,22 @@ export const TVSeriesSeasonCard: React.FC<TVSeriesSeasonCardProps> = ({
         style={[
           animatedStyle,
           {
-            width: 140,
+            width: 210,
             shadowColor: "#fff",
             shadowOffset: { width: 0, height: 0 },
             shadowOpacity: focused ? 0.5 : 0,
-            shadowRadius: focused ? 16 : 0,
+            shadowRadius: focused ? 20 : 0,
           },
         ]}
       >
         <View
           style={{
-            width: 140,
+            width: 210,
-            aspectRatio: 2 / 3,
+            aspectRatio: 10 / 15,
-            borderRadius: 12,
+            borderRadius: 24,
             overflow: "hidden",
             backgroundColor: "rgba(255,255,255,0.1)",
-            marginBottom: 12,
+            marginBottom: 14,
             borderWidth: focused ? 3 : 0,
             borderColor: "#fff",
           }}
@@ -68,18 +69,18 @@ export const TVSeriesSeasonCard: React.FC<TVSeriesSeasonCardProps> = ({
                 alignItems: "center",
               }}
             >
-              <Ionicons name='film' size={40} color='rgba(255,255,255,0.4)' />
+              <Ionicons name='film' size={56} color='rgba(255,255,255,0.4)' />
             </View>
           )}
         </View>
 
         <Text
           style={{
-            fontSize: 14,
+            fontSize: TVTypography.body,
             fontWeight: "600",
             color: focused ? "#fff" : "rgba(255,255,255,0.9)",
             textAlign: "center",
-            marginBottom: 2,
+            marginBottom: 4,
           }}
           numberOfLines={2}
         >
@@ -89,7 +90,7 @@ export const TVSeriesSeasonCard: React.FC<TVSeriesSeasonCardProps> = ({
         {subtitle && (
           <Text
             style={{
-              fontSize: 12,
+              fontSize: TVTypography.callout,
               color: focused
                 ? "rgba(255,255,255,0.8)"
                 : "rgba(255,255,255,0.5)",

components/tv/TVSubtitleResultCard.tsx

@@ -8,6 +8,7 @@ import {
   View,
 } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import type { SubtitleSearchResult } from "@/hooks/useRemoteSubtitles";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
 
@@ -212,13 +213,13 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   providerText: {
-    fontSize: 11,
+    fontSize: TVTypography.callout,
     fontWeight: "600",
     textTransform: "uppercase",
     letterSpacing: 0.5,
   },
   resultName: {
-    fontSize: 14,
+    fontSize: TVTypography.callout,
     fontWeight: "500",
     marginBottom: 8,
     lineHeight: 18,
@@ -230,7 +231,7 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   resultMetaText: {
-    fontSize: 12,
+    fontSize: TVTypography.callout,
   },
   ratingContainer: {
     flexDirection: "row",
@@ -253,7 +254,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
   flagText: {
-    fontSize: 10,
+    fontSize: TVTypography.callout,
     fontWeight: "600",
     color: "#fff",
   },

components/tv/TVTabButton.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Animated, Pressable } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
 
 export interface TVTabButtonProps {
@@ -55,7 +56,7 @@ export const TVTabButton: React.FC<TVTabButtonProps> = ({
       >
         <Text
           style={{
-            fontSize: 16,
+            fontSize: TVTypography.callout,
             color: focused ? "#000" : "#fff",
             fontWeight: focused || active ? "600" : "400",
           }}

components/tv/TVTechnicalDetails.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 
 export interface TVTechnicalDetailsProps {
   mediaStreams: MediaStream[];
@@ -23,10 +24,10 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
       <View style={{ marginBottom: 32 }}>
         <Text
           style={{
-            fontSize: 22,
+            fontSize: TVTypography.heading,
             fontWeight: "600",
             color: "#FFFFFF",
-            marginBottom: 16,
+            marginBottom: 20,
           }}
         >
           {t("item_card.technical_details")}
@@ -36,7 +37,7 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
             <View>
               <Text
                 style={{
-                  fontSize: 14,
+                  fontSize: TVTypography.callout,
                   color: "#6B7280",
                   textTransform: "uppercase",
                   letterSpacing: 1,
@@ -45,7 +46,7 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
               >
                 Video
               </Text>
-              <Text style={{ fontSize: 18, color: "#FFFFFF" }}>
+              <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
                 {videoStream.DisplayTitle ||
                   `${videoStream.Codec?.toUpperCase()} ${videoStream.Width}x${videoStream.Height}`}
               </Text>
@@ -55,7 +56,7 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
             <View>
               <Text
                 style={{
-                  fontSize: 14,
+                  fontSize: TVTypography.callout,
                   color: "#6B7280",
                   textTransform: "uppercase",
                   letterSpacing: 1,
@@ -64,7 +65,7 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
               >
                 Audio
               </Text>
-              <Text style={{ fontSize: 18, color: "#FFFFFF" }}>
+              <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
                 {audioStream.DisplayTitle ||
                   `${audioStream.Codec?.toUpperCase()} ${audioStream.Channels}ch`}
               </Text>

components/tv/TVTrackCard.tsx

@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";
 
 export interface TVTrackCardProps {
@@ -86,11 +87,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
   },
   trackCardText: {
-    fontSize: 16,
+    fontSize: TVTypography.callout,
     textAlign: "center",
   },
   trackCardSublabel: {
-    fontSize: 12,
+    fontSize: TVTypography.callout,
     marginTop: 2,
   },
   checkmark: {

components/tv/settings/TVLogoutButton.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVLogoutButtonProps {
@@ -48,7 +49,7 @@ export const TVLogoutButton: React.FC<TVLogoutButtonProps> = ({
         >
           <Text
             style={{
-              fontSize: 20,
+              fontSize: TVTypography.body,
               fontWeight: "bold",
               color: "#FFFFFF",
             }}

components/tv/settings/TVSectionHeader.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 
 export interface TVSectionHeaderProps {
   title: string;
@@ -8,7 +9,7 @@ export interface TVSectionHeaderProps {
 export const TVSectionHeader: React.FC<TVSectionHeaderProps> = ({ title }) => (
   <Text
     style={{
-      fontSize: 16,
+      fontSize: TVTypography.callout,
       fontWeight: "600",
       color: "#9CA3AF",
       textTransform: "uppercase",

components/tv/settings/TVSettingsOptionButton.tsx

@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsOptionButtonProps {
@@ -48,11 +49,13 @@ export const TVSettingsOptionButton: React.FC<TVSettingsOptionButtonProps> = ({
           },
         ]}
       >
-        <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+          {label}
+        </Text>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <Text
             style={{
-              fontSize: 18,
+              fontSize: TVTypography.callout,
               color: "#9CA3AF",
               marginRight: 12,
             }}

components/tv/settings/TVSettingsRow.tsx

@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsRowProps {
@@ -50,11 +51,13 @@ export const TVSettingsRow: React.FC<TVSettingsRowProps> = ({
           },
         ]}
       >
-        <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+          {label}
+        </Text>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <Text
             style={{
-              fontSize: 18,
+              fontSize: TVTypography.callout,
               color: "#9CA3AF",
               marginRight: showChevron ? 12 : 0,
             }}

components/tv/settings/TVSettingsStepper.tsx

@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsStepperProps {
@@ -53,7 +54,9 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
         focusable={!disabled}
       >
         <Animated.View style={labelAnim.animatedStyle}>
-          <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+          <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+            {label}
+          </Text>
         </Animated.View>
       </Pressable>
       <View style={{ flexDirection: "row", alignItems: "center" }}>
@@ -86,7 +89,7 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
         </Pressable>
         <Text
           style={{
-            fontSize: 18,
+            fontSize: TVTypography.callout,
             color: "#FFFFFF",
             minWidth: 60,
             textAlign: "center",

components/tv/settings/TVSettingsTextInput.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from "react";
 import { Animated, Pressable, TextInput } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsTextInputProps {
@@ -53,7 +54,13 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
           },
         ]}
       >
-        <Text style={{ fontSize: 16, color: "#9CA3AF", marginBottom: 8 }}>
+        <Text
+          style={{
+            fontSize: TVTypography.callout,
+            color: "#9CA3AF",
+            marginBottom: 8,
+          }}
+        >
           {label}
         </Text>
         <TextInput
@@ -67,7 +74,7 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
           autoCapitalize='none'
           autoCorrect={false}
           style={{
-            fontSize: 18,
+            fontSize: TVTypography.body,
             color: "#FFFFFF",
             backgroundColor: "rgba(255, 255, 255, 0.05)",
             borderRadius: 8,

components/tv/settings/TVSettingsToggle.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsToggleProps {
@@ -47,7 +48,9 @@ export const TVSettingsToggle: React.FC<TVSettingsToggleProps> = ({
           },
         ]}
       >
-        <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+          {label}
+        </Text>
         <View
           style={{
             width: 56,

constants/TVTypography.ts

@@ -0,0 +1,25 @@
+/**
+ * TV Typography Scale
+ *
+ * Consistent text sizes for TV interface components.
+ * These sizes are optimized for TV viewing distance.
+ */
+
+export const TVTypography = {
+  /** Hero titles, movie/show names - 70px */
+  display: 70,
+
+  /** Episode series name, major headings - 42px */
+  title: 42,
+
+  /** Section headers (Cast, Technical Details, From this Series) - 32px */
+  heading: 32,
+
+  /** Overview, actor names, card titles, metadata - 20px */
+  body: 20,
+
+  /** Secondary text, labels, subtitles - 16px */
+  callout: 16,
+} as const;
+
+export type TVTypographyKey = keyof typeof TVTypography;