What is Ripple?
Ripple 2.0 is the design system for Victorian Government branded digital products. It is the front-end layer of Single Digital Presence (SDP). It provides a single source of truth for styles, components and patterns when creating digital experiences on SDP.
Ripple 2.0 is a refactor of our original Ripple 1.0 design system. It:
- continues to be an open-source design system
- updated designs with new base styles and components
- improved the code to better meet industry standards and best practice
- enhanced accessibility, SEO, security and performance
- automated some manual processes
- expanded how we document SDP design assets, including components and templates.
The full version of Ripple 2.0 includes:
- a public documentation site with style, component and usage guidance
- the final Figma design system file. You can request access to the Figma file via the form below
- GitHub code repository.
Who is Ripple for?
Designers, content creators and developers across government can all draw from the same library of components, knowing designs are accurate and up to date. This reduces time, costs, effort and duplication, to increase efficiency when we build digital content.
- Designers can easily and quickly create wireframes, high-fidelity designs and prototypes.
- Developers can access technical specifications to create pixel-perfect code.
- Content creators can design page concepts, knowing their layouts will accurately reflect the finished product.
- Product owners and stakeholders can review designs and provide feedback.
Most importantly, it helps provide users of Victorian digital services with simpler, more consistent and cohesive online experiences.
Out of the box accessibility compliance
Ripple 2.0 provides styles and components designed to support inclusivity and meet accessibility guidelines out of the box.
While the design system is built to meet accessibility guidelines, achieving compliance will depend on how usage and implementation. Content creation, customisations and interaction design all influence accessibility compliance.
Ripple 2.0 is currently being updated to align with WCAG 2.2 level AA standards.
Ripple 2.0 resources
Ripple 2.0 documentation site
Our documentation site describes the features and functions of Ripple 2.0 to help guide developers and designers to build Victorian Government websites.
GitHub code repository
Ripple 2.0 is open source and the code is available in a new GitHub repository.
Figma design file
Figma is a cloud-based collaborative design tool that is used to house and build Ripple. You can use it via the app or a web browser.
You will need a Figma account to view and build upon Ripple 2.0. Figma currently offers a free tier with full functionality that can be used in a web browser.
Once your access has been approved, open Figma:
- Go to the Getting Started page in the Ripple 2.0 file.
- Follow the guidance outlined on how to use Ripple 2.0.
Enquiries and support
Technical enquiries
Design enquiries and feedback
For questions, feedback or concerns relating to Ripple 2.0, email the design team.
Updated