tokens menu
  1. tokens
  2. all tokens

All tokens

View all available tokens for Polaris projects.

Note: This page is a work in progress, and we hope to add improvements soon.


Colors

Learn more about our color system.

Preview CSS name Value Description
--p-background rgba(246, 246, 247, 1) For use as a background color, in components such as Page and Frame backgrounds.
--p-background-hovered rgba(241, 242, 243, 1) For use when an action or navigation is used on a background.
--p-background-pressed rgba(237, 238, 239, 1) For use when an action or navigation is used on a background.
--p-background-selected rgba(237, 238, 239, 1) 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-neutral rgba(228, 229, 231, 1) For use as a background color in neutral badges.
--p-surface-neutral-hovered rgba(219, 221, 223, 1) For use as a hovered background color in neutral badges.
--p-surface-neutral-pressed rgba(201, 204, 208, 1) For use as a pressed background color in neutral badges.
--p-surface-neutral-disabled rgba(241, 242, 243, 1) For use as a disabled background color in neutral badges.
--p-surface-neutral-subdued rgba(246, 246, 247, 1) For use as a background color in neutral banners.
--p-surface-subdued rgba(250, 251, 251, 1) For use as a subdued background color, in components such as Card, Modal, and Popover.
--p-surface-disabled rgba(250, 251, 251, 1) 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) 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-pressed rgba(241, 242, 243, 1) 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-depressed rgba(237, 238, 239, 1) 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) For use as a 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) For use in building shadows scrollables.
--p-border rgba(140, 145, 150, 1) For use as the default border on elements.
--p-border-neutral-subdued rgba(186, 191, 195, 1) For use as the border on banners.
--p-border-hovered rgba(153, 158, 164, 1) Used for borders on hovered interactive elements
--p-border-disabled rgba(210, 213, 216, 1) Used for disabled borders on interactive elements
--p-border-subdued rgba(201, 204, 207, 1) For use as a subdued border on elements.
--p-border-depressed rgba(87, 89, 89, 1) For use as a border on depressed elements.
--p-border-shadow rgba(174, 180, 185, 1) For use as an additional bottom border on elements.
--p-border-shadow-subdued rgba(186, 191, 196, 1) 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-icon rgba(92, 95, 98, 1) For use as the fill color of icons.
--p-icon-hovered rgba(26, 28, 29, 1) For use as the fill color of hovered icons.
--p-icon-pressed rgba(68, 71, 74, 1) For use as the fill color of pressed icons.
--p-icon-disabled rgba(186, 190, 195, 1) For use as the fill color of disabled icons.
--p-icon-subdued rgba(140, 145, 150, 1) For use as the fill color of subdued icons.
--p-text rgba(32, 34, 35, 1) For use as a text color.
--p-text-disabled rgba(140, 145, 150, 1) For use as a disabled text color and as a placeholder text color.
--p-text-subdued rgba(109, 113, 117, 1) For use as a subdued text color.
--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-disabled rgba(189, 193, 204, 1) Used for disabled links and plain buttons.
--p-interactive-hovered rgba(31, 81, 153, 1) Used for hovered links and plain buttons.
--p-interactive-pressed rgba(16, 50, 98, 1) Used for pressed links and plain buttons.
--p-focused rgba(69, 143, 255, 1) For use in the focus ring on interactive elements.
--p-surface-selected rgba(242, 247, 254, 1) 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) 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) 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) For use as a fill color for icons on interactive elements.
--p-text-on-interactive rgba(255, 255, 255, 1) For use as a text color on interactive elements.
--p-action-secondary rgba(255, 255, 255, 1) 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) Used as a disabled state for secondary buttons
--p-action-secondary-hovered rgba(246, 246, 247, 1) Used as a hovered state for secondary buttons
--p-action-secondary-pressed rgba(241, 242, 243, 1) Used as a pressed state for secondary buttons
--p-action-secondary-depressed rgba(109, 113, 117, 1) Used as a depressed state for secondary buttons
--p-action-primary rgba(0, 128, 96, 1) 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) 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) 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) 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) 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) 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) 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) 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) 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) 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) Used as a surface color to indicate selected interactive states in navigation and tabs.
--p-surface-primary-selected-hovered rgba(179, 208, 195, 1) 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) 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) 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) For use as a border on critical components such as banners.
--p-border-critical-disabled rgba(255, 167, 163, 1) 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) For use as an icon fill color on top of critical elements.
--p-surface-critical rgba(254, 211, 209, 1) For use as a surface color on critical elements including badges.
--p-surface-critical-subdued rgba(255, 244, 244, 1) For use as a subdued surface color on critical elements including banners.
--p-surface-critical-subdued-hovered rgba(255, 240, 240, 1) 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) 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) 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) 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) 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) 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) 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) 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) 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) For use as a fill color for icons on critical actions.
--p-text-on-critical rgba(255, 255, 255, 1) For use as a text color on critical actions.
--p-interactive-critical rgba(216, 44, 13, 1) 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) 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) 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) 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) For use as a border on warning components such as...
--p-border-warning-subdued rgba(225, 184, 120, 1) For use as a border on warning components such as banners.
--p-icon-warning rgba(185, 137, 0, 1) For use as an icon fill color on top of warning elements.
--p-surface-warning rgba(255, 215, 157, 1) For use as a surface color on warning elements including badges.
--p-surface-warning-subdued rgba(255, 245, 234, 1) For use as a subdued surface color on warning elements including banners.
--p-surface-warning-subdued-hovered rgba(255, 242, 226, 1) For use as a subdued surface color on warning elements including banners.
--p-surface-warning-subdued-pressed rgba(255, 235, 211, 1) For use as a subdued surface color on warning elements including banners.
--p-text-warning rgba(145, 106, 0, 1) 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) For use as a border on informational components such as...
--p-border-highlight-subdued rgba(152, 198, 205, 1) For use as a border on informational components such as banners.
--p-icon-highlight rgba(0, 160, 172, 1) For use as an icon fill color on top of informational elements.
--p-surface-highlight rgba(164, 232, 242, 1) For use as a surface color on information elements including badges.
--p-surface-highlight-subdued rgba(235, 249, 252, 1) For use as a surface color on information elements including banners.
--p-surface-highlight-subdued-hovered rgba(228, 247, 250, 1) For use as a surface color on information elements including banners.
--p-surface-highlight-subdued-pressed rgba(213, 243, 248, 1) For use as a surface color on information elements including banners.
--p-text-highlight rgba(52, 124, 132, 1) 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) For use as a border on success components such as text inputs.
--p-border-success-subdued rgba(149, 201, 180, 1) For use as a border on success components such as banners.
--p-icon-success rgba(0, 127, 95, 1) For use as an icon fill color on top of success elements.
--p-surface-success rgba(174, 233, 209, 1) For use as a surface color on success elements including badges.
--p-surface-success-subdued rgba(241, 248, 245, 1) For use as a surface color on information elements including banners.
--p-surface-success-subdued-hovered rgba(236, 246, 241, 1) For use as a surface color on information elements including banners.
--p-surface-success-subdued-pressed rgba(226, 241, 234, 1) For use as a surface color on information elements including banners.
--p-text-success rgba(0, 128, 96, 1) 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)
--p-surface-attention rgba(255, 234, 138)
--p-decorative-one-icon rgba(126, 87, 0, 1) For use as a decorative icon color that is applied on a decorative surface.
--p-decorative-one-surface rgba(255, 201, 107, 1) For use as a decorative surface color.
--p-decorative-one-text rgba(61, 40, 0, 1) For use as a decorative text color that is applied on a decorative surface.
--p-decorative-two-icon rgba(175, 41, 78, 1) For use as a decorative icon color that is applied on a decorative surface.
--p-decorative-two-surface rgba(255, 196, 176, 1) For use as a decorative surface color.
--p-decorative-two-text rgba(73, 11, 28, 1) For use as a decorative text color that is applied on a decorative surface.
--p-decorative-three-icon rgba(0, 109, 65, 1) For use as a decorative icon color that is applied on a decorative surface.
--p-decorative-three-surface rgba(146, 230, 181, 1) For use as a decorative surface color.
--p-decorative-three-text rgba(0, 47, 25, 1) For use as a decorative text color that is applied on a decorative surface.
--p-decorative-four-icon rgba(0, 106, 104, 1) For use as a decorative icon color that is applied on a decorative surface.
--p-decorative-four-surface rgba(145, 224, 214, 1) For use as a decorative surface color.
--p-decorative-four-text rgba(0, 45, 45, 1) For use as a decorative text color that is applied on a decorative surface.
--p-decorative-five-icon rgba(174, 43, 76, 1) For use as a decorative icon color that is applied on a decorative surface.
--p-decorative-five-surface rgba(253, 201, 208, 1) For use as a decorative surface color.
--p-decorative-five-text rgba(79, 14, 31, 1) For use as a decorative text color that is applied on a decorative surface.

