The values described on this page correspond to Pigment default blue theme.
Design tokens
Learn about the single source of truth to name and store design decisions in a Pigment application.
What are design tokens ?
Design tokens are name and value pairings that represent small, repeatable design decisions. A token can be a color, shadow or font style designed for a specific need.
For example, instead of choosing one of many shades of green for an icon, we can apply a design token that is consistent with all similar usages across our application.
How to use them ?
Pigment's design tokens are defined in the preset for Tailwind CSS and exposed as CSS custom properties (aka CSS variables), meaning you can use them with any styling solution.
Since Pigment is a Tailwind-first library, all the tokens described on this page are available in Tailwind's utility classes.
Colors
The following tokens values refers to the Pigment color system, please look at this page to get the raw color values.
Content
Content colors are used for texts and icons.
| Token and description | Light value | Dark value |
|---|---|---|
| colors.content.DEFAULT Use for primary text, such as body copy, headings, labels, active breadcrumbs. | slate.800 | slate.100 |
| colors.content.subtle Use for secondary text, such as input description, breadcrumbs. | slate.700 | slate.300 |
| colors.content.subtler Use for tertiary text, such as input placeholder, table header. | slate.600 | slate.400 |
| colors.content.subtlest Use for breadcrumb and stepper separators. | slate.500 | slate.500 |
| colors.content.disabled Use for text color of elements in a disabled state. | slate.400 | slate.600 |
| colors.content.link.DEFAULT Use for links, in a default state. | blue.600 | blue.400 |
| colors.content.link.hover Use for links, in a hovered state. | blue.700 | blue.300 |
| colors.content.link.active Use for links, in an active state. | blue.800 | blue.200 |
| colors.content.primary Use for text that reinforces your brand. | blue.600 | blue.400 |
| colors.content.success Use for text to communicate a favorable outcome. | green.600 | slate.400 |
| colors.content.info Use for informative text. | blue.600 | blue.400 |
| colors.content.warning Use for text to emphasize caution. | amber.700 | amber.300 |
| colors.content.danger Use for critical text. | red.600 | red.400 |
| colors.content.discovery Use for text to emphasize change or something new. | violet.600 | violet.400 |
| colors.content.onPrimary Use for text on colors.surface.primary backgrounds. | white | slate.950 |
| colors.content.onNeutral Use for text on colors.surface.neutral backgrounds. | white | slate.950 |
| colors.content.onSuccess Use for text on colors.surface.success backgrounds. | white | sage.950 |
| colors.content.onInfo Use for text on colors.surface.info backgrounds. | white | slate.950 |
| colors.content.onWarning Use for text on colors.surface.warning backgrounds. | sand.900 | sand.950 |
| colors.content.onDanger Use for text on colors.surface.danger backgrounds. | white | marron.950 |
| colors.content.onDiscovery Use for text on colors.surface.discovery backgrounds. | white | mauve.950 |
| colors.content.onPrimarySubtle Use for text on colors.surface.primary.subtle backgrounds. | blue.800 | blue.200 |
| colors.content.onNeutralSubtle Use for text on colors.surface.neutral.subtle backgrounds. | slate.800 | slate.200 |
| colors.content.onSuccessSubtle Use for text on colors.surface.success.subtle backgrounds. | green.800 | green.200 |
| colors.content.onInfoSubtle Use for text on colors.surface.info.subtle backgrounds. | blue.800 | blue.200 |
| colors.content.onWarningSubtle Use for text on colors.surface.warning.subtle backgrounds. | amber.800 | amber.200 |
| colors.content.onDangerSubtle Use for text on colors.surface.danger.subtle backgrounds. | red.800 | red.200 |
| colors.content.onDiscoverySubtle Use for text on colors.surface.discovery.subtle backgrounds. | violet.800 | violet.200 |
Surface
Surface colors are mainly used for backgrounds.
| Token and description | Light value | Dark value |
|---|---|---|
| colors.surface.DEFAULT Use as the primary background for UI elements, such as cards. | white | slate.950 |
| colors.surface.body Use as the background for the body element. | white | slate.950 |
| colors.surface.overlay Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus. | white | slate.900 |
| colors.surface.disabled Use for background color of elements in a disabled state. | slate.200 | slate.800 |
| colors.surface.tooltip Use for background color of tooltips. | slate.900 | slate.50 |
| colors.surface.subtle.DEFAULT Use when you need to separate a specific layer from the surface color, also used for default button in hovered state. | slate.50 | slate.900 |
| colors.surface.subtle.hover Use for background of colors.surface.subtle elements, in a hovered state. | slate.100 | slate.800 |
| colors.surface.subtle.active Use for background of colors.surface.subtle elements, in an active state. | slate.200 | slate.700 |
| colors.surface.primary.DEFAULT Use for the background of elements used to reinforce your brand. | blue.600 | blue.400 |
| colors.surface.primary.hover Use for the background of elements used to reinforce your brand, in a hovered state. | blue.700 | blue.300 |
| colors.surface.primary.active Use for the background of elements used to reinforce your brand, in an active state. | blue.800 | blue.200 |
| colors.surface.primary.subtle.DEFAULT Use for the background of elements used to reinforce your brand with low emphasis. | blue.100 | blue.900 |
| colors.surface.primary.subtle.hover Use for the background of elements used to reinforce your brand with low emphasis, in a hovered state. | blue.200 | blue.800 |
| colors.surface.primary.subtle.active Use for the background of elements used to reinforce your brand with low emphasis, in an active state. | blue.300 | blue.700 |
| colors.surface.neutral.DEFAULT A vibrant background option for neutral UI elements. | slate.600 | slate.400 |
| colors.surface.neutral.hover A vibrant background option for neutral UI elements, in a hovered state. | slate.700 | slate.300 |
| colors.surface.neutral.active A vibrant background option for neutral UI elements, in an active state. | slate.800 | slate.200 |
| colors.surface.neutral.subtle.DEFAULT Use for backgrounds of neutral UI elements. | slate.100 | slate.900 |
| colors.surface.neutral.subtle.hover Use for backgrounds of UI elements, in a hovered state. | slate.200 | slate.800 |
| colors.surface.neutral.subtle.active Use for backgrounds of UI elements, in an active state. | slate.300 | slate.700 |
| colors.surface.success.DEFAULT A vibrant background option for communicating a favorable outcome. | green.600 | green.400 |
| colors.surface.success.hover A vibrant background option for communicating a favorable outcome, in a hovered state. | green.700 | green.300 |
| colors.surface.success.active A vibrant background option for communicating a favorable outcome, in an active state. | green.800 | green.200 |
| colors.surface.success.subtle.DEFAULT Use for backgrounds communicating a favorable outcome. | green.100 | green.900 |
| colors.surface.success.subtle.hover Use for backgrounds communicating a favorable outcome, in a hovered state. | green.200 | green.800 |
| colors.surface.success.subtle.active Use for backgrounds communicating a favorable outcome, in an active state. | green.300 | green.700 |
| colors.surface.info.DEFAULT A vibrant background option for communicating information. | blue.600 | blue.400 |
| colors.surface.info.hover A vibrant background option for communicating information, in a hovered state. | blue.700 | blue.300 |
| colors.surface.info.active A vibrant background option for communicating information, in an active state. | blue.800 | blue.200 |
| colors.surface.info.subtle.DEFAULT Use for backgrounds communicating information. | blue.100 | blue.900 |
| colors.surface.info.subtle.hover Use for backgrounds communicating information, in a hovered state. | blue.200 | blue.800 |
| colors.surface.info.subtle.active Use for backgrounds communicating information, in an active state. | blue.300 | blue.700 |
| colors.surface.warning.DEFAULT A vibrant background option for communicating caution. | amber.400 | amber.500 |
| colors.surface.warning.hover A vibrant background option for communicating caution, in a hovered state. | amber.500 | amber.400 |
| colors.surface.warning.active A vibrant background option for communicating caution, in an active state. | amber.600 | amber.300 |
| colors.surface.warning.subtle.DEFAULT Use for backgrounds communicating caution. | amber.100 | amber.900 |
| colors.surface.warning.subtle.hover Use for backgrounds communicating caution, in a hovered state. | amber.200 | amber.800 |
| colors.surface.warning.subtle.active Use for backgrounds communicating caution, in an active state. | amber.300 | amber.700 |
| colors.surface.danger.DEFAULT A vibrant background option for communicating critical information. | red.600 | red.400 |
| colors.surface.danger.hover A vibrant background option for communicating critical information, in a hovered state. | red.700 | red.300 |
| colors.surface.danger.active A vibrant background option for communicating critical information, in an active state. | red.800 | red.200 |
| colors.surface.danger.subtle.DEFAULT Use for backgrounds communicating critical information. | red.100 | red.900 |
| colors.surface.danger.subtle.hover Use for backgrounds communicating critical information, in a hovered state. | red.200 | red.800 |
| colors.surface.danger.subtle.active Use for backgrounds communicating critical information, in an active state. | red.300 | red.700 |
| colors.surface.discovery.DEFAULT A vibrant background option communicating change or something new. | violet.600 | violet.400 |
| colors.surface.discovery.hover A vibrant background option communicating change or something new, in a hovered state. | violet.700 | violet.300 |
| colors.surface.discovery.active A vibrant background option communicating change or something new, in an active state. | violet.800 | violet.200 |
| colors.surface.discovery.subtle.DEFAULT Use for backgrounds communicating change or something new. | violet.100 | violet.900 |
| colors.surface.discovery.subtle.hover Use for backgrounds communicating change or something new, in a hovered state. | violet.200 | violet.800 |
| colors.surface.discovery.subtle.active Use for backgrounds communicating change or something new, in an active state. | violet.300 | violet.700 |
Line
Line colors are used for borders, and dividers.
| Token and description | Light value | Dark value |
|---|---|---|
| colors.line.DEFAULT Default border color. | slate.200 | slate.800 |
| colors.line.disabled Use for border of elements in a disabled state. | slate.200 | slate.800 |
| colors.line.primary Use for borders or visual indicators of elements that reinforce your brand. | blue.500 | blue.500 |
| colors.line.neutral A neutral border option that passes min 3:1 contrast ratios. | slate.500 | slate.500 |
| colors.line.success Use for borders communicating a favorable outcome. | green.500 | green.500 |
| colors.line.info Use for borders communicating information. | blue.500 | blue.500 |
| colors.line.warning Use for borders communicating caution. | amber.500 | amber.500 |
| colors.line.danger Use for borders communicating critical information. | red.500 | red.500 |
| colors.line.discovery Use for borders communicating change or something new. | violet.500 | violet.500 |
| colors.ring Use for focus ring. | blue.500 | blue.500 |