# Vimeo (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Vimeo's cinematic visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s for the player + Staff Pick feed, navigation, 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 (Vimeo's near-black screening room, the single Vimeo Blue accent, the iconic Staff Pick gold star, the cinematic auto-fading player) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, ExoPlayer/Media3 instead of `AVPlayer`, `dp`/`sp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, Coil `2.6+` for thumbnails, and `androidx.media3` (ExoPlayer) for the player. Vimeo is dark-first; the dark scheme is canonical.

## 1. Color Tokens

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

object VimeoColors {
    // Canvas & Surfaces (Dark — primary)
    val Canvas    = Color(0xFF0D0E12) // near-black blue ink — NOT pure black
    val Surface1  = Color(0xFF16181F)
    val Surface2  = Color(0xFF1F222B)
    val Divider   = Color(0xFF262A34)

    // Canvas & Surfaces (Light — rare parity)
    val LightCanvas   = Color(0xFFFFFFFF)
    val LightSurface1 = Color(0xFFF5F6F8)
    val LightDivider  = Color(0xFFE2E5EA)

    // Text
    val TextPrimary   = Color(0xFFFFFFFF)
    val TextSecondary = Color(0xFFAEB6C2)
    val TextTertiary  = Color(0xFF6B7280)
    val OnBlue        = Color(0xFF04121A)

    // Brand (single accent)
    val Blue        = Color(0xFF00ADEF)
    val BlueLegacy  = Color(0xFF1AB7EA)
    val BluePressed = Color(0xFF008FC4)

    // Accent & curation
    val StaffGold  = Color(0xFFFFD24C) // Staff Pick badge ONLY
    val PlusPurple = Color(0xFF8B5CF6)

    // Semantic
    val Success = Color(0xFF2ECC71)
    val Error   = Color(0xFFFF4D4F)
    val Live    = Color(0xFFFF2D55)

    // Player scrim
    val Scrim = Color(0xD90D151D) // rgba(8,21,29,0.85)
}
```

Wire it into both schemes. Vimeo is dark-first — the dark scheme is the real product; light is parity only. Never enable Material You `dynamicColorScheme()` — the brand has exactly one accent (Vimeo Blue) and it must hold regardless of wallpaper.

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

private val VimeoDark = darkColorScheme(
    primary        = VimeoColors.Blue,
    onPrimary      = VimeoColors.OnBlue,
    background      = VimeoColors.Canvas,
    onBackground    = VimeoColors.TextPrimary,
    surface         = VimeoColors.Surface1,
    onSurface       = VimeoColors.TextPrimary,
    surfaceVariant  = VimeoColors.Surface2,
    onSurfaceVariant = VimeoColors.TextSecondary,
    outline         = VimeoColors.Divider,
    error           = VimeoColors.Error,
)

private val VimeoLight = lightColorScheme(
    primary      = VimeoColors.Blue,
    onPrimary    = VimeoColors.OnBlue,
    background    = VimeoColors.LightCanvas,
    onBackground  = Color(0xFF10131A),
    surface       = VimeoColors.LightSurface1,
    onSurface     = Color(0xFF10131A),
    outline       = VimeoColors.LightDivider,
    error         = VimeoColors.Error,
)

@Composable
fun VimeoTheme(
    dark: Boolean = true, // dark-first; pass isSystemInDarkTheme() only if you support light parity
    content: @Composable () -> Unit,
) = MaterialTheme(
    colorScheme = if (dark) VimeoDark else VimeoLight,
    typography = VimeoTypography,
    content = content,
)
```

## 2. Typography

Vimeo's UI face is **Inter** (SIL OFL — drop the TTFs in `res/font/`). Body weights 400–700; numeric values use tabular figures via a `FontFeatureSetting`.

