Color variable support for UI rules

  • Release version: Zurich
  • Updated July 31, 2025
  • 2 minutes to read

    • Learn how to use color variables to change theming in your mobile UI rules.

    Use the following color variables in the Value field of your UI rules with the Operation field set to Set UI Style

    • BackgroundColorVariable
    • FontColorVariable outside or within the TextDecorator

    You can define any color variable from the UX Theme Properties [sys_ux_theme_property] table. For a list available variables see the color design guide below. For example:

    {“BackgroundColorVariable”: “--now-color-secondary-3", “BackgroundColor”: “#3f2c11”}

    For details on creating these UI rule actions, see Create a mobile UI rule action.

    		 Color variable used in a ui action

    Mobile UI rule color guide

    Color variables are divided into Use the design guideline to identify the right color variable for your use case.

    Alert color palette
    Alert color palette colors highlight important statuses, states and tasks. Use alert colors to communicate a specific meaning rather than for decoration or organization.
    Grouped color palette
    Grouped color palette colors follow color conventions in a line of industry. Use these colors to show that the colored item is associated with a specific industry or line of business. The meaning of each color depends on context, but should remain consistent within your app.
    Table 1. Alert color palette
    Color name Example Color variables
    Critical Critical alert color scheme
    Mobile variable
    alert--critical-0
    Web variable
    --now-color_alert--critical-0
    High High alert color scheme
    Mobile variable
    alert--high-0
    Web variable
    --now-color_alert--high-0
    Warning Warning alert color scheme
    Mobile variable
    alert--warning-0
    Web variable
    --now-color_alert--warning-0
    Moderate Moderate alert color scheme
    Mobile variable
    alert--moderate-0
    Web variable
    --now-color_alert--moderate-0
    Info Info alert color scheme
    Mobile variable
    alert--info-0
    Web variable
    --now-color_alert--info-0
    Positive Positive alert color scheme
    Mobile variable
    alert--positive-0
    Web variable
    --now-color_alert--positive-0
    Low Low alert color scheme
    Mobile variable
    alert--low-0
    Web variable
    --now-color_alert--low-0
    Disabled Disabled alert color scheme
    Mobile variable
    alert-disabled-background
    Web variable
    --now-color_background--secondary
    Critical (Alternate) Critical alert color scheme alternate
    Mobile variable
    alert--critical-4
    Web variable
    --now-color_alert--critical-4
    High (Alternate) High alert color scheme alternate
    Mobile variable
    alert--high-4
    Web variable
    --now-color_alert--high-4
    Warning (Alternate) Warning alert color scheme alternate
    Mobile variable
    alert--warning-4
    Web variable
    --now-color_alert--warning-4
    Moderate (Alternate) Moderate alert color scheme alternate
    Mobile variable
    alert--moderate-4
    Web variable
    --now-color_alert--moderate-4
    Info (Alternate) Info alert color scheme alternate
    Mobile variable
    alert--info-4
    Web variable
    --now-color_alert--info-4
    Positive (Alternate) Positive alert color scheme alternate
    Mobile variable
    alert--positive-4
    Web variable
    --now-color_alert--positive-4
    Low (Alternate) Low alert color scheme alternate
    Mobile variable
    alert--low-4
    Web variable
    --now-color_alert--low-4
    Disabled (Alternate) Disabled alert color scheme alternate
    Mobile variable
    alert-disabled-text
    Web variable
    --now-color_text--tertiary
    Table 2. Grouped color palette
    Color name Example Color options
    Blue Blue grouped color scheme
    Web variable
    --now-color_grouped--blue-0
    Brown Brown grouped color scheme
    Web variable
    --now-color_grouped--brown-0
    Gray Gray grouped color scheme
    Web variable
    --now-color_grouped--gray-0
    Green Green grouped color scheme
    Web variable
    --now-color_grouped--green-0
    Green-Yellow Green-yellow grouped color scheme
    Web variable
    --now-color_grouped--green-yellow-0
    Magenta Magenta grouped color scheme
    Web variable
    --now-color_grouped--magenta-0
    Orange Orange grouped color scheme
    Web variable
    --now-color_grouped--orange-0
    Pink Pink grouped color scheme
    Web variable
    --now-color_grouped--pink-0
    Purple Purple grouped color scheme
    Web variable
    --now-color_grouped--purple-0
    Teal Teal grouped color scheme
    Web variable
    --now-color_grouped--teal-0
    Yellow Yellow grouped color scheme
    Web variable
    --now-color_grouped--yellow-0
    Blue (Alternate) Blue grouped color scheme alternate
    Web variable
    --now-color_grouped--blue-4
    Brown (Alternate) Brown grouped color scheme alternate
    Web variable
    --now-color_grouped--brown-4
    Gray (Alternate) Gray grouped color scheme alternate
    Web variable
    --now-color_grouped--gray-4
    Green (Alternate) Green grouped color scheme alternate
    Web variable
    --now-color_grouped--green-4
    Green-Yellow (Alternate) Green-yellow grouped color scheme alternate
    Web variable
    --now-color_grouped--green-yellow-4
    Magenta (Alternate) Magenta grouped color scheme alternate
    Web variable
    --now-color_grouped--magenta-4
    Orange (Alternate) Orange grouped color scheme alternate
    Web variable
    --now-color_grouped--orange-4
    Pink (Alternate) Pink grouped color scheme alternate
    Web variable
    --now-color_grouped--pink-4
    Purple (Alternate) Purple grouped color scheme alternate
    Web variable
    --now-color_grouped--purple-4
    Teal (Alternate) Teal grouped color scheme alternate
    Web variable
    --now-color_grouped--teal-4
    Yellow (Alternate) Yellow grouped color scheme alternate
    Web variable
    --now-color_grouped--yellow-4