# Overcast (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Overcast's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s (the orange-ring play button, Now Playing player, Smart Speed / Voice Boost rows, playlist rows), core navigation, motion, and haptics.

> Why a Compose guide for an iOS-only app? Overcast is iOS-exclusive, but the DESIGN.md tokens are platform-neutral and its identity ports cleanly: the warm paper-cream canvas, the single Overcast Orange accent, the outlined orange-ring play button, and Smart Speed / Voice Boost as first-class toggles. This file keeps that identity while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Slider` for the scrubber, `dp`/`sp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, Coil `2.6+` for cover images. Overcast is light-first (paper-cream); a full dark scheme is provided.

## 1. Color Tokens

```kotlin
// ui/theme/OCColors.kt
import androidx.compose.ui.graphics.Color

object OCColors {
    // Brand (single accent)
    val Orange        = Color(0xFFFC7E0F)
    val OrangePressed = Color(0xFFE06A00)
    val LinkBlue      = Color(0xFF2D7FF9)

    // Canvas & Surfaces (Light — paper)
    val Paper        = Color(0xFFFBFAF6) // warm off-white — NOT pure white
    val Cream        = Color(0xFFF7F5EF)
    val PressedLight = Color(0xFFEDEBE3)
    val DividerLight = Color(0xFFE4E1D8)

    // Canvas & Surfaces (Dark)
    val Canvas    = Color(0xFF121212)
    val Surface1  = Color(0xFF1C1C1E)
    val Surface2  = Color(0xFF2A2A2C)
    val DividerDk = Color(0xFF303032)

    // Text
    val TextPrimaryLt   = Color(0xFF1A1A1A)
    val TextSecondaryLt = Color(0xFF6E6E6E)
    val TextPrimaryDk   = Color(0xFFF2F2F2)
    val TextSecondaryDk = Color(0xFF9A9A9A)
    val TextTertiary    = Color(0xFF9A9A9A)

    // Semantic
    val Success = Color(0xFF34C759)
    val Error   = Color(0xFFFF3B30)
    val Warn    = Color(0xFFFF9F0A)

    // Playlist icon tiles
    val PlAll      = Color(0xFFFC7E0F)
    val PlProgress = Color(0xFF2D7FF9)
    val PlStarred  = Color(0xFF34C759)
    val PlDownload = Color(0xFF5856D6)
}
```

Wire it into both schemes. Overcast is light-first (paper-cream); the dark scheme uses a true `#121212`.

```kotlin
// ui/theme/Theme.kt
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable

private val OCLight = lightColorScheme(
    primary        = OCColors.Orange,
    onPrimary      = Color(0xFFFFFFFF),
    background      = OCColors.Paper,
    onBackground    = OCColors.TextPrimaryLt,
    surface         = OCColors.Cream,
    onSurface       = OCColors.TextPrimaryLt,
    surfaceVariant  = OCColors.PressedLight,
    outline         = OCColors.DividerLight,
    error           = OCColors.Error,
)

private val OCDark = darkColorScheme(
    primary        = OCColors.Orange,
    onPrimary      = Color(0xFFFFFFFF),
    background      = OCColors.Canvas,
    onBackground    = OCColors.TextPrimaryDk,
    surface         = OCColors.Surface1,
    onSurface       = OCColors.TextPrimaryDk,
    surfaceVariant  = OCColors.Surface2,
    outline         = OCColors.DividerDk,
    error           = OCColors.Error,
)

@Composable
fun OCTheme(
    dark: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) = MaterialTheme(
    colorScheme = if (dark) OCDark else OCLight,
    typography  = OCTypography,
    content     = content,
)
```

## 2. Typography (M3)

Overcast uses the platform system font (Roboto on Android stands in for SF Pro). Body 400, titles 700/800; timecodes render in a fixed-width box for tabular stability.