Typography

Learn more about typography.

Preview CSS name Value
Family --p-font-family-sans -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif
Family --p-font-family-mono ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace
Aa --p-font-size-1 12px
Aa --p-font-size-2 13px
Aa --p-font-size-3 14px
Aa --p-font-size-4 15px
Aa --p-font-size-5 16px
Aa --p-font-size-6 17px
Aa --p-font-size-7 20px
Aa --p-font-size-8 21px
Aa --p-font-size-9 24px
Aa --p-font-size-10 26px
Aa --p-font-size-11 27px
Aa --p-font-size-12 28px
Aa --p-font-size-13 42px
Bb --p-font-weight-regular 400
Bb --p-font-weight-medium 500
Bb --p-font-weight-semibold 600
Bb --p-font-weight-bold 700
Lorem Ipsum --p-line-height-1 16px
Lorem Ipsum --p-line-height-2 20px
Lorem Ipsum --p-line-height-3 24px
Lorem Ipsum --p-line-height-4 28px
Lorem Ipsum --p-line-height-5 32px
Lorem Ipsum --p-line-height-6 36px
Lorem Ipsum --p-line-height-7 44px

Spacing

Learn more about spacing.

Preview CSS name Value
--p-space-0 0
--p-space-025 1px
--p-space-05 2px
--p-space-1 4px
--p-space-2 8px
--p-space-3 12px
--p-space-4 16px
--p-space-5 20px
--p-space-6 24px
--p-space-8 32px
--p-space-10 40px
--p-space-12 48px
--p-space-16 64px
--p-space-20 80px
--p-space-24 96px
--p-space-28 112px
--p-space-32 128px