```kotlin
// ui/theme/VimeoType.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.text.style.TextGeometricTransform
import androidx.compose.ui.unit.sp

val Inter = FontFamily(
    Font(R.font.inter_regular,    FontWeight.Normal),
    Font(R.font.inter_medium,     FontWeight.Medium),
    Font(R.font.inter_semibold,   FontWeight.SemiBold),
    Font(R.font.inter_bold,       FontWeight.Bold),
    Font(R.font.inter_extrabold,  FontWeight.ExtraBold),
)

// Tabular figures for all timecodes / counts
private val tnum = "tnum"

object VimeoText {
    val Display     = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.6).sp)
    val ScreenTitle = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 26.sp, lineHeight = 31.sp, letterSpacing = (-0.4).sp)
    val Section     = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
    val VideoTitle  = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 24.sp, letterSpacing = (-0.2).sp)
    val CardTitle   = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 17.sp, lineHeight = 23.sp)
    val Body        = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 15.sp, lineHeight = 22.sp)
    val BodyRead    = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 15.sp, lineHeight = 24.sp)
    val Meta        = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 13.sp, lineHeight = 18.sp)
    val Creator     = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 13.sp, lineHeight = 18.sp)
    val Button      = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 15.sp)
    val Pill        = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 12.sp, lineHeight = 12.sp, letterSpacing = 0.1.sp)
    val Overline    = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.6.sp)
    val Timecode    = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 11.sp, lineHeight = 11.sp, fontFeatureSettings = tnum)
    val Tab         = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
}

val VimeoTypography = Typography(
    headlineLarge = VimeoText.Display,
    headlineMedium = VimeoText.ScreenTitle,
    titleLarge    = VimeoText.Section,
    titleMedium   = VimeoText.VideoTitle,
    bodyMedium    = VimeoText.Body,
    labelSmall    = VimeoText.Tab,
)
```

## 3. Signature Components

### Cinematic Video Player

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay

@Composable
fun VimeoPlayer(elapsed: String, total: String, progress: Float) {
    var controls by remember { mutableStateOf(true) }
    LaunchedEffect(controls) {
        if (controls) { delay(3000); controls = false }
    }
    Box(
        Modifier
            .fillMaxWidth()
            .aspectRatio(16f / 9f)
            .clip(RoundedCornerShape(14.dp))
            .background(Brush.linearGradient(listOf(Color(0xFF16384A), Color(0xFF08151D))))
            .pointerInput(Unit) { detectTapGestures { controls = !controls } },
    ) {
        AnimatedVisibility(controls, enter = fadeIn(tween(200)), exit = fadeOut(tween(250)),
            modifier = Modifier.align(Alignment.Center)) {
            Box(
                Modifier
                    .size(52.dp).clip(RoundedCornerShape(50))
                    .background(VimeoColors.Canvas.copy(alpha = 0.55f)),
                contentAlignment = Alignment.Center,
            ) {
                Icon(Icons.Filled.PlayArrow, contentDescription = "Play",
                    tint = Color.White, modifier = Modifier.size(22.dp))
            }
        }
        AnimatedVisibility(controls, enter = fadeIn(tween(200)), exit = fadeOut(tween(250)),
            modifier = Modifier.align(Alignment.BottomCenter)) {
            Row(
                Modifier
                    .fillMaxWidth().height(34.dp)
                    .background(Brush.verticalGradient(listOf(Color.Transparent, VimeoColors.Scrim)))
                    .padding(horizontal = 12.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(8.dp),
            ) {
                Text(elapsed, style = VimeoText.Timecode, color = Color.White)
                ScrubBar(progress, Modifier.weight(1f))
                Text(total, style = VimeoText.Timecode, color = Color.White)
                Box(
                    Modifier
                        .clip(RoundedCornerShape(3.dp))
                        .padding(0.dp),
                ) {
                    Text("HD", style = VimeoText.Tab.copy(fontWeight = FontWeight.Bold, fontSize = 9.sp),
                        color = Color.White, modifier = Modifier.padding(horizontal = 4.dp, vertical = 1.dp))
                }
            }
        }
    }
}

@Composable
fun ScrubBar(progress: Float, modifier: Modifier = Modifier) {
    Box(modifier.height(16.dp), contentAlignment = Alignment.CenterStart) {
        Box(Modifier.fillMaxWidth().height(3.dp).clip(RoundedCornerShape(2.dp)).background(Color.White.copy(alpha = 0.22f)))
        Box(Modifier.fillMaxWidth(progress).height(3.dp).clip(RoundedCornerShape(2.dp)).background(VimeoColors.Blue))
        BoxWithConstraints {
            Box(
                Modifier
                    .offset(x = maxWidth * progress - 4.5.dp)
                    .size(9.dp).clip(RoundedCornerShape(50)).background(Color.White),
            )
        }
    }
}
```

Bind the visual to `androidx.media3.exoplayer.ExoPlayer`; render frames into an `AndroidView { PlayerView(it).apply { useController = false } }` so the Compose overlay above owns all chrome. Use `resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FIT` — never crop a filmmaker's frame.

### Staff Pick Badge

```kotlin
import androidx.compose.material.icons.filled.Star

@Composable
fun StaffPickBadge(compact: Boolean = false, modifier: Modifier = Modifier) {
    if (compact) {
        Box(
            modifier.size(16.dp).clip(RoundedCornerShape(50)).background(VimeoColors.StaffGold),
            contentAlignment = Alignment.Center,
        ) { Icon(Icons.Filled.Star, null, tint = VimeoColors.OnBlue, modifier = Modifier.size(9.dp)) }
    } else {
        Row(
            modifier
                .clip(RoundedCornerShape(50))
                .background(VimeoColors.StaffGold)
                .padding(horizontal = 8.dp, vertical = 3.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(4.dp),
        ) {
            Icon(Icons.Filled.Star, null, tint = VimeoColors.OnBlue, modifier = Modifier.size(10.dp))
            Text("Staff Pick", style = VimeoText.Pill, color = VimeoColors.OnBlue)
        }
    }
}
```

### Curated Watch Feed Row

```kotlin
@Composable
fun WatchFeedRow(title: String, creator: String, stats: String, duration: String) {
    Row(
        Modifier.fillMaxWidth().padding(bottom = 14.dp),
        horizontalArrangement = Arrangement.spacedBy(11.dp),
    ) {
        Box(
            Modifier
                .width(124.dp).aspectRatio(16f / 9f)
                .clip(RoundedCornerShape(8.dp))
                .background(Brush.linearGradient(listOf(Color(0xFF4A6B7C), Color(0xFF1E323D)))),
        ) {
            StaffPickBadge(compact = true, Modifier.align(Alignment.TopStart).padding(5.dp))
            Text(
                duration, style = VimeoText.Tab.copy(fontWeight = FontWeight.Bold, fontSize = 9.sp),
                color = Color.White,
                modifier = Modifier
                    .align(Alignment.BottomEnd).padding(5.dp)
                    .clip(RoundedCornerShape(3.dp)).background(Color.Black.copy(alpha = 0.7f))
                    .padding(horizontal = 4.dp, vertical = 1.dp),
            )
        }
        Column {
            Text(title, style = VimeoText.Creator, color = VimeoColors.TextPrimary, maxLines = 2)
            Text("by $creator", style = VimeoText.Meta, color = VimeoColors.TextTertiary,
                modifier = Modifier.padding(top = 4.dp))
            Text(stats, style = VimeoText.Meta, color = VimeoColors.TextTertiary,
                modifier = Modifier.padding(top = 6.dp))
        }
    }
}
```

### Follow Pill

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback

@Composable
fun FollowPill() {
    var following by remember { mutableStateOf(false) }
    val haptics = LocalHapticFeedback.current
    Box(
        Modifier
            .clip(RoundedCornerShape(50))
            .background(if (following) VimeoColors.Surface2 else VimeoColors.Blue)
            .then(if (following) Modifier.border(1.dp, VimeoColors.Divider, RoundedCornerShape(50)) else Modifier)
            .clickable { haptics.performHapticFeedback(HapticFeedbackType.LongPress); following = !following }
            .padding(horizontal = 16.dp, vertical = 7.dp),
    ) {
        Text(
            if (following) "Following" else "Follow",
            style = VimeoText.Pill,
            color = if (following) VimeoColors.TextPrimary else VimeoColors.OnBlue,
        )
    }
}
```

## 4. Video Player Controls + Curated Feed

The player owns its own minimal chrome (center play, scrubber, timecodes, HD chip); the curated feed below is a `LazyColumn` of `WatchFeedRow`s with a "STAFF PICKS" `Overline` header. Keep the player controls in a single `AnimatedVisibility` block so they fade together after 3s idle and return on tap — matching iOS exactly.

```kotlin
@Composable
fun WatchScreen(picks: List<Pick>) {
    LazyColumn(
        Modifier.fillMaxSize().background(VimeoColors.Canvas),
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 12.dp),
    ) {
        item { VimeoPlayer("1:24", "4:07", 0.42f); Spacer(Modifier.height(14.dp)) }
        item {
            Text("STAFF PICKS", style = VimeoText.Overline, color = VimeoColors.TextSecondary)
            Spacer(Modifier.height(12.dp))
        }
        items(picks) { p -> WatchFeedRow(p.title, p.creator, p.stats, p.duration) }
    }
}

data class Pick(val title: String, val creator: String, val stats: String, val duration: String)
```

## 5. Navigation

Vimeo has minimal chrome: a left-aligned wordmark top bar and a 5-slot bottom strip with an emphasized center Upload action. On Android model the strip as a `NavigationBar`; there is no Material tint pill — active is just Vimeo Blue.

```kotlin
@Composable
fun VimeoBottomBar(selected: Int, onSelect: (Int) -> Unit) {
    NavigationBar(
        containerColor = VimeoColors.Canvas.copy(alpha = 0.94f),
        tonalElevation = 0.dp,
    ) {
        val items = listOf(
            "Home"    to Icons.Filled.Home,
            "Search"  to Icons.Filled.Search,
            "Upload"  to Icons.Filled.PlayCircle,   // center, emphasized
            "Inbox"   to Icons.Filled.Email,
            "Profile" to Icons.Filled.AccountCircle,
        )
        items.forEachIndexed { i, (label, icon) ->
            val isUpload = i == 2
            NavigationBarItem(
                selected = selected == i,
                onClick = { onSelect(i) },
                icon = {
                    Icon(icon, contentDescription = label,
                        tint = if (isUpload) VimeoColors.Blue else androidx.compose.ui.graphics.Color.Unspecified,
                        modifier = Modifier.size(if (isUpload) 26.dp else 22.dp))
                },
                label = if (isUpload) null else { { Text(label, style = VimeoText.Tab) } },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor   = VimeoColors.Blue,
                    selectedTextColor   = VimeoColors.Blue,
                    unselectedIconColor = VimeoColors.TextTertiary,
                    unselectedTextColor = VimeoColors.TextTertiary,
                    indicatorColor      = Color.Transparent, // no Material pill — Vimeo has none
                ),
            )
        }
    }
}
```

The top bar is a `TopAppBar` with the Vimeo wordmark as a leading `title` (NOT centered), a trailing search `IconButton`, and a notifications `IconButton`; `containerColor = Color.Transparent` over the player, opaque `Canvas` once content scrolls under it.

## 6. Motion

Vimeo motion is restrained and cinematic — controls breathe in and out of the frame; nothing bounces gratuitously.

| Moment | Compose recipe |
|--------|----------------|
| Player controls fade | `AnimatedVisibility` `fadeIn(tween(200))` / `fadeOut(tween(250))`; auto-hide via `LaunchedEffect { delay(3000); controls = false }` |
| Scrub knob grow | `animateDpAsState` 9.dp → 16.dp `tween(120)` on drag-start |
| Follow toggle | `animateColorAsState` background `tween(200)` + `Crossfade` label |
| Like heart | `animateFloatAsState` scale 1f → 1.25f → 1f via keyframes `tween(260)` |
| Thumbnail load | Coil `crossfade(220)` in `ImageRequest` |
| Tab switch | content `Crossfade(tween(200))`; active tint changes instantly |
| Sheet present | `ModalBottomSheet` default slide; 20.dp top corners |
| Pull to refresh | `PullToRefreshContainer` tinted `VimeoColors.Blue` |

```kotlin
// Like heart — the only spring-ish moment
val scale by animateFloatAsState(
    targetValue = if (liked) 1f else 1f,
    animationSpec = keyframes { durationMillis = 260; 1.25f at 130 },
    label = "likePulse",
)
```

Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft tick on Follow, scrub-start, and Like. Use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CLOCK_TICK)` for tab selection. Auto-save / buffering is silent — no motion, no haptic.

## 7. Icons

The closest first-party set is `androidx.compose.material:material-icons-extended`. Ship the Vimeo "v" wordmark as a vector drawable (`res/drawable/ic_vimeo_wordmark.xml`); the Staff Pick mark is `Icons.Filled.Star` tinted `StaffGold`.

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Home (tab) | `house` / `house.fill` | `Icons.Filled.Home` |
| Search (tab) | `magnifyingglass` | `Icons.Filled.Search` |
| Upload (center) | `play.circle.fill` | `Icons.Filled.PlayCircle` |
| Inbox (tab) | `envelope` | `Icons.Filled.Email` |
| Profile (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
| Play | `play.fill` | `Icons.Filled.PlayArrow` |
| Pause | `pause.fill` | `Icons.Filled.Pause` |
| Staff Pick | `star.fill` | `Icons.Filled.Star` |
| Notifications | `bell` | `Icons.Filled.Notifications` |
| Like | `heart` / `heart.fill` | `Icons.Filled.FavoriteBorder` / `Icons.Filled.Favorite` |
| Comment | `bubble.left` | `Icons.Filled.ChatBubbleOutline` |
| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
| Watch Later | `clock` | `Icons.Filled.Schedule` |
| Fullscreen | `arrow.up.left.and.arrow.down.right` | `Icons.Filled.Fullscreen` |
| Captions | `captions.bubble` | `Icons.Filled.ClosedCaption` |
| Settings (player) | `gearshape` | `Icons.Filled.Settings` |
| More | `ellipsis` | `Icons.Filled.MoreHoriz` |

## 8. Minimum SDK & Accessibility Notes

- **minSdk 24** (Compose floor 21; Media3/ExoPlayer + modern motion comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
- **Edge-to-edge**: call `enableEdgeToEdge()`; the dark canvas wants light-content system bars. In landscape, hide system bars and the nav bar — go full-bleed cinema; the player controls must inset for the camera cutout and gesture nav.
- **Font scaling**: `sp` honors the user's scale on titles, body, descriptions. Pin layout-critical text (timecodes, 10sp tab labels, overlines, pill text, duration/quality chips) — derive from `dp` or fix `fontScale = 1f` for those nodes. Apply `fontFeatureSettings = "tnum"` to every timecode and count.
- **TalkBack**: label the player node "Video player, {title}, {elapsed} of {total}"; expose the scrubber via `Modifier.semantics { progressBarRangeInfo = ...; setProgress { ... } }` so it's adjustable; label the Staff Pick badge "Staff Pick, editor selected"; the center Upload item gets `contentDescription = "Upload a video"`.
- **Touch targets**: Material guidance is 48.dp. Give the scrubber knob a 48.dp tall hit band, the 22.dp tab icons a 48.dp hit, the Follow pill ≥ 36.dp height.
- **Contrast**: `#FFFFFF` and `#AEB6C2` on `#0D0E12` pass WCAG AA; `#04121A` on `#00ADEF` and on `#FFD24C` pass AA — never put white text on the gold Staff Pick badge.
- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the controls fade (instant toggle) and the like pulse (use a plain state change); keep the scrubber feedback.
- **Dark mode**: the dark scheme is canonical (`#0D0E12`, NOT pure black). Do **not** enable Material You `dynamicColorScheme()` — Vimeo's single-accent identity (Vimeo Blue + the sacred Staff Gold) must hold regardless of the device wallpaper.
- **Media**: enable background playback + PiP via a `MediaSessionService`; `RESIZE_MODE_FIT` always — Vimeo's color-critical audience must never see a cropped or tinted frame.