Patterns from production · Honest numbers

A column earns its place

Empty columns stay out; one plain line says what is missing.

A column earns its placeLive demo

Try the controls to see the rule.

The rule

A table shows a column only when some row has a value for it, and a section only when something fills it. When everything is missing, one line says why and what would fill it.

Tokens used

  • color.text.primarytheme.text.primary
  • color.bg.surfacetheme.surface
  • size.tap44px
  • space.md12px
  • motion.duration.base260ms

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

SwiftUI
struct OvColumnEarnsPlace: 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: color.text.primary=theme.text.primary, color.bg.surface=theme.surface, size.tap=44px, space.md=12px, motion.duration.base=260ms
Compose
@Composable
fun OvColumnEarnsPlace(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: color.text.primary=theme.text.primary, color.bg.surface=theme.surface, size.tap=44px, space.md=12px, motion.duration.base=260ms