# PayPal (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports PayPal's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the dual-blue P-P wordmark, 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 (PayPal's calm white canvas, the iconic dual-blue P-P overlap, rounded PayPal Sans, card-wallet elevation) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `ModalBottomSheet` instead of a sheet presentation, `animateIntAsState` instead of `.contentTransition(.numericText())`, `sp`/`dp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and Coil `2.6+` for card-art and recipient avatars. No color extraction — PayPal's palette is a fixed dual-blue system, so Palette is not needed. PayPal is light-first with a cobalt-tinted dark mode (since 2020); both schemes are provided.

## 1. Color Tokens

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

object PayPalColors {
    // Brand
    val Blue       = Color(0xFF003087) // primary CTA, active tab, wordmark front
    val Sky        = Color(0xFF0070BA) // secondary accent, link, wordmark back
    val Cobalt     = Color(0xFF001C64) // splash / illustration bg only — keep reserved
    val BlueDark   = Color(0xFF3B82F6) // dark-mode shifted PayPal Blue

    // Canvas & Surfaces (light)
    val Canvas       = Color(0xFFFFFFFF)
    val SurfaceGray  = Color(0xFFF5F7FA)
    val SurfaceGray2 = Color(0xFFEEF1F4)
    val Divider      = Color(0xFFE5E8ED)

    // Text (light)
    val TextPrimary   = Color(0xFF001435) // almost-black, slight blue tint — NOT pure black
    val TextSecondary = Color(0xFF2C2E2F)
    val TextMuted     = Color(0xFF687173)
    val TextTertiary  = Color(0xFF9DA3A6)

    // Semantic
    val Success   = Color(0xFF1C8B43)
    val SuccessBg = Color(0xFFE4F5EA)
    val Error     = Color(0xFFD20021)
    val ErrorBg   = Color(0xFFFCE5E8)
    val Warning   = Color(0xFFFFB81C)
    val WarningBg = Color(0xFFFFF6E0)
    val PendingFg = Color(0xFFA06B00)

    // Activity icon colors
    val IconSent     = Blue
    val IconReceived = Success
    val IconCard     = Sky
    val IconReward   = Warning

    // Dark mode
    val DarkCanvas   = Color(0xFF0A0E1A) // slight blue tint — NOT pure black
    val DarkSurface1 = Color(0xFF141A2A)
    val DarkSurface2 = Color(0xFF1F2740)
    val DarkDivider  = Color(0xFF2A3142)
    val DarkTextPri  = Color(0xFFFFFFFF)
    val DarkTextSec  = Color(0xFFA8AEC4)
}
```

Wire it into both schemes. PayPal is light-first; the dark scheme keeps a cobalt-tinted near-black so the blue identity survives, and PayPal Blue brightens to `#3B82F6` for contrast.

```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

private val PayPalLight = lightColorScheme(
    primary        = PayPalColors.Blue,
    onPrimary      = PayPalColors.Canvas,
    secondary      = PayPalColors.Sky,
    background     = PayPalColors.Canvas,
    onBackground   = PayPalColors.TextPrimary,
    surface        = PayPalColors.Canvas,
    onSurface      = PayPalColors.TextPrimary,
    surfaceVariant = PayPalColors.SurfaceGray,
    outline        = PayPalColors.Divider,
    error          = PayPalColors.Error,
)

private val PayPalDark = darkColorScheme(
    primary        = PayPalColors.BlueDark,
    onPrimary      = PayPalColors.Canvas,
    secondary      = PayPalColors.Sky,
    background     = PayPalColors.DarkCanvas,
    onBackground   = PayPalColors.DarkTextPri,
    surface        = PayPalColors.DarkSurface1,
    onSurface      = PayPalColors.DarkTextPri,
    surfaceVariant = PayPalColors.DarkSurface2,
    outline        = PayPalColors.DarkDivider,
    error          = PayPalColors.Error,
)

@Composable
fun PayPalTheme(
    dark: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) = MaterialTheme(
    colorScheme = if (dark) PayPalDark else PayPalLight,
    typography = PayPalTypography,
    content = content,
)
```

## 2. Typography

