Heading: Key Titles

Heading: No Margin

H1 – Heading 1

H2 – Heading 2

H3 – Heading 3

H4 – Heading 4

H5 – Heading 5

H6 – Heading 6

Subheading

Paragraph Styles

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.

Ordered List Item
Ordered List Item
Ordered List Item

Unordered List Item
Unordered List Item
Unordered List Item

Buttons & Links

Button Text

Button Text Button Text

Button Text

Text Link

Base Colours

These are the base black and white colour styles.

White

#FFFFFF

Black

#000000

Primary Colours

YRTS Primary Palette

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.

#FCEFF0

#FCDCDC

100

#FCC8C9

200

#F8999C

300

#F17075

400

#D9373F

500

#C7272F

600

#AF272F

700

#8E151B

800

#6A080B

900

#450001

YRTS Grey Palette

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.

#FCFCFD

#F0F0EE

100

#E0E3E0

200

#D1D6D6

300

#C3C5CA

400

#AFAAB0

500

#979092

600

#7C797E

700

#676A74

800

#343741

900

#1A1A1A

System Colours

Error Palette

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.

#FFFBFA

#FEF3F2

100

#FEE4E2

200

#FECDCA

300

#FDA29B

400

#F97066

500

#F04438

600

#D92D20

700

#B42318

800

#912018

900

#7A271A

Warning Palette

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.

#FFFCF5

#FFFAEB

100

#FEF0C7

200

#FEDF89

300

#FEC84B

400

#FDB022

500

#F79009

600

#DC6803

700

#B54708

800

#93370D

900

#7A2E0E

Success Palette

Success colours communicate a positive action, positive trend, or a successful confirmation.

#F6FEF9

#ECFDF3

100

#D1FADF

200

#A6F4C5

300

#6CE9A6

400

#32D583

500

#12B76A

600

#039855

700

#027A48

800

#05603A

900

#054F31

Secondary Colours

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.

YRTS Secondary

Secondary colour.

#F3F2EC

#F4F2E4

100

#EEEBD3

200

#E8E3C2

300

#E2DBB3

400

#DCD3A4

500

#D6CC97

600

#C1B880

700

#8C8955

800

#61623A

900

#404228

Website Styles

Branding

Typography