Shape

Preview CSS name Value
--p-border-radius-05 2px
--p-border-radius-1 4px
--p-border-radius-2 8px
--p-border-radius-3 12px
--p-border-radius-4 16px
--p-border-radius-5 20px
--p-border-radius-6 30px
--p-border-radius-base 3px
--p-border-radius-large 6px
--p-border-radius-half 50%
--p-border-width-1 1px
--p-border-width-2 2px
--p-border-width-3 3px
--p-border-base var(--p-border-width-1) solid var(--p-border-subdued)
--p-border-dark var(--p-border-width-1) solid var(--p-border)
--p-border-transparent var(--p-border-width-1) solid transparent
--p-border-divider var(--p-border-width-1) solid var(--p-divider)

Motion

Preview CSS name Value
--p-duration-0 0ms
--p-duration-50 50ms
--p-duration-100 100ms
--p-duration-150 150ms
--p-duration-200 200ms
--p-duration-250 250ms
--p-duration-300 300ms
--p-duration-350 350ms
--p-duration-400 400ms
--p-duration-450 450ms
--p-duration-500 500ms
--p-ease cubic-bezier(0.25, 0.1, 0.25, 1)
--p-ease-in cubic-bezier(0.42, 0, 1, 1)
--p-ease-out cubic-bezier(0, 0, 0.58, 1)
--p-ease-in-out cubic-bezier(0.42, 0, 0.58, 1)
--p-linear cubic-bezier(0, 0, 1, 1)

Depth

Preview CSS name Value
--p-shadow-transparent 0 0 0 0 transparent
--p-shadow-faint 0 1px 0 0 rgba(22, 29, 37, 0.05)
--p-shadow-base 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)
--p-shadow-deep 0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)
--p-shadow-button 0 1px 0 rgba(0, 0, 0, 0.05)
--p-shadow-top-bar 0 2px 2px -1px rgba(0, 0, 0, 0.15)
--p-shadow-card 0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)
--p-shadow-popover -1px 0 20px rgba(23, 24, 24, 0.05), 0 1px 5px rgba(0, 0, 0, 0.15)
--p-shadow-layer 0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)
--p-shadow-modal 0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)
--p-shadows-inset-button inset 0 -1px 0 rgba(0, 0, 0, 0.2)
--p-shadows-inset-button-pressed inset 0 1px 0 rgba(0, 0, 0, 0.15)

Z-index

Preview CSS name Value
--p-z-1 100
--p-z-2 400
--p-z-3 510
--p-z-4 512
--p-z-5 513
--p-z-6 514
--p-z-7 515
--p-z-8 516
--p-z-9 517
--p-z-10 518
--p-z-11 519
--p-z-12 520