For use on footer pages etc

Style guide

Content components

Find all global styles and principles in use across the entire Ripple design system.

Introduction Text
Global styles across all templates and pages.
Topic
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Design System
Background Colour
Grey

Templates

Content components

Find all the different page templates currently in use for the Ripple Design System.

Each page contains information on the purpose of the template, a visual example, and how it can be currently used.

Title
Download Ripple page examples
Description
Ripple page examples are available for download in Sketch format.
Style
Banner
Introduction Text
Page templates available to build content.
Topic
Secondary Campaign
55
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Design System
Background Colour
Grey

Independent SDP site content options - Vic Gov digital guide

Content components

Independent websites don't have to follow all our governance. However, everything we do is based on user research and evidence. This means you might find some of our workshops, tools and processes useful. We encourage vendors and content owners to make the most of what's available to them.

When you have selected from our menu please let your account manager know so we can tailor our program to your needs.

Independent site content menu

Choose from the following:

  • Victorian Government Digital Standards: digital requirements for the Victorian Government. Includes research, website builds, content strategy, testing, privacy and social media
  • Writing for the web: covers online writing, Search Engine Optimisation, accessibility and the Victorian Government style guide
  • Content Management System: how to build pages and use templates for grants, events and news
  • Analytics: get the most out of your Was this page helpful feature (your Google Analytics configuration will be separate)

If you are funded by the Department of Premier and Cabinet you will also have access to and can receive training for:

  • Monsido: monitor broken links, readability scores, accessibility, SEO and more
  • Hotjar: allows you to set up heatmaps, recordings of website use and surveys

Community of practice

Independent content owners are encouraged to attend our community of practice which meets once a month. As soon as you've provided your names to your account manager you will get email notifications of each event.

We cover:

  • user research on specific audiences and new features 
  • updates on new features, including how to use them
  • monthly trends and analytics for vic.gov.au and semi-independent sites
  • how other content owners are using SDP and improving digital experiences 

Research and analytics are also shared through the Victorian Government digital group (for Victorian public servants only).

Requests to join the community of practice can be sent to nicole.shilo@dpc.vic.gov.au

Useful resources

These resources will also help you:

Introduction Text
How we can help government organisations and agencies building independent websites make the best use of our Single Digital Presence platform.
Topic
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Vic Gov digital guide
Background Colour
White

Graphics - Design System

Content components

Usage

A pattern graphic is used in various containing devices across the site. These are designed to carry brand flavour through the UI and break up white space in a fun and interesting way.

The pattern graphic is overlaid with the decorative gradient from the brand palette, set to an overlay blend mode. In instances where this graphic appears in hero banners, photography may be used as an alternative.

Example

A visual example of graphics used in Ripple.
Introduction Text
An assortment of decorative graphics to add interest.
Topic
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Design System
Background Colour
White

Colour - Design System

Content components

Usage

Colours are bright and contrasting for a minimum AA accessibility compliance. The neutral palette should be maintained, while other colours can be switched out for branding purposes. Colours have a specific context of use and should be used deliberately.

Example

A visual example of the Ripple colour palette.
Introduction Text
Colour palettes used across Ripple.
Topic
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Design System
Background Colour
White

Typography - Design System

Content components

Usage

Ripple uses the VIC brand font in weights Bold, Semibold, Medium and Regular.

All type color combinations must pass WCAG 2.1 AA standards of 4.5 : 1. Please use a contrast checking tool to ensure standards are being met.

Example

Text on light backgrounds
A visual example of typographic styles.
Text on dark backgrounds
A visual example of typographic styles on dark backgrounds.
Introduction Text
Typographic styles in use across Ripple.
Topic
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Design System
Background Colour
White

Search results template - Design System

Content components

Usage

The search results template displays the results of a search query in a paginated list.

The title, URL, summary, and tag (if applicable) of each relevant page are shown.

Users can search the results by keyword, or filter by set categories.

Example

Small screen

A visual example of the search results template on a small screen.

Large screen

A visual example of the search results template.

How to build

The search results template is automatically shown whenever a user conducts a site-wide search.

Introduction Text
A template to deliver site-wide search results.
Topic
Secondary Campaign
55
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Design System
Background Colour
White

Profile listing template - Design System

Content components

Usage

The profile listing template automatically displays all profiles listed on your site.

Profiles are shown in card format, and displayed in a grid.

Users can search the profiles by keyword, or filter by set categories.

Example

See an example of a live profile listing.

 

A visual example of the profile listing template.

How to build

The profile listing page is automatically generated when you add profiles to your site.

For more detailed information view the Victorian Government digital guide.

Introduction Text
A template that allows users to search and browse all profiles on your site.
Topic
Secondary Campaign
55
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Design System
Background Colour
White

Profile template - Design System

Content components

Usage

Creating a page with the profile template allows it to be searchable and sortable in the profile listing page.

It provides the same content options as a Standard page.

Example

A visual example of the profile template.

 

Introduction Text
A template to present detail on a specific profile.
Topic
Secondary Campaign
55
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Design System
Background Colour
White

Grant listing template - Design System

Content components

Usage

The grant listing template automatically displays all grants listed on your site.

Grants are listed in a list format, along with a summary of each individual grant.

Users can search the grants by keyword, or filter by set categories.

Example

See a live example of a grants listing page.

A visual example of the grant listing template.

How to build

The grant listing page is automatically generated when you add grants to your site.

For more detailed information view the Victorian Government digital guide.

Introduction Text
A template that allows users to search and browse all grants on your site.
Topic
Secondary Campaign
55
Show Contact Us?
Off
Show Site-section Navigation?
On
Show topic term and tags?
On
Site-section Navigation Title
Design System
Background Colour
White
Was this page helpful?