Ripplestyles
Colors
We use a minimal palette to ensure meaningful color application for emphasis, tone, visual cues, and cohesive layouts. Our color combinations follow the WCAG 2.1 AA guidelines for minimum contrast ratios.
Ripple’s color palette has been improved to utilize color tokens. This enables Ripple components and patterns to become more consistent and scalable.
Intro to Design Tokens
What are Design Tokens
Design Tokens are reusable style values that document design decisions. This can include styles for colors, typography, layout, and spacing. Design tokens are reusable and intentionally named based on their usage.
Purpose
They serve as the source of truth for design decisions and, just as importantly, act as a shared language between design and development. Their purpose is to ensure unified and consistent product experiences by using the defined token rather than hardcoded values. This streamlines the work of building, maintaining, and scaling products that use our design system.
Token Naming Structure
- Category
- Concept
- Sub-Concept
- Property
- Variant
- State
- Mode
- Category: Category is the first level of the hierarchy and represents the visual element of design that the token is referring to, such as color, font, or size.
- Concept: The next level, Concept, can be an abstract concept for behavior or function such as interactive or brand, or point to a UI element such as button, chart, and timepicker.
- Sub-concept: Some tokens (usually ones that point to UI elements) need an additional description by using the sub-concept level when the token points to something more specific within a given concept, such as chart-label or timepicker-toggle.
- Property: All tokens need the property level to indicate what specific part of the element the token will apply to, such as background, border, or text.
- Variant: The variant level is used to distinguish additional use cases when needed, such as primary or secondary.
- State: State affects the property based on different use cases. This usually refers to interactivity such as hover, selected, or disabled.
- Mode: Some tokens need to change based on where in the product they are used. For instance, Watermark has an on-dark mode which adjusts the value for the token on dark backgrounds.
Naming a Design Token
- Category
- Color
- Concept
- Button
- Property
- Background
- Variant
- Primary
- State
- Hover
- Mode
- On-Dark
Color design tokens always begin with “color” as the category.
Color Tokens
The Design System team defines all the color tokens to be used throughout Ripple. Each color token begins with “wmcolor” so that our color tokens are unique.
Global Tokens
To get started we defined the global color tokens to serve as the foundation for all colors by directly referencing color hex codes. These include all the colors documented on Global Colors.
Alias Tokens
Any token referring to another token is known as an alias token. Alias tokens serve the rest of the component specific color tokens and are named purposefully so it is clear where the token should be applied. This ensures the color is being used properly and consistently. Always use alias tokens instead of using global tokens when setting a color value. All available alias tokens can be seen in the Color Token Library.
Component Color Tokens
Component tokens should only be used for the specific component they are referencing. These tokens use the alias tokens to define the color. That way if a change is made on the alias token, that change will affect the component token. This enables us to efficiently scale and seamlessly make updates across components, without having to directly touch the component token. Whenever a new component is created by the Design Systems team, new component color tokens are also created to properly define the new component.
Applying the Tokens to the Component
How to Use Color Tokens
It is important to correctly apply color tokens for both designers and developers to maintain unified product experiences. These tokens were defined for a specific purposes and misusing them will create inconsistencies that could cause usability and accessibility issues.
Designers
All alias and global color tokens have been added to the Colors & Styles Figma file. Using the library of colors enables the Developers to reference the proper color token when developing the designs.
How to apply tokens
All color tokens can be applied using the styles panel. Use these colors to apply to design elements that are not pre-created reusable components. Reusable components already have component specific tokens applied and, just like developed components, these color tokens should not be reused outside of the components they are tied to.
Requesting Changes & Updates
To update tokens or add additional tokens, designers should follow the same process as requesting new Figma components by reaching out to the Design Systems team or creating a request ticket (link opens in new window). The Design Systems designer can recommend the best color token to use until the updates can be made.
Developers
How to apply tokens
The color tokens are available as CSS variables in a file on the Watermark CDN that will serve as the source of truth. The latest version of the file will be listed on the Ripple homepage.
If a designer makes use of color tokens, developers can use the inspection mode of Abstract or Figma to identify it by the color swatch name or style value.
Filter Tokens
The UI Element the color will be applied to
The interactive state of the component
Interactive
These tokens serve as alias tokens for all interactive components and adjust according to the product's theme.
| Token Name | Default | Neutral | Usage |
|---|---|---|---|
| wmcolor-link-text | Hex value: #575195 |
Hex value: #366DAE |
Text links on light backgrounds Text Link, Text |
| wmcolor-interactive | Hex value: #575195 |
Hex value: #366DAE |
Indicates an element is interactive Buttons, Actions, Backgrounds, Border |
| wmcolor-interactive-hover | Hex value: #464177 |
Hex value: #244974 |
Hover color for interactive elements that use wmcolor-interactive Buttons, Backgrounds, Hover |
| wmcolor-interactive-ondark | Hex value: #FFFFFF |
Hex value: #FFFFFF |
Indicates an element is interactive on dark backgrounds Buttons, Actions, Backgrounds, Text, On-Dark |
| wmcolor-interactive-hover-ondark | Hex value: #E9E7EC |
Hex value: #E9E7EC |
Hover color for interactive elements on dark backgrounds that use wmcolor-interactive-hover-ondark Buttons, Actions, Backgrounds, On-Dark, Hover |
| wmcolor-interactive-disabled | Hex value: #6B6B6B |
Hex value: #6B6B6B |
Indicates an interactive element is disabled Buttons, Links, Text, Backgrounds, Disabled |
| wmcolor-interactive-disabled-ondark | Hex value: #A6A6A6 |
Hex value: #A6A6A6 |
Indicates an interactive element is disabled on dark backgrounds Buttons, Links, Text, Backgrounds, On-Dark, Disabled |
| wmcolor-interactive-text | Hex value: #FFFFFF |
Hex value: #FFFFFF |
Text that is on top of interactive background colors Text, Primary Button |
| wmcolor-interactive-text-ondark | Hex value: #575195 |
Hex value: #366DAE |
Text that is on top of interactive background colors that use wmcolor-interactive-ondark Text, Primary Button, On-Dark |
| wmcolor-interactive-text-selected | Hex value: #FFFFFF |
Hex value: #FFFFFF |
Text on interactive background colors in a selected state Date-Picker, Text, Selected |
| wmcolor-interactive-text-disabled-ondark | Hex value: #353B48 |
Hex value: #353B48 |
Text on disabled interactive background colors Primary Button, Text, On-Dark, Disabled |
| wmcolor-interactive-background-hover | Hex value: #F4F4F4 |
Hex value: #F4F4F4 |
Hover color for interactive elements that use a light background Navigation, Select, Time-Picker, Date-Picker, Tag-Input, Backgrounds, Hover |
| wmcolor-interactive-background-selected | Hex value: #EEEDF7 |
Hex value: #ECEFF3 |
Indicates a selected state on light backgrounds Select, Navigator, Backgrounds, Selected |
| wmcolor-interactive-background-highlight | Hex value: #DDF1F2 |
Hex value: #DDF1F2 |
Indicates a highlighted state for content on light backgrounds Table-Row, Tag-Input, Line-Chart, Backgrounds, Highlight |
| wmcolor-interactive-background-disabled | Hex value: #F4F4F4 |
Hex value: #F4F4F4 |
Indicates that content is disabled on light backgrounds Inputs, Backgrounds, Disabled |
| wmcolor-interactive-background-focus | Hex value: #DBD9EF |
Hex value: #E1E9F3 |
Focus color for interactive elements that use a light background Navigator, Select, Backgrounds, Focus |
| wmcolor-interactive-focus | Hex value: #B36DCD |
Hex value: #667EED |
Focus color on interactive elements All interactive components, Border, Focus |
| wmcolor-search-results-background | Hex value: #A550C3 |
Hex value: #4D6AEA |
Background color of text that matches search results Search, Highlight |
| wmcolor-interactive-delete | Hex value: #C0392B |
Hex value: #C0392B |
Color for delete actions Delete Buttons, Backgrounds, Text |
| wmcolor-interactive-delete-hover | Hex value: #9A2E22 |
Hex value: #9A2E22 |
Hover color for delete actions Delete Buttons, Backgrounds, Hover |
| wmcolor-interactive-negative | Hex value: #CC4C3E |
Hex value: #CC4C3E |
Color for actions to convey a negative connotation Negative Buttons, Backgrounds |
| wmcolor-interactive-negative-hover | Hex value: #A33D32 |
Hex value: #A33D32 |
Hover color for actions that convey a negative connotation Negative Buttons, Backgrounds, Hover |
| wmcolor-interactive-positive | Hex value: #15868D |
Hex value: #15868D |
Color for actions to convey a positive connotation Positive Buttons, Backgrounds |
| wmcolor-interactive-positive-hover | Hex value: #116B71 |
Hex value: #116B71 |
Hover color for actions that convey a positive connotation Positive Buttons, Backgrounds, Hover |
Layout
These tokens serve as alias tokens for most layout components and do not change based on the product's theme.
| Token Name | Color | Usage |
|---|---|---|
| wmcolor-background | Hex value: #FFFFFF |
Color for light content backgrounds Most Containers, Inputs, Background |
| wmcolor-background-accent | Hex value: #F4F4F4 |
Use to differentiate sections of content on light backgrounds Callout Messages, Cards, Backgrounds |
| wmcolor-page-background | Hex value: #FAFAFA |
Used for the main background behind content on product pages Product background behind content, Background |
| wmcolor-card-background | Hex value: #FFFFFF |
Color for card containers Cards, Background |
| wmcolor-callout-background | Hex value: #E9E7EC |
Use as the background on callout messages to highlight important information Callout Messages, Backgrounds |
| wmcolor-background-readonly | Hex value: #FAFAFA |
Indicates a read-only state for light backgrounds File-List, Inputs, Navigator, Tag-Input, Background, Read-only |
| wmcolor-background-dark | Hex value: #353B48 |
Color for dark content backgrounds. Use on-dark colors for text and icons on this background. Dark Immersive Header, Snackbar, Background |
| wmcolor-background-dark-secondary | Hex value: #454B57 |
Color for secondary headers that are paired with headers using wmcolor-background-dark Secondary header to Dark Immersives, Background |
| wmcolor-background-disabled | Hex value: #F4F4F4 |
Indicates that content is disabled on light backgrounds Inputs, Background, Disabled |
| wmcolor-background-highlight | Hex value: #DDF1F2 |
Indicates a highlighted state for content on light backgrounds Table-Row, Tag-Input, Line-Chart, Background, Highlight |
| wmcolor-border | Hex value: #D2D0D4 |
Use as the main border color for divider lines File-List, Table, Charts, Border |
| wmcolor-border-light | Hex value: #F4F4F4 |
Use for borders that need a lighter color than the main border color Date-Picker, Select, Border |
| wmcolor-border-dark | Hex value: #4A4A4A |
Use for borders that need a darker color than the main border color Inputs, Border |
| wmcolor-border-focus | Hex value: #19A1A9 |
Use for focus states that have a border Inputs, Table, Border, Focus |
| wmcolor-table-row-background | Hex value: #FFFFFF |
Background color for tables Table, Date-Picker, Tag-Input, Background |
| wmcolor-table-altrow-background | Hex value: #FAFAFA |
Background color for alternate table rows Table, Tag-Input, Background |
| wmcolor-table-row-background-selected | Hex value: #DDF1F2 |
Background color for selected table rows Table, Tag-Input, Background, Selected |
| wmcolor-table-row-border | Hex value: #D2D0D4 |
Use as the border color for table rows. This color references wmcolor-border. Table, Border |
| wmcolor-table-row-border-selected | Hex value: #19A1A9 |
Use as the border color for selected table rows. This color references wmcolor-border-focus. Table, Tag-Input, Border, Selected |
| wmcolor-option-background | Hex value: #FFFFFF |
Background color for menu items Action-Menu, Select, Tag-Input, Time-Picker, Background |
| wmcolor-option-background-hover | Hex value: #F4F4F4 |
Indicates a hover state on menu items Action-Menu, Select, Tag-Input, Time-Picker, Background, Hover |
| wmcolor-option-background-selected | Hex value: #EEEDF7 |
Indicates a selected state on menu items Select, Background, Selected |
| wmcolor-option-background-disabled | Hex value: #F4F4F4 |
Indicates a disabled state on menu items Action-Menu, Select, Background, Disabled |
| wmcolor-option-border | Hex value: #F4F4F4 |
Border color between menu items. This color references wmcolor-border-light Action-Menu, Select, Tag-Input, Time-Picker, Border |
| wmcolor-option-text | Hex value: #4A4A4A |
Text color for menu items Action-Menu, Select, Tag-Input, Time-Picker, Text |
| wmcolor-option-text-disabled | Hex value: #6B6B6B |
Indicate a disabled state for menu item text Action-Menu, Select, Tag-Input, Text, Disabled |
| wmcolor-overlay |
Use for overlay backgrounds that cover content to bring focus to modals, dialogs, and panels #191919 at 40% Opacity |
|
| wmcolor-progress | Hex value: #15868D |
Use for progress indicators File-List, Background |
Layout with Neutral Theme
These tokens serve as alias tokens for layout components and adjust according to the product's theme.
| Token Name | Default | Neutral | Usage |
|---|---|---|---|
| wmcolor-background-selected | Hex value: #EEEDF7 |
Hex value: #ECEFF3 |
Indicates a selected state on menu items Select, Background, Selected |
| wmcolor-table-header-background | Hex value: #E9E7EC |
Hex value: #ECEFF3 |
Background color for table headers Table, Date-Picker, Tag-Input, Background |
| wmcolor-option-background-focus | Hex value: #DBD9EF |
Hex value: #E1E9F3 |
Indicates a focus state on menu items Select, Time-Picker, Background, Focus |
Text
These tokens should be used for text elements.
| Token Name | Color | Usage |
|---|---|---|
| wmcolor-text | Hex value: #4A4A4A |
Main text color All default text, Text |
| wmcolor-text-ondark | Hex value: #FFFFFF |
Main text color on dark backgrounds All default text, Text, On-Dark |
| wmcolor-text-readonly | Hex value: #6B6B6B |
Indicates a read-only state for text Inputs, Text, Read-Only |
Icon
These tokens should be used for icon elements.
| Token Name | Color | Usage |
|---|---|---|
| wmcolor-icon | Hex value: #4A4A4A |
This pairs with the default text color wmcolor-text All default icons, Icon |
| wmcolor-icon-ondark | Hex value: #FFFFFF |
This pairs with the default text color wmcolor-text-ondark for use on dark backgrounds All default icons, Icon, On-Dark |
| wmcolor-icon-accent | Hex value: #6B6B6B |
Supplemental icons paired with other elements Icon, Read-Only |
Semantic
These tokens are referenced by other alias tokens and provide the base for semantic color usage that represent a positive or negative connotation.
| Token Name | Color | Usage |
|---|---|---|
| wmcolor-text-positive | Hex value: #088000 |
Text color for positive messages. This color references wmcolor-positive. Charts, Text |
| wmcolor-positive | Hex value: #088000 |
Alias token to indicate a positive connotation File-List, Icon |
| wmcolor-positive-dark | Hex value: #054D00 |
Use for text or icons on backgrounds using wmcolor-background-positive Text, Icon |
| wmcolor-background-positive | Hex value: #DAECD9 |
Background color for content areas that have a positive connotation Backgrounds |
| wmcolor-text-required | Hex value: #C0392B |
Use for required messages, usually on form components. This color references wmcolor-negative. Text |
| wmcolor-text-negative | Hex value: #C0392B |
Use for text to indicate a negative message. This color references wmcolor-negative. Charts, Text |
| wmcolor-text-error | Hex value: #C0392B |
Use for error messages. This color references wmcolor-negative. Form Component Errors, Text, Error |
| wmcolor-negative | Hex value: #C0392B |
Alias token to indicate a negative connotation Text, Icon |
| wmcolor-background-error | Hex value: #F6E1DF |
Background color for content areas that contain error messages File-List, Background, Error |
| wmcolor-border-error | Hex value: #C0392B |
Use for error states that have a border. This color references wmcolor-negative. File-List, Inputs, Border, Error |
Brand
Brand tokens are referenced by other alias tokens to provide the foundation for the themes, either the periwinkle purple for our Watermark branded products set as default, or the mom jeans blue for neutral branded products.
| Token Name | Default | Neutral | Usage |
|---|---|---|---|
| wmcolor-brand | Hex value: #575195 |
Hex value: #366DAE |
This is the main Watermark brand color used in various areas Alias token for wmcolor-interactive |
| wmcolor-brand-dark | Hex value: #2E1B46 |
Hex value: #18314E |
This is the secondary main Watermark brand color used in various areas Navigator, Background |
No tokens match the applied filters
Try selecting different filter options to find tokens
Global colors include all the colors we support and provide the foundation for all our color token definitions. Expand each section to find the color token to use to apply the color.
Need a new color or variation of an existing color? Contact the Ripple Team.
Background & Text
These colors are mostly used for background elements and text.
| Color | Hex | Color combinations | |
|---|---|---|---|
|
White
|
#FFFFFF |
|
|
Color Tokens Available |
|||
|
Snow
|
#FAFAFA |
|
|
Color Tokens Available |
|||
|
White Smoke
|
#F4F4F4 |
|
|
Color Tokens Available |
|||
|
Pale Lilac Gray
|
#E9E7EC |
|
|
Color Tokens Available |
|||
|
Pale Lilac Gray Dark
|
#D2D0D4 |
|
|
Color Tokens AvailableLayout |
Charcoal
|
#4A4A4A |
|
Color Tokens Available |
|||
|
Asphalt
|
#353B48 |
|
|
Color Tokens AvailableInteractiveLayout |
|||
|
Meteorite
|
#454B57 |
|
|
Color Tokens Available |
|||
|
Midnight
|
#2E1B46 |
|
|
Color Tokens AvailableBrand |
|||
Interactive
These colors are used for elements that can be interacted with.
| Color | Hex | Color combinations | |
|---|---|---|---|
|
Periwinkle
|
#575195 |
|
|
Color Tokens AvailableBrand |
|||
|
Periwinkle Dark
|
#464177 |
|
|
Color Tokens AvailableInteractive |
|||
|
Orchid
|
#B36DCD |
|
|
Color Tokens AvailableInteractive |
|||
|
Orchid Dark
|
#A550C3 |
|
|
Color Tokens AvailableInteractive |
|||
|
Gray
|
#6B6B6B |
|
|
Color Tokens AvailableIconInteractiveLayout |
|||
|
Gray Light
|
#A6A6A6 |
|
|
Color Tokens AvailableInteractive |
|||
|
Cyan
|
#19A1A9 |
|
|
Color Tokens Available |
|||
|
Cyber
|
#DDF1F2 |
|
|
Color Tokens Available |
|||
|
Pale Violet
|
#EEEDF7 |
|
|
Color Tokens Available |
|||
|
Quartz
|
#DBD9EF |
|
|
Color Tokens AvailableInteractive |
|||
Semantic
These colors should be used where it is important to convey a positive or negative meaning.
| Color | Hex | Color combinations | |
|---|---|---|---|
|
Forest Light
|
#DAECD9 |
|
|
Color Tokens AvailableSemantic |
|||
|
Forest
|
#088000 |
|
|
Color Tokens Available |
|||
|
Forest Dark
|
#054D00 |
|
|
Color Tokens AvailableSemantic |
|||
|
Firetruck Light
|
#F6E1DF |
|
|
Color Tokens AvailableSemantic |
|||
|
Firetruck
|
#C0392B |
|
|
Color Tokens Available |
|||
|
Firetruck Dark
|
#9A2E22 |
|
|
Color Tokens AvailableInteractive |
|||
|
Cyan Dark
|
#15868D |
|
|
Color Tokens AvailableInteractiveLayout |
|||
|
Cyan Darker
|
#116B71 |
|
|
Color Tokens AvailableInteractive |
|||
|
Salmon Dark
|
#CC4C3E |
|
|
Color Tokens AvailableInteractive |
|||
|
Salmon Darker
|
#A33D32 |
|
|
Color Tokens AvailableInteractive |
|||
Neutral Colors
These colors are used for all interactive elements and backgrounds in products that have custom institution colors and need non-branded neutral colors.
| Color | Hex | Color combinations | |
|---|---|---|---|
|
Mom Jeans
|
#366DAE |
|
|
Color Tokens AvailableBrand |
|||
|
Dad Jeans
|
#244974 |
|
|
Color Tokens AvailableInteractive |
|||
|
Blueberry
|
#667EED |
|
|
Color Tokens AvailableInteractive |
|||
|
Blueberry Dark
|
#4D6AEA |
|
|
Color Tokens AvailableInteractive |
|||
|
Linen
|
#E1E9F3 |
|
|
Color Tokens AvailableInteractive |
|||
|
Sleet Lighter
|
#ECEFF3 |
|
|
Color Tokens AvailableLayout |
|||
|
Cowboy Jeans
|
#18314E |
|
|
Color Tokens AvailableBrand |
|||
Data visualization colors are separate from our global colors and color tokens. These colors can be broken into 3 categorical palettes and have specific uses for implementation.
Categorical Data
The categorical (or qualitative) data palette is used to distinguish 2 to 6 states of data. Use these colors for charts that have data belonging to the same category. These colors have associated meaning and can be used in any order.
All of our Donut Chart Components and most of the bar charts except bar chart 7 use these colors.
| Color | Hex | Color meaning |
|---|---|---|
|
Gray
|
#6B6B6B | Use for an incomplete, unknown, or not started state |
|
Periwinkle
|
#575195 | Use for a neutral connotation |
|
Lavender
|
#8B86CA | Use for a neutral connotation |
|
Midnight
|
#2E1B46 | Use for a neutral connotation |
|
Cyan
|
#19A1A9 | Use for a positive connotation |
|
Salmon
|
#FF5F4E | Use for negative connotation |
Discrete Categorical Data
The discrete categorical data palette is used to distinguish 2 to 7 states of data that do not have an inherent correlation. It is reccomended to use the colors in the following order so that each color has maximum color contrast from one another.
Bar Chart 7 and the Line Chart Component use this color palette.
| Color | Hex |
|---|---|
|
Lavender
|
#8B86CA |
|
Midnight
|
#2E1B46 |
|
Tobias Blue
|
#0089E4 |
|
Forest
|
#088000 |
|
Orangutan
|
#EA8500 |
|
Salmon Dark
|
#CC4C3E |
|
Mom Jeans
|
#366DAE |
Sequential
Sequential palettes are used for data that is related and needs to display increasing or decreasing order. This is distinguished by using darker hues (shades) and lighter hues (tints) of the same color.
Some of these palettes are being used in the new map tiler data visualization pattern. Reference these colors whenever the need arrises. 2 to 7 colors can be chosen based on the use case.
Colors must meet a ratio of 3:1 to meet Web Content Accessibility Guidelines' AA standards for graphical objects. Any color that is below this ratio and used on it’s own must have an outline that does meet the standard. Reference the color contrast ratio against white noted under each color.
Salmon Palette
-
#FFE7E4
1.2:1
-
#FFCDC8
1.4:1
-
#FFE7E4
3:1
-
#CC4C3E
4.5:1
-
#A33D32
6.4:1
-
#732B23
10:1
-
#59211B
12:1
Cyan Palette
-
#DDF1F2
1.2:1
-
#B8E2E4
1.4:1
-
#19A1A9
3.1:1
-
#15868D
4.4:1
-
#116B71
6.2:1
-
#0B484C
10.3:1
-
#09383B
12.8:1
Purple Palette
-
#EEEDF7
1.2:1
-
#DBD9EF
1.4:1
-
#8B86CA
3.3:1
-
#575195
7:1
-
#464177
9.2:1
-
#3C2D60
12:1
-
#2E1B46
15.4:1
Mom Jeans Palette
-
#E1E9F3
1.2:1
-
#C1D2E6
1.5:1
-
#9BB6D7
2:1
-
#366DAE
5.3:1
-
#244974
9.2:1
-
#18314E
13.2:1
-
#13263D
15.3:1
Sleet Palette
-
#ECEFF3
1.1:2
-
#D7DFE6
1.3:1
-
#7F97AD
3:1
-
#5F7182
5:1
-
#4C5B68
7:1
-
#39444E
10:1
-
#2C353D
12.5:1
