fix(tv): font sizes

2026-01-20 18:18:04 +00:00 · 2026-01-19 20:01:00 +01:00
parent f4445c4152
commit 2b36d4bc76
35 changed files with 437 additions and 167 deletions
--- a/components/Badge.tsx
+++ b/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
-  const isTV = Platform.isTV;
+  // On TV, use BlurView for consistent styling
+  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
-            ? "rgba(255,255,255,0.1)"
-            : variant === "purple"
-              ? "#9333ea"
-              : "#262626",
+          backgroundColor: variant === "purple" ? "#9333ea" : "#262626",
        },
        props.style,
      ]}
--- a/components/GenreTags.tsx
+++ b/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) => (
--- a/components/ItemContent.tv.tsx
+++ b/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,
-                      color: "#9CA3AF",
-                      marginTop: 4,
+                      fontSize: TVTypography.body,
+                      color: "white",
+                      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,
-                    color: "#D1D5DB",
-                    lineHeight: 28,
+                    borderRadius: 8,
+                    overflow: "hidden",
                    maxWidth: SCREEN_WIDTH * 0.45,
                    marginBottom: 32,
                  }}
-                  numberOfLines={4}
                >
-                  {item.Overview}
-                </Text>
+                  <View
+                    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>
--- a/components/home/Favorites.tv.tsx
+++ b/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",
          }}
        >
--- a/components/home/Home.tv.tsx
+++ b/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",
          }}
        >
--- a/components/home/InfiniteScrollingCollectionList.tv.tsx
+++ b/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}
                >
--- a/components/home/StreamystatsPromotedWatchlists.tv.tsx
+++ b/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,
--- a/components/home/StreamystatsRecommendations.tv.tsx
+++ b/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,
--- a/components/series/TVEpisodeCard.tsx
+++ b/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 style={{ fontSize: 14, color: "#9CA3AF" }}>{duration}</Text>
+              <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",
--- a/components/series/TVSeriesHeader.tsx
+++ b/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,
-            color: "#D1D5DB",
-            lineHeight: 28,
+            borderRadius: 8,
+            overflow: "hidden",
            maxWidth: SCREEN_WIDTH * 0.45,
+            alignSelf: "flex-start",
          }}
-          numberOfLines={4}
        >
-          {item.Overview}
-        </Text>
+          <View
+            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>
  );
--- a/components/series/TVSeriesPage.tsx
+++ b/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,
-          shadowRadius: focused ? 12 : 0,
+          shadowOpacity: focused ? 0.6 : 0,
+          shadowRadius: focused ? 20 : 0,
        }}
      >
        <View
          style={{
            backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.1)",
-            borderRadius: 10,
-            paddingVertical: 14,
-            paddingHorizontal: 20,
+            borderRadius: 12,
+            paddingVertical: 18,
+            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,
                }}
              >
--- a/components/tv/TVActorCard.tsx
+++ b/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,
-              height: 100,
-              borderRadius: 50,
+              width: 140,
+              height: 140,
+              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)",
--- a/components/tv/TVCancelButton.tsx
+++ b/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",
          }}
--- a/components/tv/TVCastCrewText.tsx
+++ b/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>
--- a/components/tv/TVCastSection.tsx
+++ b/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,
-            gap: 20,
+            paddingVertical: 16,
+            gap: 28,
          }}
        >
          {cast.map((person, index) => (
--- a/components/tv/TVLanguageCard.tsx
+++ b/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: {
--- a/components/tv/TVMetadataBadges.tsx
+++ b/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,
-          marginBottom: 20,
+          gap: 16,
+          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 && (
--- a/components/tv/TVNextEpisodeCountdown.tsx
+++ b/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,
--- a/components/tv/TVOptionButton.tsx
+++ b/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
-            style={{
-              backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.1)",
-              borderRadius: 10,
-              paddingVertical: 10,
-              paddingHorizontal: 16,
-              flexDirection: "row",
-              alignItems: "center",
-              gap: 8,
-            }}
-          >
-            <Text
+          {focused ? (
+            <View
              style={{
-                fontSize: 14,
-                color: focused ? "#444" : "#bbb",
+                backgroundColor: "#fff",
+                borderRadius: 8,
+                paddingVertical: 10,
+                paddingHorizontal: 16,
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 8,
              }}
            >
-              {label}
-            </Text>
-            <Text
+              <Text
+                style={{
+                  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,
-                color: focused ? "#000" : "#FFFFFF",
-                fontWeight: "500",
+                borderRadius: 8,
+                overflow: "hidden",
              }}
-              numberOfLines={1}
            >
-              {value}
-            </Text>
-          </View>
+              <View
+                style={{
+                  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>
    );
--- a/components/tv/TVOptionCard.tsx
+++ b/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,
--- a/components/tv/TVOptionSelector.tsx
+++ b/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,
--- a/components/tv/TVSeriesNavigation.tsx
+++ b/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"}
--- a/components/tv/TVSeriesSeasonCard.tsx
+++ b/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,
-            aspectRatio: 2 / 3,
-            borderRadius: 12,
+            width: 210,
+            aspectRatio: 10 / 15,
+            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)",
--- a/components/tv/TVSubtitleResultCard.tsx
+++ b/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",
  },
--- a/components/tv/TVTabButton.tsx
+++ b/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",
          }}
--- a/components/tv/TVTechnicalDetails.tsx
+++ b/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>
--- a/components/tv/TVTrackCard.tsx
+++ b/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: {
--- a/components/tv/settings/TVLogoutButton.tsx
+++ b/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",
            }}
--- a/components/tv/settings/TVSectionHeader.tsx
+++ b/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",
--- a/components/tv/settings/TVSettingsOptionButton.tsx
+++ b/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,
            }}
--- a/components/tv/settings/TVSettingsRow.tsx
+++ b/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,
            }}
--- a/components/tv/settings/TVSettingsStepper.tsx
+++ b/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",
--- a/components/tv/settings/TVSettingsTextInput.tsx
+++ b/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,
--- a/components/tv/settings/TVSettingsToggle.tsx
+++ b/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,
--- a/constants/TVTypography.ts
+++ b/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;