Patterns from production · Layout that holds

Numbers line up under their header

Digits stack, and the header sits over them.

Numbers line up under their headerLive demo

Try the controls to see the rule.

The rule

A column of numbers is right-aligned, with tabular figures, and its header aligns the same way. Check that a broader rule does not override the alignment with higher specificity.

Tokens used

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

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

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