Ripple Design System

Layer styles


Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container.

Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px.

You can use a border to:

  • separate or segment blocks or sections of content
  • highlight important elements such as featured content or a call to action
  • aid information hierarchy
  • support navigational structure
  • highlight an active navigation item.
VisualValueCSS Variable


Find examples of borders that add visual consistency on the in-page navigation, cards and contact us pages.

Borders can also segment content (like on banners).

Border Radius

Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel.

We've defined a set of radius values for use.

VisualValueCSS Variable


Border radius is on containers such as buttons, cards and form inputs.

When a container has a defined border radius, but is in focus, discard the border radius.

A 0px value is applied for consistency and clarity.


Elevation adds depth to components.

Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.

VisualValueCSS Variable
0 2px 8px rgb(26 26 26 / 16%)rpl-elevation-1
0 4px 8px 2px rgb(26 26 26 / 16%)rpl-elevation-2


Elevation is on components such as cards, button (elevated variant only) and breadcrumbs.

Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open.