designmd-forge 1.2.0

package/dist/data/designs/ios-pinterest-android.md

@@ -0,0 +1,551 @@
+# Pinterest (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Pinterest'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 (Pinterest's stark-white photo canvas, single Pinterest-Red verb, the staggered masonry mosaic) while making everything idiomatic Android — a `LazyVerticalStaggeredGrid` instead of a hand-rolled SwiftUI two-column split, `NavigationBar` instead of a UITabBar, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for the remote pin imagery that defines the feed.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/PinterestColors.kt
+import androidx.compose.ui.graphics.Color
+
+object PinterestColors {
+    // Brand — the single accent, the app's verb
+    val Red        = Color(0xFFE60023)
+    val RedPressed = Color(0xFFAD081B)
+    val RedHover   = Color(0xFFCC0020)
+
+    // Canvas & Surfaces (Light — default)
+    val CanvasLight   = Color(0xFFFFFFFF)
+    val Surface1Light = Color(0xFFF8F8F8)
+    val InputLight    = Color(0xFFEFEFEF)
+    val DividerLight  = Color(0xFFE9E9E9)
+
+    // Canvas & Surfaces (Dark)
+    val CanvasDark   = Color(0xFF121212)
+    val Surface1Dark = Color(0xFF1E1E1E)
+    val Surface2Dark = Color(0xFF2A2A2A)
+    val DividerDark  = Color(0xFF2E2E2E)
+
+    // Text
+    val TextPrimaryLight   = Color(0xFF111111)
+    val TextSecondaryLight = Color(0xFF767676)
+    val TextTertiaryLight  = Color(0xFFB5B5B5)
+    val TextPrimaryDark    = Color(0xFFFFFFFF)
+    val TextSecondaryDark  = Color(0xFFAAAAAA)
+
+    // Semantic
+    val Success = Color(0xFF008A3C)
+    val Info    = Color(0xFF0074E8)
+}
+```
+
+Pinterest's default is a **light, photo-first canvas** — pins supply all the color, so the chrome must disappear behind stark white. Wire a Material 3 `lightColorScheme` so ripples, dividers, and stock component defaults inherit the brand. `primary` is the Pinterest Red verb; `onPrimary` is white (the Save pill is white-on-red).
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.foundation.isSystemInDarkTheme
+
+private val PinterestLight = lightColorScheme(
+    primary        = PinterestColors.Red,
+    onPrimary      = Color.White,
+    background     = PinterestColors.CanvasLight,
+    onBackground   = PinterestColors.TextPrimaryLight,
+    surface        = PinterestColors.CanvasLight,
+    onSurface      = PinterestColors.TextPrimaryLight,
+    surfaceVariant = PinterestColors.Surface1Light,
+    outline        = PinterestColors.DividerLight,
+    error          = PinterestColors.Red, // brand red doubles as error
+)
+
+private val PinterestDark = darkColorScheme(
+    primary        = PinterestColors.Red,
+    onPrimary      = Color.White,
+    background     = PinterestColors.CanvasDark,   // warm dark, not #000000
+    onBackground   = PinterestColors.TextPrimaryDark,
+    surface        = PinterestColors.Surface1Dark,
+    onSurface      = PinterestColors.TextPrimaryDark,
+    surfaceVariant = PinterestColors.Surface2Dark,
+    outline        = PinterestColors.DividerDark,
+    error          = PinterestColors.Red,
+)
+
+@Composable
+fun PinterestTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) PinterestDark else PinterestLight,
+    typography  = PinterestTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Pinterest Sans (2022 refresh) is proprietary. Drop the TTFs in `res/font/` (lowercase, snake_case) and build a `FontFamily`. Fall back to the system font (Roboto) — its humanist proportions are the closest free substitute on Android; Pinterest Sans only ships 400/500/600/700, so never request thin/light/black.
+
+```kotlin
+// ui/theme/PinterestType.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 PinterestSans = FontFamily(
+    Font(R.font.pinterest_sans_regular,  FontWeight.Normal),   // 400
+    Font(R.font.pinterest_sans_medium,   FontWeight.Medium),   // 500 — pin titles
+    Font(R.font.pinterest_sans_semibold, FontWeight.SemiBold), // 600 — usernames
+    Font(R.font.pinterest_sans_bold,     FontWeight.Bold),     // 700 — headlines / CTAs
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object PinterestText {
+    val PinDetailTitle = TextStyle(PinterestSans, fontWeight = FontWeight.Bold,     fontSize = 28.sp, lineHeight = 34.sp, letterSpacing = (-0.3).sp)
+    val LargeTitle     = TextStyle(PinterestSans, fontWeight = FontWeight.Bold,     fontSize = 24.sp, lineHeight = 29.sp, letterSpacing = (-0.2).sp)
+    val SectionHeader  = TextStyle(PinterestSans, fontWeight = FontWeight.Bold,     fontSize = 20.sp, lineHeight = 25.sp, letterSpacing = (-0.1).sp)
+    val BoardName      = TextStyle(PinterestSans, fontWeight = FontWeight.Bold,     fontSize = 17.sp, lineHeight = 21.sp, letterSpacing = (-0.1).sp)
+    val PinTitle       = TextStyle(PinterestSans, fontWeight = FontWeight.Medium,   fontSize = 14.sp, lineHeight = 18.sp)
+    val Username       = TextStyle(PinterestSans, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 18.sp)
+    val Body           = TextStyle(PinterestSans, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 22.sp)
+    val Comment        = TextStyle(PinterestSans, fontWeight = FontWeight.Normal,   fontSize = 14.sp, lineHeight = 20.sp)
+    val Meta           = TextStyle(PinterestSans, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 16.sp)
+    val Button         = TextStyle(PinterestSans, fontWeight = FontWeight.Bold,     fontSize = 16.sp, lineHeight = 16.sp)
+    val ButtonSmall    = TextStyle(PinterestSans, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 14.sp)
+    val TabLabel       = TextStyle(PinterestSans, fontWeight = FontWeight.SemiBold, fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Micro          = TextStyle(PinterestSans, fontWeight = FontWeight.Bold,     fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.4.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val PinterestTypography = Typography(
+    headlineLarge = PinterestText.PinDetailTitle,
+    headlineSmall = PinterestText.SectionHeader,
+    titleMedium   = PinterestText.BoardName,
+    bodyMedium    = PinterestText.Body,
+    labelSmall    = PinterestText.TabLabel,
+)
+```
+
+## 3. Signature Components
+
+### Save Button (the red → black "Saved" morph)
+
+The app's verb. Default is the Pinterest-Red pill; on commit it morphs to a black pill reading "Saved" — the moment the user knows the pin is committed.
+
+```kotlin
+import androidx.compose.animation.animateColorAsState
+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.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun PinterestSaveButton(
+    isSaved: Boolean,
+    onToggle: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.97f else 1f, label = "saveScale")
+    val bg by animateColorAsState(
+        targetValue = when {
+            isSaved -> PinterestColors.TextPrimaryLight  // black "Saved"
+            pressed -> PinterestColors.RedPressed
+            else    -> PinterestColors.Red
+        },
+        animationSpec = spring(dampingRatio = 0.8f, stiffness = 500f), // ~200ms morph
+        label = "saveBg",
+    )
+    val haptics = LocalHapticFeedback.current
+
+    Text(
+        text = if (isSaved) "Saved" else "Save",
+        style = PinterestText.Button,
+        color = Color.White,
+        modifier = modifier
+            .scale(scale)
+            .clip(CircleShape) // 500dp full pill
+            .background(bg)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS success
+                onToggle()
+            }
+            .padding(horizontal = 20.dp, vertical = 10.dp),
+    )
+}
+```
+
+### Primary Pill (Follow / Sign up)
+
+```kotlin
+import androidx.compose.foundation.layout.Box
+import androidx.compose.ui.Alignment
+
+enum class PinPillStyle { Primary, Secondary }
+
+@Composable
+fun PinterestPillButton(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    style: PinPillStyle = PinPillStyle.Primary,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by animateFloatAsState(if (pressed) 0.97f else 1f, label = "pillScale")
+    val primary = style == PinPillStyle.Primary
+
+    Box(
+        modifier = modifier
+            .scale(scale)
+            .clip(CircleShape)
+            .background(
+                when {
+                    primary && pressed -> PinterestColors.RedPressed
+                    primary            -> PinterestColors.Red
+                    else               -> PinterestColors.InputLight
+                }
+            )
+            .clickable(interaction, indication = null, onClick = onClick)
+            .padding(horizontal = 24.dp, vertical = 12.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            text = text,
+            style = PinterestText.Button,
+            color = if (primary) Color.White else PinterestColors.TextPrimaryLight,
+        )
+    }
+}
+```
+
+### Pin Tile (the masonry cell)
+
+The tile renders the pin image at its **native aspect ratio** with a 16.dp corner radius — no shadow, no border — then a 2-line title and a creator row below.
+
+```kotlin
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextOverflow
+import coil.compose.AsyncImage
+
+@Composable
+fun PinTile(
+    imageUrl: String,
+    title: String,
+    creatorName: String,
+    creatorAvatarUrl: String,
+    aspectRatio: Float, // width / height — e.g. 0.75f for a 3:4 pin
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var isSaved by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = modifier.clickable(onClick = onClick),
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Box {
+            AsyncImage(
+                model = imageUrl,
+                contentDescription = title,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .aspectRatio(aspectRatio)
+                    .clip(RoundedCornerShape(16.dp)), // signature soft corner — no shadow
+            )
+            PinterestSaveButton(
+                isSaved = isSaved,
+                onToggle = { isSaved = !isSaved },
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(12.dp),
+            )
+        }
+        Text(
+            title,
+            style = PinterestText.PinTitle,
+            color = PinterestColors.TextPrimaryLight,
+            maxLines = 2,
+            overflow = TextOverflow.Ellipsis,
+        )
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(6.dp),
+        ) {
+            AsyncImage(
+                model = creatorAvatarUrl,
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier.size(20.dp).clip(CircleShape),
+            )
+            Text(
+                creatorName,
+                style = PinterestText.Meta,
+                color = PinterestColors.TextSecondaryLight,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+```
+
+### Floating Search Bar (Home)
+
+A pill floating over the feed with a soft Level-1 shadow in light mode (`elevation`/`shadow`); on dark it sits on `Surface1Dark` with no shadow.
+
+```kotlin
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.Icon
+import androidx.compose.ui.draw.shadow
+
+@Composable
+fun FloatingSearchBar(
+    query: String,
+    onQueryChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+            .shadow(8.dp, CircleShape, spotColor = Color.Black.copy(alpha = 0.08f))
+            .clip(CircleShape)
+            .background(PinterestColors.CanvasLight)
+            .padding(horizontal = 18.dp)
+            .height(48.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+    ) {
+        Icon(
+            Icons.Filled.Search,
+            contentDescription = null,
+            tint = PinterestColors.TextPrimaryLight,
+            modifier = Modifier.size(20.dp),
+        )
+        BasicTextField(
+            value = query,
+            onValueChange = onQueryChange,
+            singleLine = true,
+            textStyle = PinterestText.Body.copy(color = PinterestColors.TextPrimaryLight),
+            decorationBox = { inner ->
+                if (query.isEmpty()) {
+                    Text("Search for ideas", style = PinterestText.Body, color = PinterestColors.TextSecondaryLight)
+                }
+                inner()
+            },
+            modifier = Modifier.weight(1f),
+        )
+    }
+}
+```
+
+## 4. The Masonry Grid (Pinterest's #1 signature)
+
+iOS SwiftUI has no native masonry, so the SwiftUI guide hand-splits items into two columns by cumulative height. **Compose has a first-class answer**: `LazyVerticalStaggeredGrid`. Each item keeps its native aspect ratio; the grid drops each tile into the shorter column automatically — the Tetris fall is built in. Keep the gap tight at 8.dp both directions so it reads as a mosaic.
+
+```kotlin
+import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.foundation.lazy.staggeredgrid.items
+import androidx.compose.ui.unit.dp
+
+data class Pin(
+    val id: String,
+    val imageUrl: String,
+    val aspectRatio: Float, // MUST be known before render so the grid doesn't jump
+    val title: String,
+    val creatorName: String,
+    val creatorAvatarUrl: String,
+)
+
+@Composable
+fun MasonryFeed(
+    pins: List<Pin>,
+    onPinClick: (Pin) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    LazyVerticalStaggeredGrid(
+        columns = StaggeredGridCells.Fixed(2), // 2 on phones; bump to 3/4 on tablets via windowSizeClass
+        verticalItemSpacing = 8.dp,            // tight mosaic gap
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 12.dp),
+        modifier = modifier.fillMaxSize(),
+    ) {
+        items(pins, key = { it.id }) { pin ->
+            PinTile(
+                imageUrl = pin.imageUrl,
+                title = pin.title,
+                creatorName = pin.creatorName,
+                creatorAvatarUrl = pin.creatorAvatarUrl,
+                aspectRatio = pin.aspectRatio,
+                onClick = { onPinClick(pin) },
+                // fade-up entrance per DESIGN.md §6
+                modifier = Modifier.animateItem(),
+            )
+        }
+    }
+}
+```
+
+**Critical implementation note** (carried from the spec): you MUST know each pin's aspect ratio before rendering. If the server doesn't supply dimensions, render a placeholder box at the eventual aspect (cache it per pin id) so the staggered grid never reflows when images load. Coil's `placeholder`/`error` slots can hold a `Surface1Light` rectangle at that aspect.
+
+## 5. Bottom Navigation (Tab Bar)
+
+Pinterest uses an **icon-only** Material 3 `NavigationBar` with five destinations and a distinctive **red center Create button** — the only non-outlined tab. Active tint is `#111111` (light) / white (dark), never red — red is reserved for the Save verb and CTAs. Android has no live blur; use a solid canvas surface with a 1.dp top hairline.
+
+```kotlin
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material.icons.outlined.*
+import androidx.compose.material3.*
+
+@Composable
+fun PinterestBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(
+        containerColor = PinterestColors.CanvasLight,
+        tonalElevation = 0.dp,
+    ) {
+        val items = listOf(
+            Triple("Home", Icons.Filled.Home, Icons.Outlined.Home),
+            Triple("Search", Icons.Filled.Search, Icons.Outlined.Search),
+            null, // Create — rendered specially below
+            Triple("Notifications", Icons.Filled.Notifications, Icons.Outlined.Notifications),
+            Triple("Profile", Icons.Filled.Person, Icons.Outlined.Person),
+        )
+        items.forEachIndexed { i, item ->
+            if (item == null) {
+                // Red Create button — 48dp rounded-rect, brand red, white +
+                NavigationBarItem(
+                    selected = selected == i,
+                    onClick = { onSelect(i) },
+                    icon = {
+                        Box(
+                            Modifier
+                                .size(48.dp)
+                                .clip(RoundedCornerShape(14.dp))
+                                .background(PinterestColors.Red),
+                            contentAlignment = Alignment.Center,
+                        ) {
+                            Icon(Icons.Filled.Add, "Create", tint = Color.White, modifier = Modifier.size(22.dp))
+                        }
+                    },
+                    colors = NavigationBarItemDefaults.colors(indicatorColor = Color.Transparent),
+                )
+            } else {
+                val (label, filled, outlined) = item
+                NavigationBarItem(
+                    selected = selected == i,
+                    onClick = { onSelect(i) },
+                    icon = {
+                        Icon(
+                            if (selected == i) filled else outlined,
+                            contentDescription = label,
+                            modifier = Modifier.size(26.dp),
+                        )
+                    },
+                    // no labels — Pinterest's house style
+                    colors = NavigationBarItemDefaults.colors(
+                        selectedIconColor   = PinterestColors.TextPrimaryLight, // not red
+                        unselectedIconColor = PinterestColors.TextSecondaryLight,
+                        indicatorColor      = Color.Transparent, // no Material pill
+                    ),
+                )
+            }
+        }
+    }
+}
+```
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Save morph | `animateColorAsState` red → black with `spring(dampingRatio = 0.8f)` (~200ms); `HapticFeedbackType.LongPress` |
+| Pin tap → detail | `SharedTransitionLayout` + `Modifier.sharedElement()` on the pin image (Compose 1.7+); fallback `AnimatedVisibility` + `scaleIn` from grid position |
+| Masonry entrance | `Modifier.animateItem()` on each staggered cell — fade + 8.dp slide-up as pins stream in |
+| Follow button | `animateColorAsState` red → gray "Following" over 250ms cross-fade + success haptic |
+| Pull-to-refresh | `rememberInfiniteTransition` rotating the 28.dp red "P" logomark |
+| Long-press pin | `animateFloatAsState` scale → 0.96 + haptic, then context-menu `AnimatedVisibility` scale-in 300ms |
+
+```kotlin
+// Shared-element pin → detail (Compose 1.7+ SharedTransitionLayout)
+@OptIn(ExperimentalSharedTransitionApi::class)
+@Composable
+fun SharedTransitionScope.SharedPinImage(
+    imageUrl: String,
+    key: String,
+    animatedScope: AnimatedVisibilityScope,
+) {
+    AsyncImage(
+        model = imageUrl,
+        contentDescription = null,
+        contentScale = ContentScale.Crop,
+        modifier = Modifier
+            .sharedElement(
+                rememberSharedContentState(key = "pin-$key"),
+                animatedVisibilityScope = animatedScope,
+            )
+            .clip(RoundedCornerShape(16.dp)),
+    )
+}
+```
+
+Springs stay subtle (0.2–0.35s range) — Pinterest never animates aggressively. Haptics: prefer `LocalHapticFeedback`; for the Save success use `HapticFeedbackType.LongPress`, or a `Vibrator` `VibrationEffect.createOneShot(12, ...)` to approximate iOS's success notification.
+
+## 7. Icons
+
+Pinterest ships custom glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`. The red "P" pull-to-refresh logomark ships as a vector drawable loaded via `ImageVector.vectorResource(R.drawable.ic_pinterest_p)`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Home (tab) | `house` / `house.fill` | `Icons.Outlined.Home` / `Icons.Filled.Home` |
+| Notifications (tab) | `bell` / `bell.fill` | `Icons.Outlined.Notifications` / `Icons.Filled.Notifications` |
+| Profile (tab) | `person` / `person.fill` | `Icons.Outlined.Person` / `Icons.Filled.Person` |
+| Create (center) | `plus` | `Icons.Filled.Add` |
+| Heart (react) | `heart` / `heart.fill` | `Icons.Outlined.FavoriteBorder` / `Icons.Filled.Favorite` |
+| Comment | `bubble.right` | `Icons.AutoMirrored.Filled.Comment` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| More | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Back | `chevron.left` | `Icons.AutoMirrored.Filled.ArrowBack` |
+| Shop tag | `tag.fill` | `Icons.Filled.LocalOffer` |
+| Idea Pin | `sparkles` | `Icons.Filled.AutoAwesome` |
+| Save confirm | `checkmark` | `Icons.Filled.Check` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; staggered grid + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`. The light canvas wants dark-content system bars; apply `Modifier.windowInsetsPadding(WindowInsets.systemBars)` or `Scaffold` insets so the floating search clears the status bar and the tab bar clears gesture nav.
+- **Font scaling**: `sp` honors the user's font scale. Keep it on pin-detail title, descriptions, comments. **Pin caption titles in the masonry feed must be a fixed size** — the staggered layout computes tile heights from text + aspect, so wrap captions in `CompositionLocalProvider(LocalDensity provides Density(LocalDensity.current.density, fontScale = 1f))` to keep the grid stable. Save-button text is also pinned (pill geometry).
+- **TalkBack**: merge a pin tile's contents with `Modifier.semantics(mergeDescendants = true)` so the user hears "Save {title} by {creator}" as one element; expose the Save button as a separate nested action.
+- **Touch targets**: Material guidance is 48.dp minimum. The Save pill clears it; the 20.dp creator avatar and small icon buttons need a 44–48.dp hit area via padding even though the glyph is small. The Create button is 48.dp by design.
+- **Contrast**: `#767676` on `#FFFFFF` passes WCAG AA at 14sp+; validate the 12sp metadata and 11sp micro-labels with a contrast checker and bump toward `#5F5F5F` if targeting strict AA at small sizes. Dark-mode `#AAAAAA` on `#121212` also passes.
+- **Dynamic color**: do **not** enable Material You `dynamicColorScheme()` — Pinterest's identity depends on the fixed stark `#FFFFFF` canvas and the single Pinterest-Red verb regardless of wallpaper. Pins are the color story; the chrome must stay neutral.