Theme and brand application

Ripple allows for customisation of it's components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the theming guidance for designers

CSS Variables

Ripple is fully theme-able using CSS variables, this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site.

Example

To override theme values, simply set the css variable at :root or an element that wraps elements you want to theme.

:root {
  --rpl-clr-primary: #6B19A3;
}

See the colour page for a list of theme-able colours.

Assets

Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand.

See the following components for guidance on providing graphic elements to theme your site:

• Logos
• Header

Brand application in SDP sites

See the SDP Ripple framework section for more information on customising SDP websites and applying brand.