Skip to content

Color - success

A status palette that helps to communicate a successful state to the user.

Text colors

Use with all instances of success status-related element text.

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

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

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

Border colors

All borders of success status-related interface items

  • border
  • Border color of status elements
  • Use for: Admonition border, Badges
  • Token Name: success.border.initial

Surface colors

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

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