Skip to content

Color - info

A feedback palette that helps to communicate an informative message to the user.

Text colors

Use with all instances of information status-related element text

  • text-initial
  • Default text inside of status elements
  • Use for: Admonition text, Toast text, Badges
  • Token Name: info.text.initial

  • text-100
  • Use for: Low emphasis text in status elements
  • Token Name: info.text.100

  • text-200
  • Highest emphasis text in status elements
  • Use for: Admonition icons, Toast icons
  • Token Name: info.text.200

Border colors

All borders of information status-related interface items

  • border
  • Border color of information status-related interface items
  • Use for: Admonition border, Badges
  • Token Name: info.border.initial

Surface colors

All color fills of information status-related elements like avatar, skeleton, or progress

  • surface
  • Surface color of status elements
  • Use for: Admonition, Toast, Badge backgrounds
  • Token Name: info.surface.initial