```kotlin
// ui/theme/OCType.kt
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

object OCText {
    val ScreenTitle = TextStyle(fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 38.sp, letterSpacing = (-0.4).sp)
    val NowPlaying  = TextStyle(fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.3).sp)
    val Section     = TextStyle(fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
    val Episode     = TextStyle(fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 23.sp)
    val RowTitle    = TextStyle(fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 20.sp)
    val Body        = TextStyle(fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
    val ShowName    = TextStyle(fontWeight = FontWeight.Medium,    fontSize = 14.sp, lineHeight = 20.sp)
    val Meta        = TextStyle(fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 20.sp)
    val PlDesc      = TextStyle(fontWeight = FontWeight.Normal,    fontSize = 12.sp, lineHeight = 16.sp)
    val Button      = TextStyle(fontWeight = FontWeight.SemiBold,  fontSize = 16.sp, lineHeight = 16.sp)
    val Toggle      = TextStyle(fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 20.sp)
    val Chip        = TextStyle(fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 12.sp, letterSpacing = 0.1.sp)
    val Tab         = TextStyle(fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 12.sp, letterSpacing = 0.1.sp)
    val Count       = TextStyle(fontWeight = FontWeight.SemiBold,  fontSize = 14.sp, lineHeight = 16.sp)
    val SkipLabel   = TextStyle(fontWeight = FontWeight.Bold,      fontSize = 9.sp,  lineHeight = 10.sp)
    val StatCaption = TextStyle(fontWeight = FontWeight.SemiBold,  fontSize = 12.sp, lineHeight = 16.sp, letterSpacing = 0.4.sp)
    val Timecode    = TextStyle(fontWeight = FontWeight.Medium,    fontSize = 12.sp, lineHeight = 14.sp)
}

val OCTypography = Typography(
    headlineLarge  = OCText.ScreenTitle,
    headlineMedium = OCText.NowPlaying,
    titleMedium    = OCText.Episode,
    bodyMedium     = OCText.Body,
    labelSmall     = OCText.Tab,
)
```

> For tabular timecodes, render durations/timecodes inside a fixed-width `Box` (or use the `tnum` font feature on API 26+) so digits never shift while scrubbing.

## 3. Signature Components

### Orange-Ring Play Button (the signature control)

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Pause
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.Icon
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun OCPlayRing(playing: Boolean, onToggle: () -> Unit, diameter: androidx.compose.ui.unit.Dp = 66.dp) {
    val interaction = remember { MutableInteractionSource() }
    val pressed by interaction.collectIsPressedAsState()
    val ring = if (pressed) OCColors.OrangePressed else OCColors.Orange

    Box(
        Modifier
            .size(diameter)
            .border(2.5.dp, ring, CircleShape) // outlined ring — never a filled disc
            .clickable(interaction, indication = null) { onToggle() },
        contentAlignment = Alignment.Center,
    ) {
        Icon(
            if (playing) Icons.Filled.Pause else Icons.Filled.PlayArrow,
            contentDescription = if (playing) "Pause" else "Play",
            tint = OCColors.Orange,
            modifier = Modifier.size(diameter * 0.36f),
        )
    }
}
```

### Skip Button (chevron + interval label)

```kotlin
import androidx.compose.material.icons.filled.FastRewind
import androidx.compose.material.icons.filled.FastForward
import androidx.compose.material3.Text

