Patterns from production · Elements

Coloured words mix with the text

One rule for words in colour, on every theme.

Coloured words mix with the textLive demo

Try the controls to see the rule.

The rule

A word in a hue (a rarity, a status, an AI label) is the hue mixed with the theme’s text, about half and half. It holds on dark and light themes; fills and borders keep the pure hue.

Tokens used

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

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

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