Skip to content
Color theme considerations › Configure theming › Next Experience theming › Configuring the Mobile Platform › Mobile Platform
Release: Australia · Updated: 2026-03-12 · Official documentation · View source

Color variable support for input descriptions

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.

Image omitted: color-var-example-7.png
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.

Color nameExampleColor variables
Critical
Image omitted: alert-color-palette-critical.png
Critical alert color scheme
  • Mobile variable

alert--critical-0

  • Web variable

--now-color_alert--critical-0

High
Image omitted: alert-color-palette-high.png
High alert color scheme
  • Mobile variable

alert--high-0

  • Web variable

--now-color_alert--high-0

Warning
Image omitted: alert-color-palette-warning.png
Warning alert color scheme
  • Mobile variable

alert--warning-0

  • Web variable

--now-color_alert--warning-0

Moderate
Image omitted: alert-color-palette-moderate.png
Moderate alert color scheme
  • Mobile variable

alert--moderate-0

  • Web variable

--now-color_alert--moderate-0

Info
Image omitted: alert-color-palette-info.png
Info alert color scheme
  • Mobile variable

alert--info-0

  • Web variable

--now-color_alert--info-0

Positive
Image omitted: alert-color-palette-positive.png
Positive alert color scheme
  • Mobile variable

alert--positive-0

  • Web variable

--now-color_alert--positive-0

Low
Image omitted: alert-color-palette-low.png
Low alert color scheme
  • Mobile variable

alert--low-0

  • Web variable

--now-color_alert--low-0

Disabled
Image omitted: alert-color-palette-disabled.png
Disabled alert color scheme
  • Mobile variable

alert-disabled-background

  • Web variable

--now-color_background--secondary

Critical \(Alternate\)
Image omitted: alert-color-palette-critical2.png
Critical alert color scheme alternate
  • Mobile variable

alert--critical-4

  • Web variable

--now-color_alert--critical-4

High \(Alternate\)
Image omitted: alert-color-palette-high2.png
High alert color scheme alternate
  • Mobile variable

alert--high-4

  • Web variable

--now-color_alert--high-4

Warning \(Alternate\)
Image omitted: alert-color-palette-warning2.png
Warning alert color scheme alternate
  • Mobile variable

alert--warning-4

  • Web variable

--now-color_alert--warning-4

Moderate \(Alternate\)
Image omitted: alert-color-palette-moderate2.png
Moderate alert color scheme alternate
  • Mobile variable

alert--moderate-4

  • Web variable

--now-color_alert--moderate-4

Info \(Alternate\)
Image omitted: alert-color-palette-info2.png
Info alert color scheme alternate
  • Mobile variable

alert--info-4

  • Web variable

--now-color_alert--info-4

Positive \(Alternate\)
Image omitted: alert-color-palette-positive2.png
Positive alert color scheme alternate
  • Mobile variable

alert--positive-4

  • Web variable

--now-color_alert--positive-4

Low \(Alternate\)
Image omitted: alert-color-palette-low2.png
Low alert color scheme alternate
  • Mobile variable

alert--low-4

  • Web variable

--now-color_alert--low-4

Disabled \(Alternate\)
Image omitted: alert-color-palette-disabled2.png
Disabled alert color scheme alternate
  • Mobile variable

alert-disabled-text

  • Web variable

--now-color_text--tertiary

Color nameExampleColor options
Blue
Image omitted: grouped-color-palette-blue.png
Blue grouped color scheme
  • Web variable

--now-color_grouped--blue-0

Brown
Image omitted: grouped-color-palette-brown.png
Brown grouped color scheme
  • Web variable

--now-color_grouped--brown-0

Gray
Image omitted: grouped-color-palette-gray.png
Gray grouped color scheme
  • Web variable

--now-color_grouped--gray-0

Green
Image omitted: grouped-color-palette-green.png
Green grouped color scheme
  • Web variable

--now-color_grouped--green-0

Green-Yellow
Image omitted: grouped-color-palette-green-yellow.png
Green-yellow grouped color scheme
  • Web variable

--now-color_grouped--green-yellow-0

Magenta
Image omitted: grouped-color-palette-magenta.png
Magenta grouped color scheme
  • Web variable

--now-color_grouped--magenta-0

Orange
Image omitted: grouped-color-palette-orange.png
Orange grouped color scheme
  • Web variable

--now-color_grouped--orange-0

Pink
Image omitted: grouped-color-palette-pink.png
Pink grouped color scheme
  • Web variable

--now-color_grouped--pink-0

Purple
Image omitted: grouped-color-palette-purple.png
Purple grouped color scheme
  • Web variable

--now-color_grouped--purple-0

Teal
Image omitted: grouped-color-palette-teal.png
Teal grouped color scheme
  • Web variable

--now-color_grouped--teal-0

Yellow
Image omitted: grouped-color-palette-yellow.png
Yellow grouped color scheme
  • Web variable

--now-color_grouped--yellow-0

Blue \(Alternate\)
Image omitted: grouped-color-palette-blue2.png
Blue grouped color scheme alternate
  • Web variable

--now-color_grouped--blue-4

Brown \(Alternate\)
Image omitted: grouped-color-palette-brown2.png
Brown grouped color scheme alternate
  • Web variable

--now-color_grouped--brown-4

Gray \(Alternate\)
Image omitted: grouped-color-palette-gray2.png
Gray grouped color scheme alternate
  • Web variable

--now-color_grouped--gray-4

Green \(Alternate\)
Image omitted: grouped-color-palette-green2.png
Green grouped color scheme alternate
  • Web variable

--now-color_grouped--green-4

Green-Yellow \(Alternate\)
Image omitted: grouped-color-palette-green-yellow2.png
Green-yellow grouped color scheme alternate
  • Web variable

--now-color_grouped--green-yellow-4

Magenta \(Alternate\)
Image omitted: grouped-color-palette-magenta2.png
Magenta grouped color scheme alternate
  • Web variable

--now-color_grouped--magenta-4

Orange \(Alternate\)
Image omitted: grouped-color-palette-orange2.png
Orange grouped color scheme alternate
  • Web variable

--now-color_grouped--orange-4

Pink \(Alternate\)
Image omitted: grouped-color-palette-pink2.png
Pink grouped color scheme alternate
  • Web variable

--now-color_grouped--pink-4

Purple \(Alternate\)
Image omitted: grouped-color-palette-purple2.png
Purple grouped color scheme alternate
  • Web variable

--now-color_grouped--purple-4

Teal \(Alternate\)
Image omitted: grouped-color-palette-teal2.png
Teal grouped color scheme alternate
  • Web variable

--now-color_grouped--teal-4

Yellow \(Alternate\)
Image omitted: grouped-color-palette-yellow2.png
Yellow grouped color scheme alternate
  • Web variable

--now-color_grouped--yellow-4