Ripple Design System


Colour plays an important role in creating a consistent and strong visual digital products and services.

You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel.

The default colours, made up of two blues, reflect branding. This strengthens the association with the Victorian Government.

The design system contains a colour framework. You can change it if your site requires department or entity branding.

We've designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you're meeting WCAG requirements.

If you change your core brand colours, your styles and components will re-theme automatically using the design system's colour framework.

For more guidance on theming options, see theming guidance for designers or theming guidance for developers.

You don’t need to use hex colours in code.

By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation.

Core palette

The core palette includes primary and secondary colours.

  • The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette.
  • The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It's used in combination with the primary colour to create a more dynamic and engaging visual experience.


SwatchColourValueCSS Variable
primary #0052C2rpl-clr-primary
primary alphargb(0 82 194 / 50%)rpl-clr-primary-alpha
primary alt#003174rpl-clr-primary-alt


SwatchColourValueCSS Variable
accent #0095ECrpl-clr-accent
accent alt#E6F5FDrpl-clr-accent-alt

Neutral palette

The Neutral palette is on a colour scale of white to black.

The 10 steps represent this scale based on our requirements.

Neutral colours are consistent throughout the design system. They are for:

  • text colours
  • borders
  • other elements, like a neutral background.
SwatchColourValueCSS Variable
neutral 0#FFFFFFrpl-clr-neutral-0
neutral 100#F5F5F5rpl-clr-neutral-100
neutral 200#E6E6E6rpl-clr-neutral-200
neutral 300#CCCCCCrpl-clr-neutral-300
neutral 400#999999rpl-clr-neutral-400
neutral 500#7F7F7Frpl-clr-neutral-500
neutral 600#666666rpl-clr-neutral-600
neutral 700#333333rpl-clr-neutral-700
neutral 800#1A1A1Arpl-clr-neutral-800
neutral 900#0D0D0Drpl-clr-neutral-900
neutral alpha 0rgb(255 255 255 / 75%)rpl-clr-neutral-alpha-0
neutral alpha 700rgb(51 51 51 / 90%)rpl-clr-neutral-alpha-700
SwatchColourValueCSS Variable

Typography colours

Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1).

Interaction colours are in addition to the core colour palette. This guarantees accessible text.

SwatchColourValueCSS Variable
type default#1A1A1Arpl-clr-type-default
type light#FFFFFFrpl-clr-type-light
type primary contrast#FFFFFFrpl-clr-type-primary-contrast
type accent contrast#FFFFFFrpl-clr-type-accent-contrast
SwatchColourValueCSS Variable
link visited#9F46B1rpl-clr-link-visited


Gradients bring attention to components or information. Only use them on occasion.

All gradients should appear from dark to light in their usage.

SwatchColourCSS Variable
gradient horizontalrpl-clr-gradient-horizontal
gradient verticalrpl-clr-gradient-vertical


Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:

  • Information
  • Success
  • Warning
  • Error

Avoid using them outside of their semantic meaning.

These colours help signal to users the meaning of some components. For example, for alerts or error messages.

SwatchColourValueCSS Variable
information #005BA5rpl-clr-information
information light#E6EFF6rpl-clr-information-light
information dark#004984rpl-clr-information-dark
success #007D85rpl-clr-success
success light#E6F2F3rpl-clr-success-light
success dark#00646Arpl-clr-success-dark
warning #B75B00rpl-clr-warning
warning light#F8EFE6rpl-clr-warning-light
warning dark#924900rpl-clr-warning-dark
error #AA0028rpl-clr-error
error light#F7E6EArpl-clr-error-light
error dark#880020rpl-clr-error-dark


See focus state for guidance.

SwatchColourValueCSS Variable


To create your own theme, see theming guidance for designers or developers.