styles

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.

Color Tokens Color Token Library Global Colors Data Visualization

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

  1. Category
  2. Concept
  3. Sub-Concept
  4. Property
  5. Variant
  6. State
  7. Mode
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Variant: The variant level is used to distinguish additional use cases when needed, such as primary or secondary.
  6. State: State affects the property based on different use cases. This usually refers to interactivity such as hover, selected, or disabled.
  7. 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.

#575195
Color Hex
is the value for
wm-color-periwinkle
Global Color Token

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.

wm-color-periwinkle
Global Color Token
is referenced by
wmcolor-brand
Alias Token
is referenced by
wmcolor-interactive
Alias Token

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

wmcolor-interactive
Alias Token
is referenced by
wmcolor-button-background-primary
Component Token
results in the following button with the periwinkle background

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.

Color tokens in Figma

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.

How to use these colors

The color tokens documented here only include the alias color tokens available for use for UI elements that are not Ripple components. Use the following information to find the token names and understand how to properly apply them.

Can’t find the color for your use case? Contact the Ripple Team.

Filter Tokens

Select an Option Background Border Icon Text

The UI Element the color will be applied to

Select an Option Default Disabled Error Focus Hover Read-Only Required Selected

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

Text links on light backgrounds

Text Link, Text
wmcolor-interactive

Indicates an element is interactive

Buttons, Actions, Backgrounds, Border
wmcolor-interactive-hover

Hover color for interactive elements that use wmcolor-interactive

Buttons, Backgrounds, Hover
wmcolor-interactive-ondark

Indicates an element is interactive on dark backgrounds

Buttons, Actions, Backgrounds, Text, On-Dark
wmcolor-interactive-hover-ondark

Hover color for interactive elements on dark backgrounds that use wmcolor-interactive-hover-ondark

Buttons, Actions, Backgrounds, On-Dark, Hover
wmcolor-interactive-disabled

Indicates an interactive element is disabled

Buttons, Links, Text, Backgrounds, Disabled
wmcolor-interactive-disabled-ondark

Indicates an interactive element is disabled on dark backgrounds

Buttons, Links, Text, Backgrounds, On-Dark, Disabled
wmcolor-interactive-text

Text that is on top of interactive background colors

Text, Primary Button
wmcolor-interactive-text-ondark

Text that is on top of interactive background colors that use wmcolor-interactive-ondark

Text, Primary Button, On-Dark
wmcolor-interactive-text-selected

Text on interactive background colors in a selected state

Date-Picker, Text, Selected
wmcolor-interactive-text-disabled-ondark

Text on disabled interactive background colors

Primary Button, Text, On-Dark, Disabled
wmcolor-interactive-background-hover

Hover color for interactive elements that use a light background

Navigation, Select, Time-Picker, Date-Picker, Tag-Input, Backgrounds, Hover
wmcolor-interactive-background-selected

Indicates a selected state on light backgrounds

Select, Navigator, Backgrounds, Selected
wmcolor-interactive-background-highlight

Indicates a highlighted state for content on light backgrounds

Table-Row, Tag-Input, Line-Chart, Backgrounds, Highlight
wmcolor-interactive-background-disabled

Indicates that content is disabled on light backgrounds

Inputs, Backgrounds, Disabled
wmcolor-interactive-background-focus

Focus color for interactive elements that use a light background

Navigator, Select, Backgrounds, Focus
wmcolor-interactive-focus

Focus color on interactive elements

All interactive components, Border, Focus
wmcolor-interactive-delete

Color for delete actions

Delete Buttons, Backgrounds, Text
wmcolor-interactive-delete-hover

Hover color for delete actions

Delete Buttons, Backgrounds, Hover
wmcolor-interactive-negative

Color for actions to convey a negative connotation

Negative Buttons, Backgrounds
wmcolor-interactive-negative-hover

Hover color for actions that convey a negative connotation

Negative Buttons, Backgrounds, Hover
wmcolor-interactive-positive

Color for actions to convey a positive connotation

Positive Buttons, Backgrounds
wmcolor-interactive-positive-hover

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

Color for light content backgrounds

Most Containers, Inputs, Background
wmcolor-background-accent

Use to differentiate sections of content on light backgrounds

Callout Messages, Cards, Backgrounds
wmcolor-page-background

Used for the main background behind content on product pages

Product background behind content, Background
wmcolor-card-background

Color for card containers

Cards, Background
wmcolor-callout-background

Use as the background on callout messages to highlight important information

Callout Messages, Backgrounds
wmcolor-background-readonly

Indicates a read-only state for light backgrounds

File-List, Inputs, Navigator, Tag-Input, Background, Read-only
wmcolor-background-dark

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

Color for secondary headers that are paired with headers using wmcolor-background-dark

Secondary header to Dark Immersives, Background
wmcolor-background-disabled

Indicates that content is disabled on light backgrounds

Inputs, Background, Disabled
wmcolor-background-highlight

Indicates a highlighted state for content on light backgrounds

