Color

Waterfall uses tokens and themes to manage color. Tokens are role-based, and themes specify the color values that serve those roles in the UI.

Color in Waterfall is managed using color tokens. Tokens are a method of abstracting color by role or usage, independent of the actual color values. For example, instead of needing to code all instances of input labels in a UI to be #855ffc, the form component in Waterfall specifies the token purple._50 for these lables, and that token is specified in a separate theme file to be #565656. For a different theme, that same purple._50 token could be mapped to a different hex value, like #ffffff. Thus, tokens not only allow for more efficient color updates within a theme, but also enable any UI (or portion of a UI) built with Waterfall to easily switch between different themes.

A single token can be associated with multiple roles, but only if the color value is used consistently across those roles. This allows for uniform color application across themes while maintaining full styling flexibility.

Using various forms of contrast is the most important consideration when making user-friendly color and interface choices. Awareness of standards and best practices is the key to accessible color selection.

The color families in the Waterall palette contain ten values from 00 to 100. White and Black sit outside those values. Black text is WCAG AA accessible on colors ranging from 00 to 50. White text is accessible on colors from 60 to 100.