PayPal Sans Big (display) and PayPal Sans Small (body) are proprietary (Monotype, ~2018). Drop the TTFs in `res/font/` (lowercase, snake_case) and build two families. Fall back to **Inter** (closest free match) — its humanist roundness is the nearest substitute on Android. Tabular figures on every amount: `fontFeatureSettings = "tnum"`.

```kotlin
// ui/theme/PayPalType.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 PayPalSansBig = FontFamily(
    Font(R.font.paypal_sans_big_regular, FontWeight.Normal),
    Font(R.font.paypal_sans_big_medium,  FontWeight.Medium),
    Font(R.font.paypal_sans_big_bold,    FontWeight.Bold),
)
val PayPalSansSmall = FontFamily(
    Font(R.font.paypal_sans_small_regular, FontWeight.Normal),
    Font(R.font.paypal_sans_small_medium,  FontWeight.Medium),
    Font(R.font.paypal_sans_small_bold,    FontWeight.Bold),
)

private const val TNUM = "tnum" // tabular — the Activity column must align

// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
object PayPalText {
    val BalanceHero    = TextStyle(PayPalSansBig,   fontWeight = FontWeight.Bold,   fontSize = 36.sp, lineHeight = 36.sp, letterSpacing = (-0.5).sp, fontFeatureSettings = TNUM)
    val SendAmountHero = TextStyle(PayPalSansBig,   fontWeight = FontWeight.Bold,   fontSize = 56.sp, lineHeight = 56.sp, letterSpacing = (-1.0).sp, fontFeatureSettings = TNUM)
    val ScreenTitle    = TextStyle(PayPalSansBig,   fontWeight = FontWeight.Bold,   fontSize = 24.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
    val SectionHeader  = TextStyle(PayPalSansBig,   fontWeight = FontWeight.Bold,   fontSize = 18.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
    val CardTitle      = TextStyle(PayPalSansBig,   fontWeight = FontWeight.Medium, fontSize = 16.sp, lineHeight = 21.sp)
    val ActivityAmount = TextStyle(PayPalSansBig,   fontWeight = FontWeight.Medium, fontSize = 16.sp, lineHeight = 19.sp, fontFeatureSettings = TNUM)
    val Body           = TextStyle(PayPalSansSmall, fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 23.sp)
    val BodySmall      = TextStyle(PayPalSansSmall, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 20.sp)
    val ActivityTitle  = TextStyle(PayPalSansSmall, fontWeight = FontWeight.Medium, fontSize = 15.sp, lineHeight = 20.sp)
    val ActivitySub    = TextStyle(PayPalSansSmall, fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 17.sp)
    val Meta           = TextStyle(PayPalSansSmall, fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 17.sp)
    val Link           = TextStyle(PayPalSansSmall, fontWeight = FontWeight.Medium, fontSize = 15.sp, lineHeight = 21.sp)
    val Tab            = TextStyle(PayPalSansSmall, fontWeight = FontWeight.Medium, fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
    val Chip           = TextStyle(PayPalSansSmall, fontWeight = FontWeight.Medium, fontSize = 13.sp, lineHeight = 13.sp)
    val Button         = TextStyle(PayPalSansBig,   fontWeight = FontWeight.Bold,   fontSize = 17.sp, lineHeight = 17.sp)
    val ButtonSmall    = TextStyle(PayPalSansSmall, fontWeight = FontWeight.Medium, fontSize = 15.sp, lineHeight = 15.sp)
}

// Map onto Material 3 slots so stock components inherit the brand
val PayPalTypography = Typography(
    headlineLarge = PayPalText.ScreenTitle,
    titleLarge    = PayPalText.SectionHeader,
    titleMedium   = PayPalText.CardTitle,
    bodyMedium    = PayPalText.Body,
    labelSmall    = PayPalText.Tab,
)
```

## 3. Signature Components

### Balance Card

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
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.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import java.text.NumberFormat
import java.util.Locale

