Color variable support for input descriptions

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

    • Learn how to use color variables to change theming in your mobile input descriptions.

    Use color variables in the Description field of your inputs to control text color.

    Use color variables in the Description field of your inputs to control text color when Description field is configured as HTML.

    For example, in addition to color hex values like #FF0000, you may use a color variable, such as --now-color-primary-0. For a list of available variables see Color theme considerations for mobile.

    For details on inputs, see Configure an input form screen.

    		 Color variable used in an input description

    Input description 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