@Composable
fun OCSkipButton(forward: Boolean, seconds: Int, primary: Color, secondary: Color, onClick: () -> Unit) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(2.dp),
        modifier = Modifier.clickable { onClick() },
    ) {
        Icon(
            if (forward) Icons.Filled.FastForward else Icons.Filled.FastRewind,
            contentDescription = if (forward) "Skip forward $seconds seconds" else "Skip back $seconds seconds",
            tint = primary, modifier = Modifier.size(27.dp),
        )
        Text("$seconds", style = OCText.SkipLabel, color = secondary)
    }
}
```

### Now Playing Player

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft
import androidx.compose.material.icons.automirrored.filled.List
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush

@Composable
fun OCNowPlaying(episodeTitle: String, showName: String, dark: Boolean) {
    var progress by remember { mutableFloatStateOf(0.38f) }
    var playing by remember { mutableStateOf(true) }
    val canvas = if (dark) OCColors.Canvas else OCColors.Paper
    val primary = if (dark) OCColors.TextPrimaryDk else OCColors.TextPrimaryLt
    val secondary = if (dark) OCColors.TextSecondaryDk else OCColors.TextSecondaryLt
    val track = if (dark) OCColors.Surface2 else OCColors.DividerLight

    Column(Modifier.fillMaxSize().background(canvas)) {
        Row(
            Modifier.fillMaxWidth().padding(horizontal = 18.dp, vertical = 8.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween,
        ) {
            Icon(Icons.AutoMirrored.Filled.KeyboardArrowLeft, "Collapse", tint = OCColors.Orange)
            Text("Now Playing", style = OCText.RowTitle.copy(fontSize = 13.sp), color = primary)
            Icon(Icons.AutoMirrored.Filled.List, "Queue", tint = primary)
        }

        Column(
            Modifier.padding(horizontal = 34.dp, vertical = 6.dp)
                .clip(RoundedCornerShape(10.dp)),
        ) {
            Box(
                Modifier.fillMaxWidth().aspectRatio(1f)
                    .background(Brush.linearGradient(listOf(Color(0xFF2B3A55), Color(0xFF121A2E))))
            )
            Box(Modifier.fillMaxWidth().height(5.dp).background(OCColors.Orange))
        }

        Column(Modifier.padding(horizontal = 34.dp)) {
            Text(episodeTitle, style = OCText.NowPlaying, color = primary)
            Text(showName, style = OCText.ShowName, color = secondary, modifier = Modifier.padding(top = 4.dp))
        }

        Column(Modifier.padding(horizontal = 30.dp, vertical = 4.dp)) {
            Slider(
                value = progress, onValueChange = { progress = it },
                colors = SliderDefaults.colors(
                    thumbColor = OCColors.Orange,
                    activeTrackColor = OCColors.Orange,
                    inactiveTrackColor = track,
                ),
            )
            Row(Modifier.fillMaxWidth().padding(horizontal = 6.dp), horizontalArrangement = Arrangement.SpaceBetween) {
                Text("48:12", style = OCText.Timecode, color = secondary)
                Text("-1:22:40", style = OCText.Timecode, color = secondary)
            }
        }

        Row(
            Modifier.fillMaxWidth().padding(horizontal = 50.dp, vertical = 14.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween,
        ) {
            OCSkipButton(false, 30, primary, secondary) {}
            OCPlayRing(playing, { playing = !playing })
            OCSkipButton(true, 30, primary, secondary) {}
        }

        Row(
            Modifier.fillMaxWidth().padding(horizontal = 26.dp).padding(bottom = 14.dp),
            horizontalArrangement = Arrangement.SpaceAround,
        ) {
            Effect(Icons.Filled.Speed, "1.3×", secondary, active = true)
            Effect(Icons.Filled.GraphicEq, "Smart Speed", secondary, active = true)
            Effect(Icons.Filled.VolumeUp, "Voice Boost", secondary, active = true)
            Effect(Icons.Filled.StarBorder, "Star", secondary, active = false)
        }
    }
}

@Composable
private fun Effect(icon: androidx.compose.ui.graphics.vector.ImageVector, label: String, secondary: Color, active: Boolean) {
    val c = if (active) OCColors.Orange else secondary
    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(5.dp)) {
        Icon(icon, label, tint = c, modifier = Modifier.size(19.dp))
        Text(label, style = OCText.Chip, color = c)
    }
}
```

### Smart Speed / Voice Boost Toggle Row

```kotlin
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchDefaults

@Composable
fun OCEffectToggleRow(
    title: String, subtitle: String, checked: Boolean, onCheckedChange: (Boolean) -> Unit,
    dark: Boolean,
) {
    val primary = if (dark) OCColors.TextPrimaryDk else OCColors.TextPrimaryLt
    val secondary = if (dark) OCColors.TextSecondaryDk else OCColors.TextSecondaryLt
    val divider = if (dark) OCColors.DividerDk else OCColors.DividerLight
    val track = if (dark) OCColors.Surface2 else OCColors.DividerLight

    Row(
        Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 15.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Column(Modifier.weight(1f)) {
            Text(title, style = OCText.Toggle, color = primary)
            Text(subtitle, style = OCText.PlDesc, color = secondary)
        }
        Switch(
            checked = checked, onCheckedChange = onCheckedChange,
            colors = SwitchDefaults.colors(
                checkedThumbColor = Color.White,
                checkedTrackColor = OCColors.Orange,
                uncheckedThumbColor = Color.White,
                uncheckedTrackColor = track,
            ),
        )
    }
    HorizontalDivider(color = divider)
}
```

### Playlist Row