@Composable
fun BalanceCard(
    balance: Double,
    onAddMoney: () -> Unit,
    onTransfer: () -> Unit,
    modifier: Modifier = Modifier,
) {
    val usd = remember { NumberFormat.getCurrencyInstance(Locale.US) }
    Column(
        modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
            .shadow(8.dp, RoundedCornerShape(16.dp), spotColor = Color.Black.copy(alpha = 0.06f)) // gentle card-wallet lift
            .clip(RoundedCornerShape(16.dp))
            .background(PayPalColors.Canvas)
            .border(1.dp, PayPalColors.Divider, RoundedCornerShape(16.dp))
            .padding(20.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp),
    ) {
        Text("PayPal balance", style = PayPalText.ActivitySub, color = PayPalColors.TextMuted)
        AnimatedBalance(balance, usd) // numeric roll — see §4
        Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
            PayPalPrimaryButton("Add Money", onAddMoney, Modifier.weight(1f), height = 44.dp)
            PayPalSecondaryButton("Transfer", onTransfer, Modifier.weight(1f))
        }
    }
}
```

### Activity Row

```kotlin
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.Icon
import androidx.compose.ui.graphics.vector.ImageVector

enum class ActivityKind { Sent, Received, Card, Reward }

@Composable
fun ActivityRow(
    name: String,
    subtitle: String,
    amount: Double,
    kind: ActivityKind,
    received: Boolean,
    modifier: Modifier = Modifier,
) {
    val usd = remember { NumberFormat.getCurrencyInstance(Locale.US) }
    val (iconColor, glyph) = when (kind) {
        ActivityKind.Sent     -> PayPalColors.IconSent to Icons.Filled.ArrowOutward
        ActivityKind.Received -> PayPalColors.IconReceived to Icons.Filled.SouthWest
        ActivityKind.Card     -> PayPalColors.IconCard to Icons.Filled.CreditCard
        ActivityKind.Reward   -> PayPalColors.IconReward to Icons.Filled.Redeem
    }
    Box(modifier.fillMaxWidth().background(PayPalColors.Canvas)) {
        Row(
            Modifier.fillMaxWidth().heightIn(min = 68.dp).padding(horizontal = 16.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            Box(
                Modifier.size(40.dp).clip(CircleShape).background(iconColor),
                contentAlignment = Alignment.Center,
            ) {
                // shape carries direction — never rely on color alone
                Icon(glyph, contentDescription = null, tint = Color.White, modifier = Modifier.size(18.dp))
            }
            Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp)) {
                Text(name, style = PayPalText.ActivityTitle, color = PayPalColors.TextPrimary)
                Text(subtitle, style = PayPalText.ActivitySub, color = PayPalColors.TextMuted)
            }
            Text(
                (if (received) "+" else "") + usd.format(amount),
                style = PayPalText.ActivityAmount,
                color = if (received) PayPalColors.Success else PayPalColors.TextPrimary,
            )
        }
        Box(Modifier.align(Alignment.BottomCenter).fillMaxWidth().height(0.5.dp).background(PayPalColors.Divider))
    }
}
```

### Primary / Secondary CTA (soft pill, radius = half-height)

```kotlin
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.ui.draw.scale
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback

@Composable
fun PayPalPrimaryButton(
    label: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    height: Dp = 48.dp,
) {
    val interaction = remember { MutableInteractionSource() }
    val pressed by interaction.collectIsPressedAsState()
    val scale by animateFloatAsState(
        targetValue = if (pressed) 0.98f else 1f,
        animationSpec = spring(dampingRatio = 0.7f, stiffness = 700f),
        label = "ctaScale",
    )
    val haptics = LocalHapticFeedback.current
    Box(
        modifier
            .fillMaxWidth()
            .height(height)
            .scale(scale)
            .clip(RoundedCornerShape(percent = 50)) // radius = half-height → soft pill
            .background(if (pressed) PayPalColors.Cobalt else PayPalColors.Blue)
            .clickable(interaction, indication = null) {
                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS medium impact
                onClick()
            },
        contentAlignment = Alignment.Center,
    ) {
        Text(label, style = PayPalText.Button, color = Color.White)
    }
}

