# Netflix (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Netflix's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, `Modifier`s, motion, and haptics.

> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (Netflix's warm `#141414` canvas, single sacred red, art-as-the-headline) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `ExoPlayer` instead of `AVPlayer`, a translucent `Surface` instead of `.regularMaterial`, `sp`/`dp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, Coil `2.6+` for poster art, and `androidx.media3:media3-exoplayer` for the hero trailer. No color extraction — Netflix never tints chrome from art, so Palette is not needed.

## 1. Color Tokens

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

object NetflixColors {
    // Brand
    val Red        = Color(0xFFE50914)
    val RedPressed = Color(0xFFB7070F)
    val RedDimmed  = Color(0xFF831010)

    // Canvas & Surfaces
    val Canvas    = Color(0xFF141414) // warm dark — NOT pure black
    val DeepBlack = Color(0xFF000000) // behind hero art only
    val Surface1  = Color(0xFF1F1F1F)
    val Surface2  = Color(0xFF2A2A2A)
    val Surface3  = Color(0xFF3A3A3A)
    val Divider   = Color(0xFF2B2B2B)
    val Input     = Color(0xFF333333)

    // Text
    val TextPrimary   = Color(0xFFFFFFFF)
    val TextSecondary = Color(0xFFAAAAAA)
    val TextTertiary  = Color(0xFF777777)

    // Profile accent rotation (profile picker only — never UI chrome)
    val ProfileRed    = Color(0xFFE50914)
    val ProfileBlue   = Color(0xFF3E3E91)
    val ProfileYellow = Color(0xFFF5D85C)
    val ProfileGreen  = Color(0xFF4B8A3E)
    val KidsOrange    = Color(0xFFF8981D)

    // Semantic
    val Info = Color(0xFF54B9C5) // download arc only — rarely used
}
```

Wire it into a Material 3 `darkColorScheme` so ripples, dividers, and default component colors inherit the brand. Netflix is dark-only and has never shipped a light mode; do not provide a light scheme, and ignore the system light-mode preference.

```kotlin
// ui/theme/Theme.kt
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme

private val NetflixScheme = darkColorScheme(
    primary        = NetflixColors.Red,
    onPrimary      = NetflixColors.TextPrimary,  // white on red Play
    background     = NetflixColors.Canvas,
    onBackground   = NetflixColors.TextPrimary,
    surface        = NetflixColors.Surface1,
    onSurface      = NetflixColors.TextPrimary,
    surfaceVariant = NetflixColors.Surface2,
    outline        = NetflixColors.Divider,
    error          = NetflixColors.Red,          // playback errors reuse brand red
)

@Composable
fun NetflixTheme(content: @Composable () -> Unit) =
    MaterialTheme(colorScheme = NetflixScheme, typography = NetflixTypography, content = content)
```

## 2. Typography

Netflix Sans is proprietary (Dalton Maag, 2018, replacing Gotham). Drop the TTFs in `res/font/` (lowercase, snake_case) and build a `FontFamily`. Fall back to the system font (Roboto) — its humanist-geometric tone is the closest free substitute on Android; Graphik is the brand's secondary if licensed.

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

val NetflixSans = FontFamily(
    Font(R.font.netflix_sans_regular, FontWeight.Normal),   // 400
    Font(R.font.netflix_sans_medium,  FontWeight.Medium),   // 500
    Font(R.font.netflix_sans_bold,    FontWeight.Bold),     // 700
    Font(R.font.netflix_sans_black,   FontWeight.Black),    // 900 — Top 10 numerals
)

// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
object NetflixText {
    val TitleHero     = TextStyle(NetflixSans, fontWeight = FontWeight.Bold,   fontSize = 32.sp, lineHeight = 35.sp, letterSpacing = (-0.4).sp)
    val ScreenTitle   = TextStyle(NetflixSans, fontWeight = FontWeight.Bold,   fontSize = 20.sp, lineHeight = 24.sp, letterSpacing = (-0.2).sp)
    val RowHeader     = TextStyle(NetflixSans, fontWeight = FontWeight.Bold,   fontSize = 17.sp, lineHeight = 20.sp, letterSpacing = (-0.1).sp)
    val EpisodeTitle  = TextStyle(NetflixSans, fontWeight = FontWeight.Medium, fontSize = 17.sp, lineHeight = 20.sp)
    val Body          = TextStyle(NetflixSans, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 20.sp)
    val Metadata      = TextStyle(NetflixSans, fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 17.sp)
    val MetadataSm    = TextStyle(NetflixSans, fontWeight = FontWeight.Normal, fontSize = 12.sp, lineHeight = 16.sp)
    val ButtonPlay    = TextStyle(NetflixSans, fontWeight = FontWeight.Bold,   fontSize = 17.sp, lineHeight = 17.sp)
    val ButtonSecond  = TextStyle(NetflixSans, fontWeight = FontWeight.Medium, fontSize = 15.sp, lineHeight = 15.sp)
    val Badge         = TextStyle(NetflixSans, fontWeight = FontWeight.Bold,   fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.4.sp)
    val TabLabel      = TextStyle(NetflixSans, fontWeight = FontWeight.Medium, fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.2.sp)
    val Cert          = TextStyle(NetflixSans, fontWeight = FontWeight.Bold,   fontSize = 12.sp, lineHeight = 12.sp)
    val ProgressTime  = TextStyle(NetflixSans, fontWeight = FontWeight.Normal, fontSize = 12.sp, lineHeight = 12.sp)
}

// Map onto Material 3 slots so stock components inherit the brand
val NetflixTypography = Typography(
    headlineLarge = NetflixText.TitleHero,
    titleLarge    = NetflixText.ScreenTitle,
    titleMedium   = NetflixText.RowHeader,
    bodyMedium    = NetflixText.Body,
    labelSmall    = NetflixText.TabLabel,
)
```

## 3. Signature Components

### Primary Play Button (The Iconic Red 4pt-Corner Pill)

```kotlin
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.background
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.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.unit.dp

@Composable
fun NetflixPlayButton(
    title: String,           // "Play" or "Resume"
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    val interaction = remember { MutableInteractionSource() }
    val pressed by interaction.collectIsPressedAsState()
    val scale by animateFloatAsState(
        targetValue = if (pressed) 0.98f else 1f,
        animationSpec = spring(dampingRatio = 0.8f, stiffness = 600f),
        label = "playScale",
    )
    val haptics = LocalHapticFeedback.current

    Row(
        modifier = modifier
            .fillMaxWidth()
            .scale(scale)
            .clip(RoundedCornerShape(4.dp)) // signature soft corner — NOT a full pill
            .background(if (pressed) NetflixColors.RedPressed else NetflixColors.Red)
            .clickable(interaction, indication = null) {
                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS rigid impact
                onClick()
            }
            .padding(vertical = 14.dp, horizontal = 24.dp),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Icon(
            Icons.Filled.PlayArrow,
            contentDescription = null,
            tint = NetflixColors.TextPrimary,
            modifier = Modifier.size(20.dp),
        )
        Spacer(Modifier.width(8.dp))
        Text(title, style = NetflixText.ButtonPlay, color = NetflixColors.TextPrimary)
    }
}
```

### Secondary Button (My List / Info / Trailer)

```kotlin
@Composable
fun NetflixSecondaryButton(
    icon: ImageVector,
    title: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    val interaction = remember { MutableInteractionSource() }
    val pressed by interaction.collectIsPressedAsState()

    Row(
        modifier = modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(4.dp))
            .background(Color.White.copy(alpha = if (pressed) 0.25f else 0.15f))
            .clickable(interaction, indication = null, onClick = onClick)
            .padding(vertical = 12.dp, horizontal = 20.dp),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Icon(icon, contentDescription = null, tint = NetflixColors.TextPrimary, modifier = Modifier.size(16.dp))
        Spacer(Modifier.width(8.dp))
        Text(title, style = NetflixText.ButtonSecond, color = NetflixColors.TextPrimary)
    }
}
```

### Poster Tile (2:3 portrait, optional Continue Watching bar)

```kotlin
import coil.compose.AsyncImage
import androidx.compose.ui.layout.ContentScale

@Composable
fun PosterTile(
    imageUrl: String,
    width: Dp,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    progress: Float? = null, // 0f–1f — pass for Continue Watching
) {
    Box(
        modifier = modifier
            .width(width)
            .height(width * 1.5f) // 2:3 portrait
            .clip(RoundedCornerShape(4.dp)) // Netflix's signature soft corner — no shadow
            .background(NetflixColors.Surface1)
            .clickable(onClick = onClick),
        contentAlignment = Alignment.BottomCenter,
    ) {
        AsyncImage(
            model = imageUrl,
            contentDescription = null,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop,
        )
        if (progress != null) {
            Box(
                Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 4.dp)
                    .padding(bottom = 4.dp)
                    .height(2.dp)
                    .background(Color.White.copy(alpha = 0.3f)),
            ) {
                Box(
                    Modifier
                        .fillMaxHeight()
                        .fillMaxWidth(progress.coerceIn(0f, 1f))
                        .background(NetflixColors.Red),
                )
            }
        }
    }
}
```

### Horizontal Poster Row

```kotlin
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items

@Composable
fun PosterRow(
    title: String,
    posters: List<String>,
    onPoster: (String) -> Unit,
    modifier: Modifier = Modifier,
    tileWidth: Dp = 130.dp,
) {
    Column(modifier, verticalArrangement = Arrangement.spacedBy(8.dp)) {
        Text(
            title,
            style = NetflixText.RowHeader,
            color = NetflixColors.TextPrimary,
            modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp),
        )
        LazyRow(
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            contentPadding = PaddingValues(horizontal = 16.dp),
        ) {
            items(posters) { url ->
                PosterTile(imageUrl = url, width = tileWidth, onClick = { onPoster(url) })
            }
        }
    }
}
```

## 4. Hero Trailer Auto-Play + Top 10 Numeral Row

Netflix's two signature compositions: the muted hero trailer that fades in after a 2s idle, and the giant outlined numerals behind the Top 10 row.

### Hero with ExoPlayer trailer

iOS uses `AVPlayer` with a 2s delay; Android's analog is `media3` ExoPlayer behind an `AndroidView`. Start muted, cross-fade from key art, pause when off-screen.

```kotlin
// build.gradle: implementation("androidx.media3:media3-exoplayer:1.4.1"); media3-ui
import androidx.compose.animation.Crossfade
import androidx.compose.foundation.background
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.viewinterop.AndroidView
import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.ui.PlayerView
import kotlinx.coroutines.delay

@Composable
fun HeroCard(
    keyArtUrl: String,
    trailerUrl: String?,
    titleLogoUrl: String,
    genres: List<String>,
    onPlay: () -> Unit,
    onMyList: () -> Unit,
    onInfo: () -> Unit,
) {
    val context = LocalContext.current
    var showTrailer by remember { mutableStateOf(false) }
    val player = remember {
        trailerUrl?.let {
            ExoPlayer.Builder(context).build().apply {
                setMediaItem(MediaItem.fromUri(it))
                volume = 0f // muted — never auto-play with sound
                repeatMode = ExoPlayer.REPEAT_MODE_ONE
                prepare()
            }
        }
    }
    LaunchedEffect(trailerUrl) {
        if (player != null) { delay(2_000); showTrailer = true; player.play() }
    }
    DisposableEffect(Unit) { onDispose { player?.release() } }

    Box(
        Modifier
            .fillMaxWidth()
            .height(440.dp)
            .background(NetflixColors.Canvas),
        contentAlignment = Alignment.BottomCenter,
    ) {
        Crossfade(showTrailer && player != null, label = "heroTrailer") { trailing ->
            if (trailing && player != null) {
                AndroidView(
                    factory = { PlayerView(it).apply { useController = false; this.player = player } },
                    modifier = Modifier.fillMaxSize(),
                )
            } else {
                AsyncImage(
                    model = keyArtUrl,
                    contentDescription = null,
                    modifier = Modifier.fillMaxSize(),
                    contentScale = ContentScale.Crop,
                )
            }
        }
        // Vertical gradient eats the lower 40% into the canvas
        Box(
            Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Brush.verticalGradient(listOf(Color.Transparent, NetflixColors.Canvas))),
        )
        Column(
            Modifier.fillMaxWidth().padding(bottom = 16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            AsyncImage(
                model = titleLogoUrl,
                contentDescription = "Title",
                modifier = Modifier.fillMaxWidth(0.65f).height(80.dp),
                contentScale = ContentScale.Fit,
            )
            Row(horizontalArrangement = Arrangement.spacedBy(6.dp)) {
                genres.forEachIndexed { i, g ->
                    Text(g, style = NetflixText.Metadata, color = NetflixColors.TextPrimary)
                    if (i < genres.lastIndex) Text("•", style = NetflixText.Metadata, color = NetflixColors.TextSecondary)
                }
            }
            Row(
                Modifier.padding(horizontal = 16.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp),
            ) {
                NetflixSecondaryButton(Icons.Filled.Add, "My List", onMyList, Modifier.weight(1f))
                NetflixPlayButton("Play", onPlay, Modifier.weight(1f))
                NetflixSecondaryButton(Icons.Filled.Info, "Info", onInfo, Modifier.weight(1f))
            }
        }
    }
}
```

### Top 10 Row (giant outlined numerals)

True outline type needs a stroked draw. Use `Canvas` + `Paint.Style.STROKE` on the native paint so the numeral is a hollow `#141414` glyph the poster lifts in front of.

```kotlin
import android.graphics.Paint
import android.graphics.Typeface
import androidx.compose.foundation.Canvas
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.graphics.nativeCanvas

@Composable
fun Top10Numeral(index: Int, modifier: Modifier = Modifier) {
    val stroke = remember {
        Paint().apply {
            style = Paint.Style.STROKE
            strokeWidth = 4f               // ~2pt stroke, scaled
            color = NetflixColors.TextTertiary.toArgb()
            textSize = 220f                // ~160pt compressed glyph
            typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
        }
    }
    Canvas(modifier.size(width = 110.dp, height = 195.dp)) {
        drawIntoCanvas {
            it.nativeCanvas.drawText("$index", 0f, size.height * 0.92f, stroke)
        }
    }
}

@Composable
fun Top10Row(posters: List<String>, onPoster: (String) -> Unit) {
    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        Text(
            "Top 10 TV Shows Today",
            style = NetflixText.RowHeader,
            color = NetflixColors.TextPrimary,
            modifier = Modifier.padding(horizontal = 16.dp),
        )
        LazyRow(contentPadding = PaddingValues(horizontal = 16.dp)) {
            itemsIndexed(posters.take(10)) { i, url ->
                Row(verticalAlignment = Alignment.Bottom) {
                    Top10Numeral(i + 1)
                    PosterTile(
                        imageUrl = url,
                        width = 120.dp,
                        onClick = { onPoster(url) },
                        modifier = Modifier.offset(x = (-24).dp), // poster covers numeral's inner edge
                    )
                    Spacer(Modifier.width(8.dp))
                }
            }
        }
    }
}
```

## 5. Bottom Navigation (Tab Bar)

Use Material 3 `NavigationBar`. Netflix's iOS tab bar is `.regularMaterial` blur; Android has no first-class live blur, so use a 92%-opaque canvas surface with a 1dp top hairline. 4 tabs only — Netflix is view-only, no center Create. Active tint is **white** (filled icon), inactive is `#777777`.

```kotlin
@Composable
fun NetflixBottomBar(selected: Int, onSelect: (Int) -> Unit) {
    NavigationBar(
        containerColor = NetflixColors.Canvas.copy(alpha = 0.92f),
        tonalElevation = 0.dp,
    ) {
        val items = listOf(
            "Home"       to Icons.Filled.Home,
            "New & Hot"  to Icons.Filled.PlayCircle,
            "My Netflix" to Icons.Filled.AccountCircle,
            "Downloads"  to Icons.Filled.DownloadForOffline,
        )
        items.forEachIndexed { i, (label, icon) ->
            NavigationBarItem(
                selected = selected == i,
                onClick = { onSelect(i) },
                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(24.dp)) },
                label = { Text(label, style = NetflixText.TabLabel) },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = NetflixColors.TextPrimary,   // white
                    selectedTextColor = NetflixColors.TextPrimary,
                    unselectedIconColor = NetflixColors.TextTertiary, // #777777
                    unselectedTextColor = NetflixColors.TextTertiary,
                    indicatorColor = Color.Transparent, // no Material pill — Netflix has none
                ),
            )
        }
    }
}
```

The **NETFLIX wordmark** is the only Home header — ship the red vector as `R.drawable.netflix_wordmark` and render it 22.dp tall in a transparent top app bar that fades to `Canvas.copy(alpha = 0.92f)` on scroll. No title text, no search field here.

## 6. Motion

Netflix motion is subtle — 250–400ms springs, never aggressive.

| Moment | Compose recipe |
|--------|----------------|
| Play tap | `animateFloatAsState` 1 → 0.98 with `spring(dampingRatio = 0.8f)`, `HapticFeedbackType.LongPress` |
| Poster → Detail | `SharedTransitionLayout` + `Modifier.sharedElement()` on the poster (Compose 1.7+), `spring(0.35f, 0.85f)`; fallback `AnimatedVisibility` cross-fade |
| Hero trailer | `Crossfade` from key art to `PlayerView` after a 2_000ms `delay` |
| My List add | `Animatable` rotation 0 → 90° + plus↔check cross-fade over 200ms, `HapticFeedbackType.Confirm` |
| Profile select | scale 1 → 1.1 → 1 `keyframes` spring, then full-screen `Crossfade` to Home |
| Rating thumb | scale 1 → 1.2 → 1 bounce, heavy haptic on double-thumb "Love" |

```kotlin
// My List add/remove — plus rotates and cross-fades to check
@Composable
fun MyListToggle(added: Boolean, onToggle: () -> Unit) {
    val rotation by animateFloatAsState(
        if (added) 90f else 0f,
        spring(dampingRatio = 0.7f, stiffness = 600f),
        label = "myListRot",
    )
    val haptics = LocalHapticFeedback.current
    IconButton(onClick = {
        haptics.performHapticFeedback(HapticFeedbackType.Confirm)
        onToggle()
    }) {
        Icon(
            if (added) Icons.Filled.Check else Icons.Filled.Add,
            contentDescription = if (added) "Remove from My List" else "Add to My List",
            tint = NetflixColors.TextPrimary, // plain white — never green
            modifier = Modifier.size(24.dp).graphicsLayer { rotationZ = rotation },
        )
    }
}
```

Haptics: prefer `LocalHapticFeedback`. For the heavy double-thumbs "Love this!" use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.LONG_PRESS)` or a `Vibrator` `VibrationEffect.createOneShot(20, ...)`.

## 7. Icons

Netflix ships custom glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`. The NETFLIX wordmark and Top 10 numerals are NOT icons — ship the wordmark as a vector drawable and stroke the numerals (§4).

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Play | `play.fill` | `Icons.Filled.PlayArrow` |
| Pause | `pause.fill` | `Icons.Filled.Pause` |
| Plus (My List) | `plus` | `Icons.Filled.Add` |
| Checkmark (Added) | `checkmark` | `Icons.Filled.Check` |
| Info | `info.circle` | `Icons.Filled.Info` |
| Trailer | `play.rectangle` | `Icons.Filled.Movie` |
| Download | `arrow.down.to.line` | `Icons.Filled.Download` |
| Downloaded | `checkmark.circle.fill` | `Icons.Filled.CheckCircle` (tint `#AAAAAA`, never green) |
| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
| Thumb up / down | `hand.thumbsup.fill` / `.thumbsdown.fill` | `Icons.Filled.ThumbUp` / `Icons.Filled.ThumbDown` |
| Search | `magnifyingglass` | `Icons.Filled.Search` |
| Home (tab) | `house.fill` | `Icons.Filled.Home` |
| New & Hot (tab) | `play.rectangle.on.rectangle.fill` | `Icons.Filled.PlayCircle` |
| My Netflix (tab) | `person.crop.circle.fill` | `Icons.Filled.AccountCircle` |
| Downloads (tab) | `arrow.down.circle.fill` | `Icons.Filled.DownloadForOffline` |
| Speaker (audio toggle) | `speaker.slash.fill` / `speaker.wave.2.fill` | `Icons.Filled.VolumeOff` / `Icons.Filled.VolumeUp` |
| More | `ellipsis` | `Icons.Filled.MoreHoriz` |
| Close (modal) | `xmark` | `Icons.Filled.Close` |