```kotlin
@Composable
fun OCPlaylistRow(
    icon: androidx.compose.ui.graphics.vector.ImageVector,
    tile: Color, name: String, desc: String, count: Int, dark: Boolean,
) {
    val primary = if (dark) OCColors.TextPrimaryDk else OCColors.TextPrimaryLt
    val secondary = if (dark) OCColors.TextSecondaryDk else OCColors.TextSecondaryLt
    val divider = if (dark) OCColors.DividerDk else OCColors.DividerLight

    Row(
        Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 14.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(14.dp),
    ) {
        Box(
            Modifier.size(38.dp).clip(RoundedCornerShape(9.dp)).background(tile),
            contentAlignment = Alignment.Center,
        ) { Icon(icon, name, tint = Color.White, modifier = Modifier.size(18.dp)) }
        Column(Modifier.weight(1f)) {
            Text(name, style = OCText.RowTitle, color = primary)
            Text(desc, style = OCText.PlDesc, color = secondary, maxLines = 1)
        }
        Text("$count", style = OCText.Count, color = secondary)
    }
    HorizontalDivider(color = divider)
}
```

### Buttons

```kotlin
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.OutlinedButton

@Composable
fun OCPrimaryButton(title: String, onClick: () -> Unit) {
    Button(
        onClick = onClick,
        shape = RoundedCornerShape(10.dp),
        colors = ButtonDefaults.buttonColors(containerColor = OCColors.Orange, contentColor = Color.White),
        contentPadding = PaddingValues(horizontal = 26.dp, vertical = 14.dp),
    ) { Text(title, style = OCText.Button) }
}

@Composable
fun OCOutlineButton(title: String, onClick: () -> Unit) {
    OutlinedButton(
        onClick = onClick,
        shape = RoundedCornerShape(10.dp),
        border = BorderStroke(1.5.dp, OCColors.Orange),
        colors = ButtonDefaults.outlinedButtonColors(contentColor = OCColors.Orange),
        contentPadding = PaddingValues(horizontal = 22.dp, vertical = 12.dp),
    ) { Text(title, style = OCText.RowTitle) }
}
```

## 4. Core Navigation (Bottom Bar)

Overcast has a 4-tab bottom strip. No tint pill — active is just the single orange accent.

```kotlin
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemDefaults
import androidx.compose.material.icons.automirrored.filled.List
import androidx.compose.material.icons.filled.GridView
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings

@Composable
fun OCBottomBar(selected: Int, onSelect: (Int) -> Unit, dark: Boolean) {
    NavigationBar(
        containerColor = if (dark) OCColors.Canvas else OCColors.Paper,
        tonalElevation = 0.dp,
    ) {
        val items = listOf(
            "Playlists" to Icons.AutoMirrored.Filled.List,
            "Podcasts"  to Icons.Filled.GridView,
            "Search"    to Icons.Filled.Search,
            "Settings"  to Icons.Filled.Settings,
        )
        items.forEachIndexed { i, (label, icon) ->
            NavigationBarItem(
                selected = selected == i,
                onClick = { onSelect(i) },
                icon = { Icon(icon, label, modifier = Modifier.size(22.dp)) },
                label = { Text(label, style = OCText.Tab) },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = OCColors.Orange,
                    selectedTextColor = OCColors.Orange,
                    unselectedIconColor = OCColors.TextTertiary,
                    unselectedTextColor = OCColors.TextTertiary,
                    indicatorColor = Color.Transparent, // no Material pill — Overcast has none
                ),
            )
        }
    }
}
```

## 5. Navigation

Use Navigation Compose / Nav3 with four destinations (Playlists, Podcasts, Search, Settings) plus a modal `NowPlaying` route presented as a bottom sheet that expands from the mini-player. Page transitions slide horizontally `tween(300)`; the mini-player → full-player transition is a `slideInVertically` from the bottom `tween(300)` with the artwork as a shared element transitioning into the cover.

## 6. Motion

Overcast motion is quiet and editorial — 150–300ms ease ranges. Only the player cover gets a soft shadow.

| Moment | Compose recipe |
|--------|----------------|
| Play/pause | icon swap `Crossfade(playing, tween(200))`; ring press scale `0.96` via `animateFloatAsState` |
| Scrubber drag | `Slider` thumb; grow via `interactionSource` pressed → thumb radius animate |
| Toggle flip | `Switch` animates track cross-fade to `#FC7E0F` implicitly |
| Mini → full player | `slideInVertically(tween(300))` + shared-element artwork |
| Playlist row swipe | `SwipeToDismissBox` 1:1 reveal, 50% commit, `spring(dampingRatio = 0.85f)` |
| Theme switch | `animateColorAsState` on canvas/text `tween(250)` — cross-fade, no hard cut |
| Page navigation | `NavHost` slide push `tween(300)` |

