4 files changed, 26 insertions, 99 deletions
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index cb2abf1bc..856c237f6 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -6,7 +6,7 @@ import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
 import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
 import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed'
 import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
-import {FeedsTabBar} from '../com/pager/FeedsTabBar'
+import {HomeHeader} from '../com/home/HomeHeader'
 import {Pager, RenderTabBarFnProps, PagerRef} from 'view/com/pager/Pager'
 import {FeedPage} from 'view/com/feeds/FeedPage'
 import {HomeLoggedOutCTA} from '../com/auth/HomeLoggedOutCTA'
@@ -118,7 +118,7 @@ function HomeScreenReady({
   const renderTabBar = React.useCallback(
     (props: RenderTabBarFnProps) => {
       return (
-        <FeedsTabBar
+        <HomeHeader
           key="FEEDS_TAB_BAR"
           selectedPage={props.selectedPage}
           onSelect={props.onSelect}
diff --git a/src/view/screens/PreferencesHomeFeed.tsx b/src/view/screens/PreferencesFollowingFeed.tsx
index 7ad870937..b4acbcd44 100644
--- a/src/view/screens/PreferencesHomeFeed.tsx
+++ b/src/view/screens/PreferencesFollowingFeed.tsx
@@ -78,9 +78,9 @@ function RepliesThresholdInput({
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
-  'PreferencesHomeFeed'
+  'PreferencesFollowingFeed'
 >
-export function PreferencesHomeFeed({navigation}: Props) {
+export function PreferencesFollowingFeed({navigation}: Props) {
   const pal = usePalette('default')
   const {_} = useLingui()
   const {isTabletOrDesktop} = useWebMediaQueries()
@@ -101,14 +101,14 @@ export function PreferencesHomeFeed({navigation}: Props) {
         styles.container,
         isTabletOrDesktop && styles.desktopContainer,
       ]}>
-      <ViewHeader title={_(msg`Home Feed Preferences`)} showOnDesktop />
+      <ViewHeader title={_(msg`Following Feed Preferences`)} showOnDesktop />
       <View
         style={[
           styles.titleSection,
           isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20},
         ]}>
         <Text type="xl" style={[pal.textLight, styles.description]}>
-          <Trans>Fine-tune the content you see on your home screen.</Trans>
+          <Trans>Fine-tune the content you see on your Following feed.</Trans>
         </Text>
       </View>
 
@@ -260,7 +260,7 @@ export function PreferencesHomeFeed({navigation}: Props) {
             <Text style={[pal.text, s.pb10]}>
               <Trans>
                 Set this setting to "Yes" to show samples of your saved feeds in
-                your following feed. This is an experimental feature.
+                your Following feed. This is an experimental feature.
               </Trans>
             </Text>
             <ToggleButton
diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx
index e2ddd377e..7a725a668 100644
--- a/src/view/screens/Settings/index.tsx
+++ b/src/view/screens/Settings/index.tsx
@@ -241,8 +241,8 @@ export function SettingsScreen({}: Props) {
     Toast.show(_(msg`Copied build version to clipboard`))
   }, [_])
 
-  const openHomeFeedPreferences = React.useCallback(() => {
-    navigation.navigate('PreferencesHomeFeed')
+  const openFollowingFeedPreferences = React.useCallback(() => {
+    navigation.navigate('PreferencesFollowingFeed')
   }, [navigation])
 
   const openThreadsPreferences = React.useCallback(() => {
@@ -529,7 +529,7 @@ export function SettingsScreen({}: Props) {
             pal.view,
             isSwitchingAccounts && styles.dimmed,
           ]}
-          onPress={openHomeFeedPreferences}
+          onPress={openFollowingFeedPreferences}
           accessibilityRole="button"
           accessibilityLabel={_(msg`Home feed preferences`)}
           accessibilityHint={_(msg`Opens the home feed preferences`)}>
@@ -540,7 +540,7 @@ export function SettingsScreen({}: Props) {
             />
           </View>
           <Text type="lg" style={pal.text}>
-            <Trans>Home Feed Preferences</Trans>
+            <Trans>Following Feed Preferences</Trans>
           </Text>
         </TouchableOpacity>
         <TouchableOpacity
diff --git a/src/view/screens/Storybook/Palette.tsx b/src/view/screens/Storybook/Palette.tsx
index b521fe860..900754681 100644
--- a/src/view/screens/Storybook/Palette.tsx
+++ b/src/view/screens/Storybook/Palette.tsx
@@ -2,99 +2,26 @@ import React from 'react'
 import {View} from 'react-native'
 
 import * as tokens from '#/alf/tokens'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 
 export function Palette() {
+  const t = useTheme()
   return (
     <View style={[a.gap_md]}>
       <View style={[a.flex_row, a.gap_md]}>
-        <View
-          style={[a.flex_1, {height: 60, backgroundColor: tokens.color.gray_0}]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_25},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_50},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_100},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_200},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_300},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_400},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_500},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_600},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_700},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_800},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_900},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_950},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_975},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_1000},
-          ]}
-        />
+        <View style={[a.flex_1, t.atoms.bg_contrast_25, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_50, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_100, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_200, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_300, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_400, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_500, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_600, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_700, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_800, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_900, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_950, {height: 60}]} />
+        <View style={[a.flex_1, t.atoms.bg_contrast_975, {height: 60}]} />
       </View>
 
       <View style={[a.flex_row, a.gap_md]}>