Table-Row, Tag-Input, Line-Chart, Background, Highlight
wmcolor-border

Use as the main border color for divider lines

File-List, Table, Charts, Border
wmcolor-border-light

Use for borders that need a lighter color than the main border color

Date-Picker, Select, Border
wmcolor-border-dark

Use for borders that need a darker color than the main border color

Inputs, Border
wmcolor-border-focus

Use for focus states that have a border

Inputs, Table, Border, Focus
wmcolor-table-row-background

Background color for tables

Table, Date-Picker, Tag-Input, Background
wmcolor-table-altrow-background

Background color for alternate table rows

Table, Tag-Input, Background
wmcolor-table-row-background-selected

Background color for selected table rows

Table, Tag-Input, Background, Selected
wmcolor-table-row-border

Use as the border color for table rows. This color references wmcolor-border.

Table, Border
wmcolor-table-row-border-selected

Use as the border color for selected table rows. This color references wmcolor-border-focus.

Table, Tag-Input, Border, Selected
wmcolor-option-background

Background color for menu items

Action-Menu, Select, Tag-Input, Time-Picker, Background
wmcolor-option-background-hover

Indicates a hover state on menu items

Action-Menu, Select, Tag-Input, Time-Picker, Background, Hover
wmcolor-option-background-selected

Indicates a selected state on menu items

Select, Background, Selected
wmcolor-option-border

Border color between menu items. This color references wmcolor-border-light

Action-Menu, Select, Tag-Input, Time-Picker, Border
wmcolor-option-text

Text color for menu items

Action-Menu, Select, Tag-Input, Time-Picker, Text
wmcolor-option-text-disabled

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

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

Indicates a selected state on menu items

Select, Background, Selected
wmcolor-table-header-background

Background color for table headers

Table, Date-Picker, Tag-Input, Background
wmcolor-option-background-focus

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

Main text color

All default text, Text
wmcolor-text-ondark

Main text color on dark backgrounds

All default text, Text, On-Dark
wmcolor-text-readonly

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

This pairs with the default text color wmcolor-text

All default icons, Icon
wmcolor-icon-ondark

This pairs with the default text color wmcolor-text-ondark for use on dark backgrounds

All default icons, Icon, On-Dark
wmcolor-icon-accent

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

Text color for positive messages. This color references wmcolor-positive.

Charts, Text
wmcolor-positive

Alias token to indicate a positive connotation

File-List, Icon
wmcolor-positive-dark

Use for text or icons on backgrounds using wmcolor-background-positive

Text, Icon
wmcolor-background-positive

Background color for content areas that have a positive connotation

Backgrounds
wmcolor-text-required

Use for required messages, usually on form components. This color references wmcolor-negative.

Text
wmcolor-text-negative

Use for text to indicate a negative message. This color references wmcolor-negative.

Charts, Text
wmcolor-text-error

Use for error messages. This color references wmcolor-negative.

Form Component Errors, Text, Error
wmcolor-negative

Alias token to indicate a negative connotation

Text, Icon
wmcolor-background-error

Background color for content areas that contain error messages

File-List, Background, Error
wmcolor-border-error

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

This is the main Watermark brand color used in various areas

Alias token for wmcolor-interactive

wmcolor-brand-dark

This is the secondary main Watermark brand color used in various areas

Navigator, Background

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.

A This label shows accessible and applicable text and background combinations.

Background & Text

These colors are mostly used for background elements and text.

Color Hex Color combinations
White
#FFFFFF
Snow
#FAFAFA
White Smoke
#F4F4F4
Pale Lilac Gray
#E9E7EC
Pale Lilac Gray Dark
#D2D0D4
Charcoal
#4A4A4A
Asphalt
#353B48
Meteorite
#454B57
Midnight
#2E1B46

Interactive

These colors are used for elements that can be interacted with.

Color Hex Color combinations
Periwinkle
#575195
Periwinkle Dark
#464177
Orchid
#B36DCD
Gray
#6B6B6B
Gray Light
#A6A6A6
Cyan
#19A1A9
Cyber
#DDF1F2
Pale Violet
#EEEDF7
Quartz
#DBD9EF

Semantic

These colors should be used where it is important to convey a positive or negative meaning.

Color Hex Color combinations
Forest Light
#DAECD9
Forest
#088000
Forest Dark
#054D00
Firetruck Light
#F6E1DF
Firetruck
#C0392B
Firetruck Dark
#9A2E22
Cyan Dark
#15868D
Cyan Darker
#116B71
Salmon Dark
#CC4C3E
Salmon Darker
#A33D32

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.

How to apply these colors

These colors are associated to the neutral theme that can be applied on a site-wide scale. Use the appropriate color token based on the usage and the neutral color will automatically be applied with the theme.

Color Hex Color combinations
Mom Jeans
#366DAE
Dad Jeans
#244974
Blueberry
#667EED
Linen
#E1E9F3
Sleet Lighter
#ECEFF3
Cowboy Jeans
#18314E

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
Back to Top