## 8. Minimum SDK & Accessibility Notes

- **minSdk 24** (Compose floor is 21; media3 + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`; the warm-dark canvas wants `WindowCompat` light-content system bars. The hero extends under the status bar (content behind the cutout); apply `Scaffold` insets so the tab bar clears the gesture nav and the wordmark sits below the camera cutout.
- **Font scaling**: `sp` honors the user's font scale automatically — keep it on synopsis, episode titles, settings. Pin layout-sensitive text (10sp tab labels, 11sp badges, Continue-Watching poster titles, scrubber timestamps) by deriving size from `dp` or wrapping in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
- **TalkBack**: group each poster as one node with `Modifier.semantics(mergeDescendants = true)`; label it with the title and expose "Play {title}" as the primary action, "Add to My List" / "Info" as custom actions. Announce download state explicitly ("Downloaded", "Downloading 45%").
- **Touch targets**: Material guidance is 48.dp minimum. The 48.dp Play button clears it; ensure the 16dp/24dp icon-only buttons (download, more, thumbs) carry a 48.dp hit area via `IconButton` padding.
- **Contrast**: `#AAAAAA` on `#141414` passes WCAG AA at 13sp+. Validate the 10sp tab labels and 11sp `Badge` with a contrast checker and bump toward `#C7C7C7` if your build targets accessibility compliance.
- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, skip the 2s trailer auto-play and the hero cross-fade; substitute shared-element poster transitions with a plain `Crossfade`.
- **Dynamic color**: do **not** enable Material You `dynamicDarkColorScheme()` — Netflix's brand requires the fixed `#141414` canvas and the single sacred `#E50914` red regardless of wallpaper. Kids profile is the only palette swap (brighter saturated tones, +4.dp touch targets).