Welcome to Watermark’s Ripple Design System

The Ripple Design System provides a foundation comprising design guidelines, documentation, and components. It serves as the single source of truth for product designers, developers, and product managers, in order to create consistent and accessible user experiences in our products. The design system ensures efficiency in the design and development process by avoiding duplication of effort when solving similar problems.

Ripple is a living, evolving system. We continuously iterate our design patterns and components as we identify needs in our products.

Foundation & Guidelines

These sections contain rules, tips, and guidance on visual styling and design patterns we use in our products. Check out our UI Library in Figma (link opens in new window) and our CodePen (link opens in new window) for code examples that utilize our global stylesheet. The latest version of the Color Token Variables (link opens in new window) is 1.4.0.

Components

A library of reusable components that work like standard DOM elements.

  • Encapsulated styling and behavior
  • Configurable using defined properties
  • Fully accessible
  • Compatible with all widely used desktop and mobile browsers
  • Usable with any framework or no framework at all

Library version 5.4.0