diff --git a/frontend/tests/ui/fixtures.ts b/frontend/tests/ui/fixtures.ts
index b56cde74..7713bcd5 100644
--- a/frontend/tests/ui/fixtures.ts
+++ b/frontend/tests/ui/fixtures.ts
@@ -560,7 +560,7 @@ export const adminUsers: AdminUser[] = [
 ];
 
 export const invites: Invite[] = [
-  { id: "inv-1", token: "lmn_7QxV2pKc9RfT4wZb", target_role: "user", max_uses: 5, uses: 2, expires_at: "2026-11-01T00:00:00Z", created_at: "2026-10-01T12:00:00Z" },
+  { id: "inv-1", token: "lmn_7QxV2pKc9RfT4wZb", target_role: "user", max_uses: 5, uses: 2, expires_at: "2099-11-01T00:00:00Z", created_at: "2026-10-01T12:00:00Z" },
   { id: "inv-2", token: "lmn_Hd83LwQe1NvY6sAa", target_role: "admin", max_uses: 1, uses: 0, expires_at: "2026-10-18T00:00:00Z", created_at: "2026-10-09T08:30:00Z" },
   { id: "inv-3", token: "lmn_Zp4mKt7BcXr2Ue9J", target_role: "user", max_uses: 10, uses: 10, expires_at: null, created_at: "2026-05-20T17:45:00Z" },
 ];
diff --git a/mobile/app/(auth)/login.tsx b/mobile/app/(auth)/login.tsx
index 411cb3e7..c600a4a6 100644
--- a/mobile/app/(auth)/login.tsx
+++ b/mobile/app/(auth)/login.tsx
@@ -141,8 +141,8 @@ export default function LoginScreen() {
             opacity: pressed ? 0.6 : 1,
           })}
         >
-          <Text style={{ color: theme.color.accent, fontSize: 15 }}>
-            Have an invite? Create an account
+          <Text style={{ color: theme.color.fgSubtle, fontSize: 15 }}>
+            I have an invite
           </Text>
         </Pressable>
       </ScrollView>
