Cards

Flat card (default): border-subtle + surface-card background, no shadow Overlay card (on gradient): surfaceOverlay (92% opacity) + border-subtle Elevated card (floating): surface-card + shadow-card

Web:

`css /* Standard flat card */ .card-panel { @apply rounded-xl border border-border bg-surface; }

/* Widget / hero card */ .widget-panel { @apply rounded-3xl border border-border; } `

iOS:

`swift // Flat card on solid background view.cardSurface() // radius: AppTheme.Radius.md (14pt) view.cardSurface(radius: AppTheme.Radius.xl) // hero card

// Card on gradient background view.modifier(CardSurfaceOverlay()) // uses surfaceOverlay `

Android:

kotlin Card( colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface), border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant), elevation = CardDefaults.cardElevation(defaultElevation = 0.dp) ) { ... }

Photo scrim (text over hero/card imagery)

The canonical overlay for content imagery (series covers, mate avatars, play hero artwork) — the artwork stays the star; only the text band darkens:

Scrim: bg-gradient-to-t from-black/80 via-black/30 to-transparent (bottom-up) Media: never pre-dimmed below opacity-75 — the scrim carries contrast Chip: on-photo labels use bg-black/60 text-white backdrop-blur-sm (dark scrim chip) Text: title text-white / secondary text-on-brand-muted — NEVER text-white/NN opacity dims

• Bottom-up only. A full-inset left-to-right from-black/80 band darkens the entire frame — that recipe belongs to the Ad banner spec below (tuned for text over busy ad creative) and MUST NOT be copied onto content imagery.
• White-glass chips (bg-white/15 + blur) wash out over bright artwork — the dark scrim chip replaced them on SeriesCard; use it everywhere.