Patterns from production · Brand

The mark at work

The mark carries its identity through loading and site changes.

The mark at workLive demo

Try the controls to see the rule.

The rule

Treat the mark as a working component: it shows a page on its way, work, done, failed and live in one shape, and moves only when it has something to say. The mark is the Pair (2026-10-31); its moves, forms and files are on /brand.

Tokens used

  • motion.duration.slow360ms
  • motion.easing.standardcubic-bezier(.2,.7,.2,1)
  • motion.easing.backcubic-bezier(.34,1.56,.64,1)
  • size.tap44px
  • space.md12px
  • motion.duration.base260ms

Native spec · generated from this pattern and the shared token registry

SwiftUI
struct OvMarkSystem: View {
    let status: String
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        HStack(spacing: OvScale.spaceMd) {
            Text(status).font(.body)
        }
        .frame(minHeight: OvScale.sizeTap)
        .animation(reduceMotion ? .none : .easeOut(duration: OvScale.motionDurationBase), value: status)
    }
}
// Tokens: motion.duration.slow=360ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), motion.easing.back=cubic-bezier(.34,1.56,.64,1), size.tap=44px, space.md=12px, motion.duration.base=260ms
Compose
@Composable
fun OvMarkSystem(status: String, reduceMotion: Boolean) {
    Row(
        modifier = Modifier.defaultMinSize(minHeight = OvScale.SizeTap),
        horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd),
    ) {
        Text(status, style = MaterialTheme.typography.bodyMedium)
    }
    // Apply motion only when !reduceMotion.
}
// Tokens: motion.duration.slow=360ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), motion.easing.back=cubic-bezier(.34,1.56,.64,1), size.tap=44px, space.md=12px, motion.duration.base=260ms