PolarisTokens
| Token name | Current value | Figma usage | Description | |
|---|---|---|---|---|
--p-background | rgba(246, 246, 247, 1) | Use Background/Default | For use as a background color, in components such as Page and Frame backgrounds. | |
--p-background-hovered | rgba(241, 242, 243, 1) | Use Background/Hovered | For use when an action or navigation is used on a background. | |
--p-background-pressed | rgba(237, 238, 239, 1) | Use Background/Pressed | For use when an action or navigation is used on a background. | |
--p-background-selected | rgba(237, 238, 239, 1) | Use Background/Selected | For 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/Default | For use as a background color in neutral badges. | |
--p-surface-neutral-hovered | rgba(219, 221, 223, 1) | Use Surface Neutral/Hovered | For use as a hovered background color in neutral badges. | |
--p-surface-neutral-pressed | rgba(201, 204, 208, 1) | Use Surface Neutral/Pressed | For use as a pressed background color in neutral badges. | |
--p-surface-neutral-disabled | rgba(241, 242, 243, 1) | Use Surface Neutral/Disabled | For use as a disabled background color in neutral badges. | |
--p-surface-neutral-subdued | rgba(246, 246, 247, 1) | Use Surface Neutral/Subdued | For 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/Subdued | For use as a subdued background color, in components such as Card, Modal, and Popover. | |
--p-surface-disabled | rgba(250, 251, 251, 1) | Use Surface/Disabled | For 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/Hovered | For 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/Pressed | For 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/Depressed | For 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/SearchField | For 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 light | For 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/Subdued | For use as the border on banners. | |
--p-border-hovered | rgba(153, 158, 164, 1) | Use Border/Hovered | Used for borders on hovered interactive elements | |
--p-border-disabled | rgba(210, 213, 216, 1) | Use Border/Disabled | Used for disabled borders on interactive elements | |
--p-border-subdued | rgba(201, 204, 207, 1) | Use Border/Subdued | For use as a subdued border on elements. | |
--p-border-depressed | rgba(87, 89, 89, 1) | Use Border/Depressed | For use as a border on depressed elements. | |
--p-border-shadow | rgba(174, 180, 185, 1) | Use BorderShadow | For use as an additional bottom border on elements. | |
--p-border-shadow-subdued | rgba(186, 191, 196, 1) | Use BorderShadow/Subdued | For 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/Hovered | For use as the fill color of hovered icons. | |
--p-icon-pressed | rgba(68, 71, 74, 1) | Use Icon/Pressed | For use as the fill color of pressed icons. | |
--p-icon-disabled | rgba(186, 190, 195, 1) | Use Icon/Disabled | For use as the fill color of disabled icons. | |
--p-icon-subdued | rgba(140, 145, 150, 1) | Use Icon/Subdued | For 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/Disabled | For use as a disabled text color and as a placeholder text color. | |
--p-text-subdued | rgba(109, 113, 117, 1) | Use Text/Subdued | For 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/Disabled | Used for disabled links and plain buttons. | |
--p-interactive-hovered | rgba(31, 81, 153, 1) | Use Interactive/Hovered | Used for hovered links and plain buttons. | |
--p-interactive-pressed | rgba(16, 50, 98, 1) | Use Interactive/Pressed | Used 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/Default | For 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/Hovered | For 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/Pressed | For 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/Interactive | For use as a fill color for icons on interactive elements. | |
--p-text-on-interactive | rgba(255, 255, 255, 1) | Use Text On/Interactive | For use as a text color on interactive elements. | |
--p-action-secondary | rgba(255, 255, 255, 1) | Use Action Secondary/Default | Used 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/Disabled | Used as a disabled state for secondary buttons | |
--p-action-secondary-hovered | rgba(246, 246, 247, 1) | Use Action Secondary/Hovered | Used 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/Pressed | Used 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/Depressed | Used as a depressed state for secondary buttons | |
--p-action-primary | rgba(0, 128, 96, 1) | Use Action Primary/Default | Used 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/Disabled | Used 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/Hovered | Used 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/Pressed | Used 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/Depressed | Used 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/Primary | For 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/Primary | For 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/Default | For 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/hover | For 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/Pressed | For 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/Selected | Used 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 Hovered | Used 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 Pressed | Used 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/Default | For 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/Subdued | For use as a border on critical components such as banners. | |
--p-border-critical-disabled | rgba(255, 167, 163, 1) | Use Border Critical/Disabled | For 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/Critical | For use as an icon fill color on top of critical elements. | |
--p-surface-critical | rgba(254, 211, 209, 1) | Use Surface Critical/Default | For use as a surface color on critical elements including badges. | |
--p-surface-critical-subdued | rgba(255, 244, 244, 1) | Use Surface Critical/Subdued | For 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 Hovered | For 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 Pressed | For 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 Depressed | For 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/Critical | For 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/Default | For 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/Disabled | For 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/Hovered | For 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/Pressed | For 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/Depressed | For 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/Critical | For use as a fill color for icons on critical actions. | |
--p-text-on-critical | rgba(255, 255, 255, 1) | Use Text On/Critical | For use as a text color on critical actions. | |
--p-interactive-critical | rgba(216, 44, 13, 1) | Use Interactive/Critical | For 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 Disabled | For 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 Hovered | For 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 Pressed | For 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/Default | For use as a border on warning components such as... | |
--p-border-warning-subdued | rgba(225, 184, 120, 1) | Use Border Warning/Subdued | For use as a border on warning components such as banners. | |
--p-icon-warning | rgba(185, 137, 0, 1) | Use Icon/Warning | For use as an icon fill color on top of warning elements. | |
--p-surface-warning | rgba(255, 215, 157, 1) | Use Surface Warning/Default | For use as a surface color on warning elements including badges. | |
--p-surface-warning-subdued | rgba(255, 245, 234, 1) | Use Surface Warning/Subdued | For 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 Hovered | For 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 Pressed | For use as a subdued surface color on warning elements including banners. | |
--p-text-warning | rgba(145, 106, 0, 1) | Use Text/Warning | For 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/Default | For use as a border on informational components such as... | |
--p-border-highlight-subdued | rgba(152, 198, 205, 1) | Use Border Highlight/Subdued | For use as a border on informational components such as banners. | |
--p-icon-highlight | rgba(0, 160, 172, 1) | Use Icon/Highlight | For use as an icon fill color on top of informational elements. | |
--p-surface-highlight | rgba(164, 232, 242, 1) | Use Surface Highlight/Default | For use as a surface color on information elements including badges. | |
--p-surface-highlight-subdued | rgba(235, 249, 252, 1) | Use Surface Highlight/Subdued | For use as a surface color on information elements including banners. | |
--p-surface-highlight-subdued-hovered | rgba(228, 247, 250, 1) | Use Surface Highlight/Subdued Hovered | For use as a surface color on information elements including banners. | |
--p-surface-highlight-subdued-pressed | rgba(213, 243, 248, 1) | Use Surface Highlight/Subdued Pressed | For use as a surface color on information elements including banners. | |
--p-text-highlight | rgba(52, 124, 132, 1) | Use Text/Highlight | For 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/Default | For use as a border on success components such as text inputs. | |
--p-border-success-subdued | rgba(149, 201, 180, 1) | Use Border Success/Subdued | For use as a border on success components such as banners. | |
--p-icon-success | rgba(0, 127, 95, 1) | Use Icon/Success | For use as an icon fill color on top of success elements. | |
--p-surface-success | rgba(174, 233, 209, 1) | Use Surface Success/Default | For use as a surface color on success elements including badges. | |
--p-surface-success-subdued | rgba(241, 248, 245, 1) | Use Surface Success/Subdued | For use as a surface color on information elements including banners. | |
--p-surface-success-subdued-hovered | rgba(236, 246, 241, 1) | Use Surface Success/Subdued Hovered | For use as a surface color on information elements including banners. | |
--p-surface-success-subdued-pressed | rgba(226, 241, 234, 1) | Use Surface Success/Subdued Pressed | For use as a surface color on information elements including banners. | |
--p-text-success | rgba(0, 128, 96, 1) | Use Text/Success | For 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, 1) | — | — | |
--p-surface-attention | rgba(255, 234, 138, 1) | — | — | |
--p-decorative-one-icon | rgba(126, 87, 0, 1) | Use Decorative/Icon/One | For 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/One | For use as a decorative surface color. | |
--p-decorative-one-text | rgba(61, 40, 0, 1) | Use Decorative/Text/One | For 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/Two | For 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/Two | For use as a decorative surface color. | |
--p-decorative-two-text | rgba(73, 11, 28, 1) | Use Decorative/Text/Two | For 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/Three | For 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/Three | For use as a decorative surface color. | |
--p-decorative-three-text | rgba(0, 47, 25, 1) | Use Decorative/Text/Three | For 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/Four | For 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/Four | For use as a decorative surface color. | |
--p-decorative-four-text | rgba(0, 45, 45, 1) | Use Decorative/Text/Four | For 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/Five | For 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/Five | For use as a decorative surface color. | |
--p-decorative-five-text | rgba(79, 14, 31, 1) | Use Decorative/Text/Five | For use as a decorative text color that is applied on a decorative surface. |