Text style

Text style enhances text with additional visual meaning. For example, using subdued text to de-emphasize it from its surrounding text.


Use to de-emphasize a piece of text that is less important to the merchant than other nearby text. May also be used to indicate when normal content is absent, for example, “No supplier listed”. Don’t use only for aesthetic effect.

Drag to resize example


The content that should get the intended styling
"positive" | "negative" | "strong" | "subdued"
Give text additional visual meaning

Best practices

Text style should be:

  • Used when enhancing the text will help the merchant undertand its meaning
  • Subdued if the text is less important than its surrounding text
  • Strong for input fields, or for a row total in a price table
  • Paired with symbols, like an arrow or dollar sign, when using positive or negative styles