This is the core styles for the Yarra Ranges Tech School website, defining the typography, colours, links, buttons, styled elements and more. When making changes to these website styles, keep in mind that these will be applied across the entire site, so be mindful of what you are updating.
Below are all of the core Yarra Ranges Tech School brand assets in various colours and layouts.
Our design system leverages a purposeful set of typographic styles. We’ve stress-tested this typographic scale across dozens of projects to make sure it’s robust enough to use across (almost) any Yarra Ranges Tech School project, while remaining as accessible as possible for everyone.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Our design system leverages a purposeful set of colour styles as the perfect starting point for any brand or project. When it comes to colour, contrast is critical for ensuring text is legible.
These are the base black and white colour styles.
The primary colour is the core Yarra Ranges Tech School brand colour, and is used across all interactive elements such as buttons, links, inputs, etc. This colour can define the overall feel and can elicit emotion.
Grey is a neutral colour and is the foundation of the colour system. Almost everything in the UI design — text, form fields, backgrounds, dividers — are usually grey.
Error colours are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.
Warning colours can communicate that an action is potentially destructive or "on-hold". These colours are commonly used in confirmations to grab the users' attention.
Success colours communicate a positive action, positive trend, or a successful confirmation.
Along with primary colours, it's helpful to have a selection of secondary colours to use in components such as pills, alerts and labels. These secondary colours should be used sparingly or as accents, while the primary colour(s) should take precedence.
Secondary colour.