@Composable
fun PayPalSecondaryButton(
    label: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    height: Dp = 48.dp,
) {
    Box(
        modifier
            .fillMaxWidth()
            .height(height)
            .clip(RoundedCornerShape(percent = 50))
            .border(1.5.dp, PayPalColors.Blue, RoundedCornerShape(percent = 50))
            .clickable(onClick = onClick),
        contentAlignment = Alignment.Center,
    ) {
        Text(label, style = PayPalText.ButtonSmall, color = PayPalColors.Blue)
    }
}
```

### Activity Filter Chip & Status Pill

```kotlin
@Composable
fun ActivityFilterChip(label: String, selected: Boolean, onClick: () -> Unit) {
    Box(
        Modifier
            .clip(RoundedCornerShape(16.dp))
            .background(if (selected) PayPalColors.Blue else PayPalColors.SurfaceGray2)
            .clickable(onClick = onClick)
            .padding(horizontal = 16.dp, vertical = 8.dp),
    ) {
        Text(label, style = PayPalText.Chip, color = if (selected) Color.White else PayPalColors.TextMuted)
    }
}

enum class PayPalStatus { Completed, Pending, Failed, Refunded }

@Composable
fun StatusPill(status: PayPalStatus) {
    val (bg, fg, label) = when (status) {
        PayPalStatus.Completed -> Triple(PayPalColors.SuccessBg, PayPalColors.Success, "Completed")
        PayPalStatus.Pending   -> Triple(PayPalColors.WarningBg, PayPalColors.PendingFg, "Pending")
        PayPalStatus.Failed    -> Triple(PayPalColors.ErrorBg, PayPalColors.Error, "Failed")
        PayPalStatus.Refunded  -> Triple(PayPalColors.SurfaceGray2, PayPalColors.TextMuted, "Refunded")
    }
    Box(
        Modifier.clip(RoundedCornerShape(4.dp)).background(bg).padding(horizontal = 10.dp, vertical = 4.dp),
    ) {
        Text(label, style = PayPalText.Chip.copy(fontSize = 12.sp), color = fg)
    }
}
```

## 4. Dual-Blue P-P Wordmark + Live Balance Roll

PayPal's two brand-load-bearing dynamics: the **dual-blue P-P logomark** (never a single color) and the **balance number that rolls** to its new value after a Send. iOS uses `.contentTransition(.numericText())`; Android's analog is `animateIntAsState` on the cents (rendered with `AnimatedContent` per character for the roll feel).

### P-P Wordmark

```kotlin
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.TextUnit

@Composable
fun PayPalWordmark(size: TextUnit = 32.sp, modifier: Modifier = Modifier) {
    Box(modifier, contentAlignment = Alignment.Center) {
        // Back P — PayPal Sky, italic, shifted left
        Text(
            "P",
            style = PayPalText.Button.copy(fontFamily = PayPalSansBig, fontSize = size, fontWeight = FontWeight.Bold),
            color = PayPalColors.Sky,
            modifier = Modifier.graphicsLayer { translationX = -size.toPx() * 0.18f; rotationZ = -8f },
        )
        // Front P — PayPal Blue, italic, shifted right; the overlap darkens to a blue blend
        Text(
            "P",
            style = PayPalText.Button.copy(fontFamily = PayPalSansBig, fontSize = size, fontWeight = FontWeight.Bold),
            color = PayPalColors.Blue,
            modifier = Modifier.graphicsLayer { translationX = size.toPx() * 0.10f; rotationZ = -8f },
        )
    }
}
```

> NEVER render the wordmark in a single color — the Sky-behind / Blue-front overlap with the darker blended middle zone IS the PayPal brand. For pixel-exact parity ship the official two-tone mark as a vector drawable and load via `ImageVector.vectorResource(R.drawable.paypal_pp)`.

### Live balance roll

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.core.tween
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.togetherWith

@Composable
fun AnimatedBalance(balance: Double, formatter: NumberFormat) {
    val target = formatter.format(balance)
    AnimatedContent(
        targetState = target,
        transitionSpec = {
            (slideInVertically(tween(400)) { it } togetherWith slideOutVertically(tween(400)) { -it })
        },
        label = "balanceRoll",
    ) { value ->
        Text(value, style = PayPalText.BalanceHero, color = PayPalColors.TextPrimary)
    }
}
```

