Token List

The tokens are presented by sentiment.

Default

A neutral palette for non-actionable items like page content.

#393B6B
CSS:--ps-backgroundSASS:$ps-backgroundJS:psBackground
#404376
CSS:--ps-background-hoverSASS:$ps-background-hoverJS:psBackgroundHover
#2D2D55
CSS:--ps-background-activeSASS:$ps-background-activeJS:psBackgroundActive
#404376
CSS:--ps-borderSASS:$ps-borderJS:psBorder
#2D2D55
CSS:--ps-border-weakSASS:$ps-border-weakJS:psBorderWeak
#585FA2
CSS:--ps-border-strongSASS:$ps-border-strongJS:psBorderStrong
#130F25
CSS:--ps-surfaceSASS:$ps-surfaceJS:psSurface
#1B1834
CSS:--ps-surface-weakSASS:$ps-surface-weakJS:psSurfaceWeak
#242145
CSS:--ps-surface-mediumSASS:$ps-surface-mediumJS:psSurfaceMedium
#2A2753
CSS:--ps-surface-strongSASS:$ps-surface-strongJS:psSurfaceStrong
#F3F3F8
CSS:--ps-surface-inverseSASS:$ps-surface-inverseJS:psSurfaceInverse
#D1D2E6
CSS:--ps-textSASS:$ps-textJS:psText
#8B90C1
CSS:--ps-text-weakSASS:$ps-text-weakJS:psTextWeak
#A5AACF
CSS:--ps-text-mediumSASS:$ps-text-mediumJS:psTextMedium
#F3F3F8
CSS:--ps-text-strongSASS:$ps-text-strongJS:psTextStrong
#130F25
CSS:--ps-text-inverseSASS:$ps-text-inverseJS:psTextInverse

These colors represent actionable and interactive items like buttons or text links.

#4A33D1
CSS:--ps-action-backgroundSASS:$ps-action-backgroundJS:psActionBackground
#3C28B1
CSS:--ps-action-background-hoverSASS:$ps-action-background-hoverJS:psActionBackgroundHover
#30208D
CSS:--ps-action-background-activeSASS:$ps-action-background-activeJS:psActionBackgroundActive
#2A2753
CSS:--ps-action-background-weakSASS:$ps-action-background-weakJS:psActionBackgroundWeak
#343063
CSS:--ps-action-background-weak-hoverSASS:$ps-action-background-weak-hoverJS:psActionBackgroundWeakHover
#24186A
CSS:--ps-action-background-weak-activeSASS:$ps-action-background-weak-activeJS:psActionBackgroundWeakActive
#6855D9
CSS:--ps-action-borderSASS:$ps-action-borderJS:psActionBorder
#3895FF
CSS:--ps-action-border-focusSASS:$ps-action-border-focusJS:psActionBorderFocus
#3895FF
CSS:--ps-action-navigationSASS:$ps-action-navigationJS:psActionNavigation
#3895FF
CSS:--ps-action-navigation-hoverSASS:$ps-action-navigation-hoverJS:psActionNavigationHover
#B17DD4
CSS:--ps-action-navigation-visitedSASS:$ps-action-navigation-visitedJS:psActionNavigationVisited
#E1DDF7
CSS:--ps-action-textSASS:$ps-action-textJS:psActionText
#A499E8
CSS:--ps-action-text-weakSASS:$ps-action-text-weakJS:psActionTextWeak
#8677E0
CSS:--ps-action-text-mediumSASS:$ps-action-text-mediumJS:psActionTextMedium
#E1DDF7
CSS:--ps-action-text-inverseSASS:$ps-action-text-inverseJS:psActionTextInverse

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

#00A3FF
CSS:--ps-info-borderSASS:$ps-info-borderJS:psInfoBorder
#003655
CSS:--ps-info-surfaceSASS:$ps-info-surfaceJS:psInfoSurface
#D5F0FF
CSS:--ps-info-textSASS:$ps-info-textJS:psInfoText
#80D1FF
CSS:--ps-info-text-weakSASS:$ps-info-text-weakJS:psInfoTextWeak
#2BB2FF
CSS:--ps-info-text-mediumSASS:$ps-info-text-mediumJS:psInfoTextMedium

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

#02E088
CSS:--ps-success-borderSASS:$ps-success-borderJS:psSuccessBorder
#014B2D
CSS:--ps-success-surfaceSASS:$ps-success-surfaceJS:psSuccessSurface
#D0FFEC
CSS:--ps-success-textSASS:$ps-success-textJS:psSuccessText
#43FDB4
CSS:--ps-success-text-weakSASS:$ps-success-text-weakJS:psSuccessTextWeak
#02BB71
CSS:--ps-success-text-mediumSASS:$ps-success-text-mediumJS:psSuccessTextMedium

A feedback palette that helps to communicate a warning state to the user.

#FFBA0D
CSS:--ps-warning-borderSASS:$ps-warning-borderJS:psWarningBorder
#6B4C00
CSS:--ps-warning-surfaceSASS:$ps-warning-surfaceJS:psWarningSurface
#FFF6E0
CSS:--ps-warning-textSASS:$ps-warning-textJS:psWarningText
#FFE4A1
CSS:--ps-warning-text-weakSASS:$ps-warning-text-weakJS:psWarningTextWeak
#FFD262
CSS:--ps-warning-text-mediumSASS:$ps-warning-text-mediumJS:psWarningTextMedium

A feedback palette that helps to communicate a destructive action, loss of data, or required information to the user like "cancel" buttons.

#B9004B
CSS:--ps-danger-backgroundSASS:$ps-danger-backgroundJS:psDangerBackground
#8B0038
CSS:--ps-danger-background-hoverSASS:$ps-danger-background-hoverJS:psDangerBackgroundHover
#5C0026
CSS:--ps-danger-background-activeSASS:$ps-danger-background-activeJS:psDangerBackgroundActive
#FF1675
CSS:--ps-danger-borderSASS:$ps-danger-borderJS:psDangerBorder
#5C0026
CSS:--ps-danger-surfaceSASS:$ps-danger-surfaceJS:psDangerSurface
#FFF0F6
CSS:--ps-danger-textSASS:$ps-danger-textJS:psDangerText
#FFA2C8
CSS:--ps-danger-text-weakSASS:$ps-danger-text-weakJS:psDangerTextWeak
#FF73AC
CSS:--ps-danger-text-mediumSASS:$ps-danger-text-mediumJS:psDangerTextMedium
#FFF0F6
CSS:--ps-danger-text-inverseSASS:$ps-danger-text-inverseJS:psDangerTextInverse