Tokens

Token nameCurrent valueFigma usageDescription
--p-background
rgba(246, 246, 247, 1)Use Background/DefaultFor use as a background color, in components such as Page and Frame backgrounds.
--p-background-hovered
rgba(241, 242, 243, 1)Use Background/HoveredFor use when an action or navigation is used on a background.
--p-background-pressed
rgba(237, 238, 239, 1)Use Background/PressedFor use when an action or navigation is used on a background.
--p-background-selected
rgba(237, 238, 239, 1)Use Background/SelectedFor use in the selected item in navigation
--p-surface
rgba(255, 255, 255, 1)For use as a background color, in components such as Card, Modal, and Popover.
--p-surface-dark
rgba(32, 33, 35, 1)For use as a dark background color, in components such as Card, Modal, and Popover.
--p-surface-neutral
rgba(228, 229, 231, 1)Use Surface Neutral/DefaultFor use as a background color in neutral badges.
--p-surface-neutral-hovered
rgba(219, 221, 223, 1)Use Surface Neutral/HoveredFor use as a hovered background color in neutral badges.
--p-surface-neutral-pressed
rgba(201, 204, 208, 1)Use Surface Neutral/PressedFor use as a pressed background color in neutral badges.
--p-surface-neutral-disabled
rgba(241, 242, 243, 1)Use Surface Neutral/DisabledFor use as a disabled background color in neutral badges.
--p-surface-neutral-subdued
rgba(246, 246, 247, 1)Use Surface Neutral/SubduedFor use as a background color in neutral banners.
--p-surface-neutral-subdued-dark
rgba(68, 71, 74, 1)For use as a dark background color in neutral banners.
--p-surface-subdued
rgba(250, 251, 251, 1)Use Surface/SubduedFor use as a subdued background color, in components such as Card, Modal, and Popover.
--p-surface-disabled
rgba(250, 251, 251, 1)Use Surface/DisabledFor use as a surface color on disabled interactive elements such as option list items and action list items when in a disabled state.
--p-surface-hovered
rgba(246, 246, 247, 1)Use Surface/HoveredFor use as a surface color on interactive elements such as resource list items and action list items when in a hovered state.
--p-surface-hovered-dark
rgba(47, 49, 51, 1)For use as a dark surface color on interactive elements such as resource list items and action list items when in a hovered state.
--p-surface-pressed
rgba(241, 242, 243, 1)Use Surface/PressedFor use as a surface color on interactive elements such as resource list items and action list items when in a pressed state.
--p-surface-pressed-dark
rgba(62, 64, 67, 1)For use as a dark surface color on interactive elements such as resource list items and action list items when in a pressed state.
--p-surface-depressed
rgba(237, 238, 239, 1)Use Surface/DepressedFor use as a surface color on interactive elements such as resource list items and action list items when in a depressed state.
--p-surface-search-field
rgba(241, 242, 243, 1)Use Surface/SearchFieldFor use as a background color, in components on surface elements such as SearchField
--p-surface-search-field-dark
rgba(47, 49, 51, 1)For use as a dark background color, in components on surface elements such as SearchField
--p-backdrop
rgba(0, 0, 0, 0.5)For use as the background color of the backdrop component for navigation and modal. This color has an alpha of `0.5`.
--p-overlay
rgba(255, 255, 255, 0.5)For use as the background color of elements which lay on top of surfaces to obscure their contents. This color has an alpha of `0.5`.
--p-shadow-color-picker
rgba(0, 0, 0, 0.5)
--p-shadow-color-picker-dragger
rgba(33, 43, 54, 0.32)
--p-hint-from-direct-light
rgba(0, 0, 0, 0.15)Use Hint/From direct lightFor use in building shadows scrollables.
--p-border
rgba(140, 145, 150, 1)For use as the default border on elements.
--p-border-on-dark
rgba(80, 83, 86, 1)For use as the default border on dark elements.
--p-border-neutral-subdued
rgba(186, 191, 195, 1)Use Border Neutral/SubduedFor use as the border on banners.
--p-border-hovered
rgba(153, 158, 164, 1)Use Border/HoveredUsed for borders on hovered interactive elements
--p-border-disabled
rgba(210, 213, 216, 1)Use Border/DisabledUsed for disabled borders on interactive elements
--p-border-subdued
rgba(201, 204, 207, 1)Use Border/SubduedFor use as a subdued border on elements.
--p-border-depressed
rgba(87, 89, 89, 1)Use Border/DepressedFor use as a border on depressed elements.
--p-border-shadow
rgba(174, 180, 185, 1)Use BorderShadowFor use as an additional bottom border on elements.
--p-border-shadow-subdued
rgba(186, 191, 196, 1)Use BorderShadow/SubduedFor use as an additional, subdued bottom border on elements.
--p-divider
rgba(225, 227, 229, 1)For use as a divider between elements.
--p-divider-dark
rgba(69, 71, 73, 1)For use as a dark divider between elements.
--p-icon
rgba(92, 95, 98, 1)For use as the fill color of icons.
--p-icon-on-dark
rgba(166, 172, 178, 1)For use as the fill color of dark icons.
--p-icon-hovered
rgba(26, 28, 29, 1)Use Icon/HoveredFor use as the fill color of hovered icons.
--p-icon-pressed
rgba(68, 71, 74, 1)Use Icon/PressedFor use as the fill color of pressed icons.
--p-icon-disabled
rgba(186, 190, 195, 1)Use Icon/DisabledFor use as the fill color of disabled icons.
--p-icon-subdued
rgba(140, 145, 150, 1)Use Icon/SubduedFor use as the fill color of subdued icons.
--p-text
rgba(32, 34, 35, 1)For use as a text color.
--p-text-on-dark
rgba(227, 229, 231, 1)For use as a text color on dark elements.
--p-text-disabled
rgba(140, 145, 150, 1)Use Text/DisabledFor use as a disabled text color and as a placeholder text color.
--p-text-subdued
rgba(109, 113, 117, 1)Use Text/SubduedFor use as a subdued text color.
--p-text-subdued-on-dark
rgba(153, 159, 164, 1)For use as a subdued text color on dark elements.
--p-interactive
rgba(44, 110, 203, 1)Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons.
--p-interactive-on-dark
rgba(54, 163, 255, 1)Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons when on a dark element.
--p-interactive-disabled
rgba(189, 193, 204, 1)Use Interactive/DisabledUsed for disabled links and plain buttons.
--p-interactive-hovered
rgba(31, 81, 153, 1)Use Interactive/HoveredUsed for hovered links and plain buttons.
--p-interactive-pressed
rgba(16, 50, 98, 1)Use Interactive/PressedUsed for pressed links and plain buttons.
--p-interactive-pressed-on-dark
rgba(136, 188, 255, 1)Used for pressed links and plain buttons on dark elements.
--p-focused
rgba(69, 143, 255, 1)For use in the focus ring on interactive elements.
--p-surface-selected
rgba(242, 247, 254, 1)Use Surface Selected/DefaultFor use as a surface color in selected interactive elements, in components such as action list and resource list.
--p-surface-selected-hovered
rgba(237, 244, 254, 1)Use Surface Selected/HoveredFor use as a surface color in selected interactive elements that are hovered, in components such as action list and resource list.
--p-surface-selected-pressed
rgba(229, 239, 253, 1)Use Surface Selected/PressedFor use as a surface color in selected interactive elements that are pressed, in components such as action list and resource list.
--p-icon-on-interactive
rgba(255, 255, 255, 1)Use Icon On/InteractiveFor use as a fill color for icons on interactive elements.
--p-text-on-interactive
rgba(255, 255, 255, 1)Use Text On/InteractiveFor use as a text color on interactive elements.
--p-action-secondary
rgba(255, 255, 255, 1)Use Action Secondary/DefaultUsed for secondary buttons and tertiary buttons, as well as in form elements as a background color and pontentially other secondary surfaces.
--p-action-secondary-disabled
rgba(255, 255, 255, 1)Use Action Secondary/DisabledUsed as a disabled state for secondary buttons
--p-action-secondary-hovered
rgba(246, 246, 247, 1)Use Action Secondary/HoveredUsed as a hovered state for secondary buttons
--p-action-secondary-hovered-dark
rgba(84, 87, 91, 1)Used as a dark hovered state for secondary buttons
--p-action-secondary-pressed
rgba(241, 242, 243, 1)Use Action Secondary/PressedUsed as a pressed state for secondary buttons
--p-action-secondary-pressed-dark
rgba(96, 100, 103, 1)Used as a dark pressed state for secondary buttons
--p-action-secondary-depressed
rgba(109, 113, 117, 1)Use Action Secondary/DepressedUsed as a depressed state for secondary buttons
--p-action-primary
rgba(0, 128, 96, 1)Use Action Primary/DefaultUsed as the background color for primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.
--p-action-primary-disabled
rgba(241, 241, 241, 1)Use Action Primary/DisabledUsed as the background color for disabled primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.
--p-action-primary-hovered
rgba(0, 110, 82, 1)Use Action Primary/HoveredUsed as the background color for hovered primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.
--p-action-primary-pressed
rgba(0, 94, 70, 1)Use Action Primary/PressedUsed as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.
--p-action-primary-depressed
rgba(0, 61, 44, 1)Use Action Primary/DepressedUsed as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.
--p-icon-on-primary
rgba(255, 255, 255, 1)Use Icon On/PrimaryFor use as a fill color for icons on primary actions. Not for use in icons on navigation and tabs.
--p-text-on-primary
rgba(255, 255, 255, 1)Use Text On/PrimaryFor use as a text color on primary actions. Not for use in text on navigation and tabs.
--p-text-primary
rgba(0, 123, 92, 1)Use Text Primary/DefaultFor use as primary text color on background. For use in text in components such as Navigation.
--p-text-primary-hovered
rgba(0, 108, 80, 1)Use Text Primary/hoverFor use as primary hovered text color on background. For use in text in components such as Navigation.
--p-text-primary-pressed
rgba(0, 92, 68, 1)Use Text Primary/PressedFor use as primary pressed text color on background. For use in text in components such as Navigation.
--p-surface-primary-selected
rgba(241, 248, 245, 1)Use Surface Primary/SelectedUsed as a surface color to indicate selected interactive states in navigation and tabs.
--p-surface-primary-selected-hovered
rgba(179, 208, 195, 1)Use Surface Primary/Selected HoveredUsed as a surface color to indicate selected interactive states that are hovered in navigation and tabs.
--p-surface-primary-selected-pressed
rgba(162, 188, 176, 1)Use Surface Primary/Selected PressedUsed as a surface color to indicate selected interactive states that are pressed in navigation and tabs.
--p-border-critical
rgba(253, 87, 73, 1)Use Border Critical/DefaultFor use as a border on critical components such as an outline on interactive elements in an error state.
--p-border-critical-subdued
rgba(224, 179, 178, 1)Use Border Critical/SubduedFor use as a border on critical components such as banners.
--p-border-critical-disabled
rgba(255, 167, 163, 1)Use Border Critical/DisabledFor use as a disabled border on critical components such as banners, and as an outline on interactive elements in an error state.
--p-icon-critical
rgba(215, 44, 13, 1)Use Icon/CriticalFor use as an icon fill color on top of critical elements.
--p-surface-critical
rgba(254, 211, 209, 1)Use Surface Critical/DefaultFor use as a surface color on critical elements including badges.
--p-surface-critical-subdued
rgba(255, 244, 244, 1)Use Surface Critical/SubduedFor use as a subdued surface color on critical elements including banners.
--p-surface-critical-subdued-hovered
rgba(255, 240, 240, 1)Use Surface Critical/Subdued HoveredFor use as a surface color on critical interactive elements including action list items in a hovered state.
--p-surface-critical-subdued-pressed
rgba(255, 233, 232, 1)Use Surface Critical/Subdued PressedFor use as a surface color on critical interactive elements including action list items in a pressed state.
--p-surface-critical-subdued-depressed
rgba(254, 188, 185, 1)Use Surface Critical/Subdued DepressedFor use as a surface color on critical interactive elements including action list items in a depressed state.
--p-text-critical
rgba(215, 44, 13, 1)Use Text/CriticalFor use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.
--p-action-critical
rgba(216, 44, 13, 1)Use Action Critical/DefaultFor use as the background color for destructive buttons, and as the background color for error toast messages.
--p-action-critical-disabled
rgba(241, 241, 241, 1)Use Action Critical/DisabledFor use as the background color for disabled destructive buttons, and as the background color for error toast messages.
--p-action-critical-hovered
rgba(188, 34, 0, 1)Use Action Critical/HoveredFor use as the background color for hovered destructive buttons, and as the background color for error toast messages.
--p-action-critical-pressed
rgba(162, 27, 0, 1)Use Action Critical/PressedFor use as the background color for pressed destructive buttons, and as the background color for error toast messages.
--p-action-critical-depressed
rgba(108, 15, 0, 1)Use Action Critical/DepressedFor use as the background color for depressed destructive buttons, and as the background color for error toast messages.
--p-icon-on-critical
rgba(255, 255, 255, 1)Use Icon On/CriticalFor use as a fill color for icons on critical actions.
--p-text-on-critical
rgba(255, 255, 255, 1)Use Text On/CriticalFor use as a text color on critical actions.
--p-interactive-critical
rgba(216, 44, 13, 1)Use Interactive/CriticalFor use as the text color for destructive interactive elements: links, plain buttons, error state of selected checkboxes and radio buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.
--p-interactive-critical-disabled
rgba(253, 147, 141, 1)Use Interactive/Critical DisabledFor use as a text color in disabled destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.
--p-interactive-critical-hovered
rgba(205, 41, 12, 1)Use Interactive/Critical HoveredFor use as a text color in hovered destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.
--p-interactive-critical-pressed
rgba(103, 15, 3, 1)Use Interactive/Critical PressedFor use as a text color in pressed destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.
--p-border-warning
rgba(185, 137, 0, 1)Use Border Warning/DefaultFor use as a border on warning components such as...
--p-border-warning-subdued
rgba(225, 184, 120, 1)Use Border Warning/SubduedFor use as a border on warning components such as banners.
--p-icon-warning
rgba(185, 137, 0, 1)Use Icon/WarningFor use as an icon fill color on top of warning elements.
--p-surface-warning
rgba(255, 215, 157, 1)Use Surface Warning/DefaultFor use as a surface color on warning elements including badges.
--p-surface-warning-subdued
rgba(255, 245, 234, 1)Use Surface Warning/SubduedFor use as a subdued surface color on warning elements including banners.
--p-surface-warning-subdued-hovered
rgba(255, 242, 226, 1)Use Surface Warning/Subdued HoveredFor use as a subdued surface color on warning elements including banners.
--p-surface-warning-subdued-pressed
rgba(255, 235, 211, 1)Use Surface Warning/Subdued PressedFor use as a subdued surface color on warning elements including banners.
--p-text-warning
rgba(145, 106, 0, 1)Use Text/WarningFor use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.
--p-border-highlight
rgba(68, 157, 167, 1)Use Border Highlight/DefaultFor use as a border on informational components such as...
--p-border-highlight-subdued
rgba(152, 198, 205, 1)Use Border Highlight/SubduedFor use as a border on informational components such as banners.
--p-icon-highlight
rgba(0, 160, 172, 1)Use Icon/HighlightFor use as an icon fill color on top of informational elements.
--p-surface-highlight
rgba(164, 232, 242, 1)Use Surface Highlight/DefaultFor use as a surface color on information elements including badges.
--p-surface-highlight-subdued
rgba(235, 249, 252, 1)Use Surface Highlight/SubduedFor use as a surface color on information elements including banners.
--p-surface-highlight-subdued-hovered
rgba(228, 247, 250, 1)Use Surface Highlight/Subdued HoveredFor use as a surface color on information elements including banners.
--p-surface-highlight-subdued-pressed
rgba(213, 243, 248, 1)Use Surface Highlight/Subdued PressedFor use as a surface color on information elements including banners.
--p-text-highlight
rgba(52, 124, 132, 1)Use Text/HighlightFor use as a text color in inert informational elements. Not for use as a text color on banners and badges.
--p-border-success
rgba(0, 164, 124, 1)Use Border Success/DefaultFor use as a border on success components such as text inputs.
--p-border-success-subdued
rgba(149, 201, 180, 1)Use Border Success/SubduedFor use as a border on success components such as banners.
--p-icon-success
rgba(0, 127, 95, 1)Use Icon/SuccessFor use as an icon fill color on top of success elements.
--p-surface-success
rgba(174, 233, 209, 1)Use Surface Success/DefaultFor use as a surface color on success elements including badges.
--p-surface-success-subdued
rgba(241, 248, 245, 1)Use Surface Success/SubduedFor use as a surface color on information elements including banners.
--p-surface-success-subdued-hovered
rgba(236, 246, 241, 1)Use Surface Success/Subdued HoveredFor use as a surface color on information elements including banners.
--p-surface-success-subdued-pressed
rgba(226, 241, 234, 1)Use Surface Success/Subdued PressedFor use as a surface color on information elements including banners.
--p-text-success
rgba(0, 128, 96, 1)Use Text/SuccessFor use as a text color in inert success elements. Not for use as a text color on banners and badges.
--p-icon-attention
rgba(138, 97, 22)
--p-surface-attention
rgba(255, 234, 138)
--p-decorative-one-icon
rgba(126, 87, 0, 1)Use Decorative/Icon/OneFor use as a decorative icon color that is applied on a decorative surface.
--p-decorative-one-surface
rgba(255, 201, 107, 1)Use Decorative/Surface/OneFor use as a decorative surface color.
--p-decorative-one-text
rgba(61, 40, 0, 1)Use Decorative/Text/OneFor use as a decorative text color that is applied on a decorative surface.
--p-decorative-two-icon
rgba(175, 41, 78, 1)Use Decorative/Icon/TwoFor use as a decorative icon color that is applied on a decorative surface.
--p-decorative-two-surface
rgba(255, 196, 176, 1)Use Decorative/Surface/TwoFor use as a decorative surface color.
--p-decorative-two-text
rgba(73, 11, 28, 1)Use Decorative/Text/TwoFor use as a decorative text color that is applied on a decorative surface.
--p-decorative-three-icon
rgba(0, 109, 65, 1)Use Decorative/Icon/ThreeFor use as a decorative icon color that is applied on a decorative surface.
--p-decorative-three-surface
rgba(146, 230, 181, 1)Use Decorative/Surface/ThreeFor use as a decorative surface color.
--p-decorative-three-text
rgba(0, 47, 25, 1)Use Decorative/Text/ThreeFor use as a decorative text color that is applied on a decorative surface.
--p-decorative-four-icon
rgba(0, 106, 104, 1)Use Decorative/Icon/FourFor use as a decorative icon color that is applied on a decorative surface.
--p-decorative-four-surface
rgba(145, 224, 214, 1)Use Decorative/Surface/FourFor use as a decorative surface color.
--p-decorative-four-text
rgba(0, 45, 45, 1)Use Decorative/Text/FourFor use as a decorative text color that is applied on a decorative surface.
--p-decorative-five-icon
rgba(174, 43, 76, 1)Use Decorative/Icon/FiveFor use as a decorative icon color that is applied on a decorative surface.
--p-decorative-five-surface
rgba(253, 201, 208, 1)Use Decorative/Surface/FiveFor use as a decorative surface color.
--p-decorative-five-text
rgba(79, 14, 31, 1)Use Decorative/Text/FiveFor use as a decorative text color that is applied on a decorative surface.