```kotlin
// Ring press — the canonical Overcast micro-motion
val scale by animateFloatAsState(if (pressed) 0.96f else 1f, tween(120), label = "ringScale")
```

Haptics: use `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft impact on play, toggle flip, scrubber boundary, and the recommend action. The Smart Speed time-saved stat updates silently — no haptic.

## 7. Icons

Overcast uses simple stroked glyphs; the play control is an orange ring (a bordered `Box`, not an icon). `androidx.compose.material:material-icons-extended` covers the rest.

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Playlists (tab) | `list.bullet` | `Icons.AutoMirrored.Filled.List` |
| Podcasts (tab) | `square.grid.2x2` | `Icons.Filled.GridView` |
| Search (tab) | `magnifyingglass` | `Icons.Filled.Search` |
| Settings (tab) | `gearshape` | `Icons.Filled.Settings` |
| Play / Pause | `play.fill` / `pause.fill` | `Icons.Filled.PlayArrow` / `Icons.Filled.Pause` |
| Skip back / forward | `chevron.left.2` / `chevron.right.2` | `Icons.Filled.FastRewind` / `Icons.Filled.FastForward` |
| Smart Speed | `waveform.path` | `Icons.Filled.GraphicEq` |
| Voice Boost | `speaker.wave.2.fill` | `Icons.Filled.VolumeUp` |
| Playback speed | `speedometer` | `Icons.Filled.Speed` |
| Star | `star` / `star.fill` | `Icons.Filled.StarBorder` / `Icons.Filled.Star` |
| In Progress (playlist) | `clock.arrow.circlepath` | `Icons.Filled.History` |
| Downloaded | `arrow.down.circle.fill` | `Icons.Filled.DownloadDone` |
| Collapse player | `chevron.left` | `Icons.AutoMirrored.Filled.KeyboardArrowLeft` |
| Queue / list | `list.bullet` | `Icons.AutoMirrored.Filled.List` |
| Recommend | `hand.thumbsup` | `Icons.Filled.ThumbUp` |
| More | `ellipsis` | `Icons.Filled.MoreHoriz` |
| Add podcast | `plus` | `Icons.Filled.Add` |

## 8. Minimum SDK & Accessibility Notes

- **minSdk 24** (Compose floor is 21; `Slider`, modern motion comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
- **Edge-to-edge**: call `enableEdgeToEdge()`; the paper-cream light theme wants dark-content system bars (light-content in dark mode). The mini-player sits directly above the `NavigationBar` inside the navigation-bar inset.
- **Paper canvas**: use `#FBFAF6` (surfaces `#F7F5EF`) for light — never pure white. Do **not** enable Material You `dynamicColorScheme()`; the warm paper + single-orange identity must hold regardless of wallpaper.
- **Tabular timecodes**: render durations/timecodes in a fixed-width `Box` (or `tnum` font feature on API 26+) so digits never shift while scrubbing.
- **Orange ring**: the play button is a `Box` with `Modifier.border(2.5.dp, OCColors.Orange, CircleShape)` — never a filled circle.
- **Font scaling**: `sp` honors the user's font scale — keep it on screen titles, episode titles, body, metadata. Pin layout-sensitive text (10sp tab labels, effect chips, timecodes, counts, skip-interval labels) via `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
- **TalkBack**: label the play ring "Play" / "Pause, {episode}"; the `Slider` exposes a percentage `stateDescription` — add custom actions for "Skip forward {n} seconds" / "Skip back {n} seconds"; playlist rows announce "Playlist: {name}, {count} episodes, {description}".
- **Touch targets**: Material guidance is 48.dp. The 66.dp play ring is fine; give 27.dp skip glyphs a 48.dp hit via padding; playlist rows are full-row tappable ≥56.dp; tab items are 48.dp by default.
- **Contrast**: `#FC7E0F` keeps ≥3:1 against both `#FBFAF6` and `#121212` for the ring/icons; `#1A1A1A` on `#FBFAF6` passes WCAG AAA for body. Never rely on orange alone for active effects — pair Smart Speed / Voice Boost ON with the labeled toggle + time-saved stat.
- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the scrubber-thumb grow, the play/pause crossfade, and the theme cross-fade; keep state changes.
- **Dark mode**: invert via the dark token set — true `#121212`, `#F2F2F2` text; the single orange accent is unchanged.