Getting started

Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.

The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.

It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites.

The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:

• styles - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity
• components - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface
• guidance - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences.

First steps

Some key areas of the Ripple Design System that will help you create your digital product.

• Design tokens
• Sign up for access to the Ripple 2.0 Figma file
• Theming

The Ripple 2.0 Figma file

Ripple 2.0 Design System is available in Figma. It contains all the design assets needed to design, prototype and share.

Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components.

To create quality user experiences, do not use the Figma file in isolation. This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality.

Figma file access

1. Sign up to Figma
   Create a free Figma Starter account.
2. Install Ripple font
   Ripple uses the VIC font family.
   Download and install VIC to use this typeface in Figma.
3. Request access to Ripple Figma file
   Ripple has been built as a Figma project.
   Request access to the Ripple 2.0 Design System.
   You will receive access to the Ripple Design System Figma file.
4. Add Ripple to your Figma account
   Add the Ripple 2.0 Design System Figma file to your Figma account.
5. Set up Asset Library
   In your Figma account, go to the Getting Started page.
   Follow these instructions to set up the Asset Library.