@@ -156,6 +156,7 @@ export default function LoginScreen() {
       >
         <PrimaryButton
           label="Sign in"
+          tone="inverse"
           onPress={onSubmit}
           loading={pending}
           disabled={!username || !password}
diff --git a/mobile/app/(auth)/register.tsx b/mobile/app/(auth)/register.tsx
index af73b340..08fd231f 100644
--- a/mobile/app/(auth)/register.tsx
+++ b/mobile/app/(auth)/register.tsx
@@ -196,7 +196,7 @@ export default function RegisterScreen() {
           accessibilityRole="header"
           style={{
             fontSize: 34,
-            fontWeight: "700",
+            fontWeight: "600",
             color: theme.color.fg,
             letterSpacing: -0.4,
           }}
@@ -236,7 +236,7 @@ export default function RegisterScreen() {
             accessibilityLiveRegion="assertive"
             style={{ fontSize: 16, color: theme.color.danger }}
           >
-            This invite is invalid, expired, revoked, or has no uses remaining.
+            This invite is invalid, expired, revoked, or has no uses remaining
           </Text>
         ) : (
           <Text
@@ -252,7 +252,7 @@ export default function RegisterScreen() {
         <>
           <FormField
             label="Invite token or link"
-            hint="Paste the token or Lumen invite link you received."
+            hint="Paste the token or Lumen invite link you received"
           >
             <FormTextInput
               accessibilityLabel="Invite token or link"
@@ -271,7 +271,7 @@ export default function RegisterScreen() {
           <View accessibilityLiveRegion="assertive">
             <FormError message={inviteInputError} />
           </View>
-          <PrimaryButton
+          <PrimaryButton tone="inverse"
             label="Continue"
             onPress={onContinue}
             disabled={!inviteInput.trim()}
@@ -280,12 +280,12 @@ export default function RegisterScreen() {
       ) : null}
 
       {activeInviteState.status === "invalid" ? (
-        <PrimaryButton label="Enter another invite" onPress={enterAnotherInvite} />
+        <PrimaryButton tone="inverse" label="Enter another invite" onPress={enterAnotherInvite} />
       ) : null}
 
       {activeInviteState.status === "verification-error" ? (
         <>
-          <PrimaryButton
+          <PrimaryButton tone="inverse"
             label="Try again"
             onPress={() => void verifyInvite(activeInviteState.token)}
           />
@@ -296,7 +296,7 @@ export default function RegisterScreen() {
       {activeInviteState.status === "valid" ? (
         <>
           <View style={{ gap: theme.space.md }}>
-            <FormField label="Username" hint="2 characters or more.">
+            <FormField label="Username" hint="2 characters or more">
               <FormTextInput
                 accessibilityLabel="Username"
                 placeholder="Username"
@@ -313,7 +313,7 @@ export default function RegisterScreen() {
                 message={username ? validation.usernameError : null}
               />
             </FormField>
-            <FormField label="Password" hint="At least 8 characters, up to 256 bytes.">
+            <FormField label="Password" hint="At least 8 characters, up to 256 bytes">
               <FormTextInput
                 accessibilityLabel="Password"
                 placeholder="Password"
@@ -338,7 +338,7 @@ export default function RegisterScreen() {
             <FormError message={error} />
           </View>
 
-          <PrimaryButton
+          <PrimaryButton tone="inverse"
             label="Create account"
             onPress={onSubmit}
             loading={pending}
diff --git a/mobile/app/(auth)/reset-password.tsx b/mobile/app/(auth)/reset-password.tsx
index b23fe0b0..f90b31d4 100644
--- a/mobile/app/(auth)/reset-password.tsx
+++ b/mobile/app/(auth)/reset-password.tsx
@@ -57,7 +57,7 @@ export default function ResetPasswordScreen() {
         <Text
           style={{
             fontSize: 34,
-            fontWeight: "700",
+            fontWeight: "600",
             color: theme.color.fg,
             letterSpacing: -0.4,
           }}
@@ -65,7 +65,7 @@ export default function ResetPasswordScreen() {
           Set a new password
         </Text>
         <Text style={{ fontSize: 16, color: theme.color.fgMuted }}>
-          Choose a new password before continuing.
+          Choose a new password before continuing
         </Text>
       </View>
 
@@ -114,6 +114,7 @@ export default function ResetPasswordScreen() {
       <FormError message={error} />
 
       <PrimaryButton
+        tone="inverse"
         label="Update password"
         onPress={onSubmit}
         loading={pending}
diff --git a/mobile/app/(auth)/welcome.tsx b/mobile/app/(auth)/welcome.tsx
index 9ef4988d..5b835504 100644
--- a/mobile/app/(auth)/welcome.tsx
+++ b/mobile/app/(auth)/welcome.tsx
@@ -1,132 +1,145 @@
-import { Pressable, ScrollView, Text, View } from "react-native";
+import { useState } from "react";
+import {
+  Pressable,
+  ScrollView,
+  Text,
+  useWindowDimensions,
+  View,
+  type TextStyle,
+} from "react-native";
 import { useRouter } from "expo-router";
+import { Image } from "expo-image";
 import * as Haptics from "expo-haptics";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Animated, { FadeIn, FadeInDown } from "react-native-reanimated";
+import Animated, { FadeInDown } from "react-native-reanimated";
 import { getBaseUrl } from "@music-library/core";
-import { BouncingTitle } from "../../components/auth/bouncing-title";
-import { BubbleParade } from "../../components/auth/bubble-parade";
-import { useAuthMotionClock } from "../../components/auth/motion";
+import { WELCOME_RECORD } from "../../components/auth/welcome-art";
+import { WelcomeHero } from "../../components/auth/welcome-hero";
 import { PrimaryButton } from "../../components/buttons";
 import { useTheme } from "../../theme/theme";
 
-/** Room for the largest bubble plus its bob, so the parade never collapses. */
-const PARADE_MIN_HEIGHT = 240;
+const RECORD_SIZE = 32;
+/** Room for the record, even when large text pushes the words up the screen. */
+const HERO_MIN_HEIGHT = 240;
+const ENTER = FadeInDown.delay(120)
+  .duration(400)
+  .withInitialValues({ opacity: 0, transform: [{ translateY: 12 }] });
 
 /**
- * Where signed-out users land: the wordmark, a parade of glass bubbles drifting
- * across the upper half, and the two ways in (sign in, or register with an invite).
+ * Where signed-out users land: a scene from Lumen's world over the headline,
+ * then the two ways in (sign in, or register with an invite).
  */
 export default function WelcomeScreen() {
   const theme = useTheme();
   const router = useRouter();
   const insets = useSafeAreaInsets();
-  const clock = useAuthMotionClock();
+  const { fontScale } = useWindowDimensions();
+  // The scene ends where the words start, whatever the screen and text size.
+  const [wordsTop, setWordsTop] = useState<number | null>(null);
   const host = serverHost();
 
+  const headline: TextStyle = {
+    color: theme.color.fg,
+    fontSize: 36,
+    lineHeight: 44,
+    fontWeight: "500",
+    letterSpacing: -0.4,
+  };
+  const recordSize = RECORD_SIZE * Math.min(fontScale, 1.6);
+
   return (
     // Scrolls only when the content outgrows the screen (large text sizes);
-    // otherwise the bubbles take whatever height is left.
+    // otherwise the scene takes whatever height is left.
     <ScrollView
       style={{ flex: 1, backgroundColor: theme.color.bg }}
       contentContainerStyle={{ flexGrow: 1 }}
       alwaysBounceVertical={false}
     >
-      <View style={{ paddingTop: insets.top + theme.space.lg, alignItems: "center" }}>
-        <BouncingTitle
-          text="Lumen"
-          clock={clock}
-          style={{
-            fontSize: 28,
-            fontWeight: "700",
-            color: theme.color.fg,
-            letterSpacing: -0.4,
-          }}
-        />
-      </View>
+      {wordsTop !== null ? (
+        <WelcomeHero height={wordsTop + theme.space.md} />
+      ) : null}
 
-      <BubbleParade clock={clock} style={{ flex: 1, minHeight: PARADE_MIN_HEIGHT }} />
+      <View style={{ flex: 1, minHeight: HERO_MIN_HEIGHT }} />
 
-      <View
+      <Animated.View
+        entering={ENTER}
+        onLayout={(event) => setWordsTop(Math.round(event.nativeEvent.layout.y))}
         style={{
           paddingHorizontal: theme.space.xl,
           paddingBottom: insets.bottom + theme.space.md,
-          gap: theme.space.xl,
         }}
       >
-        <Animated.View
-          entering={FadeInDown.delay(250).duration(500)}
-          style={{ gap: theme.space.sm }}
+        <View
+          accessible
+          accessibilityRole="header"
+          accessibilityLabel="Your music, on your server"
         >
-          <Text
+          <Text style={headline}>Your music,</Text>
+          <View
             style={{
-              fontSize: 34,
-              fontWeight: "700",
-              color: theme.color.fg,
-              letterSpacing: -0.4,
-              textAlign: "center",
+              flexDirection: "row",
+              flexWrap: "wrap",
+              alignItems: "center",
+              columnGap: theme.space.sm,
             }}
           >
-            {"Your music library,\nlit up."}
-          </Text>
-          <Text
-            style={{ fontSize: 16, color: theme.color.fgMuted, textAlign: "center" }}
-          >
-            Sign in to your server, or join with an invite.
-          </Text>
-        </Animated.View>
+            <Text style={headline}>on your</Text>
+            <Image
+              source={WELCOME_RECORD}
+              style={{ width: recordSize, height: recordSize }}
+              contentFit="contain"
+            />
+            <Text style={headline}>server</Text>
+          </View>
+        </View>
 
-        <Animated.View
-          entering={FadeInDown.delay(380).duration(500)}
-          style={{ gap: theme.space.md }}
+        <Text
+          style={{
+            color: theme.color.fgMuted,
+            fontSize: 15,
+            lineHeight: 20,
+            marginTop: theme.space.md,
+          }}
         >
+          Lumen plays your library from {host ?? "your server"} on your phone, in
+          the car and offline
+        </Text>
+
+        <View style={{ marginTop: theme.space.xl }}>
           <PrimaryButton
             label="Sign in"
+            tone="inverse"
             onPress={() => {
               void Haptics.selectionAsync();
               router.push("/(auth)/login");
             }}
           />
-          <Pressable
-            onPress={() => {
-              void Haptics.selectionAsync();
-              router.push("/(auth)/register");
-            }}
-            accessibilityRole="button"
-            accessibilityLabel="Create an account with an invite"
-            style={({ pressed }) => ({
-              alignItems: "center",
-              paddingVertical: 8,
-              opacity: pressed ? 0.6 : 1,
-            })}
-          >
-            <Text
-              style={{ color: theme.color.accent, fontSize: 15, textAlign: "center" }}
-            >
-              Have an invite? Create an account
-            </Text>
-          </Pressable>
-        </Animated.View>
+        </View>
 
-        <Animated.Text
-          entering={FadeIn.delay(600).duration(400)}
-          style={{ fontSize: 13, color: theme.color.fgMuted, textAlign: "center" }}
+        <Pressable
+          onPress={() => {
+            void Haptics.selectionAsync();
+            router.push("/(auth)/register");
+          }}
+          accessibilityRole="button"
+          accessibilityLabel="Create an account with an invite"
+          style={({ pressed }) => ({
+            alignItems: "center",
+            marginTop: theme.space.xs,
+            paddingVertical: theme.space.md,
+            opacity: pressed ? 0.6 : 1,
+          })}
         >
-          {host ? (
-            <>
-              Accounts on <Text style={{ color: theme.color.fg }}>{host}</Text>{" "}
-              are invite-only.
-            </>
-          ) : (
-            "Accounts are invite-only."
-          )}
-        </Animated.Text>
-      </View>
+          <Text style={{ color: theme.color.fgSubtle, fontSize: 15 }}>
+            I have an invite
+          </Text>
+        </Pressable>
+      </Animated.View>
     </ScrollView>
   );
 }
 
-/** Host of the server this build talks to, for the footer; null if unset. */
+/** Host of the server this build talks to, for the subhead; null if unset. */
 function serverHost(): string | null {
   try {
     return new URL(getBaseUrl()).hostname || null;
diff --git a/mobile/app/(tabs)/(favorites)/_layout.tsx b/mobile/app/(tabs)/(favorites)/_layout.tsx
index 32970aa9..9447ee9c 100644
--- a/mobile/app/(tabs)/(favorites)/_layout.tsx
+++ b/mobile/app/(tabs)/(favorites)/_layout.tsx
@@ -7,11 +7,11 @@ export default function FavoritesStackLayout() {
       <Stack.Screen name="index" options={{ title: "Favorites", headerShown: false }} />
       <Stack.Screen
         name="track/[id]"
-        options={{ headerLargeTitle: false, title: "Track Info" }}
+        options={{ headerLargeTitle: false, title: "Track info" }}
       />
       <Stack.Screen
         name="track/edit"
-        options={{ headerLargeTitle: false, title: "Edit Track" }}
+        options={{ headerLargeTitle: false, title: "Edit track" }}
       />
       <Stack.Screen
         name="albums/[id]"
@@ -31,7 +31,7 @@ export default function FavoritesStackLayout() {
       />
       <Stack.Screen
         name="albums/edit"
-        options={{ headerLargeTitle: false, title: "Edit Album" }}
+        options={{ headerLargeTitle: false, title: "Edit album" }}
       />
     </Stack>
   );
diff --git a/mobile/app/(tabs)/(favorites)/index.tsx b/mobile/app/(tabs)/(favorites)/index.tsx
index eac294b9..64ab45c4 100644
--- a/mobile/app/(tabs)/(favorites)/index.tsx
+++ b/mobile/app/(tabs)/(favorites)/index.tsx
@@ -10,7 +10,6 @@ import {
   useFavoritesListModel,
 } from "../../../components/favorites/favorites-list";
 import { FavoritesNavBar } from "../../../components/favorites/favorites-nav-bar";
-import { ModeWash } from "../../../components/favorites/mode-wash";
 import { useFavoritesQuery } from "../../../context/favorites";
 import {
   DEFAULT_HEADER_GEOMETRY,
@@ -184,12 +183,6 @@ export default function FavoritesScreen() {
       }}
       style={{ flex: 1, backgroundColor: theme.color.bg }}
     >
-      <ModeWash
-        theme={theme}
-        mode={mode}
-        offset={offsets[mode]}
-        topInset={topInset}
-      />
       <FavoritesList
         theme={theme}
         mode="favorites"
diff --git a/mobile/app/(tabs)/(library,browse)/_layout.tsx b/mobile/app/(tabs)/(library,browse)/_layout.tsx
index 1df4eda6..aa60a0c1 100644
--- a/mobile/app/(tabs)/(library,browse)/_layout.tsx
+++ b/mobile/app/(tabs)/(library,browse)/_layout.tsx
@@ -44,15 +44,15 @@ export default function LibraryStackLayout({ segment }: { segment: string }) {
       />
       <Stack.Screen
         name="track/[id]"
-        options={{ headerLargeTitle: false, title: "Track Info" }}
+        options={{ headerLargeTitle: false, title: "Track info" }}
       />
       <Stack.Screen
         name="track/edit"
-        options={{ headerLargeTitle: false, title: "Edit Track" }}
+        options={{ headerLargeTitle: false, title: "Edit track" }}
       />
       <Stack.Screen
         name="albums/edit"
-        options={{ headerLargeTitle: false, title: "Edit Album" }}
+        options={{ headerLargeTitle: false, title: "Edit album" }}
       />
       <Stack.Screen
         name="upload"
diff --git a/mobile/app/(tabs)/(library,browse)/albums/[id].tsx b/mobile/app/(tabs)/(library,browse)/albums/[id].tsx
index 63e7123a..1a90938a 100644
--- a/mobile/app/(tabs)/(library,browse)/albums/[id].tsx
+++ b/mobile/app/(tabs)/(library,browse)/albums/[id].tsx
@@ -152,7 +152,7 @@ export default function AlbumDetailScreen() {
       <EmptyState
         fill
         selectable
-        message="Couldn't load album."
+        message="Couldn't load album"
         action={retryAction(albumQuery, tracksQuery)}
       />
     );
diff --git a/mobile/app/(tabs)/(library,browse)/albums/edit.tsx b/mobile/app/(tabs)/(library,browse)/albums/edit.tsx
index 8fcd2781..09cbe5ea 100644
--- a/mobile/app/(tabs)/(library,browse)/albums/edit.tsx
+++ b/mobile/app/(tabs)/(library,browse)/albums/edit.tsx
@@ -66,7 +66,7 @@ export default function AlbumEditScreen() {
       <EmptyState
         fill
         selectable
-        message="Couldn't load album."
+        message="Couldn't load album"
         action={retryAction(albumQuery)}
       />
     );
@@ -123,7 +123,7 @@ function AlbumEditor({ id, album }: { id: string; album: Album }) {
         quality: 0.9,
       });
     } catch {
-      setError("Couldn't open the photo library.");
+      setError("Couldn't open the photo library");
       return;
     }
     if (result.canceled || result.assets.length === 0) return;
@@ -205,7 +205,7 @@ function AlbumEditor({ id, album }: { id: string; album: Album }) {
     <>
       <Stack.Screen
         options={{
-          title: "Edit Album",
+          title: "Edit album",
           headerRight: () => (
             <HeaderSaveButton saving={saving} onPress={() => void onSave()} />
           ),
@@ -296,7 +296,7 @@ function AlbumEditor({ id, album }: { id: string; album: Album }) {
         </FormField>
         <FormField
           label="Album artist"
-          hint="Leave blank and turn on Compilation for Various Artists."
+          hint="Leave blank and turn on Compilation for Various Artists"
         >
           <FormTextInput
             value={draft.albumArtist}
@@ -323,7 +323,7 @@ function AlbumEditor({ id, album }: { id: string; album: Album }) {
               alignItems: "center",
               justifyContent: "space-between",
               gap: theme.space.sm,
-              paddingHorizontal: 14,
+              paddingHorizontal: 16,
               alignSelf: "flex-end",
               height: 46,
             }}
diff --git a/mobile/app/(tabs)/(library,browse)/artists/[id].tsx b/mobile/app/(tabs)/(library,browse)/artists/[id].tsx
index 32ef909e..b4623d73 100644
--- a/mobile/app/(tabs)/(library,browse)/artists/[id].tsx
+++ b/mobile/app/(tabs)/(library,browse)/artists/[id].tsx
@@ -124,7 +124,7 @@ export default function ArtistDetailScreen() {
       <EmptyState
         fill
         selectable
-        message="Couldn't load artist."
+        message="Couldn't load artist"
         action={retryAction(artistQuery, tracksQuery)}
       />
     );
diff --git a/mobile/app/(tabs)/(library,browse)/index.tsx b/mobile/app/(tabs)/(library,browse)/index.tsx
index 3d93c511..8715a97f 100644
--- a/mobile/app/(tabs)/(library,browse)/index.tsx
+++ b/mobile/app/(tabs)/(library,browse)/index.tsx
@@ -346,7 +346,7 @@ export default function HomeScreen() {
             )}
 
             {hasReplay && topAlbums.length > 0 && (
-              <Section eyebrow="Heavy rotation" title="Your albums">
+              <Section title="Your albums">
                 <HorizontalShelf>
                   {topAlbums.map((a) => (
                     <AlbumTile
@@ -383,7 +383,7 @@ export default function HomeScreen() {
 
             {(rediscoverQuery.data?.items.length ?? 0) > 0 && (
               <Section
-                eyebrow="A daily dig through the shelves"
+                eyebrow="Changes daily"
                 title="Rediscover"
               >
                 <HorizontalShelf>
diff --git a/mobile/app/(tabs)/(library,browse)/tidal-albums/[id].tsx b/mobile/app/(tabs)/(library,browse)/tidal-albums/[id].tsx
index 7fb14240..d5ce8647 100644
--- a/mobile/app/(tabs)/(library,browse)/tidal-albums/[id].tsx
+++ b/mobile/app/(tabs)/(library,browse)/tidal-albums/[id].tsx
@@ -178,7 +178,7 @@ export default function TidalAlbumDetailScreen() {
     <EmptyState
       fill={!versionPicker}
       selectable
-      message="Couldn't load TIDAL album."
+      message="Couldn't load TIDAL album"
       action={retryAction(albumQuery)}
     />
   );
diff --git a/mobile/app/(tabs)/(library,browse)/tidal-artists/[id].tsx b/mobile/app/(tabs)/(library,browse)/tidal-artists/[id].tsx
index 252ec5a8..2f7146bd 100644
--- a/mobile/app/(tabs)/(library,browse)/tidal-artists/[id].tsx
+++ b/mobile/app/(tabs)/(library,browse)/tidal-artists/[id].tsx
@@ -63,7 +63,7 @@ export default function TidalArtistScreen() {
   );
   const onTrackPress = usePlayQueue(tracks);
   const warning = data?.warnings?.join(" ");
-  const problem = query.isError ? "Couldn't load artist." : warning;
+  const problem = query.isError ? "Couldn't load artist" : warning;
   const artistName = data?.artist?.name || name || "TIDAL artist";
   // Artists without a TIDAL picture borrow their top track's cover.
   const imageUri = artistImageUrl(
@@ -175,7 +175,7 @@ export default function TidalArtistScreen() {
           query.isLoading ? (
             <EmptyState loading />
           ) : !problem && releases.length === 0 ? (
-            <EmptyState message="No releases found." />
+            <EmptyState message="No releases found" />
           ) : null
         }
         contentInsetAdjustmentBehavior="automatic"
diff --git a/mobile/app/(tabs)/(library,browse)/track/[id].tsx b/mobile/app/(tabs)/(library,browse)/track/[id].tsx
index 5ef52b18..d8a1d6ab 100644
--- a/mobile/app/(tabs)/(library,browse)/track/[id].tsx
+++ b/mobile/app/(tabs)/(library,browse)/track/[id].tsx
@@ -135,7 +135,7 @@ export default function TrackInfoScreen() {
     return <EmptyState fill loading />;
   }
   if (trackQuery.isError || !t || !item) {
-    return <EmptyState fill message="Couldn't load track." />;
+    return <EmptyState fill message="Couldn't load track" />;
   }
 
   const view = trackInfoRows(
@@ -149,7 +149,7 @@ export default function TrackInfoScreen() {
     <>
       <Stack.Screen
         options={{
-          title: "Track Info",
+          title: "Track info",
           // The pinned compact row names the track; the bar keeps only back.
           headerTitle: "",
           headerShadowVisible: false,
@@ -214,7 +214,7 @@ export default function TrackInfoScreen() {
             >
               {t.unavailable ? (
                 <Note theme={theme}>
-                  Removed from TIDAL, so it can&apos;t play.
+                  Removed from TIDAL, so it can&apos;t play
                 </Note>
               ) : null}
               {view.note ? <Note theme={theme}>{view.note}</Note> : null}
diff --git a/mobile/app/(tabs)/(library,browse)/track/edit.tsx b/mobile/app/(tabs)/(library,browse)/track/edit.tsx
index d92d3403..99b22141 100644
--- a/mobile/app/(tabs)/(library,browse)/track/edit.tsx
+++ b/mobile/app/(tabs)/(library,browse)/track/edit.tsx
@@ -30,7 +30,7 @@ import { EmptyState, retryAction } from "../../../../components/empty-state";
 
 /**
  * Admin-only track metadata editor. Reached from the track context menu's
- * "Edit Metadata" action. Loads the track, lets an admin rewrite the same
+ * "Edit metadata" action. Loads the track, lets an admin rewrite the same
  * fields the web edit dialog exposes, and PATCHes only what actually changed.
  */
 export default function TrackEditScreen() {
@@ -59,7 +59,7 @@ export default function TrackEditScreen() {
       <EmptyState
         fill
         selectable
-        message="Couldn't load track."
+        message="Couldn't load track"
         action={retryAction(trackQuery)}
       />
     );
@@ -67,7 +67,7 @@ export default function TrackEditScreen() {
   if (!canEdit) {
     return (
       <>
-        <Stack.Screen options={{ title: "Edit Track" }} />
+        <Stack.Screen options={{ title: "Edit track" }} />
         <EmptyState
           fill
           message={
@@ -114,7 +114,7 @@ function TrackEditor({ id, track }: { id: string; track: TrackDetail }) {
     <>
       <Stack.Screen
         options={{
-          title: "Edit Track",
+          title: "Edit track",
           headerRight: () => (
             <HeaderSaveButton saving={saving} onPress={() => void onSave()} />
           ),
@@ -147,7 +147,7 @@ function TrackEditor({ id, track }: { id: string; track: TrackDetail }) {
             autoCapitalize="words"
           />
         </FormField>
-        <FormField label="Album" hint="Leave blank to detach from its album.">
+        <FormField label="Album" hint="Leave blank to detach from its album">
           <FormTextInput
             value={draft.albumTitle}
             onChangeText={(value) => setField("albumTitle", value)}
@@ -156,7 +156,7 @@ function TrackEditor({ id, track }: { id: string; track: TrackDetail }) {
         </FormField>
         <FormField
           label="Album artist"
-          hint="Leave blank for compilations (Various Artists)."
+          hint="Leave blank for compilations (Various Artists)"
         >
           <FormTextInput
             value={draft.albumArtist}
diff --git a/mobile/app/(tabs)/(library,browse)/upload.tsx b/mobile/app/(tabs)/(library,browse)/upload.tsx
index 23e7a9da..6865175b 100644
--- a/mobile/app/(tabs)/(library,browse)/upload.tsx
+++ b/mobile/app/(tabs)/(library,browse)/upload.tsx
@@ -90,7 +90,7 @@ export default function UploadScreen() {
       setResults(null);
       setError(unsupported.length ? unsupportedFilesMessage(unsupported) : null);
     } catch {
-      setError("Couldn't open the file picker.");
+      setError("Couldn't open the file picker");
     }
   };
 
@@ -222,8 +222,10 @@ export default function UploadScreen() {
                   flex: 1,
                   backgroundColor: theme.color.bgElev1,
                   borderRadius: theme.radius.md,
-                  paddingVertical: 14,
+                  minHeight: 48,
+                  paddingVertical: 12,
                   alignItems: "center",
+                  justifyContent: "center",
                   opacity: uploading ? 0.5 : pressed ? 0.8 : 1,
                   borderCurve: "continuous",
                 })}
diff --git a/mobile/app/(tabs)/(playlists)/[id].tsx b/mobile/app/(tabs)/(playlists)/[id].tsx
index 164e1554..0758464e 100644
--- a/mobile/app/(tabs)/(playlists)/[id].tsx
+++ b/mobile/app/(tabs)/(playlists)/[id].tsx
@@ -437,7 +437,7 @@ export default function PlaylistDetailScreen() {
             style={{
               color: theme.color.fg,
               fontSize: 24,
-              fontWeight: "700",
+              fontWeight: "600",
               letterSpacing: -0.2,
               textAlign: "center",
             }}
@@ -608,7 +608,7 @@ export default function PlaylistDetailScreen() {
     return <EmptyState fill loading />;
   }
   if (playlistQuery.isError || tracksQuery.isError || !playlist) {
-    return <EmptyState fill selectable message="Couldn't load playlist."
+    return <EmptyState fill selectable message="Couldn't load playlist"
       action={{ label: playlistQuery.isFetching || tracksQuery.isFetching ? "Retrying…" : "Try again", disabled: playlistQuery.isFetching || tracksQuery.isFetching,
         onPress: () => { void playlistQuery.refetch(); void tracksQuery.refetch(); } }} />;
   }
diff --git a/mobile/app/(tabs)/(playlists)/_layout.tsx b/mobile/app/(tabs)/(playlists)/_layout.tsx
index 1ac7aa2c..e15db9a6 100644
--- a/mobile/app/(tabs)/(playlists)/_layout.tsx
+++ b/mobile/app/(tabs)/(playlists)/_layout.tsx
@@ -13,14 +13,14 @@ export default function PlaylistsStackLayout() {
         name="new"
         options={{
           headerLargeTitle: false,
-          title: "New Playlist",
+          title: "New playlist",
         }}
       />
       <Stack.Screen
         name="edit/[id]"
         options={{
           headerLargeTitle: false,
-          title: "Edit Playlist",
+          title: "Edit playlist",
         }}
       />
       <Stack.Screen
@@ -31,16 +31,16 @@ export default function PlaylistsStackLayout() {
         name="invite-collaborator"
         options={{
           headerLargeTitle: false,
-          title: "Invite Collaborator",
+          title: "Invite collaborator",
         }}
       />
       <Stack.Screen
         name="track/[id]"
-        options={{ headerLargeTitle: false, title: "Track Info" }}
+        options={{ headerLargeTitle: false, title: "Track info" }}
       />
       <Stack.Screen
         name="track/edit"
-        options={{ headerLargeTitle: false, title: "Edit Track" }}
+        options={{ headerLargeTitle: false, title: "Edit track" }}
       />
       <Stack.Screen
         name="albums/[id]"
@@ -60,7 +60,7 @@ export default function PlaylistsStackLayout() {
       />
       <Stack.Screen
         name="albums/edit"
-        options={{ headerLargeTitle: false, title: "Edit Album" }}
+        options={{ headerLargeTitle: false, title: "Edit album" }}
       />
     </Stack>
   );
diff --git a/mobile/app/(tabs)/(playlists)/edit/[id].tsx b/mobile/app/(tabs)/(playlists)/edit/[id].tsx
index 0445cc53..fda1ee50 100644
--- a/mobile/app/(tabs)/(playlists)/edit/[id].tsx
+++ b/mobile/app/(tabs)/(playlists)/edit/[id].tsx
@@ -133,7 +133,7 @@ function PlaylistEditor({ id, playlist }: { id: string; playlist: Playlist }) {
       <EditPlaylistHeader canSubmit={canSubmit} onSave={onSave} />
       <FormScreen>
         {forbidden ? (
-          <EmptyState message="Only the playlist's owner can edit its details." />
+          <EmptyState message="Only the playlist's owner can edit its details" />
         ) : (
           <>
             {permissions.canChangeCover ? (
diff --git a/mobile/app/(tabs)/(playlists)/index.tsx b/mobile/app/(tabs)/(playlists)/index.tsx
index 6b4495e1..037594dc 100644
--- a/mobile/app/(tabs)/(playlists)/index.tsx
+++ b/mobile/app/(tabs)/(playlists)/index.tsx
@@ -217,7 +217,7 @@ function InviteRow({
   return (
     <View
       style={{
-        paddingHorizontal: 14,
+        paddingHorizontal: 16,
         paddingVertical: 10,
         borderTopWidth: firstRow ? 0 : StyleSheet.hairlineWidth,
         borderTopColor: theme.color.separator,
diff --git a/mobile/app/(tabs)/(settings)/_layout.tsx b/mobile/app/(tabs)/(settings)/_layout.tsx
index 29042016..e1143823 100644
--- a/mobile/app/(tabs)/(settings)/_layout.tsx
+++ b/mobile/app/(tabs)/(settings)/_layout.tsx
@@ -45,23 +45,23 @@ export default function SettingsStackLayout() {
         name="admin-new-invite"
         options={{
           headerLargeTitle: false,
-          title: "New Invitation",
+          title: "New invitation",
         }}
       />
       <Stack.Screen
         name="admin-add-root"
         options={{
           headerLargeTitle: false,
-          title: "Add Music Root",
+          title: "Add music root",
         }}
       />
       <Stack.Screen
         name="track/[id]"
-        options={{ headerLargeTitle: false, title: "Track Info" }}
+        options={{ headerLargeTitle: false, title: "Track info" }}
       />
       <Stack.Screen
         name="track/edit"
-        options={{ headerLargeTitle: false, title: "Edit Track" }}
+        options={{ headerLargeTitle: false, title: "Edit track" }}
       />
       <Stack.Screen
         name="tidal-artists/[id]"
@@ -69,7 +69,7 @@ export default function SettingsStackLayout() {
       />
       <Stack.Screen
         name="albums/edit"
-        options={{ headerLargeTitle: false, title: "Edit Album" }}
+        options={{ headerLargeTitle: false, title: "Edit album" }}
       />
     </Stack>
   );
diff --git a/mobile/app/(tabs)/(settings)/admin-invites.tsx b/mobile/app/(tabs)/(settings)/admin-invites.tsx
index 0ae0c106..ebc803b6 100644
--- a/mobile/app/(tabs)/(settings)/admin-invites.tsx
+++ b/mobile/app/(tabs)/(settings)/admin-invites.tsx
@@ -124,7 +124,7 @@ export default function AdminInvitesScreen() {
                 style={{ paddingVertical: 0 }}
                 message={errorMessage(
                   invitesQuery.error,
-                  "Couldn't load invitations.",
+                  "Couldn't load invitations",
                 )}
               />
               <SecondaryButton
diff --git a/mobile/app/(tabs)/(settings)/admin-library.tsx b/mobile/app/(tabs)/(settings)/admin-library.tsx
index 6ed3c760..289ea98c 100644
--- a/mobile/app/(tabs)/(settings)/admin-library.tsx
+++ b/mobile/app/(tabs)/(settings)/admin-library.tsx
@@ -186,7 +186,7 @@ export default function AdminLibraryScreen() {
           ) : rootsQuery.isError ? (
             <EmptyState
               selectable
-              message="Couldn't load music roots."
+              message="Couldn't load music roots"
               action={{
                 label: rootsQuery.isFetching ? "Retrying…" : "Try again",
                 disabled: rootsQuery.isFetching,
@@ -263,7 +263,7 @@ function RescanHeader({
         </Text>
       ) : (
         <Text style={{ color: theme.color.fgMuted, fontSize: 12 }}>
-          Scan all enabled roots for new or changed tracks.
+          Scan all enabled roots for new or changed tracks
         </Text>
       )}
     </Card>
diff --git a/mobile/app/(tabs)/(settings)/admin-new-invite.tsx b/mobile/app/(tabs)/(settings)/admin-new-invite.tsx
index 4eb8b515..21009c8e 100644
--- a/mobile/app/(tabs)/(settings)/admin-new-invite.tsx
+++ b/mobile/app/(tabs)/(settings)/admin-new-invite.tsx
@@ -209,7 +209,7 @@ export default function AdminNewInviteScreen() {
           >
             <Text
               accessibilityRole="header"
-              style={{ color: theme.color.fg, fontSize: 24, fontWeight: "700" }}
+              style={{ color: theme.color.fg, fontSize: 24, fontWeight: "600" }}
             >
               Invite ready
             </Text>
@@ -224,7 +224,7 @@ export default function AdminNewInviteScreen() {
 
           <FormField
             label="Registration link"
-            hint="Opens Lumen directly when the app is installed."
+            hint="Opens Lumen directly when the app is installed"
           >
             <InviteValue value={buildInviteRegistrationUrl(created.token)} />
           </FormField>
@@ -278,7 +278,7 @@ export default function AdminNewInviteScreen() {
 
           <FormField
             label="Expires in (days)"
-            hint="Leave blank for no expiry."
+            hint="Leave blank for no expiry"
           >
             <FormTextInput
               accessibilityLabel="Invite expiry in days"
@@ -314,7 +314,7 @@ function InviteValue({ value }: { value: string }) {
         backgroundColor: theme.color.bgElev1,
         borderRadius: theme.radius.md,
         borderCurve: "continuous",
-        paddingHorizontal: 14,
+        paddingHorizontal: 16,
         paddingVertical: 12,
       }}
     >
diff --git a/mobile/app/(tabs)/(settings)/admin-tidal.tsx b/mobile/app/(tabs)/(settings)/admin-tidal.tsx
index 4e5f4cb9..d88f31fd 100644
--- a/mobile/app/(tabs)/(settings)/admin-tidal.tsx
+++ b/mobile/app/(tabs)/(settings)/admin-tidal.tsx
@@ -204,12 +204,12 @@ export default function AdminTidalScreen() {
           <Card style={{ padding: theme.space.lg, gap: theme.space.md }}>
             <View style={{ flexDirection: "row", alignItems: "center", gap: theme.space.sm }}>
               <ActivityIndicator color={theme.color.accent} />
-              <View style={{ flex: 1, gap: 3 }}>
+              <View style={{ flex: 1, gap: 2 }}>
                 <Text style={{ color: theme.color.fg, fontSize: 16, fontWeight: "600" }}>
                   Waiting for TIDAL
                 </Text>
                 <Text style={{ color: theme.color.fgMuted, fontSize: 13 }}>
-                  This page updates automatically after approval.
+                  This page updates automatically after approval
                 </Text>
               </View>
             </View>
@@ -314,12 +314,12 @@ function StatusCard({
             />
           )}
         </View>
-        <View style={{ flex: 1, gap: 3 }}>
+        <View style={{ flex: 1, gap: 2 }}>
           <Text style={{ color: theme.color.fg, fontSize: 17, fontWeight: "600" }}>
             {PROXY_STATE_LABELS[state]}
           </Text>
           <Text style={{ color: theme.color.fgMuted, fontSize: 13 }}>
-            TIDAL credentials stay on the server.
+            TIDAL credentials stay on the server
           </Text>
         </View>
       </View>
@@ -401,10 +401,10 @@ function StatusValue({
         borderRadius: theme.radius.sm,
         borderCurve: "continuous",
         padding: theme.space.sm,
-        gap: 3,
+        gap: 4,
       }}
     >
-      <Text style={{ color: theme.color.fgMuted, fontSize: 10, textTransform: "uppercase" }}>
+      <Text style={{ color: theme.color.fgMuted, fontSize: 11 }}>
         {label}
       </Text>
       <Text selectable numberOfLines={1} style={{ color: theme.color.fg, fontSize: 12 }}>
@@ -437,7 +437,7 @@ function AccountCard({
       }}
     >
       <SymbolView name="person.crop.circle.fill" size={30} tintColor={theme.color.fgMuted} />
-      <View style={{ flex: 1, gap: 3 }}>
+      <View style={{ flex: 1, gap: 2 }}>
         <Text selectable style={{ color: theme.color.fg, fontSize: 15, fontWeight: "600" }}>
           {tidalAccountLabel(account)}
         </Text>
diff --git a/mobile/app/(tabs)/(settings)/download-log.tsx b/mobile/app/(tabs)/(settings)/download-log.tsx
index c7bbf479..61d795fc 100644
--- a/mobile/app/(tabs)/(settings)/download-log.tsx
+++ b/mobile/app/(tabs)/(settings)/download-log.tsx
@@ -383,7 +383,7 @@ function ActionRow({
         alignItems: "center",
         gap: 12,
         paddingHorizontal: theme.space.md,
-        paddingVertical: 14,
+        paddingVertical: 12,
         borderTopWidth: border ? StyleSheet.hairlineWidth : 0,
         borderTopColor: theme.color.separator,
         backgroundColor: pressed ? theme.color.bgElev2 : "transparent",
diff --git a/mobile/app/(tabs)/(settings)/downloads.tsx b/mobile/app/(tabs)/(settings)/downloads.tsx
index 8fe11dbf..c094d90f 100644
--- a/mobile/app/(tabs)/(settings)/downloads.tsx
+++ b/mobile/app/(tabs)/(settings)/downloads.tsx
@@ -36,7 +36,7 @@ const HERO_COVER_MAX = 160;
 // "Custom" is the download order, newest first. No "Plays": the stored
 // snapshots carry no play counts.
 const SORT_OPTIONS: SortMenuOption[] = [
-  { key: "custom", label: "Recently Downloaded", symbol: "arrow.down.circle" },
+  { key: "custom", label: "Recently downloaded", symbol: "arrow.down.circle" },
   { key: "title", label: "Title" },
   { key: "duration", label: "Length" },
 ];
@@ -184,7 +184,7 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 24,
-    fontWeight: "700",
+    fontWeight: "600",
     letterSpacing: -0.2,
     textAlign: "center",
   },
diff --git a/mobile/app/(tabs)/(settings)/replay.tsx b/mobile/app/(tabs)/(settings)/replay.tsx
index 97f46073..3f581671 100644
--- a/mobile/app/(tabs)/(settings)/replay.tsx
+++ b/mobile/app/(tabs)/(settings)/replay.tsx
@@ -10,9 +10,11 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Directory, File, Paths } from "expo-file-system";
 import { useRouter } from "expo-router";
 import * as Haptics from "expo-haptics";
+import { startListPlayback } from "@music-library/core/player/play-list";
 import {
   ApiError,
   api,
+  artistImageUrl,
   displayText,
   errorMessage,
   playsById as playsByIdFor,
@@ -22,6 +24,8 @@ import {
   replayImageRequest,
   replayPlaylistRequest,
   replayRequest,
+  topArtistAction,
+  topArtistTracks,
   useAuth,
   useLocalDay,
   type ReplayAlbum,
@@ -52,7 +56,8 @@ import { SummaryGrid } from "../../../components/replay/summary-grid";
 import { TopTrackList } from "../../../components/replay/top-track-list";
 import { qk } from "../../../lib/query-keys";
 import { QUERY_STALE_TIME } from "../../../lib/query-policy";
-import { usePlayQueue } from "../../../lib/use-play-queue";
+import { listPlaybackQueue, usePlayQueue } from "../../../lib/use-play-queue";
+import { usePlayTrack } from "../../../context/player";
 import { usePullToRefresh } from "../../../lib/use-pull-to-refresh";
 import { useTheme } from "../../../theme/theme";
 import { isShareDismissal } from "../../../lib/share-dismissal";
@@ -98,6 +103,13 @@ export default function ReplayScreen() {
   );
   const playsById = useMemo(() => playsByIdFor(data?.top_tracks), [data?.top_tracks]);
   const onTrackPress = usePlayQueue(topTracks);
+  const play = usePlayTrack();
+  // Their tracks among the top tracks: the artist tile's cover, and what it plays
+  // when they have no library page to open.
+  const artistTracks = useMemo(
+    () => topArtistTracks(data?.top_artists ?? [], topTracks),
+    [data?.top_artists, topTracks],
+  );
 
   const onAlbumPress = useCallback(
     (album: ReplayAlbum) => {
@@ -198,7 +210,7 @@ export default function ReplayScreen() {
       {replayQuery.isLoading && !data ? (
         <EmptyState loading />
       ) : replayQuery.isError ? (
-        <EmptyState message="Couldn't load Replay." />
+        <EmptyState message="Couldn't load Replay" />
       ) : !hasData ? (
         <ReplayEmptyState />
       ) : data && summary ? (
@@ -211,7 +223,7 @@ export default function ReplayScreen() {
           />
 
           {topTracks.length > 0 && (
-            <Section eyebrow="On repeat" title="Top tracks">
+            <Section title="Top tracks">
               <TopTrackList
                 tracks={topTracks.slice(0, 10)}
                 playsById={playsById}
@@ -222,34 +234,50 @@ export default function ReplayScreen() {
           )}
 
           {data.top_artists.length > 0 && (
-            <Section eyebrow="On the marquee" title="Top artists">
+            <Section title="Top artists">
               <HorizontalShelf>
-                {data.top_artists.map((a, i) => (
-                  <RankedShelfTile
-                    key={a.id}
-                    rank={i + 1}
-                    title={displayText(a.name)}
-                    subtitle={pluralize(a.plays, "play")}
-                    subtitleTabular
-                    accessibilityLabel={`View artist ${displayText(a.name)}`}
-                    art={{ kind: "gradient", seed: a.id }}
-                    onPress={() =>
-                      router.push({
-                        pathname: "/(tabs)/(settings)/artists/[id]",
-                        params: { id: a.id },
-                      })
-                    }
-                  />
-                ))}
+                {data.top_artists.map((a, i) => {
+                  const own = artistTracks.get(a.id) ?? [];
+                  const action = topArtistAction(a, own);
+                  const name = displayText(a.name);
+                  return (
+                    <RankedShelfTile
+                      key={a.id}
+                      rank={i + 1}
+                      title={name}
+                      subtitle={pluralize(a.plays, "play")}
+                      subtitleTabular
+                      accessibilityLabel={
+                        action === "open"
+                          ? `View artist ${name}`
+                          : action === "play"
+                            ? `Play ${name}`
+                            : name
+                      }
+                      art={{
+                        kind: "artist",
+                        imageUrl: artistImageUrl({ name: a.name }, own, 256),
+                      }}
+                      onPress={
+                        action === "open"
+                          ? () =>
+                              router.push({
+                                pathname: "/(tabs)/(settings)/artists/[id]",
+                                params: { id: a.id },
+                              })
+                          : action === "play"
+                            ? () => startListPlayback(play, listPlaybackQueue(own), false)
+                            : undefined
+                      }
+                    />
+                  );
+                })}
               </HorizontalShelf>
             </Section>
           )}
 
           {data.top_albums.length > 0 && (
-            <Section
-              eyebrow="Played front to back"
-              title="Top albums"
-            >
+            <Section title="Top albums">
               <HorizontalShelf>
                 {data.top_albums.map((a, i) => (
                   <RankedShelfTile
@@ -267,10 +295,7 @@ export default function ReplayScreen() {
           )}
 
           {data.activity.length > 0 && (
-            <Section
-              eyebrow="When you listened"
-              title="Listening activity"
-            >
+            <Section title="Listening activity">
               <ActivityChart
                 buckets={data.activity}
                 bucket={data.bucket}
@@ -280,10 +305,7 @@ export default function ReplayScreen() {
           )}
 
           {data.top_genres.length > 0 && (
-            <Section
-              eyebrow="What filled the room"
-              title="Top genres"
-            >
+            <Section title="Top genres">
               <GenreList
                 genres={data.top_genres}
                 style={{ marginHorizontal: theme.space.lg }}
diff --git a/mobile/app/now-playing.tsx b/mobile/app/now-playing.tsx
index 106b91ac..5e6ea192 100644
--- a/mobile/app/now-playing.tsx
+++ b/mobile/app/now-playing.tsx
@@ -153,9 +153,9 @@ export default function NowPlayingScreen() {
     completedTranslation.targetLanguage === targetLanguage;
   const translationActionLabel = selectedPairMatches
     ? completedTranslation.visible
-      ? "Hide Translation"
-      : "Show Translation"
-    : "Translate Lyrics";
+      ? "Hide translation"
+      : "Show translation"
+    : "Translate lyrics";
   const previousTrackIdRef = useRef<string | null>(null);
   const previousTrackIndexRef = useRef(index);
   // These refs hold the last committed track solely to choose the direction of
@@ -402,7 +402,7 @@ export default function NowPlayingScreen() {
           alignItems: "center",
         }}
       >
-        <Text style={{ color: theme.color.fgMuted }}>No track loaded.</Text>
+        <Text style={{ color: theme.color.fgMuted }}>No track loaded</Text>
       </View>
     );
   }
diff --git a/mobile/app/playlist-picker.tsx b/mobile/app/playlist-picker.tsx
index 28152a49..a7a45049 100644
--- a/mobile/app/playlist-picker.tsx
+++ b/mobile/app/playlist-picker.tsx
@@ -205,13 +205,13 @@ export default function PlaylistPickerScreen() {
         ListEmptyComponent={
           // Only a link can open the sheet without a track.
           !trackId ? (
-            <EmptyState selectable message="No track to add." />
+            <EmptyState selectable message="No track to add" />
           ) : !playlists && playlistsQuery.isError ? (
-            <EmptyState selectable message="Couldn't load playlists." />
+            <EmptyState selectable message="Couldn't load playlists" />
           ) : !playlists ? (
             <EmptyState loading />
           ) : (
-            <EmptyState message="No playlists you can add to." />
+            <EmptyState message="No playlists you can add to" />
           )
         }
       />
@@ -252,7 +252,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 10,
     paddingTop: 24,
-    paddingHorizontal: 14,
+    paddingHorizontal: 16,
   },
   close: {
     width: 44,
diff --git a/mobile/app/share-track.tsx b/mobile/app/share-track.tsx
index 06896745..eb09a88d 100644
--- a/mobile/app/share-track.tsx
+++ b/mobile/app/share-track.tsx
@@ -433,7 +433,7 @@ export default function ShareTrackScreen() {
   }, [getShareUrl, picked, trackQuery.data]);
 
   // Downloads the snippet's generated preview video (the MP4 chat apps embed)
-  // and hands it to the share sheet, whose "Save Video" puts it in Photos.
+  // and hands it to the share sheet, whose "Save video" puts it in Photos.
   const saveVideo = useCallback(async () => {
     if (!picked || videoBusy) return;
     let url: string;
@@ -544,7 +544,7 @@ export default function ShareTrackScreen() {
         ) : trackQuery.isError || !trackQuery.data ? (
           <View style={styles.center}>
             <Text style={{ color: theme.color.fgMuted }}>
-              Couldn&apos;t load track.
+              Couldn&apos;t load track
             </Text>
           </View>
         ) : (
@@ -595,21 +595,21 @@ export default function ShareTrackScreen() {
                 onPickCustom={() => void pickCustomBackground()}
               />
               <ShareActionButton
-                label={busy ? "Generating..." : "Share Link"}
+                label={busy ? "Generating…" : "Share link"}
                 icon="square.and.arrow.up"
                 disabled={!canShare}
                 loading={busy}
                 onPress={() => void shareLink()}
               />
               <ShareActionButton
-                label={videoBusy ? "Preparing Video..." : "Save Video"}
+                label={videoBusy ? "Preparing video…" : "Save video"}
                 icon="square.and.arrow.down"
                 disabled={!canShare}
                 loading={videoBusy}
                 onPress={() => void saveVideo()}
               />
               <ShareActionButton
-                label="Copy Link"
+                label="Copy link"
                 icon="doc.on.doc"
                 disabled={!canShare}
                 onPress={() => void copyLink()}
@@ -619,7 +619,7 @@ export default function ShareTrackScreen() {
         )}
       </ScrollView>
 
-      <Stack.Screen.Title>Share Track</Stack.Screen.Title>
+      <Stack.Screen.Title>Share track</Stack.Screen.Title>
       <Stack.Toolbar placement="left">
         <Stack.Toolbar.Button
           icon="xmark"
diff --git a/mobile/assets/images/welcome-morning.jpg b/mobile/assets/images/welcome-morning.jpg
new file mode 100644
index 00000000..02cb81a6
Binary files /dev/null and b/mobile/assets/images/welcome-morning.jpg differ
diff --git a/mobile/assets/images/welcome-night.jpg b/mobile/assets/images/welcome-night.jpg
new file mode 100644
index 00000000..c51f9f70
Binary files /dev/null and b/mobile/assets/images/welcome-night.jpg differ
diff --git a/mobile/assets/images/welcome-record.png b/mobile/assets/images/welcome-record.png
new file mode 100644
index 00000000..fe093039
Binary files /dev/null and b/mobile/assets/images/welcome-record.png differ
diff --git a/mobile/components/add-confirmation/add-confirmation-overlay.tsx b/mobile/components/add-confirmation/add-confirmation-overlay.tsx
index 7fb1344d..e4081610 100644
--- a/mobile/components/add-confirmation/add-confirmation-overlay.tsx
+++ b/mobile/components/add-confirmation/add-confirmation-overlay.tsx
@@ -383,7 +383,7 @@ function AddConfirmationHud({
             {confirmation.playlistName}
           </Text>
           <Text style={[styles.subtitle, { color: theme.color.fgMuted }]}>
-            {confirmation.created ? "New Playlist" : "Added"}
+            {confirmation.created ? "New playlist" : "Added"}
           </Text>
         </Animated.View>
       </Animated.View>
diff --git a/mobile/components/add-confirmation/store.ts b/mobile/components/add-confirmation/store.ts
index f4aa53ac..82578c4c 100644
--- a/mobile/components/add-confirmation/store.ts
+++ b/mobile/components/add-confirmation/store.ts
@@ -32,7 +32,7 @@ export interface AddConfirmationRequest {
   playlistArt: { uri: string; placeholder: string | null } | null;
   /** Glyph for the empty tile. */
   playlistGlyph: "music.note.list" | "person.2.fill";
-  /** Made for this add: the HUD says "New Playlist" rather than "Added". */
+  /** Made for this add: the HUD says "New playlist" rather than "Added". */
   created: boolean;
   /** The add itself, already running. */
   done: Promise<AddConfirmationResult>;
diff --git a/mobile/components/album-header.tsx b/mobile/components/album-header.tsx
index bb17bb41..fb0ac232 100644
--- a/mobile/components/album-header.tsx
+++ b/mobile/components/album-header.tsx
@@ -76,7 +76,7 @@ export function AlbumHeader({
           <Text
             style={{
               fontSize: 22,
-              fontWeight: "700",
+              fontWeight: "600",
               color: theme.color.fg,
               letterSpacing: -0.2,
               textAlign: "center",
diff --git a/mobile/components/artist/artist-hero.tsx b/mobile/components/artist/artist-hero.tsx
index 71c8c2f6..75b76848 100644
--- a/mobile/components/artist/artist-hero.tsx
+++ b/mobile/components/artist/artist-hero.tsx
@@ -111,8 +111,8 @@ export function ArtistHero({
           style={{
             color: theme.color.fg,
             fontSize: 34,
-            fontWeight: "800",
-            letterSpacing: -0.8,
+            fontWeight: "600",
+            letterSpacing: -0.4,
             textAlign: "center",
           }}
         >
diff --git a/mobile/components/auth/bouncing-title.tsx b/mobile/components/auth/bouncing-title.tsx
deleted file mode 100644
index 2b0e4464..00000000
--- a/mobile/components/auth/bouncing-title.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { View, type TextStyle } from "react-native";
-import Animated, {
-  FadeInDown,
-  useAnimatedStyle,
-  type SharedValue,
-} from "react-native-reanimated";
-
-/** Seconds between waves rippling through the letters. */
-const WAVE_EVERY = 4.2;
-/** Seconds each letter spends in the air. */
-const HOP = 0.32;
-/** Seconds between neighboring letters taking off. */
-const HOP_STAGGER = 0.07;
-
-/**
- * A word whose letters drop in one by one on mount, then periodically hop in
- * a left-to-right wave. Read as one header by VoiceOver.
- */
-export function BouncingTitle({
-  text,
-  clock,
-  style,
-}: {
-  text: string;
-  clock: SharedValue<number>;
-  style: TextStyle;
-}) {
-  const letters = Array.from(text);
-  return (
-    <View
-      accessible
-      accessibilityRole="header"
-      accessibilityLabel={text}
-      style={{ flexDirection: "row" }}
-    >
-      {letters.map((letter, index) => (
-        <Animated.View
-          key={index}
-          entering={FadeInDown.delay(150 + index * 60)
-            .springify()
-            .damping(11)}
-        >
-          <HoppingLetter
-            letter={letter}
-            index={index}
-            clock={clock}
-            style={style}
-          />
-        </Animated.View>
-      ))}
-    </View>
-  );
-}
-
-function HoppingLetter({
-  letter,
-  index,
-  clock,
-  style,
-}: {
-  letter: string;
-  index: number;
-  clock: SharedValue<number>;
-  style: TextStyle;
-}) {
-  const animatedStyle = useAnimatedStyle(() => {
-    // The first wave lands after the drop-in settles.
-    const local = ((clock.value + WAVE_EVERY - 1.6) % WAVE_EVERY) - index * HOP_STAGGER;
-    const hop = local > 0 && local < HOP ? Math.sin((Math.PI * local) / HOP) : 0;
-    return { transform: [{ translateY: -7 * hop }] };
-  });
-  return <Animated.Text style={[style, animatedStyle]}>{letter}</Animated.Text>;
-}
diff --git a/mobile/components/auth/bubble-parade.tsx b/mobile/components/auth/bubble-parade.tsx
deleted file mode 100644
index eb795868..00000000
--- a/mobile/components/auth/bubble-parade.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import {
-  Pressable,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
-import * as Haptics from "expo-haptics";
-import { SymbolView, type SFSymbol } from "expo-symbols";
-import Animated, {
-  Easing,
-  FadeIn,
-  useAnimatedStyle,
-  useSharedValue,
-  withSequence,
-  withSpring,
-  withTiming,
-  type SharedValue,
-} from "react-native-reanimated";
-import { useTheme, withAlpha, type ThemeTokens } from "../../theme/theme";
-
-/** Points per second the parade slides left. */
-const SPEED = 14;
-/**
- * Off-screen run-up on each side. Wider than half the largest bubble, so a
- * bubble wraps from the left edge to the right one where nobody can see it.
- */
-const EDGE_PAD = 110;
-
-interface Bubble {
-  symbol: SFSymbol;
-  size: number;
-  /** Vertical offset from the parade's midline. */
-  y: number;
-  phase: number;
-}
-
-// Listed in paint order: smaller bubbles sit behind larger ones.
-const BUBBLES: Bubble[] = [
-  { symbol: "hifispeaker.fill", size: 112, y: 34, phase: 4.1 },
-  { symbol: "opticaldisc.fill", size: 118, y: 24, phase: 1.3 },
-  { symbol: "music.mic", size: 126, y: 12, phase: 3.2 },
-  { symbol: "pianokeys", size: 142, y: -10, phase: 5.0 },
-  { symbol: "headphones", size: 150, y: -22, phase: 0.2 },
-  { symbol: "guitars.fill", size: 160, y: -34, phase: 2.4 },
-];
-
-// Where each bubble sits along the loop, in `BUBBLES` order, as fractions of
-// the loop. Interleaved so neighbors on screen alternate big and small.
-const SLOTS = [0.08, 0.58, 0.25, 0.75, 0.42, 0.92];
-
-/**
- * The welcome screen's hero: glass bubbles, each holding a piece of music
- * gear in the brand purple, drifting right to left in an endless loop while
- * they bob. Tapping one squishes it and spins what's inside.
- */
-export function BubbleParade({
-  clock,
-  style,
-}: {
-  clock: SharedValue<number>;
-  style?: StyleProp<ViewStyle>;
-}) {
-  const theme = useTheme();
-  const { width } = useWindowDimensions();
-  const loop = width + EDGE_PAD * 2;
-  const glass = glassStyle(theme);
-  return (
-    <Animated.View
-      entering={FadeIn.delay(150).duration(700)}
-      accessibilityElementsHidden
-      importantForAccessibility="no-hide-descendants"
-      style={style}
-    >
-      <View
-        pointerEvents="none"
-        style={[
-          styles.glow,
-          {
-            experimental_backgroundImage: `radial-gradient(ellipse closest-side, ${withAlpha(theme.color.brand, theme.scheme === "dark" ? 0.2 : 0.1)} 0%, ${withAlpha(theme.color.brand, 0)} 100%)`,
-          },
-        ]}
-      />
-      {BUBBLES.map((bubble, index) => (
-        <GlassBubble
-          key={bubble.symbol}
-          bubble={bubble}
-          start={SLOTS[index] * loop}
-          loop={loop}
-          clock={clock}
-          glass={glass}
-          tint={theme.color.brand}
-        />
-      ))}
-    </Animated.View>
-  );
-}
-
-/** Scheme-specific glass: a faint fill and rim, lit from above. */
-function glassStyle(theme: ThemeTokens) {
-  const dark = theme.scheme === "dark";
-  return {
-    sphere: {
-      backgroundColor: dark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.02)",
-      borderColor: dark ? "rgba(255,255,255,0.14)" : "rgba(0,0,0,0.07)",
-      boxShadow: dark
-        ? `inset 0 2px 6px rgba(255,255,255,0.22), inset 0 -12px 24px ${withAlpha(theme.color.brand, 0.2)}, inset 0 0 20px rgba(255,255,255,0.06)`
-        : `inset 0 2px 6px rgba(255,255,255,0.9), inset 0 -12px 24px ${withAlpha(theme.color.brand, 0.08)}, inset 0 0 18px rgba(0,0,0,0.04)`,
-    } satisfies ViewStyle,
-    shadow: {
-      boxShadow: dark
-        ? "0 18px 36px rgba(0,0,0,0.6)"
-        : "0 14px 30px rgba(0,0,0,0.1)",
-    } satisfies ViewStyle,
-    innerGlow: withAlpha(theme.color.brand, dark ? 0.22 : 0.1),
-    specular: dark ? 0.45 : 0.9,
-  };
-}
-
-function GlassBubble({
-  bubble,
-  start,
-  loop,
-  clock,
-  glass,
-  tint,
-}: {
-  bubble: Bubble;
-  start: number;
-  loop: number;
-  clock: SharedValue<number>;
-  glass: ReturnType<typeof glassStyle>;
-  tint: string;
-}) {
-  const size = bubble.size;
-  const squish = useSharedValue(0);
-  const spin = useSharedValue(0);
-
-  const travelStyle = useAnimatedStyle(() => {
-    const t = clock.value;
-    const along = (((start - t * SPEED) % loop) + loop) % loop;
-    return {
-      transform: [
-        { translateX: along - EDGE_PAD - size / 2 },
-        { translateY: bubble.y + 9 * Math.sin(t * 0.9 + bubble.phase) },
-      ],
-    };
-  });
-  const sphereStyle = useAnimatedStyle(() => ({
-    transform: [
-      { scaleX: 1 + 0.1 * squish.value },
-      { scaleY: 1 - 0.14 * squish.value },
-    ],
-  }));
-  const objectStyle = useAnimatedStyle(() => {
-    const t = clock.value;
-    return {
-      transform: [
-        { translateY: 3 * Math.sin(t * 1.3 + bubble.phase) },
-        { rotate: `${8 * Math.sin(t * 0.8 + bubble.phase) + spin.value}deg` },
-      ],
-    };
-  });
-
-  const onPress = () => {
-    void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    squish.set(
-      withSequence(
-        withTiming(1, { duration: 90 }),
-        withSpring(0, { damping: 5, stiffness: 180 }),
-      ),
-    );
-    spin.set(
-      withTiming(spin.get() + 360, {
-        duration: 750,
-        easing: Easing.out(Easing.back(1.6)),
-      }),
-    );
-  };
-
-  const round = { width: size, height: size, borderRadius: size / 2 };
-  return (
-    <Animated.View
-      style={[
-        styles.slot,
-        { width: size, height: size, marginTop: -size / 2 },
-        travelStyle,
-      ]}
-    >
-      <Pressable onPress={onPress} accessible={false}>
-        {/* Kept apart from the clipped sphere so the drop shadow isn't cut off. */}
-        <Animated.View style={[round, glass.shadow, sphereStyle]}>
-          <View style={[round, styles.sphere, glass.sphere]}>
-            <View
-              style={[
-                StyleSheet.absoluteFill,
-                {
-                  experimental_backgroundImage: `radial-gradient(circle closest-side, ${glass.innerGlow} 0%, ${withAlpha(tint, 0)} 100%)`,
-                },
-              ]}
-            />
-            <Animated.View style={objectStyle}>
-              <SymbolView
-                name={bubble.symbol}
-                type="hierarchical"
-                tintColor={tint}
-                size={size * 0.42}
-                weight="medium"
-              />
-            </Animated.View>
-            <View
-              style={[
-                styles.specular,
-                {
-                  width: size * 0.36,
-                  height: size * 0.2,
-                  left: size * 0.14,
-                  top: size * 0.12,
-                  experimental_backgroundImage: `radial-gradient(ellipse closest-side, rgba(255,255,255,${glass.specular}) 0%, rgba(255,255,255,0) 100%)`,
-                },
-              ]}
-            />
-          </View>
-        </Animated.View>
-      </Pressable>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  glow: {
-    position: "absolute",
-    left: "-10%",
-    right: "-10%",
-    top: "15%",
-    bottom: "5%",
-  },
-  slot: {
-    position: "absolute",
-    left: 0,
-    // A touch below center: the headline block below is taller than the
-    // wordmark above, so this balances the gaps.
-    top: "54%",
-  },
-  sphere: {
-    overflow: "hidden",
-    alignItems: "center",
-    justifyContent: "center",
-    borderWidth: 1,
-  },
-  specular: {
-    position: "absolute",
-    transform: [{ rotate: "-32deg" }],
-  },
-});
diff --git a/mobile/components/auth/motion.ts b/mobile/components/auth/motion.ts
deleted file mode 100644
index dc8718ca..00000000
--- a/mobile/components/auth/motion.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useEffect } from "react";
-import { useIsFocused } from "expo-router";
-import {
-  useFrameCallback,
-  useReducedMotion,
-  useSharedValue,
-  type SharedValue,
-} from "react-native-reanimated";
-
-/** Largest frame step the clock accepts, so a resume never jumps the scene. */
-const MAX_FRAME_STEP = 1 / 15;
-
-/**
- * Seconds of running animation time, advanced on the UI thread. Every ambient
- * loop on the welcome screen (bubble parade, title hop) derives
- * its phase from this one clock, so pausing is a single frame-callback toggle
- * and resuming picks up where it left off.
- */
-export function useMotionClock(active: boolean): SharedValue<number> {
-  const clock = useSharedValue(0);
-  const frame = useFrameCallback((info) => {
-    const step = (info.timeSincePreviousFrame ?? 0) / 1000;
-    clock.value += Math.min(step, MAX_FRAME_STEP);
-  }, false);
-  useEffect(() => {
-    frame.setActive(active);
-  }, [active, frame]);
-  return clock;
-}
-
-/**
- * The clock for an auth screen: it only runs while the screen is on top and
- * motion is allowed. With Reduce Motion the scene renders as a still frame.
- */
-export function useAuthMotionClock(): SharedValue<number> {
-  const reducedMotion = useReducedMotion();
-  const focused = useIsFocused();
-  return useMotionClock(focused && !reducedMotion);
-}
diff --git a/mobile/components/auth/welcome-art.ts b/mobile/components/auth/welcome-art.ts
new file mode 100644
index 00000000..9f9960e8
--- /dev/null
+++ b/mobile/components/auth/welcome-art.ts
@@ -0,0 +1,4 @@
+/** The welcome scene's files, rendered by `scripts/render-welcome-art.py`. */
+export const WELCOME_NIGHT = require("../../assets/images/welcome-night.jpg");
+export const WELCOME_MORNING = require("../../assets/images/welcome-morning.jpg");
+export const WELCOME_RECORD = require("../../assets/images/welcome-record.png");
diff --git a/mobile/components/auth/welcome-hero.tsx b/mobile/components/auth/welcome-hero.tsx
new file mode 100644
index 00000000..75a1266f
--- /dev/null
+++ b/mobile/components/auth/welcome-hero.tsx
@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+import {
+  Image as NativeImage,
+  PixelRatio,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { Image } from "expo-image";
+import Animated, { FadeIn } from "react-native-reanimated";
+import {
+  Canvas,
+  Fill,
+  ImageShader,
+  Shader,
+  Skia,
+  type SkImage,
+  type SkRuntimeEffect,
+} from "@shopify/react-native-skia";
+import {
+  WELCOME_MESH_SHADER,
+  loadWelcomeArt,
+  welcomeArtRect,
+  welcomeFadeHeight,
+  welcomeMesh,
+} from "../../lib/welcome-mesh";
+import { useTheme, withAlpha } from "../../theme/theme";
+import { WELCOME_MORNING, WELCOME_NIGHT } from "./welcome-art";
+
+const ENTER = FadeIn.duration(400);
+/** How much light is left in the lines between cells, per scheme. */
+const LINE_LIGHT = { dark: 0.6, light: 0.88 } as const;
+
+let meshEffect: SkRuntimeEffect | null | undefined;
+
+/** The compiled mesh, or null if this device's Skia refuses it. */
+function getMeshEffect(): SkRuntimeEffect | null {
+  if (meshEffect === undefined) {
+    try {
+      meshEffect = Skia.RuntimeEffect.Make(WELCOME_MESH_SHADER);
+    } catch {
+      meshEffect = null;
+    }
+  }
+  return meshEffect;
+}
+
+/** The decoded art for Skia: null while loading, and `failed` if it never will. */
+function useWelcomeArt(source: number): { art: SkImage | null; failed: boolean } {
+  const [loaded, setLoaded] = useState<{ source: number; art: SkImage | null } | null>(
+    null,
+  );
+  useEffect(() => {
+    let live = true;
+    void loadWelcomeArt(NativeImage.resolveAssetSource(source).uri, Skia).then((art) => {
+      if (live) setLoaded({ source, art });
+    });
+    return () => {
+      live = false;
+    };
+  }, [source]);
+  // After a switch between light and dark, the old scene belongs to the old
+  // scheme. Drawing nothing lets the new one fade in on its own.
+  if (loaded?.source !== source) return { art: null, failed: false };
+  return { art: loaded.art, failed: loaded.art === null };
+}
+
+/**
+ * The welcome screen's scene: a record sliding out of its sleeve among the
+ * clouds, at night in dark mode and in the morning in light mode, drawn through
+ * a pixel mesh and fading into the page. Without the mesh it's the plain image.
+ */
+export function WelcomeHero({ height }: { height: number }) {
+  const theme = useTheme();
+  const { width } = useWindowDimensions();
+  const source = theme.scheme === "dark" ? WELCOME_NIGHT : WELCOME_MORNING;
+  const { art, failed } = useWelcomeArt(source);
+  const effect = getMeshEffect();
+  const view = { width, height };
+  const fadeColor = theme.color.bg;
+
+  return (
+    <View
+      pointerEvents="none"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={[styles.hero, view]}
+    >
+      {effect && !failed ? (
+        art ? (
+          <Animated.View entering={ENTER} style={StyleSheet.absoluteFill}>
+            <Canvas style={view}>
+              <Fill>
+                <Shader
+                  source={effect}
+                  uniforms={{
+                    density: PixelRatio.get(),
+                    ...welcomeMesh(PixelRatio.get()),
+                    lineLight: LINE_LIGHT[theme.scheme],
+                  }}
+                >
+                  <ImageShader
+                    image={art}
+                    // Cells cut off by the screen's edge sample past the art.
+                    tx="clamp"
+                    ty="clamp"
+                    fit="fill"
+                    rect={welcomeArtRect(view, {
+                      width: art.width(),
+                      height: art.height(),
+                    })}
+                  />
+                </Shader>
+              </Fill>
+            </Canvas>
+          </Animated.View>
+        ) : null
+      ) : (
+        <Animated.View entering={ENTER} style={StyleSheet.absoluteFill}>
+          <Image
+            source={source}
+            style={view}
+            contentFit="cover"
+            contentPosition="top center"
+          />
+        </Animated.View>
+      )}
+      <View
+        style={[
+          styles.fade,
+          {
+            height: welcomeFadeHeight(height),
+            experimental_backgroundImage: `linear-gradient(to bottom, ${withAlpha(fadeColor, 0)} 0%, ${fadeColor} 100%)`,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  hero: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+  },
+  fade: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    // One point past the edge, so no row of the mesh survives under the text.
+    bottom: -1,
+  },
+});
diff --git a/mobile/components/buttons.tsx b/mobile/components/buttons.tsx
index 923b4a2a..ce5c4663 100644
--- a/mobile/components/buttons.tsx
+++ b/mobile/components/buttons.tsx
@@ -1,6 +1,8 @@
 import { ActivityIndicator, Pressable, Text } from "react-native";
 import { useTheme } from "../theme/theme";
 
+const BUTTON_HEIGHT = 48;
+
 /**
  * Full-width filled accent button used for primary form actions (sign in,
  * create account, upload, save). Previously hand-rolled in six screens with
@@ -14,15 +16,21 @@ export function PrimaryButton({
   loading = false,
   disabled = false,
   accessibilityLabel,
+  tone = "accent",
 }: {
   label: string;
   onPress: () => void;
   loading?: boolean;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** `inverse` fills with the text color, for the signed-out screens. */
+  tone?: "accent" | "inverse";
 }) {
   const theme = useTheme();
   const isDisabled = disabled || loading;
+  const inverse = tone === "inverse";
+  const background = inverse ? theme.color.fg : theme.color.accent;
+  const foreground = inverse ? theme.color.bg : theme.color.onAccent;
   return (
     <Pressable
       onPress={onPress}
@@ -31,9 +39,10 @@ export function PrimaryButton({
       accessibilityLabel={accessibilityLabel ?? label}
       accessibilityState={{ disabled: isDisabled, busy: loading }}
       style={({ pressed }) => ({
-        backgroundColor: theme.color.accent,
+        backgroundColor: background,
         borderRadius: theme.radius.md,
-        paddingVertical: 14,
+        minHeight: BUTTON_HEIGHT,
+        paddingVertical: 12,
         alignItems: "center",
         justifyContent: "center",
         borderCurve: "continuous",
@@ -41,11 +50,9 @@ export function PrimaryButton({
       })}
     >
       {loading ? (
-        <ActivityIndicator color={theme.color.onAccent} />
+        <ActivityIndicator color={foreground} />
       ) : (
-        <Text
-          style={{ color: theme.color.onAccent, fontSize: 17, fontWeight: "600" }}
-        >
+        <Text style={{ color: foreground, fontSize: 17, fontWeight: "600" }}>
           {label}
         </Text>
       )}
@@ -81,8 +88,10 @@ export function SecondaryButton({
         backgroundColor: theme.color.bgElev1,
         borderRadius: theme.radius.md,
         borderCurve: "continuous",
-        paddingVertical: 11,
+        minHeight: BUTTON_HEIGHT,
+        paddingVertical: 12,
         alignItems: "center",
+        justifyContent: "center",
         opacity: disabled ? 0.5 : pressed ? 0.8 : 1,
       })}
     >
diff --git a/mobile/components/dock/dock-mini-player.tsx b/mobile/components/dock/dock-mini-player.tsx
index 3f0d8726..3a33877f 100644
--- a/mobile/components/dock/dock-mini-player.tsx
+++ b/mobile/components/dock/dock-mini-player.tsx
@@ -496,38 +496,38 @@ function PadTrackActionsButton({ track }: { track: TrackListItem }) {
       { label: "Play", onPress: actions.play },
       {
         label: actions.favorite
-          ? "Remove from Favorites"
-          : "Add to Favorites",
+          ? "Remove from favorites"
+          : "Add to favorites",
         onPress: actions.toggleFavorite,
       },
-      { label: "Track Info", onPress: actions.openInfo },
-      ...(actions.canShare ? [{ label: "Share...", onPress: actions.openShare }] : []),
-      { label: "Add to Playlist...", onPress: actions.openPlaylistPicker },
+      { label: "Track info", onPress: actions.openInfo },
+      ...(actions.canShare ? [{ label: "Share…", onPress: actions.openShare }] : []),
+      { label: "Add to playlist…", onPress: actions.openPlaylistPicker },
       {
-        label: actions.downloading ? "Downloading..." : "Download File...",
+        label: actions.downloading ? "Downloading…" : "Download file…",
         onPress: actions.download,
         disabled: actions.downloading,
       },
     ];
 
     if (actions.hasAlbum) {
-      items.push({ label: "View Album", onPress: actions.openAlbum });
+      items.push({ label: "View album", onPress: actions.openAlbum });
     }
     if (actions.canEditMetadata) {
       items.push({
-        label: "Edit Metadata",
+        label: "Edit metadata",
         onPress: actions.openEditMetadata,
       });
     }
     if (actions.hasEditableAlbum) {
       items.push({
-        label: "Edit Album & Cover",
+        label: "Edit album & cover",
         onPress: actions.openEditAlbum,
       });
     }
     if (actions.owned) {
       items.push({
-        label: actions.deleting ? "Deleting..." : "Delete from My Library",
+        label: actions.deleting ? "Deleting…" : "Delete from my library",
         onPress: actions.deleteTrack,
         destructive: true,
         disabled: actions.deleting,
@@ -622,7 +622,7 @@ const styles = StyleSheet.create({
   },
   padSideClusterWide: {
     width: 250,
-    gap: 14,
+    gap: 12,
   },
   padSideClusterCompact: {
     width: 154,
@@ -654,7 +654,7 @@ const styles = StyleSheet.create({
   },
   padTitle: {
     fontSize: 15,
-    fontWeight: "700",
+    fontWeight: "600",
   },
   padArtist: {
     marginTop: 2,
@@ -666,7 +666,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "flex-end",
-    gap: 14,
+    gap: 12,
   },
   padActionClusterCompact: {
     width: 72,
diff --git a/mobile/components/eyebrow.tsx b/mobile/components/eyebrow.tsx
index 3d653fda..42da6f27 100644
--- a/mobile/components/eyebrow.tsx
+++ b/mobile/components/eyebrow.tsx
@@ -2,11 +2,7 @@ import { type ReactNode } from "react";
 import { Text, type StyleProp, type TextStyle } from "react-native";
 import { useTheme } from "../theme/theme";
 
-/**
- * Muted uppercase micro-label above section titles and feature cards (home
- * shelves, replay sections). Smaller and wider-tracked than the form
- * `SectionLabel`.
- */
+/** Muted caption above section titles and feature cards (home shelves). */
 export function Eyebrow({
   style,
   children,
@@ -20,9 +16,7 @@ export function Eyebrow({
       style={[
         {
           color: theme.color.fgMuted,
-          fontSize: 11,
-          letterSpacing: 0.6,
-          textTransform: "uppercase",
+          fontSize: 13,
         },
         style,
       ]}
diff --git a/mobile/components/favorites/favorites-list-header.tsx b/mobile/components/favorites/favorites-list-header.tsx
index ac861ca4..8ea4d6d9 100644
--- a/mobile/components/favorites/favorites-list-header.tsx
+++ b/mobile/components/favorites/favorites-list-header.tsx
@@ -25,12 +25,12 @@ import type { ThemeTokens } from "../../theme/theme";
 // order, newest first.
 const SORT_OPTIONS: Record<FavoritesMode, SortMenuOption[]> = {
   favorites: [
-    { key: "custom", label: "Recently Added", symbol: "heart" },
+    { key: "custom", label: "Recently added", symbol: "heart" },
     { key: "title", label: "Title" },
     { key: "duration", label: "Length" },
   ],
   recent: [
-    { key: "custom", label: "Last Played", symbol: "clock" },
+    { key: "custom", label: "Last played", symbol: "clock" },
     { key: "title", label: "Title" },
     { key: "duration", label: "Length" },
   ],
diff --git a/mobile/components/favorites/favorites-list.tsx b/mobile/components/favorites/favorites-list.tsx
index 146324e7..7ae272f5 100644
--- a/mobile/components/favorites/favorites-list.tsx
+++ b/mobile/components/favorites/favorites-list.tsx
@@ -124,11 +124,11 @@ export function useFavoritesListModel(
 
 const EMPTY_MESSAGES: Record<FavoritesMode, { error: string; empty: string }> = {
   favorites: {
-    error: "Couldn't load favorites.",
+    error: "Couldn't load favorites",
     empty: "No favorites yet. Tap the heart on a track to save it here.",
   },
   recent: {
-    error: "Couldn't load recent plays.",
+    error: "Couldn't load recent plays",
     empty: "No recent plays.",
   },
 };
diff --git a/mobile/components/favorites/mode-wash.tsx b/mobile/components/favorites/mode-wash.tsx
deleted file mode 100644
index 913b2a36..00000000
--- a/mobile/components/favorites/mode-wash.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useEffect } from "react";
-import { StyleSheet } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  type SharedValue,
-} from "react-native-reanimated";
-import { modeColor } from "./mode-switch";
-import type { FavoritesMode } from "../../lib/favorites-header";
-import { withAlpha, type ThemeTokens } from "../../theme/theme";
-
-const WASH_HEIGHT = 430;
-const WASH_FADE = { duration: 350, easing: Easing.linear } as const;
-
-function washGradient(color: string, alpha: number): string {
-  return `radial-gradient(130% 75% at 20% 0%, ${withAlpha(color, alpha)} 0%, ${withAlpha(color, 0)} 72%)`;
-}
-
-/**
- * A faint wash of the list's colour behind the header. It sits behind both
- * lists (they're transparent) so switching cross-fades purple and blue rather
- * than snapping, and it scrolls with the active list. A pull to refresh leaves
- * it pinned to the top instead of opening a gap above it.
- */
-export function ModeWash({
-  theme,
-  mode,
-  offset,
-  topInset,
-}: {
-  theme: ThemeTokens;
-  mode: FavoritesMode;
-  /** The active list's raw content offset (rest is `-topInset`). */
-  offset: SharedValue<number>;
-  topInset: number;
-}) {
-  const recent = useSharedValue(mode === "recent" ? 1 : 0);
-  useEffect(() => {
-    recent.set(withTiming(mode === "recent" ? 1 : 0, WASH_FADE));
-  }, [mode, recent]);
-
-  const followStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: -Math.max(0, offset.value + topInset) }],
-  }));
-  const favoritesStyle = useAnimatedStyle(() => ({ opacity: 1 - recent.value }));
-  const recentStyle = useAnimatedStyle(() => ({ opacity: recent.value }));
-
-  // Lighter on white, where the same tint reads much stronger.
-  const dark = theme.scheme === "dark";
-  return (
-    <Animated.View pointerEvents="none" style={[styles.wash, followStyle]}>
-      <Animated.View
-        style={[
-          StyleSheet.absoluteFill,
-          {
-            experimental_backgroundImage: washGradient(
-              modeColor(theme, "favorites"),
-              dark ? 0.34 : 0.18,
-            ),
-          },
-          favoritesStyle,
-        ]}
-      />
-      <Animated.View
-        style={[
-          StyleSheet.absoluteFill,
-          {
-            experimental_backgroundImage: washGradient(
-              modeColor(theme, "recent"),
-              dark ? 0.3 : 0.16,
-            ),
-          },
-          recentStyle,
-        ]}
-      />
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  wash: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    height: WASH_HEIGHT,
-  },
-});
diff --git a/mobile/components/form-field.tsx b/mobile/components/form-field.tsx
index f75cf741..4b42c468 100644
--- a/mobile/components/form-field.tsx
+++ b/mobile/components/form-field.tsx
@@ -81,7 +81,7 @@ export function FormTextInput(
           color: theme.color.fg,
           borderRadius: theme.radius.md,
           borderCurve: "continuous",
-          paddingHorizontal: 14,
+          paddingHorizontal: 16,
           paddingVertical: 12,
           fontSize: 17,
         },
diff --git a/mobile/components/library/browse-links-card.tsx b/mobile/components/library/browse-links-card.tsx
index 7806b49d..f49603ed 100644
--- a/mobile/components/library/browse-links-card.tsx
+++ b/mobile/components/library/browse-links-card.tsx
@@ -44,7 +44,7 @@ export function BrowseLinksCard({
   );
 }
 
-/** One disclosure row inside the card: accent icon, label, chevron, and an optional inset hairline above. */
+/** One disclosure row inside the card: icon, label, chevron, and an optional inset hairline above. */
 function BrowseLinkRow({
   icon,
   label,
@@ -68,7 +68,7 @@ function BrowseLinkRow({
           flexDirection: "row",
           alignItems: "center",
           paddingHorizontal: theme.space.md,
-          paddingVertical: 13,
+          paddingVertical: 12,
           gap: theme.space.md,
           backgroundColor: pressed ? theme.color.bgElev2 : "transparent",
         })}
@@ -77,7 +77,7 @@ function BrowseLinkRow({
           name={icon}
           size={20}
           weight="medium"
-          tintColor={theme.color.accent}
+          tintColor={theme.color.fg}
         />
         <Text style={{ flex: 1, color: theme.color.fg, fontSize: 16 }}>
           {label}
diff --git a/mobile/components/library/ranked-track-row.tsx b/mobile/components/library/ranked-track-row.tsx
index 43165b08..4cc1a772 100644
--- a/mobile/components/library/ranked-track-row.tsx
+++ b/mobile/components/library/ranked-track-row.tsx
@@ -74,8 +74,7 @@ export function RankedTrackRow({
               width: 30,
               color: rank === 1 ? theme.color.accent : theme.color.fgMuted,
               fontSize: 22,
-              fontWeight: "700",
-              letterSpacing: -0.5,
+              fontWeight: "600",
               fontVariant: ["tabular-nums"],
               textAlign: "center",
             }}
diff --git a/mobile/components/library/search-results.tsx b/mobile/components/library/search-results.tsx
index edb714cf..6ae95694 100644
--- a/mobile/components/library/search-results.tsx
+++ b/mobile/components/library/search-results.tsx
@@ -154,7 +154,7 @@ export function SearchResults({ search }: { search: string }) {
       }
       ListEmptyComponent={
         !search ? (
-          <EmptyState message="Search for songs, albums, and artists." />
+          <EmptyState message="Search for songs, albums, and artists" />
         ) : query.isLoading ? (
           <EmptyState loading />
         ) : query.isError || warnings.length === 0 ? (
diff --git a/mobile/components/library/welcome-card.tsx b/mobile/components/library/welcome-card.tsx
index 661c1cfe..fb29af5a 100644
--- a/mobile/components/library/welcome-card.tsx
+++ b/mobile/components/library/welcome-card.tsx
@@ -1,17 +1,12 @@
-import {
-  Pressable,
-  Text,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
+import { Text, View, type StyleProp, type ViewStyle } from "react-native";
 import { SymbolView } from "expo-symbols";
+import { PrimaryButton, SecondaryButton } from "../buttons";
 import { useTheme } from "../../theme/theme";
 
 /**
- * First-run card shown when the account has nothing personal yet (no plays,
- * no favorites): a short pitch plus pill buttons into browse and upload,
- * instead of a page of empty shelves.
+ * First-run block shown when the account has nothing personal yet (no plays,
+ * no favorites): one line plus buttons into browse and upload, instead of a
+ * page of empty shelves.
  */
 export function WelcomeCard({
   onBrowse,
@@ -27,26 +22,23 @@ export function WelcomeCard({
     <View
       style={[
         {
-          backgroundColor: theme.color.bgElev1,
-          borderRadius: theme.radius.lg,
-          borderCurve: "continuous",
-          padding: theme.space.xl,
+          paddingVertical: theme.space.xl,
           alignItems: "center",
           gap: theme.space.md,
         },
         style,
       ]}
     >
-      <SymbolView name="sparkles" size={40} tintColor={theme.color.accent} />
+      <SymbolView name="waveform" size={40} tintColor={theme.color.fgMuted} />
       <Text
         style={{
           color: theme.color.fg,
-          fontSize: 18,
+          fontSize: 17,
           fontWeight: "600",
           textAlign: "center",
         }}
       >
-        Make this place yours
+        Nothing played yet
       </Text>
       <Text
         style={{
@@ -56,52 +48,23 @@ export function WelcomeCard({
           maxWidth: 280,
         }}
       >
-        Play a few songs and favorite the keepers — this page fills in with
-        your recents, heavy rotation, and daily rediscoveries.
+        Songs you play and favorite show up here
       </Text>
-      <View style={{ flexDirection: "row", gap: theme.space.md, marginTop: 4 }}>
-        <PillButton
-          label="Browse library"
-          background={theme.color.accent}
-          color={theme.color.onAccent}
-          onPress={onBrowse}
-        />
-        <PillButton
-          label="Upload music"
-          background={theme.color.bgElev2}
-          color={theme.color.fg}
-          onPress={onUpload}
-        />
+      <View
+        style={{
+          flexDirection: "row",
+          alignSelf: "stretch",
+          gap: theme.space.md,
+          marginTop: theme.space.xs,
+        }}
+      >
+        <View style={{ flex: 1 }}>
+          <PrimaryButton label="Browse library" onPress={onBrowse} />
+        </View>
+        <View style={{ flex: 1 }}>
+          <SecondaryButton label="Upload music" onPress={onUpload} />
+        </View>
       </View>
     </View>
   );
 }
-
-/** Compact pill CTA used only inside the welcome card. */
-function PillButton({
-  label,
-  background,
-  color,
-  onPress,
-}: {
-  label: string;
-  background: string;
-  color: string;
-  onPress: () => void;
-}) {
-  return (
-    <Pressable
-      onPress={onPress}
-      accessibilityRole="button"
-      style={({ pressed }) => ({
-        backgroundColor: background,
-        borderRadius: 999,
-        paddingHorizontal: 18,
-        paddingVertical: 10,
-        opacity: pressed ? 0.7 : 1,
-      })}
-    >
-      <Text style={{ color, fontSize: 15, fontWeight: "600" }}>{label}</Text>
-    </Pressable>
-  );
-}
diff --git a/mobile/components/now-playing/hero-meta.tsx b/mobile/components/now-playing/hero-meta.tsx
index 2e2a61b0..61c08ade 100644
--- a/mobile/components/now-playing/hero-meta.tsx
+++ b/mobile/components/now-playing/hero-meta.tsx
@@ -42,7 +42,7 @@ export function HeroMeta({
             style={{
               color: theme.color.fg,
               fontSize: 22,
-              fontWeight: "700",
+              fontWeight: "600",
               letterSpacing: -0.3,
               flexShrink: 1,
             }}
diff --git a/mobile/components/now-playing/lyrics-language-selector.tsx b/mobile/components/now-playing/lyrics-language-selector.tsx
index 2f0c7cc2..617feb02 100644
--- a/mobile/components/now-playing/lyrics-language-selector.tsx
+++ b/mobile/components/now-playing/lyrics-language-selector.tsx
@@ -45,7 +45,7 @@ const TRANSLATION_LANGUAGES: readonly TranslationLanguage[] = [
 type ExpandedSelector = "source" | "target" | null;
 
 function languageLabel(code: string | null): string {
-  if (code === null) return "Auto Detect";
+  if (code === null) return "Auto detect";
   return (
     TRANSLATION_LANGUAGES.find((language) => language.code === code)?.label ??
     code
@@ -121,7 +121,7 @@ export function LyricsLanguageSelector({
             title="To"
             value={
               targetLanguage === null
-                ? "Select Language"
+                ? "Select language"
                 : languageLabel(targetLanguage)
             }
             expanded={expanded === "target"}
@@ -213,7 +213,7 @@ function SelectorRow({
         <Text
           style={[
             styles.selectorTitle,
-            { color: theme.color.fg, fontWeight: expanded ? "700" : "500" },
+            { color: theme.color.fg, fontWeight: expanded ? "600" : "500" },
           ]}
         >
           {title}
@@ -245,7 +245,7 @@ function LanguageOptions({
   const options: readonly (
     TranslationLanguage | { code: null; label: string }
   )[] = includeAutoDetect
-    ? [{ code: null, label: "Auto Detect" }, ...TRANSLATION_LANGUAGES]
+    ? [{ code: null, label: "Auto detect" }, ...TRANSLATION_LANGUAGES]
     : TRANSLATION_LANGUAGES;
 
   return (
@@ -360,11 +360,11 @@ const styles = StyleSheet.create({
     minHeight: 42,
     borderRadius: 21,
     marginTop: 10,
-    paddingHorizontal: 14,
+    paddingHorizontal: 16,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: 7,
+    gap: 8,
   },
   actionLabel: {
     fontSize: 14,
diff --git a/mobile/components/now-playing/lyrics-section.tsx b/mobile/components/now-playing/lyrics-section.tsx
index 00dcde48..b135b770 100644
--- a/mobile/components/now-playing/lyrics-section.tsx
+++ b/mobile/components/now-playing/lyrics-section.tsx
@@ -428,11 +428,9 @@ export const LyricsSection = forwardRef<
                     line.section
                       ? {
                           color: theme.color.accent,
-                          fontSize: 12,
-                          fontWeight: "700",
-                          letterSpacing: 0.66,
-                          lineHeight: 17,
-                          textTransform: "uppercase",
+                          fontSize: 13,
+                          fontWeight: "600",
+                          lineHeight: 18,
                         }
                       : {
                           color: theme.color.fgSubtle,
@@ -453,7 +451,7 @@ export const LyricsSection = forwardRef<
                       color: theme.color.fgMuted,
                       fontSize: 14,
                       lineHeight: 20,
-                      paddingTop: 3,
+                      paddingTop: 4,
                     }}
                   >
                     {activeTranslation.lines[index]}
@@ -600,12 +598,11 @@ const SyncedLyricLine = memo(function SyncedLyricLine({
   );
 
   const baseLineText: TextStyle = {
-    fontSize: line.section ? 12 : state === "active" ? 19 : 18,
-    fontWeight: line.section ? "700" : state === "active" ? "500" : "400",
+    fontSize: line.section ? 13 : state === "active" ? 19 : 18,
+    fontWeight: line.section ? "600" : state === "active" ? "500" : "400",
     lineHeight: line.section ? 18 : 27,
-    // Frontend section letter-spacing 0.055em ≈ 0.66 at 12px; body -0.01em.
-    letterSpacing: line.section ? 0.66 : -0.19,
-    textTransform: line.section ? "uppercase" : "none",
+    // Body lines keep the frontend's -0.01em; section labels stay untracked.
+    letterSpacing: line.section ? 0 : -0.19,
   };
 
   return (
@@ -645,9 +642,8 @@ const SyncedLyricLine = memo(function SyncedLyricLine({
             color: theme.color.fgMuted,
             fontSize: 14,
             fontWeight: "400",
-            letterSpacing: -0.08,
             lineHeight: 20,
-            paddingTop: 3,
+            paddingTop: 4,
           }}
         >
           {translatedText}
diff --git a/mobile/components/now-playing/queue-row.tsx b/mobile/components/now-playing/queue-row.tsx
index 936fde15..856b1265 100644
--- a/mobile/components/now-playing/queue-row.tsx
+++ b/mobile/components/now-playing/queue-row.tsx
@@ -65,7 +65,7 @@ function QueueRowImpl({
           transitionMs={120}
           priority="normal"
         />
-        <View style={{ flex: 1, minWidth: 0, gap: 3 }}>
+        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
           <View style={styles.titleLine}>
             <Text
               numberOfLines={1}
diff --git a/mobile/components/now-playing/queue-section.tsx b/mobile/components/now-playing/queue-section.tsx
index 37b693fd..44984903 100644
--- a/mobile/components/now-playing/queue-section.tsx
+++ b/mobile/components/now-playing/queue-section.tsx
@@ -320,7 +320,7 @@ export const QueueSection = memo(function QueueSection({
         ListEmptyComponent={
           <View style={styles.emptyState}>
             <Text style={{ color: theme.color.fgMuted }}>
-              Nothing else queued.
+              Nothing else queued
             </Text>
           </View>
         }
diff --git a/mobile/components/ota-updates.tsx b/mobile/components/ota-updates.tsx
index 82d6e38c..a08b6cd6 100644
--- a/mobile/components/ota-updates.tsx
+++ b/mobile/components/ota-updates.tsx
@@ -186,7 +186,7 @@ export function OtaUpdateRows() {
             styles.row,
             {
               paddingHorizontal: SETTINGS_INSET,
-              paddingVertical: 14,
+              paddingVertical: 12,
               borderTopWidth: StyleSheet.hairlineWidth,
               borderTopColor: theme.color.separator,
               backgroundColor: pressed ? theme.color.bgElev2 : "transparent",
@@ -251,7 +251,7 @@ function StatusTrailing({
         style={{
           backgroundColor: theme.color.accent,
           borderRadius: 11,
-          paddingHorizontal: 9,
+          paddingHorizontal: 8,
           height: 22,
           justifyContent: "center",
         }}
diff --git a/mobile/components/playback-device-button.tsx b/mobile/components/playback-device-button.tsx
index 423f2fab..e816eef5 100644
--- a/mobile/components/playback-device-button.tsx
+++ b/mobile/components/playback-device-button.tsx
@@ -88,7 +88,7 @@ export function PlaybackDeviceButton({
             swiftFrame({ width: size, height: size }),
           ]}
         >
-          <Section title={connected ? "Playback Device" : "Reconnecting…"}>
+          <Section title={connected ? "Playback device" : "Reconnecting…"}>
             <Button
               label={LOCAL_DEVICE_LABEL}
               systemImage={targetDeviceId ? localIcon : "checkmark"}
@@ -117,7 +117,7 @@ export function PlaybackDeviceButton({
             <>
               <Divider />
               <Button
-                label="No Other Devices Available"
+                label="No other devices available"
                 systemImage="wifi.slash"
                 modifiers={[swiftDisabled()]}
               />
@@ -127,7 +127,7 @@ export function PlaybackDeviceButton({
             <>
               <Divider />
               <Button
-                label="Last Command Failed"
+                label="Last command failed"
                 systemImage="exclamationmark.triangle"
                 modifiers={[swiftDisabled()]}
               />
@@ -228,7 +228,7 @@ export function PlaybackDeviceButton({
                   selectable
                   style={[styles.eyebrow, { color: theme.color.fgMuted }]}
                 >
-                  CONNECT
+                  Connect
                 </Text>
                 <Text
                   selectable
@@ -273,7 +273,7 @@ export function PlaybackDeviceButton({
               selectable
               style={[styles.sectionLabel, { color: theme.color.fgMuted }]}
             >
-              AVAILABLE DEVICES
+              Available devices
             </Text>
             {remoteDevices.length ? (
               remoteDevices.map((device) => (
@@ -569,13 +569,11 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   eyebrow: {
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 1.2,
+    fontSize: 13,
   },
   title: {
     fontSize: 18,
-    fontWeight: "700",
+    fontWeight: "600",
   },
   connectionState: {
     flexDirection: "row",
@@ -594,9 +592,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingTop: 16,
     paddingBottom: 6,
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 1.1,
+    fontSize: 13,
   },
   deviceRow: {
     minHeight: 62,
@@ -630,7 +626,7 @@ const styles = StyleSheet.create({
   deviceCopy: {
     flex: 1,
     minWidth: 0,
-    gap: 3,
+    gap: 2,
   },
   deviceName: {
     fontSize: 15,
diff --git a/mobile/components/playlist-picker/picker-row.tsx b/mobile/components/playlist-picker/picker-row.tsx
index 8734bf07..ac364c0f 100644
--- a/mobile/components/playlist-picker/picker-row.tsx
+++ b/mobile/components/playlist-picker/picker-row.tsx
@@ -160,7 +160,7 @@ export const NewPlaylistRow = memo(function NewPlaylistRow({
             maxFontSizeMultiplier={PICKER_MAX_FONT_SCALE}
             style={[styles.subtitle, { color: theme.color.accent }]}
           >
-            New Playlist
+            New playlist
           </Text>
         </View>
       </View>
@@ -214,7 +214,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
-    paddingHorizontal: 14,
+    paddingHorizontal: 16,
   },
   body: {
     flex: 1,
@@ -249,8 +249,8 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 4,
-    paddingLeft: 7,
-    paddingRight: 9,
+    paddingLeft: 8,
+    paddingRight: 8,
     borderRadius: 12,
   },
   badgeText: {
diff --git a/mobile/components/playlist-picker/search-field.tsx b/mobile/components/playlist-picker/search-field.tsx
index c19c98ba..bcbcb1a7 100644
--- a/mobile/components/playlist-picker/search-field.tsx
+++ b/mobile/components/playlist-picker/search-field.tsx
@@ -7,7 +7,7 @@ const PLACEHOLDER = "Find or name a new playlist";
 
 /**
  * The picker's one field: it narrows the list, and a name no playlist has
- * becomes the "New Playlist" row. The placeholder says both. `busy` shows
+ * becomes the "New playlist" row. The placeholder says both. `busy` shows
  * a spinner at its end while the list is still finding out which playlists
  * already hold the track.
  */
@@ -65,7 +65,7 @@ const styles = StyleSheet.create({
   field: {
     height: 40,
     marginTop: 12,
-    marginHorizontal: 14,
+    marginHorizontal: 16,
     marginBottom: 4,
     paddingLeft: 12,
     paddingRight: 6,
@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
     borderCurve: "continuous",
     flexDirection: "row",
     alignItems: "center",
-    gap: 7,
+    gap: 8,
   },
   input: {
     flex: 1,
diff --git a/mobile/components/playlist-picker/track-card.tsx b/mobile/components/playlist-picker/track-card.tsx
index 41cfe508..c8a25758 100644
--- a/mobile/components/playlist-picker/track-card.tsx
+++ b/mobile/components/playlist-picker/track-card.tsx
@@ -26,7 +26,7 @@ export function TrackCard({
   lifted: boolean;
 }) {
   const theme = useTheme();
-  const title = track ? displayText(track.title) : "Add to Playlist";
+  const title = track ? displayText(track.title) : "Add to playlist";
   const names = track
     ? [displayText(track.artist), displayText(track.album_title)].filter(Boolean)
     : [];
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
     gap: 12,
     paddingVertical: 10,
     paddingLeft: 10,
-    paddingRight: 14,
+    paddingRight: 16,
     borderRadius: 18,
     borderCurve: "continuous",
   },
diff --git a/mobile/components/playlists/playlist-cover-field.tsx b/mobile/components/playlists/playlist-cover-field.tsx
index 182fc673..c4950e28 100644
--- a/mobile/components/playlists/playlist-cover-field.tsx
+++ b/mobile/components/playlists/playlist-cover-field.tsx
@@ -84,7 +84,7 @@ export function PlaylistCoverField({
         quality: 0.9,
       });
     } catch {
-      setError("Couldn't open the photo library.");
+      setError("Couldn't open the photo library");
       return;
     }
     if (result.canceled || result.assets.length === 0) return;
diff --git a/mobile/components/playlists/playlist-detail-header.tsx b/mobile/components/playlists/playlist-detail-header.tsx
index aa11978d..ee44b3dd 100644
--- a/mobile/components/playlists/playlist-detail-header.tsx
+++ b/mobile/components/playlists/playlist-detail-header.tsx
@@ -337,7 +337,7 @@ export function PlaylistStatusGlyphs({
     <View
       accessible
       accessibilityLabel={a11y}
-      style={{ flexDirection: "row", alignItems: "center", gap: 5 }}
+      style={{ flexDirection: "row", alignItems: "center", gap: 4 }}
     >
       {status === "downloading" ? (
         <>
@@ -459,8 +459,8 @@ export function PlaylistMoreMenu({
   const downloadLabel = isDownloading
     ? `Downloading ${downloaded}/${total}…`
     : isDownloaded
-      ? "Remove Download…"
-      : "Download Playlist";
+      ? "Remove download…"
+      : "Download playlist";
   const downloadDisabled =
     !hasTracks || isDownloading || (offline && !isDownloaded);
   const autoDisabled = !hasTracks || (offline && !autoEnabled);
@@ -474,12 +474,12 @@ export function PlaylistMoreMenu({
         onPress={() =>
           Alert.alert(playlistName, undefined, [
             ...(canEditDetails
-              ? [{ text: "Edit Playlist", onPress: onEdit }]
+              ? [{ text: "Edit playlist", onPress: onEdit }]
               : []),
             ...(canEdit
               ? [
                   {
-                    text: reorderActive ? "Done Reordering" : "Reorder Tracks",
+                    text: reorderActive ? "Done reordering" : "Reorder tracks",
                     onPress: onToggleReorder,
                   },
                 ]
@@ -491,8 +491,8 @@ export function PlaylistMoreMenu({
               ? [
                   {
                     text: autoEnabled
-                      ? "Turn Off Auto-Download"
-                      : "Auto-Download New Tracks",
+                      ? "Turn off auto-download"
+                      : "Auto-download new tracks",
                     onPress: onAutoPress,
                   },
                 ]
@@ -504,8 +504,8 @@ export function PlaylistMoreMenu({
               ? [
                   {
                     text: serverSave.enabled
-                      ? "Stop Saving TIDAL to Server"
-                      : "Save TIDAL to Server",
+                      ? "Stop saving TIDAL to server"
+                      : "Save TIDAL to server",
                     onPress: serverSave.onToggle,
                   },
                 ]
@@ -513,7 +513,7 @@ export function PlaylistMoreMenu({
             ...(canDelete
               ? [
                   {
-                    text: "Delete Playlist",
+                    text: "Delete playlist",
                     style: "destructive" as const,
                     onPress: onDelete,
                   },
@@ -541,14 +541,14 @@ export function PlaylistMoreMenu({
       >
         {canEditDetails ? (
           <swiftUI.Button
-            label="Edit Playlist"
+            label="Edit playlist"
             systemImage="pencil"
             onPress={onEdit}
           />
         ) : null}
         {canEdit ? (
           <swiftUI.Button
-            label={reorderActive ? "Done Reordering" : "Reorder Tracks"}
+            label={reorderActive ? "Done reordering" : "Reorder tracks"}
             systemImage={reorderActive ? "checkmark" : "line.3.horizontal"}
             onPress={onToggleReorder}
           />
@@ -561,7 +561,7 @@ export function PlaylistMoreMenu({
           onPress={onDownloadPress}
         />
         <swiftUI.Button
-          label="Auto-Download New Tracks"
+          label="Auto-download new tracks"
           systemImage={autoEnabled ? "checkmark" : "arrow.clockwise"}
           modifiers={[swiftDisabled(autoDisabled)]}
           onPress={onAutoPress}
@@ -575,7 +575,7 @@ export function PlaylistMoreMenu({
         ) : null}
         {serverSave ? (
           <swiftUI.Button
-            label="Save TIDAL to Server"
+            label="Save TIDAL to server"
             systemImage={serverSave.enabled ? "checkmark" : "externaldrive"}
             modifiers={[swiftDisabled(serverSave.pending)]}
             onPress={serverSave.onToggle}
@@ -585,7 +585,7 @@ export function PlaylistMoreMenu({
           <>
             <swiftUI.Divider />
             <swiftUI.Button
-              label="Delete Playlist"
+              label="Delete playlist"
               systemImage="trash"
               role="destructive"
               modifiers={[swiftDisabled(deletePending)]}
diff --git a/mobile/components/primitives.tsx b/mobile/components/primitives.tsx
index 5348134e..5ab0c3c9 100644
--- a/mobile/components/primitives.tsx
+++ b/mobile/components/primitives.tsx
@@ -26,7 +26,7 @@ export function Card({
       style={[
         {
           backgroundColor: theme.color.bgElev1,
-          borderRadius: theme.radius.md,
+          borderRadius: theme.radius.lg,
           borderCurve: "continuous",
         },
         style,
@@ -37,7 +37,7 @@ export function Card({
   );
 }
 
-/** Muted uppercase micro-label above a form section or list group. */
+/** Muted label above a form section or list group. */
 export function SectionLabel({
   style,
   children,
@@ -51,9 +51,7 @@ export function SectionLabel({
       style={[
         {
           color: theme.color.fgMuted,
-          fontSize: 12,
-          textTransform: "uppercase",
-          letterSpacing: 0.4,
+          fontSize: 13,
         },
         style,
       ]}
diff --git a/mobile/components/remote-control-indicator.tsx b/mobile/components/remote-control-indicator.tsx
index 70679cc1..b57c31e7 100644
--- a/mobile/components/remote-control-indicator.tsx
+++ b/mobile/components/remote-control-indicator.tsx
@@ -59,12 +59,12 @@ const styles = StyleSheet.create({
   },
   pill: {
     minHeight: 30,
-    paddingHorizontal: 13,
+    paddingHorizontal: 12,
     borderRadius: 16,
     borderWidth: StyleSheet.hairlineWidth,
     flexDirection: "row",
     alignItems: "center",
-    gap: 7,
+    gap: 8,
   },
   text: {
     fontSize: 12,
diff --git a/mobile/components/replay/activity-chart.tsx b/mobile/components/replay/activity-chart.tsx
index 185dc62f..eda5a925 100644
--- a/mobile/components/replay/activity-chart.tsx
+++ b/mobile/components/replay/activity-chart.tsx
@@ -7,11 +7,12 @@ import {
   type ReplayData,
 } from "@music-library/core";
 import { Card } from "../primitives";
-import { useTheme } from "../../theme/theme";
+import { useTheme, withAlpha } from "../../theme/theme";
 
 /**
  * Bar chart card of plays per time bucket, with a sparse axis-label row
- * underneath (~6 ticks max so labels don't overlap).
+ * underneath (~6 ticks max so labels don't overlap). Only the busiest bucket
+ * takes the accent; the rest sit back in a neutral.
  */
 export function ActivityChart({
   buckets,
@@ -26,13 +27,13 @@ export function ActivityChart({
   const { max, labelStep } = useMemo(() => activityChartScale(buckets), [buckets]);
 
   return (
-    <Card style={[{ padding: 14 }, style]}>
+    <Card style={[{ padding: 16 }, style]}>
       <View
         style={{
           flexDirection: "row",
           alignItems: "flex-end",
-          height: 120,
-          gap: 3,
+          height: 160,
+          gap: 2,
         }}
       >
         {buckets.map((b) => {
@@ -50,7 +51,10 @@ export function ActivityChart({
                 style={{
                   height: `${pct}%`,
                   minHeight: 2,
-                  backgroundColor: theme.color.accent,
+                  backgroundColor:
+                    max > 0 && b.plays === max
+                      ? theme.color.accent
+                      : withAlpha(theme.color.fgMuted, 0.45),
                   borderRadius: 2,
                   borderTopLeftRadius: 3,
                   borderTopRightRadius: 3,
@@ -63,8 +67,8 @@ export function ActivityChart({
       <View
         style={{
           flexDirection: "row",
-          marginTop: 6,
-          gap: 3,
+          marginTop: 8,
+          gap: 2,
         }}
       >
         {buckets.map((b, i) => {
@@ -78,7 +82,7 @@ export function ActivityChart({
                 <Text
                   style={{
                     color: theme.color.fgMuted,
-                    fontSize: 10,
+                    fontSize: 11,
                     fontVariant: ["tabular-nums"],
                   }}
                 >
diff --git a/mobile/components/replay/genre-list.tsx b/mobile/components/replay/genre-list.tsx
index 59f35f2e..9821d769 100644
--- a/mobile/components/replay/genre-list.tsx
+++ b/mobile/components/replay/genre-list.tsx
@@ -1,12 +1,12 @@
 import { Text, View, type StyleProp, type ViewStyle } from "react-native";
 import { displayText, genreShares, type ReplayData } from "@music-library/core";
 import { Card } from "../primitives";
-import { useTheme } from "../../theme/theme";
+import { useTheme, withAlpha } from "../../theme/theme";
 import { HairlineSeparator } from "../hairline-separator";
 
 /**
- * Card of genre rows with a proportional accent bar and percent-of-plays
- * figure per genre.
+ * Card of genre rows with a proportional bar and percent-of-plays figure per
+ * genre. Only the top genre's bar takes the accent.
  */
 export function GenreList({
   genres,
@@ -22,10 +22,10 @@ export function GenreList({
         const pct = g.share;
         return (
           <View key={g.genre}>
-            {i > 0 && <HairlineSeparator inset={14} />}
+            {i > 0 && <HairlineSeparator inset={16} />}
             <View
               style={{
-                paddingHorizontal: 14,
+                paddingHorizontal: 16,
                 paddingVertical: 12,
                 flexDirection: "row",
                 alignItems: "center",
@@ -56,7 +56,10 @@ export function GenreList({
                   style={{
                     width: `${pct}%`,
                     height: "100%",
-                    backgroundColor: theme.color.accent,
+                    backgroundColor:
+                      i === 0
+                        ? theme.color.accent
+                        : withAlpha(theme.color.fgMuted, 0.45),
                     borderRadius: 999,
                   }}
                 />
diff --git a/mobile/components/replay/period-picker.tsx b/mobile/components/replay/period-picker.tsx
index a3e85943..2ec5d921 100644
--- a/mobile/components/replay/period-picker.tsx
+++ b/mobile/components/replay/period-picker.tsx
@@ -153,7 +153,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   pill: {
-    paddingHorizontal: 14,
+    paddingHorizontal: 16,
     paddingVertical: 8,
   },
 });
diff --git a/mobile/components/replay/ranked-shelf-tile.tsx b/mobile/components/replay/ranked-shelf-tile.tsx
index f4cf54a2..8b35f359 100644
--- a/mobile/components/replay/ranked-shelf-tile.tsx
+++ b/mobile/components/replay/ranked-shelf-tile.tsx
@@ -1,5 +1,4 @@
 import {
-  StyleSheet,
   Text,
   View,
   type StyleProp,
@@ -7,6 +6,7 @@ import {
 } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Image } from "expo-image";
+import { SymbolView } from "expo-symbols";
 import { albumCoverUrl } from "@music-library/core";
 import { ShelfTile } from "../shelf-tile";
 import { useTheme } from "../../theme/theme";
@@ -14,20 +14,12 @@ import { useTheme } from "../../theme/theme";
 const TILE_SIZE = 128;
 
 /**
- * Artwork for a shelf tile: either a real album cover or a deterministic
- * two-tone gradient seeded by a string (for artists without cover art).
+ * Artwork for a shelf tile: an album's cover, or for an artist a cover from
+ * their top tracks, falling back to a person glyph.
  */
 type ShelfTileArt =
   | { kind: "album"; albumId: string }
-  | { kind: "gradient"; seed: string };
-
-// Deterministic hue seeded by a string, used for artist tiles that have
-// no real cover art.
-function hueFor(seed: string): number {
-  let hash = 0;
-  for (let i = 0; i < seed.length; i++) hash = (hash * 31 + seed.charCodeAt(i)) | 0;
-  return Math.abs(hash) % 360;
-}
+  | { kind: "artist"; imageUrl: string | null };
 
 /**
  * Ranked 128pt tile for the top-artists / top-albums shelves: artwork with
@@ -51,14 +43,15 @@ export function RankedShelfTile({
   subtitleTabular?: boolean;
   accessibilityLabel: string;
   art: ShelfTileArt;
-  onPress: () => void;
+  /** Omitted when the tile has nothing to open or play. */
+  onPress?: () => void;
   style?: StyleProp<ViewStyle>;
 }) {
   return (
     <ShelfTile
       artwork={
-        art.kind === "gradient" ? (
-          <GradientArt seed={art.seed} rank={rank} />
+        art.kind === "artist" ? (
+          <ArtistArt imageUrl={art.imageUrl} rank={rank} />
         ) : (
           <AlbumArt albumId={art.albumId} rank={rank} />
         )
@@ -68,18 +61,21 @@ export function RankedShelfTile({
       subtitleTabular={subtitleTabular}
       width={TILE_SIZE}
       accessibilityLabel={accessibilityLabel}
-      onPress={() => {
-        void Haptics.selectionAsync();
-        onPress();
-      }}
+      onPress={
+        onPress
+          ? () => {
+              void Haptics.selectionAsync();
+              onPress();
+            }
+          : undefined
+      }
       style={style}
     />
   );
 }
 
-function GradientArt({ seed, rank }: { seed: string; rank: number }) {
+function ArtistArt({ imageUrl, rank }: { imageUrl: string | null; rank: number }) {
   const theme = useTheme();
-  const hue = hueFor(seed);
   return (
     <View
       style={{
@@ -88,16 +84,22 @@ function GradientArt({ seed, rank }: { seed: string; rank: number }) {
         borderRadius: theme.radius.md,
         borderCurve: "continuous",
         overflow: "hidden",
-        backgroundColor: `hsl(${hue}, 50%, 50%)`,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: theme.color.bgElev1,
       }}
     >
-      <View
-        style={{
-          ...StyleSheet.absoluteFill,
-          backgroundColor: `hsl(${(hue + 40) % 360}, 60%, 35%)`,
-          opacity: 0.55,
-        }}
-      />
+      {imageUrl ? (
+        <Image
+          source={{ uri: imageUrl }}
+          style={{ width: TILE_SIZE, height: TILE_SIZE }}
+          contentFit="cover"
+          cachePolicy="memory-disk"
+          recyclingKey={imageUrl}
+        />
+      ) : (
+        <SymbolView name="person.fill" size={48} tintColor={theme.color.fgMuted} />
+      )}
       <RankBadge rank={rank} />
     </View>
   );
@@ -135,12 +137,12 @@ function RankBadge({ rank }: { rank: number }) {
     <View
       style={{
         position: "absolute",
-        top: 6,
-        left: 6,
-        minWidth: 22,
-        height: 22,
-        paddingHorizontal: 7,
-        borderRadius: 999,
+        top: 8,
+        left: 8,
+        minWidth: 24,
+        height: 24,
+        paddingHorizontal: 8,
+        borderRadius: 12,
         backgroundColor: "rgba(0,0,0,0.6)",
         alignItems: "center",
         justifyContent: "center",
@@ -149,7 +151,7 @@ function RankBadge({ rank }: { rank: number }) {
       <Text
         style={{
           color: "#FFFFFF",
-          fontSize: 11,
+          fontSize: 12,
           fontWeight: "600",
           fontVariant: ["tabular-nums"],
         }}
diff --git a/mobile/components/replay/replay-action-button.tsx b/mobile/components/replay/replay-action-button.tsx
index eb0b21df..d8ef554c 100644
--- a/mobile/components/replay/replay-action-button.tsx
+++ b/mobile/components/replay/replay-action-button.tsx
@@ -11,8 +11,8 @@ import { useTheme } from "../../theme/theme";
 
 /**
  * Quiet full-width action row for the bottom of the Replay screen (generate
- * playlist, share image): accent icon + label on an elevated surface, with
- * a spinner while the action is in flight.
+ * playlist, share image): icon + label on an elevated surface, with a spinner
+ * while the action is in flight.
  */
 export function ReplayActionButton({
   icon,
@@ -41,11 +41,12 @@ export function ReplayActionButton({
           backgroundColor: theme.color.bgElev1,
           borderRadius: theme.radius.md,
           borderCurve: "continuous",
-          paddingVertical: 14,
+          minHeight: 48,
+          paddingVertical: 12,
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "center",
-          gap: 10,
+          gap: 8,
           opacity: pressed || busy ? 0.6 : 1,
         },
         style,
@@ -54,11 +55,11 @@ export function ReplayActionButton({
       {busy ? (
         <ActivityIndicator color={theme.color.fgMuted} />
       ) : (
-        <SymbolView name={icon} size={18} tintColor={theme.color.accent} />
+        <SymbolView name={icon} size={18} tintColor={theme.color.fg} />
       )}
       <Text
         style={{
-          color: theme.color.accent,
+          color: theme.color.fg,
           fontSize: 16,
           fontWeight: "500",
         }}
diff --git a/mobile/components/replay/replay-empty-state.tsx b/mobile/components/replay/replay-empty-state.tsx
index 965b050a..719f29c7 100644
--- a/mobile/components/replay/replay-empty-state.tsx
+++ b/mobile/components/replay/replay-empty-state.tsx
@@ -3,8 +3,8 @@ import { SymbolView } from "expo-symbols";
 import { useTheme } from "../../theme/theme";
 
 /**
- * Friendly zero-plays placeholder for a Replay window: sparkles glyph,
- * headline, and a nudge toward the Library tab.
+ * Zero-plays placeholder for a Replay period: waveform glyph, headline, and a
+ * nudge toward the Library tab.
  */
 export function ReplayEmptyState({
   style,
@@ -24,7 +24,7 @@ export function ReplayEmptyState({
         style,
       ]}
     >
-      <SymbolView name="sparkles" size={48} tintColor={theme.color.fgMuted} />
+      <SymbolView name="waveform" size={48} tintColor={theme.color.fgMuted} />
       <Text
         style={{
           color: theme.color.fg,
@@ -33,7 +33,7 @@ export function ReplayEmptyState({
           textAlign: "center",
         }}
       >
-        No plays in this window yet
+        No plays in this period
       </Text>
       <Text
         style={{
@@ -43,8 +43,7 @@ export function ReplayEmptyState({
           maxWidth: 280,
         }}
       >
-        Listen to some music from the Library tab and your stats will show up
-        here.
+        Music you play from the Library tab shows up here
       </Text>
     </View>
   );
diff --git a/mobile/components/replay/replay-hero.tsx b/mobile/components/replay/replay-hero.tsx
index 1d873714..cd0d2a60 100644
--- a/mobile/components/replay/replay-hero.tsx
+++ b/mobile/components/replay/replay-hero.tsx
@@ -4,8 +4,8 @@ import { useTheme } from "../../theme/theme";
 import { formatListeningTime, pluralize } from "./format";
 
 /**
- * Headline block for the Replay screen: eyebrow with the period title, a
- * huge total-plays figure, and the listening-time subline.
+ * Headline block for the Replay screen: a huge total-plays figure and the
+ * listening-time subline. The period is on the picker right above it.
  */
 export function ReplayHero({
   periodTitle,
@@ -29,23 +29,12 @@ export function ReplayHero({
       accessibilityLabel={`Replay, ${periodTitle}: ${plays}, ${listened}`}
       style={[{ paddingHorizontal: theme.space.lg, gap: 4 }, style]}
     >
-      <Text
-        style={{
-          color: theme.color.fgMuted,
-          fontSize: 12,
-          letterSpacing: 0.8,
-          textTransform: "uppercase",
-          fontVariant: ["tabular-nums"],
-        }}
-      >
-        Replay · {periodTitle}
-      </Text>
       <Text
         style={{
           color: theme.color.fg,
           fontSize: 40,
-          fontWeight: "700",
-          letterSpacing: -1,
+          fontWeight: "600",
+          letterSpacing: -0.8,
           fontVariant: ["tabular-nums"],
         }}
       >
diff --git a/mobile/components/replay/summary-grid.tsx b/mobile/components/replay/summary-grid.tsx
index 938bd1ce..75d3b25f 100644
--- a/mobile/components/replay/summary-grid.tsx
+++ b/mobile/components/replay/summary-grid.tsx
@@ -8,11 +8,10 @@ import {
 import { displayText, type ReplayData } from "@music-library/core";
 import { Card } from "../primitives";
 import { useTheme } from "../../theme/theme";
-import { formatListeningTime } from "./format";
 
 /**
- * 2×2 stat grid card (listening time, unique tracks/artists, top artist)
- * with hairline dividers between the cells.
+ * Stat card (unique tracks and artists side by side, the top artist below)
+ * with hairline dividers between the cells. Listening time is in the hero.
  */
 export function SummaryGrid({
   summary,
@@ -23,10 +22,6 @@ export function SummaryGrid({
 }) {
   const theme = useTheme();
   const items: { label: string; value: string }[] = [
-    {
-      label: "Listening",
-      value: formatListeningTime(summary.total_ms),
-    },
     {
       label: "Tracks",
       value: summary.unique_tracks.toLocaleString(),
@@ -52,14 +47,14 @@ export function SummaryGrid({
       ]}
     >
       {items.map((item, i) => {
-        const isRight = i % 2 === 1;
-        const isBottom = i >= 2;
+        const isRight = i === 1;
+        const isBottom = i === 2;
         return (
           <View
             key={item.label}
             style={{
-              width: "50%",
-              padding: 14,
+              width: isBottom ? "100%" : "50%",
+              padding: 16,
               borderLeftWidth: isRight ? StyleSheet.hairlineWidth : 0,
               borderTopWidth: isBottom ? StyleSheet.hairlineWidth : 0,
               borderColor: theme.color.separator,
@@ -69,9 +64,7 @@ export function SummaryGrid({
               numberOfLines={1}
               style={{
                 color: theme.color.fgMuted,
-                fontSize: 11,
-                letterSpacing: 0.6,
-                textTransform: "uppercase",
+                fontSize: 13,
               }}
             >
               {item.label}
diff --git a/mobile/components/section.tsx b/mobile/components/section.tsx
index 2286c4dc..59fa4f54 100644
--- a/mobile/components/section.tsx
+++ b/mobile/components/section.tsx
@@ -11,8 +11,8 @@ import { useTheme } from "../theme/theme";
 import { Eyebrow } from "./eyebrow";
 
 /**
- * Section shell for scrolling feature pages (home, replay): eyebrow + large
- * title on the left, optional accent action (label with an optional SF
+ * Section shell for scrolling feature pages (home, replay): optional eyebrow +
+ * large title on the left, optional accent action (label with an optional SF
  * Symbol) on the right, then the section body. Horizontal padding applies to
  * the header only, so full-bleed shelves can manage their own edge insets.
  */
@@ -67,7 +67,7 @@ export function Section({
             style={({ pressed }) => ({
               flexDirection: "row",
               alignItems: "center",
-              gap: 5,
+              gap: 4,
               paddingBottom: 2,
               opacity: pressed ? 0.6 : 1,
             })}
diff --git a/mobile/components/settings/account-card.tsx b/mobile/components/settings/account-card.tsx
index 981bb457..a4cd0f89 100644
--- a/mobile/components/settings/account-card.tsx
+++ b/mobile/components/settings/account-card.tsx
@@ -73,12 +73,12 @@ export function AccountCard() {
           <View
             style={[
               styles.avatar,
-              {
-                experimental_backgroundImage: `linear-gradient(140deg, #B47CFF 0%, ${theme.color.brand} 45%, #5B2BD9 100%)`,
-              },
+              { backgroundColor: theme.color.bgElev2 },
             ]}
           >
-            <Text style={styles.initials}>{accountInitials(me?.username)}</Text>
+            <Text style={[styles.initials, { color: theme.color.fg }]}>
+              {accountInitials(me?.username)}
+            </Text>
           </View>
           <View style={{ flex: 1, gap: 1 }}>
             <Text
@@ -107,7 +107,7 @@ export function AccountCard() {
               ]}
             >
               <swiftUI.Button
-                label="Sign Out"
+                label="Sign out"
                 systemImage="rectangle.portrait.and.arrow.right"
                 role="destructive"
                 onPress={() => void onSignOut()}
@@ -125,7 +125,7 @@ export function AccountCard() {
                 title: username,
                 items: [
                   {
-                    label: "Sign Out",
+                    label: "Sign out",
                     destructive: true,
                     onPress: () => void onSignOut(),
                   },
@@ -168,10 +168,8 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   initials: {
-    color: "#FFFFFF",
     fontSize: 16,
     fontWeight: "600",
-    letterSpacing: 0.2,
   },
   moreTarget: {
     width: MORE_TARGET,
diff --git a/mobile/components/settings/appearance-tile.tsx b/mobile/components/settings/appearance-tile.tsx
index eeff64cd..9521af27 100644
--- a/mobile/components/settings/appearance-tile.tsx
+++ b/mobile/components/settings/appearance-tile.tsx
@@ -256,7 +256,7 @@ const styles = StyleSheet.create({
   label: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 5,
+    gap: 4,
   },
   radio: {
     width: RADIO,
@@ -266,20 +266,20 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   mini: {
-    paddingTop: 14,
-    paddingHorizontal: 9,
+    paddingTop: 12,
+    paddingHorizontal: 8,
   },
   miniTitle: {
     height: 7,
     width: "46%",
     borderRadius: 3,
-    marginBottom: 9,
+    marginBottom: 8,
   },
   miniLine: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 5,
-    marginBottom: 7,
+    gap: 4,
+    marginBottom: 8,
   },
   miniCover: {
     width: 15,
diff --git a/mobile/components/settings/device-card.tsx b/mobile/components/settings/device-card.tsx
index 22cec70c..81524e32 100644
--- a/mobile/components/settings/device-card.tsx
+++ b/mobile/components/settings/device-card.tsx
@@ -163,6 +163,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 12,
     paddingHorizontal: SETTINGS_INSET,
-    paddingVertical: 11,
+    paddingVertical: 12,
   },
 });
diff --git a/mobile/components/settings/lastfm-row.tsx b/mobile/components/settings/lastfm-row.tsx
index dd3f07d5..09e3c78b 100644
--- a/mobile/components/settings/lastfm-row.tsx
+++ b/mobile/components/settings/lastfm-row.tsx
@@ -127,7 +127,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 12,
     paddingHorizontal: SETTINGS_INSET,
-    paddingVertical: 14,
+    paddingVertical: 12,
   },
   lead: {
     flexDirection: "row",
diff --git a/mobile/components/settings/replay-row.tsx b/mobile/components/settings/replay-row.tsx
index 3fac6db6..063d0270 100644
--- a/mobile/components/settings/replay-row.tsx
+++ b/mobile/components/settings/replay-row.tsx
@@ -95,7 +95,7 @@ export function ReplayRow({
 
 /**
  * Two-by-two top covers. One cover fills the tile; two or three repeat to
- * fill the grid (as the playlist hero does); none shows Replay's sparkles.
+ * fill the grid (as the playlist hero does); none shows a waveform.
  */
 function Collage({ covers }: { covers: string[] }) {
   const theme = useTheme();
@@ -109,7 +109,7 @@ function Collage({ covers }: { covers: string[] }) {
   return (
     <View style={[styles.collage, { backgroundColor: theme.color.bgElev2 }]}>
       {cells.length === 0 ? (
-        <SymbolView name="sparkles" size={20} tintColor={theme.color.fgMuted} />
+        <SymbolView name="waveform" size={20} tintColor={theme.color.fgMuted} />
       ) : (
         cells.map((uri, index) => (
           <Image
diff --git a/mobile/components/settings/settings-card.tsx b/mobile/components/settings/settings-card.tsx
index 59e39654..45389dd2 100644
--- a/mobile/components/settings/settings-card.tsx
+++ b/mobile/components/settings/settings-card.tsx
@@ -13,7 +13,7 @@ import { SectionLabel } from "../primitives";
 import { useTheme } from "../../theme/theme";
 
 /** Horizontal padding inside the Settings cards. */
-export const SETTINGS_INSET = 14;
+export const SETTINGS_INSET = 16;
 
 /**
  * A Settings card: the elevated surface with the large radius the redesign
@@ -45,13 +45,12 @@ export function SettingsCard({
   );
 }
 
-/** Muted uppercase label above a card ("Server"). */
+/** Muted label above a card ("Server"). */
 export function SettingsSectionLabel({ children }: { children: string }) {
   const theme = useTheme();
   return (
     <SectionLabel
       style={{
-        fontSize: 13,
         paddingHorizontal: theme.space.lg,
         paddingBottom: theme.space.sm,
       }}
@@ -137,7 +136,7 @@ export function SettingsLinkRow({
         styles.row,
         {
           paddingHorizontal: SETTINGS_INSET,
-          paddingVertical: 14,
+          paddingVertical: 12,
           borderTopWidth: border ? StyleSheet.hairlineWidth : 0,
           borderTopColor: theme.color.separator,
           backgroundColor: pressed ? theme.color.bgElev2 : "transparent",
@@ -164,7 +163,7 @@ export function CountBadge({ count }: { count: number }) {
       style={{
         minWidth: 22,
         height: 22,
-        paddingHorizontal: 7,
+        paddingHorizontal: 8,
         borderRadius: 11,
         backgroundColor: theme.color.danger,
         alignItems: "center",
diff --git a/mobile/components/settings/smooth-mix-tile.tsx b/mobile/components/settings/smooth-mix-tile.tsx
index 8d5e5013..230a5df6 100644
--- a/mobile/components/settings/smooth-mix-tile.tsx
+++ b/mobile/components/settings/smooth-mix-tile.tsx
@@ -461,8 +461,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "flex-end",
     gap: LANE_GAP,
-    paddingLeft: 9,
-    paddingRight: 3,
+    paddingLeft: 8,
+    paddingRight: 4,
   },
   laneTitle: {
     fontSize: 12,
diff --git a/mobile/components/share/share-action-button.tsx b/mobile/components/share/share-action-button.tsx
index b0df1188..df284231 100644
--- a/mobile/components/share/share-action-button.tsx
+++ b/mobile/components/share/share-action-button.tsx
@@ -63,7 +63,7 @@ export function ShareActionButton({
         style={{
           color: primary ? theme.color.onAccent : theme.color.fg,
           fontSize: 17,
-          fontWeight: "700",
+          fontWeight: "600",
         }}
       >
         {label}
@@ -74,9 +74,9 @@ export function ShareActionButton({
 
 const styles = StyleSheet.create({
   button: {
-    minHeight: 52,
+    minHeight: 48,
     width: "100%",
-    borderRadius: 14,
+    borderRadius: 10,
     borderCurve: "continuous",
     borderWidth: StyleSheet.hairlineWidth,
     flexDirection: "row",
diff --git a/mobile/components/share/share-panel.tsx b/mobile/components/share/share-panel.tsx
index 2ce9380e..c5da8d35 100644
--- a/mobile/components/share/share-panel.tsx
+++ b/mobile/components/share/share-panel.tsx
@@ -45,7 +45,7 @@ export function SharePanel({
           style={{
             color: theme.color.fg,
             fontSize: 17,
-            fontWeight: "700",
+            fontWeight: "600",
           }}
         >
           {title}
diff --git a/mobile/components/share/snippet-panel.tsx b/mobile/components/share/snippet-panel.tsx
index 4cb0103f..d973c86b 100644
--- a/mobile/components/share/snippet-panel.tsx
+++ b/mobile/components/share/snippet-panel.tsx
@@ -72,7 +72,7 @@ export function SnippetPanel({
           selectable
           style={{
             color: theme.color.fg,
-            fontWeight: "700",
+            fontWeight: "600",
             fontVariant: ["tabular-nums"],
           }}
         >
@@ -121,8 +121,8 @@ export function SnippetPanel({
           weight="semibold"
           tintColor={theme.color.fg}
         />
-        <Text style={{ color: theme.color.fg, fontWeight: "700" }}>
-          {playing ? "Pause Preview" : "Preview Snippet"}
+        <Text style={{ color: theme.color.fg, fontWeight: "600" }}>
+          {playing ? "Pause preview" : "Preview snippet"}
         </Text>
       </Pressable>
 
diff --git a/mobile/components/share/story-background-crop-editor.tsx b/mobile/components/share/story-background-crop-editor.tsx
index 676d788b..ef1d8dcd 100644
--- a/mobile/components/share/story-background-crop-editor.tsx
+++ b/mobile/components/share/story-background-crop-editor.tsx
@@ -24,7 +24,7 @@ import {
 const CROP_EDITOR_MAX_HEIGHT = 360;
 
 /**
- * "Story Background" section: previews the user's picked photo and lets them
+ * "Story background" section: previews the user's picked photo and lets them
  * drag the story-aspect crop window over it. Header offers Change (re-pick)
  * and Clear (back to generated colors). Crop state is normalized (0..1) and
  * owned by the screen.
@@ -114,7 +114,7 @@ export function StoryBackgroundCropEditor({
 
   return (
     <SharePanel
-      title="Story Background"
+      title="Story background"
       accessory={
         <View style={styles.cropActionRow}>
           <CropTextButton
@@ -212,7 +212,7 @@ function CropTextButton({
         { opacity: disabled ? 0.45 : pressed ? 0.6 : 1 },
       ]}
     >
-      <Text style={{ color, fontWeight: "700" }}>{label}</Text>
+      <Text style={{ color, fontWeight: "600" }}>{label}</Text>
     </Pressable>
   );
 }
diff --git a/mobile/components/share/story-share-menu-button.tsx b/mobile/components/share/story-share-menu-button.tsx
index ba217720..a4b1d8f4 100644
--- a/mobile/components/share/story-share-menu-button.tsx
+++ b/mobile/components/share/story-share-menu-button.tsx
@@ -31,24 +31,24 @@ export function StoryShareMenuButton({
   style?: StyleProp<ViewStyle>;
 }) {
   const theme = useTheme();
-  const label = loading ? "Rendering Story..." : "Instagram Story";
+  const label = loading ? "Rendering story…" : "Instagram Story";
 
   const openStoryOptions = useCallback(() => {
     if (disabled || loading) return;
     void Haptics.selectionAsync();
 
     const customLabel = hasCustomBackground
-      ? "Use Custom Image"
-      : "Choose Custom Image";
+      ? "Use custom image"
+      : "Choose custom image";
 
     showActionMenu({
       // The Alert fallback needs a title; the iOS sheet reads fine without.
       title: process.env.EXPO_OS === "ios" ? undefined : "Instagram Story Background",
       items: [
-        { label: "Use Generated Colors", onPress: onGenerated },
+        { label: "Use generated colors", onPress: onGenerated },
         { label: customLabel, onPress: onCustom },
         ...(hasCustomBackground
-          ? [{ label: "Choose Different Image", onPress: onPickCustom }]
+          ? [{ label: "Choose different image", onPress: onPickCustom }]
           : []),
       ],
       tintColor: theme.color.accent,
diff --git a/mobile/components/share/track-header.tsx b/mobile/components/share/track-header.tsx
index 754625ed..a17131e1 100644
--- a/mobile/components/share/track-header.tsx
+++ b/mobile/components/share/track-header.tsx
@@ -31,7 +31,7 @@ export function TrackHeader({
       <View style={{ flex: 1, minWidth: 0 }}>
         <Text
           numberOfLines={2}
-          style={{ color: theme.color.fg, fontSize: 22, fontWeight: "700" }}
+          style={{ color: theme.color.fg, fontSize: 22, fontWeight: "600" }}
         >
           {track.title}
         </Text>
diff --git a/mobile/components/shelf-tile.tsx b/mobile/components/shelf-tile.tsx
index 3e02df19..6fd9a2f4 100644
--- a/mobile/components/shelf-tile.tsx
+++ b/mobile/components/shelf-tile.tsx
@@ -34,16 +34,18 @@ export function ShelfTile({
   subtitleAccessory?: ReactNode;
   width: number;
   accessibilityLabel: string;
-  onPress: () => void;
+  /** Omitted when the tile has nothing to open or play. */
+  onPress?: () => void;
   style?: StyleProp<ViewStyle>;
 }) {
   const theme = useTheme();
   return (
     <Pressable
       onPress={onPress}
-      accessibilityRole="button"
+      // Not `disabled`: VoiceOver would read a tile with nothing to do as dimmed.
+      accessibilityRole={onPress ? "button" : undefined}
       accessibilityLabel={accessibilityLabel}
-      style={({ pressed }) => [{ width, opacity: pressed ? 0.7 : 1 }, style]}
+      style={({ pressed }) => [{ width, opacity: pressed && onPress ? 0.7 : 1 }, style]}
     >
       {artwork}
       <Text
diff --git a/mobile/components/swipe/favorite-mark.tsx b/mobile/components/swipe/favorite-mark.tsx
index 822faaf4..1ce69abd 100644
--- a/mobile/components/swipe/favorite-mark.tsx
+++ b/mobile/components/swipe/favorite-mark.tsx
@@ -51,7 +51,7 @@ export function FavoriteMark({
 
 const styles = StyleSheet.create({
   mark: {
-    marginRight: 7,
+    marginRight: 8,
     // The mock sets it a hair under the text's centre line.
     marginTop: 1,
   },
diff --git a/mobile/components/swipe/removal-strip.tsx b/mobile/components/swipe/removal-strip.tsx
index e7afaf0d..5f907cfa 100644
--- a/mobile/components/swipe/removal-strip.tsx
+++ b/mobile/components/swipe/removal-strip.tsx
@@ -114,8 +114,8 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 8,
-    paddingLeft: 5,
-    paddingRight: 3,
+    paddingLeft: 4,
+    paddingRight: 4,
   },
   body: {
     flex: 1,
diff --git a/mobile/components/swipe/swipe-action.tsx b/mobile/components/swipe/swipe-action.tsx
index a62f9bf3..63e32d78 100644
--- a/mobile/components/swipe/swipe-action.tsx
+++ b/mobile/components/swipe/swipe-action.tsx
@@ -23,7 +23,7 @@ export type SwipeActionKind = "next" | "favorite" | "unfavorite";
 
 /**
  * What each swipe does, and its colour: Play Next in the accent, Favorite in
- * systemPink, Unfavorite in systemGray2. Unfavorite is gray rather than red:
+ * Favorites' purple, Unfavorite in systemGray2. Unfavorite is gray rather than red:
  * it can be undone and isn't Delete, and the same motion never looks the same
  * while doing the opposite thing.
  */
@@ -32,7 +32,7 @@ export function swipeActionStyle(kind: SwipeActionKind, theme: ThemeTokens) {
   switch (kind) {
     case "next":
       return {
-        label: "Play Next",
+        label: "Play next",
         icon: "text.line.first.and.arrowtriangle.forward" as SFSymbol,
         color: theme.color.accent,
       };
@@ -40,7 +40,7 @@ export function swipeActionStyle(kind: SwipeActionKind, theme: ThemeTokens) {
       return {
         label: "Favorite",
         icon: "heart.fill" as SFSymbol,
-        color: dark ? "#FF375F" : "#FF2D55",
+        color: theme.color.brand,
       };
     case "unfavorite":
       return {
@@ -223,7 +223,6 @@ const styles = StyleSheet.create({
     color: "#FFFFFF",
     fontSize: 15,
     fontWeight: "600",
-    letterSpacing: -0.15,
   },
   // The mock darkens a pressed capsule (brightness .8).
   pressed: {
diff --git a/mobile/components/swipe/swipeable-track-row.tsx b/mobile/components/swipe/swipeable-track-row.tsx
index c1283c91..6b288af1 100644
--- a/mobile/components/swipe/swipeable-track-row.tsx
+++ b/mobile/components/swipe/swipeable-track-row.tsx
@@ -302,7 +302,7 @@ export function SwipeableTrackRow({
           return;
         }
         void toggle(track);
-        AccessibilityInfo.announceForAccessibility("Added to Favorites");
+        AccessibilityInfo.announceForAccessibility("Added to favorites");
         markPop.set(0);
         markPop.set(
           reducedMotion
@@ -335,7 +335,7 @@ export function SwipeableTrackRow({
         return;
       }
       void toggle(track);
-      AccessibilityInfo.announceForAccessibility("Removed from Favorites");
+      AccessibilityInfo.announceForAccessibility("Removed from favorites");
       glowOn("row", COMET_DELAY_MS);
     },
     [
@@ -610,8 +610,8 @@ export function SwipeableTrackRow({
 
   const accessibilityActions = useMemo<AccessibilityActionInfo[]>(
     () => [
-      ...(canPlayNext ? [{ name: "playNext", label: "Play Next" }] : []),
-      { name: "favorite", label: favorite ? "Remove from Favorites" : "Add to Favorites" },
+      ...(canPlayNext ? [{ name: "playNext", label: "Play next" }] : []),
+      { name: "favorite", label: favorite ? "Remove from favorites" : "Add to favorites" },
     ],
     [canPlayNext, favorite],
   );
diff --git a/mobile/components/track-actions-menu.tsx b/mobile/components/track-actions-menu.tsx
index 0747772c..489fe860 100644
--- a/mobile/components/track-actions-menu.tsx
+++ b/mobile/components/track-actions-menu.tsx
@@ -348,19 +348,19 @@ function TrackActionItems({
         />
         <Button
           label={
-            actions.favorite ? "Remove from Favorites" : "Add to Favorites"
+            actions.favorite ? "Remove from favorites" : "Add to favorites"
           }
           systemImage={actions.favorite ? "heart.slash" : "heart"}
           onPress={actions.toggleFavorite}
         />
         <Button
-          label="Track Info"
+          label="Track info"
           systemImage="info.circle"
           onPress={actions.openInfo}
         />
         {actions.canShare ? (
           <Button
-            label="Share..."
+            label="Share…"
             systemImage="square.and.arrow.up"
             onPress={actions.openShare}
           />
@@ -370,19 +370,19 @@ function TrackActionItems({
       <Section title="Actions">
         {actions.showPlayNext ? (
           <Button
-            label="Play Next"
+            label="Play next"
             systemImage="text.line.first.and.arrowtriangle.forward"
             modifiers={[swiftDisabled(!actions.canPlayNext)]}
             onPress={actions.playNext}
           />
         ) : null}
         <Button
-          label="Add to Playlist..."
+          label="Add to playlist…"
           systemImage="plus.rectangle.on.folder"
           onPress={actions.openPlaylistPicker}
         />
         <Button
-          label={actions.downloading ? "Downloading..." : "Download File..."}
+          label={actions.downloading ? "Downloading…" : "Download file…"}
           systemImage="arrow.down.doc"
           modifiers={[swiftDisabled(actions.downloading || !actions.available)]}
           onPress={actions.download}
@@ -393,7 +393,7 @@ function TrackActionItems({
           <Divider />
           <Section title="Library">
             <Button
-              label="View Album"
+              label="View album"
               systemImage="square.stack"
               onPress={actions.openAlbum}
             />
@@ -406,14 +406,14 @@ function TrackActionItems({
           <Section title="Edit">
             {actions.canEditMetadata ? (
               <Button
-                label="Edit Metadata"
+                label="Edit metadata"
                 systemImage="pencil"
                 onPress={actions.openEditMetadata}
               />
             ) : null}
             {actions.hasEditableAlbum ? (
               <Button
-                label="Edit Album & Cover"
+                label="Edit album & cover"
                 systemImage="photo"
                 onPress={actions.openEditAlbum}
               />
@@ -425,7 +425,7 @@ function TrackActionItems({
         <>
           <Divider />
           <Button
-            label={actions.deleting ? "Deleting..." : "Delete from My Library"}
+            label={actions.deleting ? "Deleting…" : "Delete from my library"}
             systemImage="trash"
             role="destructive"
             modifiers={[swiftDisabled(actions.deleting)]}
@@ -591,7 +591,7 @@ export function useTrackActionModel(
   // DB row and the uploaded file, so confirm before firing.
   const deleteTrack = useCallback(() => {
     Alert.alert(
-      "Delete Track",
+      "Delete track",
       deleteOwnUploadMessage(track),
       [
         { text: "Cancel", style: "cancel" },
diff --git a/mobile/components/track-info/info-grid.tsx b/mobile/components/track-info/info-grid.tsx
index 2d2811ea..eb15623f 100644
--- a/mobile/components/track-info/info-grid.tsx
+++ b/mobile/components/track-info/info-grid.tsx
@@ -104,8 +104,8 @@ const styles = StyleSheet.create({
   cell: {
     flex: 1,
     minWidth: 0,
-    paddingHorizontal: 14,
+    paddingHorizontal: 16,
     paddingTop: 10,
-    paddingBottom: 11,
+    paddingBottom: 12,
   },
 });
diff --git a/mobile/components/track-info/player-hero.tsx b/mobile/components/track-info/player-hero.tsx
index 061d4360..c0a8d9bb 100644
--- a/mobile/components/track-info/player-hero.tsx
+++ b/mobile/components/track-info/player-hero.tsx
@@ -175,7 +175,7 @@ export function HeroMeta({
         style={{
           color: theme.color.fg,
           fontSize: 22,
-          fontWeight: "700",
+          fontWeight: "600",
           letterSpacing: -0.3,
         }}
       >
@@ -301,7 +301,7 @@ export function CompactMeta({
         style={{
           color: theme.color.fg,
           fontSize: 17,
-          fontWeight: "700",
+          fontWeight: "600",
           letterSpacing: -0.2,
         }}
       >
diff --git a/mobile/lib/welcome-mesh.ts b/mobile/lib/welcome-mesh.ts
new file mode 100644
index 00000000..292a75c9
--- /dev/null
+++ b/mobile/lib/welcome-mesh.ts
@@ -0,0 +1,107 @@
+/**
+ * The welcome screen's art is a smooth image drawn through a pixel mesh on the
+ * device. The mesh has to land on whole device pixels: baked into the file it
+ * would shimmer on any phone that scales the image.
+ */
+
+/** Spacing of the mesh, in points. */
+const CELL_POINTS = 3;
+/** The dark line between cells, as a share of a point. */
+const GAP_POINTS = 2 / 3;
+
+export interface WelcomeMesh {
+  /** Device pixels from one cell to the next. */
+  pitch: number;
+  /** Device pixels of dark line along each cell's top and left. */
+  gap: number;
+}
+
+export function welcomeMesh(pixelRatio: number): WelcomeMesh {
+  return {
+    pitch: Math.max(2, Math.round(CELL_POINTS * pixelRatio)),
+    gap: Math.max(1, Math.round(GAP_POINTS * pixelRatio)),
+  };
+}
+
+/** The share of the art's height at which the record sits. */
+const RECORD_IN_ART = 0.395;
+/** The highest share of the view the record may be pushed down to. */
+const RECORD_IN_VIEW = 0.46;
+
+export interface WelcomeArtRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Where the art goes: filling the view and centered sideways. It's pinned to the
+ * top unless the view is short, when it slides up to keep the record clear of
+ * the fade; the sky above the record is the part it can afford to lose.
+ */
+export function welcomeArtRect(
+  view: { width: number; height: number },
+  art: { width: number; height: number },
+): WelcomeArtRect {
+  const scale = Math.max(view.width / art.width, view.height / art.height);
+  const width = art.width * scale;
+  const height = art.height * scale;
+  return {
+    x: (view.width - width) / 2,
+    y: Math.min(0, view.height * RECORD_IN_VIEW - height * RECORD_IN_ART),
+    width,
+    height,
+  };
+}
+
+/** How tall the fade into the page is, for a hero of this height. */
+export function welcomeFadeHeight(heroHeight: number): number {
+  return Math.min(240, Math.max(96, Math.round(heroHeight * 0.3)));
+}
+
+interface WelcomeArtLoader<Data, Art> {
+  Data: { fromURI: (uri: string) => Promise<Data> };
+  Image: { MakeImageFromEncoded: (data: Data) => Art | null };
+}
+
+/** Reads and decodes the art; null if either step fails, so the caller can fall back. */
+export async function loadWelcomeArt<Data, Art>(
+  uri: string,
+  skia: WelcomeArtLoader<Data, Art>,
+): Promise<Art | null> {
+  try {
+    return skia.Image.MakeImageFromEncoded(await skia.Data.fromURI(uri));
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Colors each cell with the average of four samples of the art, then darkens
+ * the lines between cells. `density` turns Skia's points back into device pixels.
+ */
+export const WELCOME_MESH_SHADER = `
+uniform shader art;
+uniform float density;
+uniform float pitch;
+uniform float gap;
+uniform float lineLight;
+
+half4 main(vec2 pos) {
+  vec2 px = pos * density;
+  vec2 cell = floor(px / pitch);
+  vec2 inCell = px - cell * pitch;
+  vec2 center = (cell + 0.5) * pitch / density;
+  float spread = pitch / density * 0.25;
+  half4 color = (
+    art.eval(center + vec2(-spread, -spread)) +
+    art.eval(center + vec2(spread, -spread)) +
+    art.eval(center + vec2(-spread, spread)) +
+    art.eval(center + vec2(spread, spread))
+  ) * 0.25;
+  float lit = step(gap, inCell.x) * step(gap, inCell.y);
+  color.rgb *= mix(lineLight, 1.0, lit);
+  return color;
+}
+`;
diff --git a/mobile/package-lock.json b/mobile/package-lock.json
index 861beecd..2fbf01e6 100644
--- a/mobile/package-lock.json
+++ b/mobile/package-lock.json
@@ -65,6 +65,7 @@
         "@types/node": "~25.6.0",
         "@types/react": "~19.2.4",
         "@types/react-dom": "~19.2.3",
+        "canvaskit-wasm": "0.41.0",
         "eslint": "^9.25.0",
         "eslint-config-expo": "~57.0.0",
         "patch-package": "^8.0.1",
diff --git a/mobile/package.json b/mobile/package.json
index 52878451..6647f5c6 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -72,6 +72,7 @@
     "@types/node": "~25.6.0",
     "@types/react": "~19.2.4",
     "@types/react-dom": "~19.2.3",
+    "canvaskit-wasm": "0.41.0",
     "eslint": "^9.25.0",
     "eslint-config-expo": "~57.0.0",
     "patch-package": "^8.0.1",
diff --git a/mobile/scripts/render-welcome-art.py b/mobile/scripts/render-welcome-art.py
new file mode 100644
index 00000000..fe429b19
--- /dev/null
+++ b/mobile/scripts/render-welcome-art.py
@@ -0,0 +1,345 @@
+#!/usr/bin/env python3
+"""Render the welcome screen's art: a record sliding out of its sleeve, floating
+through clouds. Night for dark mode, early morning for light.
+
+The output is deliberately smooth. `components/auth/welcome-hero.tsx` turns it
+into a pixel mesh on the device, in exact device pixels, because a mesh baked
+into the file would shimmer on any phone that has to scale it.
+
+    python3 scripts/render-welcome-art.py [output dir, default assets/images]
+
+Needs numpy and Pillow. Rerun it only to change the art.
+"""
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+
+import numpy as np
+from PIL import Image
+
+W, H = 660, 960
+SS = 2  # supersampling
+RNG = np.random.default_rng(7)
+
+PALETTES = {
+    "night": dict(
+        sky_stops=[(0.0, "#040716"), (0.22, "#081242"), (0.52, "#10267c"), (0.76, "#0a154e"), (1.0, "#02040f")],
+        cloud_shadow="#1c2565",
+        cloud_mid="#7c78b8",
+        cloud_lit="#f0e1ea",
+        cloud_alpha=1.0,
+        stars=0.9,
+        paper_lit="#f1e8d6",
+        paper_shade="#b7ac9c",
+        rim="#6d6558",
+        ambient=1.0,
+    ),
+    "morning": dict(
+        sky_stops=[(0.0, "#8fb2ea"), (0.3, "#a9c6f2"), (0.62, "#cfe0f8"), (1.0, "#ffffff")],
+        cloud_shadow="#b5c4e6",
+        cloud_mid="#e4e9f7",
+        cloud_lit="#ffffff",
+        cloud_alpha=1.0,
+        stars=0.0,
+        paper_lit="#fbf5e8",
+        paper_shade="#d3c8b6",
+        rim="#8f8676",
+        ambient=1.0,
+    ),
+}
+
+
+def rgb(value: str) -> np.ndarray:
+    value = value.lstrip("#")
+    return np.array([int(value[i : i + 2], 16) / 255 for i in (0, 2, 4)])
+
+
+def smooth(a, b, x):
+    t = np.clip((x - a) / (b - a), 0, 1)
+    return t * t * (3 - 2 * t)
+
+
+def mix(a, b, t):
+    t = np.asarray(t)
+    if t.ndim == 2:
+        t = t[..., None]
+    return a * (1 - t) + b * t
+
+
+def value_noise(w: int, h: int, cell: float, rng: np.random.Generator) -> np.ndarray:
+    gw, gh = int(w / cell) + 3, int(h / cell) + 3
+    grid = rng.random((gh, gw))
+    ys, xs = np.mgrid[0:h, 0:w] / cell
+    x0, y0 = xs.astype(int), ys.astype(int)
+    fx, fy = smooth(0, 1, xs - x0), smooth(0, 1, ys - y0)
+    top = grid[y0, x0] * (1 - fx) + grid[y0, x0 + 1] * fx
+    bottom = grid[y0 + 1, x0] * (1 - fx) + grid[y0 + 1, x0 + 1] * fx
+    return top * (1 - fy) + bottom * fy
+
+
+def fbm(w: int, h: int, cell: float, rng: np.random.Generator, octaves: int = 5) -> np.ndarray:
+    out, amp, total = np.zeros((h, w)), 1.0, 0.0
+    for _ in range(octaves):
+        out += value_noise(w, h, cell, rng) * amp
+        total += amp
+        amp *= 0.5
+        cell = max(cell / 2, 1.5)
+    return out / total
+
+
+def gradient(stops, h, w):
+    pos = np.array([s[0] for s in stops])
+    cols = np.stack([rgb(s[1]) for s in stops])
+    t = np.arange(h) / (h - 1)
+    channels = np.stack([np.interp(t, pos, cols[:, c]) for c in range(3)], -1)
+    # A wide box blur irons out the creases at each stop.
+    radius = h // 14
+    kernel = np.ones(radius * 2 + 1) / (radius * 2 + 1)
+    padded = np.pad(channels, ((radius, radius), (0, 0)), mode="edge")
+    channels = np.stack([np.convolve(padded[:, c], kernel, mode="valid") for c in range(3)], -1)
+    return np.repeat(channels[:, None, :], w, axis=1)
+
+
+def box_blur(a, radius):
+    """Two passes of a summed-area box blur, close enough to a gaussian."""
+    for _ in range(2):
+        for axis in (0, 1):
+            pad = [(radius + 1, radius) if i == axis else (0, 0) for i in range(2)]
+            total = np.cumsum(np.pad(a, pad, mode="edge"), axis=axis)
+            hi = np.take(total, range(2 * radius + 1, total.shape[axis]), axis=axis)
+            lo = np.take(total, range(0, total.shape[axis] - 2 * radius - 1), axis=axis)
+            a = (hi - lo) / (2 * radius + 1)
+    return a
+
+
+def cumulus(canvas, cx, base, width, height, pal, seed, puffs=70):
+    """A cloud built from many overlapping spheres on a soft, flat base, lit from
+    the upper left. The height map is blurred so the puffs melt into each other."""
+    h, w = canvas.shape[:2]
+    cx, base, width, height = cx * w, base * h, width * w, height * w
+    rng = np.random.default_rng(seed)
+    ys, xs = np.mgrid[0:h, 0:w].astype(float)
+    warp = height * 0.3
+    bx = xs + (fbm(w, h, 44 * SS, rng, 3) - 0.5) * warp
+    by = ys + (fbm(w, h, 44 * SS, rng, 3) - 0.5) * warp * 0.6
+    z = np.zeros((h, w))
+    for _ in range(puffs):
+        t = rng.uniform(-1, 1)
+        dome = max(1 - abs(t) ** 2.2, 0) ** 0.8
+        r = height * rng.uniform(0.09, 0.3) * (0.35 + 0.65 * dome)
+        px = cx + t * width
+        py = base - r * 0.4 - (height - r) * dome * rng.random() ** 1.3
+        z = np.maximum(z, np.sqrt(np.maximum(r * r - (bx - px) ** 2 - (by - py) ** 2, 0)))
+    wisp = (fbm(w, h, 26 * SS, rng, 3) - 0.5) * height * 0.28
+    fade = 1 - smooth(-height * 0.1, height * 0.1, by - base + wisp)
+    alpha = smooth(0.0, 2.5 * SS, z) * fade
+    soft = box_blur(z, 3 * SS)
+    gy, gx = np.gradient(soft)
+    nx, ny, nz = -gx, -gy, np.full_like(z, 0.9)
+    length = np.sqrt(nx * nx + ny * ny + nz * nz)
+    lit = (nx * -0.5 + ny * -0.72 + nz * 0.48) / length
+    rise = np.clip((base - by) / height, 0, 1)
+    fine = fbm(w, h, 11 * SS, rng, 3) - 0.5
+    tone = np.clip(lit * 0.7 + rise * 0.5 + fine * 0.26, 0, 1)
+    col = mix(rgb(pal["cloud_shadow"]), rgb(pal["cloud_mid"]), smooth(0.08, 0.55, tone))
+    col = mix(col, rgb(pal["cloud_lit"]), smooth(0.56, 0.98, tone))
+    return mix(canvas, col, alpha * pal["cloud_alpha"])
+
+
+def plane_coords(w, h, center, size, rot_deg, tilt_x, tilt_y):
+    """Screen pixels to a tilted plane's coordinates, where 1 unit is `size` px."""
+    ys, xs = np.mgrid[0:h, 0:w].astype(float)
+    x, y = xs - center[0], ys - center[1]
+    r = np.deg2rad(rot_deg)
+    ca, sa = np.cos(r), np.sin(r)
+    # Inverse perspective: plane (u, v) projects to (u, v) / (1 + tx u + ty v).
+    denom = 1 - tilt_x * x / size - tilt_y * y / size
+    px, py = x / denom, y / denom
+    u = (px * ca + py * sa) / size
+    v = (-px * sa + py * ca) / size
+    return u, v
+
+
+def rounded_box(u, v, half, radius):
+    qx, qy = np.abs(u) - half + radius, np.abs(v) - half + radius
+    return np.hypot(np.maximum(qx, 0), np.maximum(qy, 0)) + np.minimum(np.maximum(qx, qy), 0) - radius
+
+
+def record(u, v, cx, ambient, seed):
+    """A black disc whose grooves catch one bow tie of light, with an amber label."""
+    rng = np.random.default_rng(seed)
+    du, dv = u - cx, v
+    r = np.hypot(du, dv) / 0.92
+    th = np.arctan2(dv, du)
+    col = np.zeros(u.shape + (3,))
+    col[...] = rgb("#0b0b10")
+
+    # Bands of grooves, split by the smooth gaps between tracks.
+    grooves = 0.5 + 0.5 * np.sin(r * 300)
+    gaps = np.minimum.reduce([np.abs(r - g) for g in (0.5, 0.62, 0.76, 0.88)])
+    in_gap = 1 - smooth(0.004, 0.013, gaps)
+    base = 0.055 + grooves * 0.035
+    col += base[..., None] * np.array([0.9, 0.95, 1.1])
+
+    # The bow tie of light any record shows under one lamp, with a faint second
+    # lobe that picks up a little color.
+    lamp = -1.05
+    ray = np.power(np.abs(np.cos(th - lamp)), 26)
+    side = np.power(np.abs(np.cos(th - lamp - 0.62)), 48)
+    body = (0.7 + 0.3 * grooves) * (1 - in_gap * 0.75) * (1 - smooth(0.34, 0.5, 1 - r) * 0)
+    col += (ray * body * 0.92)[..., None] * np.array([0.86, 0.91, 1.0])
+    col += (side * body * 0.34)[..., None] * np.array([0.72, 0.62, 1.0])
+    col += (in_gap * 0.045)[..., None]
+
+    # Edge bevel.
+    bevel = smooth(0.965, 0.985, r) * (1 - smooth(0.992, 1.0, r))
+    light = np.power(np.abs(np.cos(th - lamp)), 3)
+    col += (bevel * (0.08 + 0.5 * light))[..., None] * np.array([0.85, 0.9, 1.0])
+
+    # Dead wax and label.
+    wax = smooth(0.37, 0.385, r) * (1 - smooth(0.43, 0.45, r))
+    col = mix(col, rgb("#101015"), wax * 0.75)
+    label = 1 - smooth(0.365, 0.374, r)
+    amber = mix(rgb("#ff9a2e"), rgb("#c6410b"), smooth(0.02, 0.38, r))
+    shine = np.power(np.abs(np.cos(th - lamp)), 8)
+    amber = mix(amber, rgb("#ffd98a"), shine * 0.62)
+    ring = (1 - smooth(0.003, 0.012, np.abs(r - 0.315))) * 0.6
+    amber = mix(amber, rgb("#7e2406"), ring)
+    speck = fbm(u.shape[1], u.shape[0], 5, rng, 2) - 0.5
+    amber = np.clip(amber + speck[..., None] * 0.08, 0, 1)
+    col = mix(col, amber, label)
+
+    # Spindle hole.
+    hole = 1 - smooth(0.034, 0.042, r)
+    col = mix(col, rgb("#120a05"), hole)
+
+    mask = 1 - smooth(0.996, 1.004, r)
+    return np.clip(col * ambient, 0, 1), mask, r
+
+
+def sleeve(u, v, pal, seed):
+    """A worn card sleeve: lit from the upper left, with the disc's ring pressed in."""
+    rng = np.random.default_rng(seed)
+    half = 1.0
+    d = rounded_box(u, v, half, 0.012)
+    mask = 1 - smooth(-0.002, 0.004, d)
+    light = np.clip(0.66 - (u * 0.34 + v * 0.42), 0, 1)
+    col = mix(rgb(pal["paper_shade"]), rgb(pal["paper_lit"]), smooth(0.0, 0.95, light))
+
+    h, w = u.shape
+    fiber = fbm(w, h, 8, rng, 3) - 0.5
+    col = np.clip(col + fiber[..., None] * 0.05, 0, 1)
+
+    # Ring wear from the disc inside.
+    rr = np.hypot(u + 0.02, v) / 0.92
+    ring = 1 - smooth(0.0, 0.03, np.abs(rr - 0.985))
+    arc = 0.5 + 0.5 * np.cos(np.arctan2(v, u) + 2.1)
+    col = mix(col, rgb(pal["paper_lit"]) * 1.03, ring * 0.4 * arc)
+    col = mix(col, rgb(pal["paper_shade"]) * 0.78, ring * 0.36 * (1 - arc))
+
+    # The app icon's waveform, printed on the front like a label's mark.
+    bars = (0.2, 0.46, 0.3, 0.74, 1.0, 0.56, 0.86, 0.38, 0.62, 0.24, 0.12)
+    ink = np.zeros_like(u)
+    pitch, half_width = 0.112, 0.04
+    for i, tall in enumerate(bars):
+        bx = (i - (len(bars) - 1) / 2) * pitch
+        bar_half = tall * 0.46
+        dx = np.abs(u - bx)
+        dy = np.maximum(np.abs(v) - bar_half, 0)
+        ink = np.maximum(ink, 1 - smooth(half_width - 0.006, half_width + 0.006, np.hypot(dx, dy)))
+    # A printed mark wears through a little, like everything else on the sleeve.
+    grain = smooth(0.34, 0.5, fbm(w, h, 7, rng, 2))
+    col = mix(col, rgb("#17204f"), ink * (0.8 + 0.2 * grain))
+
+    # The fold on the closed side, and the lip of the open one.
+    fold = 1 - smooth(0.0, 0.035, np.abs(u + 0.955))
+    col = mix(col, rgb(pal["paper_shade"]) * 0.8, fold * 0.42)
+    lip = 1 - smooth(0.0, 0.05, half - u)
+    col = mix(col, rgb(pal["paper_shade"]) * 0.76, lip * 0.5)
+    # Paler, scuffed corners and edges, where a much-played sleeve wears first.
+    wear = 1 - smooth(-0.05, 0.0, d)
+    worn = smooth(-0.07, -0.005, d) * smooth(0.45, 0.62, fbm(w, h, 18, rng, 3))
+    col = mix(col, rgb(pal["paper_lit"]) * 1.06, worn * (1 - wear * 0) * 0.5)
+    return np.clip(col, 0, 1), mask, d
+
+
+def render_scene(name: str) -> np.ndarray:
+    pal = PALETTES[name]
+    w, h = W * SS, H * SS
+    canvas = gradient(pal["sky_stops"], h, w)
+
+    # A few faint stars up high, one mesh cell each once they reach the phone.
+    if pal["stars"] > 0:
+        count = 18
+        sx, sy = RNG.integers(0, w, count), (RNG.random(count) ** 1.5 * h * 0.5).astype(int)
+        sb = RNG.random(count)
+        ys, xs = np.mgrid[0:h, 0:w].astype(float)
+        star = np.zeros((h, w))
+        for x, y, b in zip(sx, sy, sb):
+            r = 2.4 * SS
+            x0, x1 = max(x - 12, 0), min(x + 12, w)
+            y0, y1 = max(y - 12, 0), min(y + 12, h)
+            star[y0:y1, x0:x1] += np.exp(-(((xs[y0:y1, x0:x1] - x) ** 2 + (ys[y0:y1, x0:x1] - y) ** 2) / (r * r))) * (0.2 + b * 0.6)
+        canvas = mix(canvas, rgb("#dfe5ff"), np.clip(star * pal["stars"], 0, 1))
+
+    # A cloud far off behind the record.
+    canvas = cumulus(canvas, 0.88, 0.125, 0.21, 0.09, pal, 11, puffs=70)
+
+    # The record and sleeve, tilted like something falling slowly through the air.
+    center = (w * 0.395, h * 0.395)
+    size = w * 0.205
+    plane = dict(rot_deg=-16, tilt_x=0.05, tilt_y=-0.04)
+    u, v = plane_coords(w, h, center, size, **plane)
+
+    # Card thickness: the same outline, nudged down and right, in shadow.
+    tu, tv = plane_coords(w, h, (center[0] + 2.0 * SS, center[1] + 3.0 * SS), size, **plane)
+    _, edge_mask, _ = sleeve(tu, tv, pal, 21)
+    canvas = mix(canvas, rgb(pal["rim"]), edge_mask)
+
+    disc, disc_mask, _ = record(u, v, 1.42, pal["ambient"], 31)
+    canvas = mix(canvas, disc, disc_mask)
+
+    paper, paper_mask, _ = sleeve(u, v, pal, 21)
+    # The sleeve's edge shades the disc just where it comes out.
+    shade = (1 - smooth(0.0, 0.16, u - 1.0)) * disc_mask * (1 - paper_mask)
+    canvas = mix(canvas, np.zeros(3), shade * 0.55)
+    canvas = mix(canvas, paper, paper_mask)
+
+    # Clouds in front, so the record sits inside the scene.
+    canvas = cumulus(canvas, 0.07, 0.668, 0.33, 0.105, pal, 5, puffs=120)
+    canvas = cumulus(canvas, 0.92, 0.75, 0.44, 0.21, pal, 8, puffs=150)
+
+    img = Image.fromarray((np.clip(canvas, 0, 1) * 255 + 0.5).astype(np.uint8), "RGB")
+    return np.asarray(img.resize((W, H), Image.LANCZOS))
+
+
+def render_badge(size: int = 108) -> np.ndarray:
+    """The label's record, front on, small enough to sit inside the headline."""
+    s = size * 4
+    ys, xs = np.mgrid[0:s, 0:s].astype(float)
+    u, v = (xs - s / 2) / (s / 2) * 0.92, (ys - s / 2) / (s / 2) * 0.92
+    col, mask, _ = record(u, v, 0.0, 1.0, 41)
+    # Larger label than the real proportion: at 30pt this has to read as amber.
+    r = np.hypot(u, v) / 0.92
+    th = np.arctan2(v, u)
+    amber = mix(rgb("#ff9a2e"), rgb("#c6410b"), smooth(0.02, 0.52, r))
+    amber = mix(amber, rgb("#ffd98a"), np.power(np.abs(np.cos(th + 1.05)), 8) * 0.62)
+    label = 1 - smooth(0.5, 0.515, r)
+    col = mix(col, amber, label)
+    col = mix(col, rgb("#120a05"), 1 - smooth(0.07, 0.085, r))
+    rgba = np.dstack([np.clip(col, 0, 1), mask])
+    img = Image.fromarray((rgba * 255 + 0.5).astype(np.uint8), "RGBA")
+    return img.resize((size, size), Image.LANCZOS)
+
+
+def main() -> None:
+    out = Path(sys.argv[1] if len(sys.argv) > 1 else "assets/images")
+    out.mkdir(parents=True, exist_ok=True)
+    for name in ("night", "morning"):
+        Image.fromarray(render_scene(name)).save(out / f"welcome-{name}.jpg", quality=92, subsampling=0)
+    render_badge().save(out / "welcome-record.png", optimize=True)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/mobile/tests/playlist-picker-screen.test.tsx b/mobile/tests/playlist-picker-screen.test.tsx
index 67be8b5c..8e76bc2d 100644
--- a/mobile/tests/playlist-picker-screen.test.tsx
+++ b/mobile/tests/playlist-picker-screen.test.tsx
@@ -230,7 +230,7 @@ describe("PlaylistPickerScreen", () => {
     mock.trackId = undefined;
     mock.playlists = [playlist("p1", "late night")];
     const html = renderToStaticMarkup(<PlaylistPickerScreen />);
-    expect(html).toContain("No track to add.");
+    expect(html).toContain("No track to add");
     expect(html).not.toContain("late night");
     expect(html).not.toContain("loading");
   });
diff --git a/mobile/tests/queue-section.test.tsx b/mobile/tests/queue-section.test.tsx
index a26a396e..cdcecec6 100644
--- a/mobile/tests/queue-section.test.tsx
+++ b/mobile/tests/queue-section.test.tsx
@@ -137,7 +137,7 @@ describe("queue first render", () => {
   it("shows the empty state immediately at the end of the queue", () => {
     const html = render({ startIndex: queue.length });
     expect(observed.data).toEqual([]);
-    expect(html).toContain("Nothing else queued.");
+    expect(html).toContain("Nothing else queued");
     expect(html).toContain("0 songs");
   });
 
diff --git a/mobile/tests/replay-activity-chart.test.tsx b/mobile/tests/replay-activity-chart.test.tsx
new file mode 100644
index 00000000..a69d927b
--- /dev/null
+++ b/mobile/tests/replay-activity-chart.test.tsx
@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { expect, it, vi } from "vitest";
+import { ActivityChart } from "../components/replay/activity-chart";
+
+const ACCENT = "#0a84ff";
+
+vi.mock("react-native", () => ({
+  Text: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+  View: ({
+    children,
+    style,
+  }: {
+    children?: ReactNode;
+    style?: { backgroundColor?: string; height?: string };
+  }) => (
+    <div data-bg={style?.backgroundColor} data-h={style?.height}>
+      {children}
+    </div>
+  ),
+}));
+vi.mock("../components/primitives", () => ({
+  Card: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}));
+vi.mock("../theme/theme", () => ({
+  useTheme: () => ({ color: { accent: ACCENT, fgMuted: "#8e8e93" } }),
+  withAlpha: (color: string) => `${color}-faint`,
+}));
+
+const bucket = (day: number, plays: number) => ({
+  bucket_start: `2026-10-${String(day).padStart(2, "0")}T00:00:00Z`,
+  plays,
+});
+const render = (plays: number[]) =>
+  renderToStaticMarkup(
+    <ActivityChart buckets={plays.map((n, i) => bucket(i + 1, n))} bucket="day" />,
+  );
+const count = (html: string, needle: string) => html.split(needle).length - 1;
+
+it("lights only the busiest bucket", () => {
+  const html = render([3, 12, 5]);
+  expect(count(html, `data-bg="${ACCENT}"`)).toBe(1);
+  expect(html).toContain(`data-bg="${ACCENT}" data-h="100%"`);
+  expect(count(html, 'data-bg="#8e8e93-faint"')).toBe(2);
+});
+
+it("lights every bucket tied for busiest", () => {
+  expect(count(render([7, 2, 7]), `data-bg="${ACCENT}"`)).toBe(2);
+});
+
+it("lights nothing when nothing was played", () => {
+  expect(count(render([0, 0]), `data-bg="${ACCENT}"`)).toBe(0);
+});
diff --git a/mobile/tests/replay-artist-tiles.test.tsx b/mobile/tests/replay-artist-tiles.test.tsx
new file mode 100644
index 00000000..d71d3d1c
--- /dev/null
+++ b/mobile/tests/replay-artist-tiles.test.tsx
@@ -0,0 +1,159 @@
+import { type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { beforeEach, expect, it, vi } from "vitest";
+import ReplayScreen from "../app/(tabs)/(settings)/replay";
+
+interface Tile {
+  title: string;
+  accessibilityLabel: string;
+  art: { kind: string; imageUrl?: string | null };
+  onPress?: () => void;
+}
+
+const mock = vi.hoisted(() => ({
+  push: vi.fn(),
+  play: vi.fn(() => true),
+  tiles: [] as Tile[],
+  data: undefined as unknown,
+}));
+
+vi.mock("react-native", () => ({
+  Alert: { alert: vi.fn() },
+  RefreshControl: () => null,
+  ScrollView: ({ children }: { children: ReactNode }) => <main>{children}</main>,
+  Share: { share: vi.fn() },
+  View: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}));
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: () => ({ data: mock.data, isLoading: false, isError: false, refetch: vi.fn() }),
+  useQueryClient: () => ({ invalidateQueries: vi.fn() }),
+}));
+vi.mock("expo-file-system", () => ({ Directory: vi.fn(), File: vi.fn(), Paths: {} }));
+vi.mock("expo-router", () => ({ useRouter: () => ({ push: mock.push }) }));
+vi.mock("expo-haptics", () => ({
+  notificationAsync: vi.fn(),
+  NotificationFeedbackType: {},
+}));
+vi.mock("@music-library/core", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@music-library/core")>()),
+  api: {},
+  useAuth: () => ({ me: { id: "me" } }),
+  useLocalDay: () => "2026-11-03",
+}));
+vi.mock("../context/player", () => ({ usePlayTrack: () => mock.play }));
+vi.mock("../lib/use-play-queue", () => ({
+  listPlaybackQueue: <T,>(tracks: T[]) => tracks,
+  usePlayQueue: () => vi.fn(),
+}));
+vi.mock("../lib/use-pull-to-refresh", () => ({
+  usePullToRefresh: () => ({ refreshing: false, onRefresh: vi.fn() }),
+}));
+vi.mock("../lib/app-resume", () => ({ subscribeAppActive: vi.fn() }));
+vi.mock("../lib/share-dismissal", () => ({ isShareDismissal: () => false }));
+vi.mock("../theme/theme", () => ({
+  useTheme: () => ({
+    color: { bg: "#000", fgMuted: "#888" },
+    space: { sm: 8, lg: 16, xl: 24 },
+  }),
+}));
+vi.mock("../components/dock/dock-context", () => ({
+  useBottomDockInset: () => 0,
+  useDockScrollHandler: () => ({}),
+}));
+vi.mock("../components/empty-state", () => ({ EmptyState: () => null }));
+vi.mock("../components/horizontal-shelf", () => ({
+  HorizontalShelf: ({ children }: { children: ReactNode }) => <ul>{children}</ul>,
+}));
+vi.mock("../components/section", () => ({
+  Section: ({ children }: { children: ReactNode }) => <section>{children}</section>,
+}));
+vi.mock("../components/replay/activity-chart", () => ({ ActivityChart: () => null }));
+vi.mock("../components/replay/genre-list", () => ({ GenreList: () => null }));
+vi.mock("../components/replay/format", () => ({
+  pluralize: (n: number, noun: string) => `${n} ${noun}s`,
+}));
+vi.mock("../components/replay/period", () => ({
+  buildPeriodOptions: () => [],
+  periodTitle: () => "2026",
+}));
+vi.mock("../components/replay/period-picker", () => ({ PeriodPicker: () => null }));
+vi.mock("../components/replay/replay-action-button", () => ({
+  ReplayActionButton: () => null,
+}));
+vi.mock("../components/replay/replay-empty-state", () => ({ ReplayEmptyState: () => null }));
+vi.mock("../components/replay/replay-hero", () => ({ ReplayHero: () => null }));
+vi.mock("../components/replay/summary-grid", () => ({ SummaryGrid: () => null }));
+vi.mock("../components/replay/top-track-list", () => ({ TopTrackList: () => null }));
+vi.mock("../components/replay/ranked-shelf-tile", () => ({
+  RankedShelfTile: (props: Tile) => {
+    mock.tiles.push(props);
+    return null;
+  },
+}));
+
+const track = (id: string, artist: string, artistId: string) => ({
+  id,
+  title: id,
+  artist,
+  artist_id: artistId,
+  artists: [{ id: artistId, name: artist }],
+  album_id: `album-${id}`,
+  has_cover: true,
+  plays: 1,
+});
+
+function render(topArtists: { id: string; name: string; plays: number; has_page?: boolean }[]) {
+  mock.tiles = [];
+  mock.data = {
+    summary: { total_plays: 9, total_ms: 1000, unique_tracks: 2, unique_artists: 2 },
+    available_years: [],
+    top_tracks: [track("t1", "Library Artist", "lib"), track("t2", "Streamed Artist", "tidal")],
+    top_artists: topArtists,
+    top_albums: [],
+    top_genres: [],
+    activity: [],
+    bucket: "month",
+  };
+  renderToStaticMarkup(<ReplayScreen />);
+  return mock.tiles;
+}
+
+beforeEach(() => {
+  mock.push.mockClear();
+  mock.play.mockClear();
+});
+
+it("opens the artist's page when the server says there is one", () => {
+  const [tile] = render([{ id: "lib", name: "Library Artist", plays: 5, has_page: true }]);
+  expect(tile.accessibilityLabel).toBe("View artist Library Artist");
+  tile.onPress?.();
+  expect(mock.push).toHaveBeenCalledWith({
+    pathname: "/(tabs)/(settings)/artists/[id]",
+    params: { id: "lib" },
+  });
+  expect(mock.play).not.toHaveBeenCalled();
+});
+
+it("plays a streamed artist's top tracks, rather than opening Not found", () => {
+  const [tile] = render([{ id: "tidal", name: "Streamed Artist", plays: 4, has_page: false }]);
+  expect(tile.accessibilityLabel).toBe("Play Streamed Artist");
+  tile.onPress?.();
+  expect(mock.push).not.toHaveBeenCalled();
+  expect(mock.play).toHaveBeenCalledTimes(1);
+  expect(mock.play.mock.calls[0]).toMatchObject([
+    { id: "t2" },
+    [{ id: "t2" }],
+  ]);
+});
+
+it("does nothing for an artist with no page and no top tracks", () => {
+  const [tile] = render([{ id: "gone", name: "Gone Artist", plays: 1 }]);
+  expect(tile.accessibilityLabel).toBe("Gone Artist");
+  expect(tile.onPress).toBeUndefined();
+  expect(tile.art).toEqual({ kind: "artist", imageUrl: null });
+});
+
+it("shows a cover from the artist's own tracks", () => {
+  const [tile] = render([{ id: "lib", name: "Library Artist", plays: 5, has_page: true }]);
+  expect(tile.art.imageUrl).toContain("album-t1");
+});
diff --git a/mobile/tests/search-failures.test.tsx b/mobile/tests/search-failures.test.tsx
index 1eb26c21..f4ab3d56 100644
--- a/mobile/tests/search-failures.test.tsx
+++ b/mobile/tests/search-failures.test.tsx
@@ -193,8 +193,8 @@ const markup = () => renderToStaticMarkup(<TidalArtistScreen />);
 it("shows a total failure with a working retry control", () => {
   mock.query.isError = true;
   const html = markup();
-  expect(html).toContain("Couldn&#x27;t load artist.");
-  expect(html).not.toContain("No releases found.");
+  expect(html).toContain("Couldn&#x27;t load artist");
+  expect(html).not.toContain("No releases found");
   mock.retry?.onPress();
   expect(mock.query.refetch).toHaveBeenCalledOnce();
 });
@@ -208,7 +208,7 @@ it("keeps available releases visible with partial failure warnings and during a
   expect(markup()).toContain("Couldn&#x27;t load singles and EPs.");
   expect(markup()).toContain("Available album (Album)");
   mock.query.isError = true;
-  expect(markup()).toContain("Couldn&#x27;t load artist.");
+  expect(markup()).toContain("Couldn&#x27;t load artist");
   expect(markup()).toContain("Available album");
   expect(mock.retry).toBeDefined();
 });
@@ -219,14 +219,14 @@ it("distinguishes incomplete empty results from confirmed empty results and clea
     tracks: [],
     warnings: ["Couldn't load albums."],
   };
-  expect(markup()).not.toContain("No releases found.");
+  expect(markup()).not.toContain("No releases found");
   mock.query.isFetching = true;
   expect(markup()).toContain("Retrying…");
   expect(mock.retry?.disabled).toBe(true);
   mock.query.isFetching = false;
   mock.query.data = { albums: [], tracks: [] };
   const html = markup();
-  expect(html).toContain("No releases found.");
+  expect(html).toContain("No releases found");
   expect(html).not.toContain("Retry artist");
   expect(html).not.toContain("Couldn");
 });
@@ -261,7 +261,7 @@ it("ranks the first five popular tracks and files releases by kind", () => {
   expect(collapsed).not.toContain("Track 6");
   expect(collapsed).toContain("2 releases · 7 popular tracks");
   expect(collapsed).toMatch(/Newer single \(Single\).*Older \(Album\)/);
-  expect(collapsed).not.toContain("No releases found.");
+  expect(collapsed).not.toContain("No releases found");
 });
 
 it("does not confirm an empty search while a stream failed, and offers retry", () => {
diff --git a/mobile/tests/shelf-tile.test.tsx b/mobile/tests/shelf-tile.test.tsx
new file mode 100644
index 00000000..d15750a2
--- /dev/null
+++ b/mobile/tests/shelf-tile.test.tsx
@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ShelfTile } from "../components/shelf-tile";
+
+interface PressableProps {
+  accessibilityLabel?: string;
+  accessibilityRole?: string;
+  disabled?: boolean;
+  onPress?: () => void;
+  style: (state: { pressed: boolean }) => { opacity: number }[];
+}
+
+const mock = vi.hoisted(() => ({ pressable: undefined as PressableProps | undefined }));
+
+vi.mock("react-native", () => ({
+  Pressable: ({ children, ...props }: PressableProps & { children: ReactNode }) => {
+    mock.pressable = props;
+    return <button>{children}</button>;
+  },
+  Text: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+  View: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+}));
+vi.mock("../theme/theme", () => ({
+  useTheme: () => ({ color: { fg: "#fff", fgMuted: "#888" } }),
+}));
+
+const render = (onPress?: () => void) => {
+  renderToStaticMarkup(
+    <ShelfTile
+      artwork={null}
+      title="Clayco"
+      width={128}
+      accessibilityLabel="Clayco"
+      onPress={onPress}
+    />,
+  );
+  if (!mock.pressable) throw new Error("no pressable");
+  return mock.pressable;
+};
+
+beforeEach(() => {
+  mock.pressable = undefined;
+});
+
+it("is a button with press feedback when it does something", () => {
+  const tile = render(vi.fn());
+  expect(tile.accessibilityRole).toBe("button");
+  expect(tile.style({ pressed: true })[0].opacity).toBe(0.7);
+});
+
+it("is plain, not dimmed for VoiceOver, when it has nothing to do", () => {
+  const tile = render();
+  expect(tile.accessibilityRole).toBeUndefined();
+  expect(tile.disabled).toBeUndefined();
+  expect(tile.accessibilityLabel).toBe("Clayco");
+  expect(tile.style({ pressed: true })[0].opacity).toBe(1);
+});
diff --git a/mobile/tests/swipe-actions.test.ts b/mobile/tests/swipe-actions.test.ts
index 0f042293..a75c5c9e 100644
--- a/mobile/tests/swipe-actions.test.ts
+++ b/mobile/tests/swipe-actions.test.ts
@@ -51,7 +51,7 @@ describe("swipe release", () => {
 });
 
 describe("action capsule", () => {
-  // "Play Next": a 20 pt icon, a 6 pt gap and the label.
+  // "Play next": a 20 pt icon, a 6 pt gap and the label.
   const content = 96;
 
   it("grows with the row, 8 pt off the screen edge and the row", () => {
diff --git a/mobile/tests/tidal-album-versions.test.tsx b/mobile/tests/tidal-album-versions.test.tsx
index 07d24812..5eb48c1a 100644
--- a/mobile/tests/tidal-album-versions.test.tsx
+++ b/mobile/tests/tidal-album-versions.test.tsx
@@ -225,14 +225,14 @@ it("keeps the previous version up, its rows hidden and buttons waiting, while th
   expect(mock.pending).toBe(true);
   expect(mock.segments?.value).toBe("2");
   expect(html).toContain('aria-hidden="true"><span>Powiedz To</span>');
-  expect(html).not.toContain("Couldn&#x27;t load TIDAL album.");
+  expect(html).not.toContain("Couldn&#x27;t load TIDAL album");
 });
 
 it("shows the error with the picker when the picked version can't load offline", () => {
   mock.params = { id: "2", artist: "77" };
   Object.assign(mock.album, { isPlaceholderData: true, isPaused: true });
   const html = markup();
-  expect(html).toContain("Couldn&#x27;t load TIDAL album.");
+  expect(html).toContain("Couldn&#x27;t load TIDAL album");
   expect(html).not.toContain("<span>Powiedz To</span>");
   mock.segments?.onChange("1");
   expect(mock.setParams).toHaveBeenCalledWith({ id: "1", artist: "77" });
@@ -242,7 +242,7 @@ it("shows the error with the picker when the picked version fails", () => {
   mock.params = { id: "2", artist: "77" };
   mock.album = { data: undefined, isError: true };
   const html = markup();
-  expect(html).toContain("Couldn&#x27;t load TIDAL album.");
+  expect(html).toContain("Couldn&#x27;t load TIDAL album");
   expect(mock.segments?.value).toBe("2");
 });
 
@@ -250,7 +250,7 @@ it("stays on the error while a failed version is retried", () => {
   mock.params = { id: "2", artist: "77" };
   Object.assign(mock.album, { isPlaceholderData: true, errorUpdateCount: 1 });
   const html = markup();
-  expect(html).toContain("Couldn&#x27;t load TIDAL album.");
+  expect(html).toContain("Couldn&#x27;t load TIDAL album");
   expect(html).not.toContain("<span>Powiedz To</span>");
   expect(mock.segments?.value).toBe("2");
 });
diff --git a/mobile/tests/track-info-screen.test.tsx b/mobile/tests/track-info-screen.test.tsx
index ebab430e..77be6011 100644
--- a/mobile/tests/track-info-screen.test.tsx
+++ b/mobile/tests/track-info-screen.test.tsx
@@ -355,7 +355,7 @@ it("offers no Play for a track dropped from TIDAL, and says why", () => {
   const out = html();
   expect(out).not.toContain("<button>Play</button>");
   expect(out).toContain("<button>More actions</button>");
-  expect(out).toContain("Removed from TIDAL, so it can&#x27;t play.");
+  expect(out).toContain("Removed from TIDAL, so it can&#x27;t play");
 });
 
 it("doesn't ask for the album after TIDAL failed, and never twice", () => {
diff --git a/mobile/tests/welcome-hero.test.tsx b/mobile/tests/welcome-hero.test.tsx
new file mode 100644
index 00000000..bfa37b9e
--- /dev/null
+++ b/mobile/tests/welcome-hero.test.tsx
@@ -0,0 +1,129 @@
+import { type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { beforeEach, expect, it, vi } from "vitest";
+
+const NIGHT = 1;
+const MORNING = 2;
+
+const mock = vi.hoisted(() => ({
+  make: vi.fn(),
+  // Stands in for the effect that decodes the art, which a server render skips.
+  loaded: null as null | {
+    source: number;
+    art: { width: () => number; height: () => number } | null;
+  },
+  shader: undefined as undefined | Record<string, unknown>,
+  image: undefined as undefined | Record<string, unknown>,
+}));
+
+// The hero's only state is the decoded art, so this is all of its state. A second
+// useState in the hero would need this mock to tell them apart.
+vi.mock("react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react")>();
+  return {
+    ...actual,
+    useState: <T,>(initial: T) =>
+      mock.loaded ? [mock.loaded, () => {}] : actual.useState(initial),
+  };
+});
+
+vi.mock("react-native", () => ({
+  Image: { resolveAssetSource: () => ({ uri: "file:///art.jpg" }) },
+  PixelRatio: { get: () => 3 },
+  StyleSheet: { absoluteFill: {}, create: <T,>(styles: T) => styles },
+  useWindowDimensions: () => ({ width: 393, height: 852 }),
+  View: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+}));
+vi.mock("expo-image", () => ({ Image: () => <img alt="plain art" /> }));
+vi.mock("react-native-reanimated", () => {
+  const builder = { duration: () => builder };
+  return {
+    default: {
+      View: ({ children }: { children: ReactNode }) => <section>{children}</section>,
+    },
+    FadeIn: builder,
+  };
+});
+vi.mock("@shopify/react-native-skia", () => ({
+  Canvas: ({ children }: { children: ReactNode }) => <canvas>{children}</canvas>,
+  Fill: ({ children }: { children: ReactNode }) => <>{children}</>,
+  ImageShader: (props: Record<string, unknown>) => {
+    mock.image = props;
+    return null;
+  },
+  Shader: ({ children, ...props }: { children: ReactNode }) => {
+    mock.shader = props;
+    return <>{children}</>;
+  },
+  Skia: { RuntimeEffect: { Make: mock.make } },
+}));
+vi.mock("../components/auth/welcome-art", () => ({
+  WELCOME_NIGHT: 1,
+  WELCOME_MORNING: 2,
+}));
+vi.mock("../theme/theme", () => ({
+  useTheme: () => ({ scheme: "dark", color: { bg: "#000000" } }),
+  withAlpha: (color: string) => color,
+}));
+
+beforeEach(() => {
+  vi.resetModules();
+  mock.make.mockReset();
+  mock.loaded = null;
+  mock.shader = undefined;
+  mock.image = undefined;
+});
+
+async function render() {
+  const { WelcomeHero } = await import("../components/auth/welcome-hero");
+  return renderToStaticMarkup(<WelcomeHero height={540} />);
+}
+
+it("shows the plain art when this device's Skia refuses the mesh", async () => {
+  mock.make.mockImplementation(() => {
+    throw new Error("Error in SKSL");
+  });
+  expect(await render()).toContain('alt="plain art"');
+});
+
+it("waits for the art without flashing the plain image", async () => {
+  mock.make.mockReturnValue({});
+  const html = await render();
+  expect(html).not.toContain("plain art");
+  expect(html).not.toContain("<canvas");
+});
+
+it("compiles the mesh once, however many times the hero renders", async () => {
+  mock.make.mockReturnValue({});
+  await render();
+  await render();
+  expect(mock.make).toHaveBeenCalledTimes(1);
+});
+
+it("draws the art through the mesh, clamped so cut-off edge cells stay opaque", async () => {
+  const effect = {};
+  mock.make.mockReturnValue(effect);
+  const art = { width: () => 660, height: () => 960 };
+  mock.loaded = { source: NIGHT, art };
+  expect(await render()).toContain("<canvas");
+  expect(mock.shader).toEqual({
+    source: effect,
+    uniforms: { density: 3, pitch: 9, gap: 2, lineLight: 0.6 },
+  });
+  expect(mock.image).toMatchObject({ image: art, tx: "clamp", ty: "clamp", fit: "fill" });
+});
+
+it("drops the old scene when the appearance changes, until the new one loads", async () => {
+  mock.make.mockReturnValue({});
+  // The theme is dark, and what's decoded is still the morning file.
+  mock.loaded = { source: MORNING, art: { width: () => 660, height: () => 960 } };
+  const html = await render();
+  expect(html).not.toContain("<canvas");
+  expect(html).not.toContain("plain art");
+});
+
+it("falls back to the plain art when this scene can't load", async () => {
+  mock.make.mockReturnValue({});
+  mock.loaded = { source: NIGHT, art: null };
+  expect(await render()).toContain('alt="plain art"');
+});
diff --git a/mobile/tests/welcome-mesh.test.ts b/mobile/tests/welcome-mesh.test.ts
new file mode 100644
index 00000000..2aee5aa0
--- /dev/null
+++ b/mobile/tests/welcome-mesh.test.ts
@@ -0,0 +1,142 @@
+import CanvasKitInit from "canvaskit-wasm";
+import { describe, expect, it, vi } from "vitest";
+import {
+  WELCOME_MESH_SHADER,
+  loadWelcomeArt,
+  welcomeArtRect,
+  welcomeFadeHeight,
+  welcomeMesh,
+} from "../lib/welcome-mesh";
+
+describe("welcomeMesh", () => {
+  it("lands on whole device pixels at every screen density", () => {
+    expect(welcomeMesh(3)).toEqual({ pitch: 9, gap: 2 });
+    expect(welcomeMesh(2)).toEqual({ pitch: 6, gap: 1 });
+    expect(welcomeMesh(2.625)).toEqual({ pitch: 8, gap: 2 });
+  });
+});
+
+describe("welcomeArtRect", () => {
+  const art = { width: 660, height: 960 };
+
+  it("fills the width and keeps the sky on a tall view", () => {
+    expect(welcomeArtRect({ width: 393, height: 540 }, art)).toEqual({
+      x: 0,
+      y: 0,
+      width: 393,
+      height: (960 * 393) / 660,
+    });
+  });
+
+  it("slides up on a short view, to keep the record out of the fade", () => {
+    const rect = welcomeArtRect({ width: 375, height: 380 }, art);
+    expect(rect.width).toBeCloseTo(375);
+    expect(rect.y).toBeLessThan(0);
+    // The record sits at 39.5% of the art.
+    expect(rect.y + rect.height * 0.395).toBeCloseTo(380 * 0.46);
+  });
+
+  it("fills the height and centers when the view is wider than the art", () => {
+    const rect = welcomeArtRect({ width: 300, height: 960 }, art);
+    expect(rect).toEqual({ x: -180, y: 0, width: 660, height: 960 });
+  });
+});
+
+describe("welcomeFadeHeight", () => {
+  it("scales with the hero within its limits", () => {
+    expect(welcomeFadeHeight(200)).toBe(96);
+    expect(welcomeFadeHeight(540)).toBe(162);
+    expect(welcomeFadeHeight(1200)).toBe(240);
+  });
+});
+
+describe("loadWelcomeArt", () => {
+  const skia = (decoded: string | null) => ({
+    Data: { fromURI: async (uri: string) => `bytes of ${uri}` },
+    Image: { MakeImageFromEncoded: () => decoded },
+  });
+
+  it("decodes the file at the URI", async () => {
+    const decode = vi.fn(() => "image");
+    const art = await loadWelcomeArt("file:///night.jpg", {
+      Data: skia("").Data,
+      Image: { MakeImageFromEncoded: decode },
+    });
+    expect(art).toBe("image");
+    expect(decode).toHaveBeenCalledWith("bytes of file:///night.jpg");
+  });
+
+  it("reports a file it can't decode", async () => {
+    expect(await loadWelcomeArt("file:///night.jpg", skia(null))).toBeNull();
+  });
+
+  it("reports a file it can't read, rather than rejecting", async () => {
+    const broken = {
+      Data: { fromURI: () => Promise.reject(new Error("no such file")) },
+      Image: { MakeImageFromEncoded: () => "image" },
+    };
+    await expect(loadWelcomeArt("file:///night.jpg", broken)).resolves.toBeNull();
+  });
+});
+
+describe("the mesh shader, under real Skia", () => {
+  async function make() {
+    const CK = await CanvasKitInit();
+    const errors: string[] = [];
+    const effect = CK.RuntimeEffect.Make(WELCOME_MESH_SHADER, (e) => errors.push(e));
+    expect(errors).toEqual([]);
+    if (!effect) throw new Error("the shader didn't compile");
+    return { CK, effect };
+  }
+
+  it("takes exactly the uniforms the screen passes", async () => {
+    const { effect } = await make();
+    const names = Array.from({ length: effect.getUniformCount() }, (_, i) =>
+      effect.getUniformName(i),
+    );
+    // RN Skia throws on a missing uniform, by name.
+    expect(new Set(names)).toEqual(
+      new Set(["density", ...Object.keys(welcomeMesh(3)), "lineLight"]),
+    );
+  });
+
+  it("dims a line along each cell's top and left, one mesh period apart", async () => {
+    const { CK, effect } = await make();
+    const density = 3;
+    const { pitch, gap } = welcomeMesh(density);
+    const size = pitch * 2;
+    const surface = CK.MakeSurface(size, size);
+    if (!surface) throw new Error("no surface");
+    const canvas = surface.getCanvas();
+    canvas.scale(density, density);
+    const child = CK.Shader.MakeColor(CK.WHITE, CK.ColorSpace.SRGB);
+    const uniforms = [density, pitch, gap, 0.5];
+    const order = Array.from({ length: effect.getUniformCount() }, (_, i) =>
+      effect.getUniformName(i),
+    );
+    expect(order).toEqual(["density", "pitch", "gap", "lineLight"]);
+    const paint = new CK.Paint();
+    paint.setShader(effect.makeShaderWithChildren(uniforms, [child]));
+    canvas.drawPaint(paint);
+    surface.flush();
+
+    const pixels = canvas.readPixels(0, 0, {
+      width: size,
+      height: size,
+      colorType: CK.ColorType.RGBA_8888,
+      alphaType: CK.AlphaType.Premul,
+      colorSpace: CK.ColorSpace.SRGB,
+    });
+    if (!pixels) throw new Error("no pixels");
+    const red = (x: number, y: number) => pixels[(y * size + x) * 4];
+    const row = Array.from({ length: size }, (_, x) => red(x, pitch - 1));
+    const lit = 255;
+    // Across a cell's row: `gap` dim pixels, then lit ones, then it repeats.
+    expect(row.slice(0, gap).every((v) => v < 140)).toBe(true);
+    expect(row.slice(gap, pitch).every((v) => v === lit)).toBe(true);
+    expect(row.slice(pitch, pitch + gap).every((v) => v < 140)).toBe(true);
+    expect(row.slice(pitch + gap).every((v) => v === lit)).toBe(true);
+    // A line across the top of the cell stays dim the whole way.
+    expect(red(pitch - 1, 0)).toBeLessThan(140);
+  });
+});
diff --git a/mobile/tests/welcome-screen.test.tsx b/mobile/tests/welcome-screen.test.tsx
new file mode 100644
index 00000000..16569eb8
--- /dev/null
+++ b/mobile/tests/welcome-screen.test.tsx
@@ -0,0 +1,101 @@
+import { type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { beforeEach, expect, it, vi } from "vitest";
+import WelcomeScreen from "../app/(auth)/welcome";
+
+const mock = vi.hoisted(() => ({
+  push: vi.fn(),
+  baseUrl: "https://musicfiles.example:8443",
+  presses: new Map<string, () => void>(),
+}));
+
+vi.mock("react-native", () => ({
+  ActivityIndicator: () => null,
+  ScrollView: ({ children }: { children: ReactNode }) => <main>{children}</main>,
+  View: ({
+    children,
+    accessibilityLabel,
+  }: {
+    children: ReactNode;
+    accessibilityLabel?: string;
+  }) => <div aria-label={accessibilityLabel}>{children}</div>,
+  Text: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+  Pressable: ({
+    children,
+    onPress,
+    accessibilityLabel,
+  }: {
+    children: ReactNode;
+    onPress: () => void;
+    accessibilityLabel: string;
+  }) => {
+    mock.presses.set(accessibilityLabel, onPress);
+    return <button aria-label={accessibilityLabel}>{children}</button>;
+  },
+  useWindowDimensions: () => ({ width: 393, height: 852, fontScale: 1 }),
+}));
+vi.mock("expo-router", () => ({ useRouter: () => ({ push: mock.push }) }));
+vi.mock("expo-image", () => ({ Image: () => <img alt="" /> }));
+vi.mock("expo-haptics", () => ({ selectionAsync: vi.fn() }));
+vi.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 59, bottom: 34 }),
+}));
+vi.mock("react-native-reanimated", () => {
+  const builder = {
+    delay: () => builder,
+    duration: () => builder,
+    withInitialValues: () => builder,
+  };
+  return {
+    default: {
+      View: ({ children }: { children: ReactNode }) => <section>{children}</section>,
+    },
+    FadeInDown: builder,
+  };
+});
+vi.mock("@music-library/core", () => ({ getBaseUrl: () => mock.baseUrl }));
+vi.mock("../components/auth/welcome-art", () => ({ WELCOME_RECORD: 1 }));
+vi.mock("../components/auth/welcome-hero", () => ({ WelcomeHero: () => null }));
+vi.mock("../theme/theme", () => ({
+  useTheme: () => ({
+    scheme: "dark",
+    color: { bg: "#000", fg: "#fff", fgMuted: "#888", fgSubtle: "#ccc", accent: "#00f", onAccent: "#fff" },
+    radius: { md: 10 },
+    space: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  }),
+}));
+
+beforeEach(() => {
+  mock.push.mockClear();
+  mock.presses.clear();
+  mock.baseUrl = "https://musicfiles.example:8443";
+});
+
+it("reads the headline as one sentence, whatever sits between its words", () => {
+  const html = renderToStaticMarkup(<WelcomeScreen />);
+  expect(html).toContain('aria-label="Your music, on your server"');
+});
+
+it("names the server this build talks to", () => {
+  // React splits the sentence around the value, so compare the text alone.
+  const text = renderToStaticMarkup(<WelcomeScreen />).replace(/<!-- -->|<[^>]+>/g, "");
+  expect(text).toContain("Lumen plays your library from musicfiles.example on your phone");
+});
+
+it("still reads properly when the server isn't configured", () => {
+  mock.baseUrl = "not a url";
+  const text = renderToStaticMarkup(<WelcomeScreen />).replace(/<!-- -->|<[^>]+>/g, "");
+  expect(text).toContain("Lumen plays your library from your server on your phone");
+});
+
+it("offers one primary way in and one quiet one", () => {
+  renderToStaticMarkup(<WelcomeScreen />);
+  expect([...mock.presses.keys()]).toEqual([
+    "Sign in",
+    "Create an account with an invite",
+  ]);
+  mock.presses.get("Sign in")?.();
+  expect(mock.push).toHaveBeenLastCalledWith("/(auth)/login");
+  mock.presses.get("Create an account with an invite")?.();
+  expect(mock.push).toHaveBeenLastCalledWith("/(auth)/register");
+});
diff --git a/mobile/theme/theme.tsx b/mobile/theme/theme.tsx
index 1e093f8e..10aa31b5 100644
--- a/mobile/theme/theme.tsx
+++ b/mobile/theme/theme.tsx
@@ -32,8 +32,8 @@ export interface ThemePalette {
   /** Foreground (text/icon/spinner) on top of `accent`. */
   onAccent: string;
   /**
-   * The app icon's purple, for brand moments like the welcome screen's hero.
-   * Controls and links keep using `accent`. Lifted in dark so it reads on black.
+   * The app icon's purple, which in the interface means Favorites and nothing
+   * else. Controls and links use `accent`. Lifted in dark so it reads on black.
    */
   brand: string;
   /** Destructive / error (iOS systemRed, per scheme). */