The same `BalanceHero`/`SendAmountHero` styles drive the Send Money fullscreen: a calm centered `$` (muted) + 56.sp tabular amount, a "USD" `Meta` chip below, and a live `PayPalPrimaryButton("Send ${'$'}X.XX")` whose label recomposes with the entered amount.

## 5. Navigation

PayPal has a 5-tab bottom bar (Home / Send / Wallet / Activity / Finances). Use Material 3 `NavigationBar`; the iOS bar is an opaque white surface with a 0.5pt hairline — no blur involved, so the opaque `Canvas` surface is exact. Active is PayPal Blue (icon + label), inactive `#687173`. There is no Material tint pill.

```kotlin
@Composable
fun PayPalBottomBar(selected: Int, onSelect: (Int) -> Unit) {
    val haptics = LocalHapticFeedback.current
    NavigationBar(
        containerColor = PayPalColors.Canvas,
        tonalElevation = 0.dp,
    ) {
        val items = listOf(
            "Home"     to Icons.Filled.Home,
            "Send"     to Icons.Filled.Send,
            "Wallet"   to Icons.Filled.AccountBalanceWallet,
            "Activity" to Icons.Filled.Schedule,
            "Finances" to Icons.Filled.ShowChart,
        )
        items.forEachIndexed { i, (label, icon) ->
            NavigationBarItem(
                selected = selected == i,
                onClick = {
                    haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // .selection
                    onSelect(i)
                },
                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(24.dp)) },
                label = { Text(label, style = PayPalText.Tab) },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = PayPalColors.Blue,
                    selectedTextColor = PayPalColors.Blue,
                    unselectedIconColor = PayPalColors.TextMuted,
                    unselectedTextColor = PayPalColors.TextMuted,
                    indicatorColor = Color.Transparent, // no Material pill — PayPal has none
                ),
            )
        }
    }
}
```

The top nav carries the `PayPalWordmark()` (24–32.sp) leading, with a notification bell + help "?" trailing, over an opaque `Canvas` surface with a 0.5dp `Divider` bottom hairline. Confirm-Send / Filters use `ModalBottomSheet` (16.dp top corners, 4×32.dp drag handle, `Color.Black.copy(alpha = 0.6f)` scrim).

## 6. Motion

PayPal motion is restrained and reassuring — gentle springs, no confetti (it's institutional).

| Moment | Compose recipe |
|--------|----------------|
| Send tap | scale 1 → 0.97 → 1 `spring(dampingRatio = 0.7f, stiffness = 700f)` + `HapticFeedbackType.LongPress` (medium) |
| Send success | success screen `slideInVertically(tween(350))`; checkmark `Animatable` scale 0.5 → 1 with 100ms start delay + `HapticFeedbackType.Confirm` |
| Activity row press | background `animateColorAsState` to `#F5F7FA` `tween(150)`, no scale |
| Tab switch | icon outline→filled cross-fade `tween(200)`, label color `animateColorAsState` `#687173` → `#003087`, `.selection` haptic |
| Balance update | `AnimatedContent` `slideIn/OutVertically(tween(400))` per §4 |
| Modal sheet | `ModalBottomSheet` velocity-based drag-to-dismiss (Material default) |

```kotlin
// Send success checkmark — scale-in with a short delay
@Composable
fun SendSuccessCheck(visible: Boolean) {
    val scale = remember { Animatable(0.5f) }
    val haptics = LocalHapticFeedback.current
    LaunchedEffect(visible) {
        if (visible) {
            haptics.performHapticFeedback(HapticFeedbackType.Confirm) // .success
            kotlinx.coroutines.delay(100)
            scale.animateTo(1f, spring(dampingRatio = 0.7f, stiffness = 500f))
        }
    }
    Box(
        Modifier.size(80.dp).scale(scale.value).clip(CircleShape).background(PayPalColors.Blue),
        contentAlignment = Alignment.Center,
    ) {
        Icon(Icons.Filled.Check, contentDescription = "Sent", tint = Color.White, modifier = Modifier.size(40.dp))
    }
}
```

Haptics: prefer `LocalHapticFeedback`. For the medium Send impact use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONFIRM)` (API 30+) or a `Vibrator` `VibrationEffect.createOneShot(15, VibrationEffect.DEFAULT_AMPLITUDE)`.

## 7. Icons

PayPal ships custom glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`. The dual-blue P-P wordmark is NOT an icon — compose two text Ps (§4) or ship the official two-tone vector drawable.

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Home (tab) | `house` / `house.fill` | `Icons.Filled.Home` |
| Send (tab) | `paperplane` / `.fill` | `Icons.Filled.Send` |
| Wallet (tab) | `wallet.pass` / `.fill` | `Icons.Filled.AccountBalanceWallet` |
| Activity (tab) | `clock` / `.fill` | `Icons.Filled.Schedule` |
| Finances (tab) | `chart.line.uptrend.xyaxis` | `Icons.Filled.ShowChart` |
| Activity: Sent | `arrow.up.right` | `Icons.Filled.ArrowOutward` |
| Activity: Received | `arrow.down.left` | `Icons.Filled.SouthWest` |
| Activity: Card | `creditcard.fill` | `Icons.Filled.CreditCard` |
| Activity: Reward | `gift.fill` | `Icons.Filled.Redeem` |
| Notifications | `bell` / `bell.fill` | `Icons.Filled.Notifications` |
| Help | `questionmark.circle` | `Icons.Filled.HelpOutline` |
| Search | `magnifyingglass` | `Icons.Filled.Search` |
| Back | `chevron.left` | `Icons.Filled.ArrowBack` |
| Success | `checkmark.circle.fill` | `Icons.Filled.CheckCircle` |
| Failed | `xmark.circle.fill` | `Icons.Filled.Cancel` |

## 8. Minimum SDK & Accessibility Notes

- **minSdk 24** (Compose floor is 21; `AnimatedContent` + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
- **Edge-to-edge**: call `enableEdgeToEdge()`; the white canvas wants dark-content system bars (light-content in dark mode). The top nav respects the camera cutout; the bottom bar pins above the gesture nav via `Scaffold`/`windowInsetsPadding`; `ModalBottomSheet` respects the bottom inset automatically.
- **Tabular digits**: keep `fontFeatureSettings = "tnum"` on balance, activity amounts, and percentages so the Activity feed's $-column aligns perfectly.
- **Font scaling**: `sp` honors the user's font scale — scale body, activity subtitles, secondary labels. Clamp the balance hero (36sp → 48sp max) and Send amount (56sp → 72sp max); pin 11sp tab labels and 13sp filter chips by deriving from `dp` or wrapping in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
- **TalkBack**: merge each activity row with `Modifier.semantics(mergeDescendants = true)` and label it "Sent to Sarah Kim, $24.50, yesterday at 3:42 PM, completed"; label the balance card "PayPal balance, $1,247 and 92 cents". The directional icon shape (out-arrow vs SouthWest) carries meaning for color-blind users — never rely on color alone.
- **Touch targets**: Material guidance is 48.dp minimum. The 48.dp primary CTA and 68.dp activity rows clear it; give 32.dp filter chips a 48.dp hit width and icon-only nav buttons full `IconButton` padding.
- **Contrast**: `#001435` on `#FFFFFF` exceeds WCAG AA at all sizes; `#687173` on white meets AA at 14sp+; PayPal Blue `#003087` on white is AAA. Validate the 11sp tab labels and tinted status pills (e.g. `#A06B00` on `#FFF6E0`) with a contrast checker.
- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, skip the modal-sheet bounce and the checkmark scale-in (cross-fade instead); render the balance change instantly without the roll.
- **Dark mode**: switch to `#0A0E1A` (cobalt-tinted, NOT pure black) and brighten PayPal Blue to `#3B82F6` for contrast — the blue identity must survive in dark. Do **not** enable Material You `dynamicColorScheme()` — PayPal's dual-blue brand is fixed and trust-load-bearing; it must not retint to the user's wallpaper. Keep Cobalt `#001C64` reserved for splash/illustration only.