Style and design

Colour palette

FedUni corporate blue
#175fab
R23 G95 B171
FedUni dark blue
#184c8c
R24 G76 B140
*FedUni bright blue
#0090ce
R0 G144 B206
Grey
#959595
R149 G149 B149
Light grey 1
#e0e1e1
R224 G225 B225
Light grey 2
#f1f1f1
R241 G241 B241
Dark grey 1
#373737
R55 G55 B55
Dark grey 2
#555555
R85 G85 B85
Black (body text)
#000000
R0 G0 B0

The FedUni website colour palette is based on a range of blues and greys to coordinate with the FedUni logo.

Colour contrast and accessibility

When used in combination, some colours on a website can cause problems for people with a visual impairment. Coloured text on buttons or blocks should be carefully considered to ensure there is sufficient contrast.

There are also legal imperatives for us to make our pages as accessible as possible. The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 2.1 sets the benchmark for our website. We aim to achieve AA compliance.

Visit W3C website

View Web Content Accessibility Guidelines 2.1

Colours can be checked for their contrast and to see if they are WCAG 2 AA compliant using the Snook Colour Contrast Check Tool.

This tool allows you to specify a foreground and a background colour and determine if they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen" [W3C].

The WCAG contrast ratio formula differentiates between text smaller or larger than 18pt. In some cases coloured text larger than 18pt on a coloured background will be AA compliant but will not be compliant when smaller than this.

* These colours are only AA-compliant when used with white text 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

School colours

School name Background colour
Federation Business School - Blue #0077be | R0 G119 B190
School of Arts - Vibrant red #d6003c | R214 G0 B60
School of Education - Dark purple #61056c | R97 G5 B108
School of Health and Life Sciences - Teal *#00a1a9 | R0 G161 B169
School of Nursing and Healthcare Professions - Cyan *#009cda | R0 G156 B218
School of Science, Engineering and Information Technology - Orange *#df7614 | R223 G118 B20
FedUni TAFE - Green *#68a144 | R104 G161 B68

Typography

The typeface used in our website is Museo Sans 300, 500 and 700 and in italic for each size. It is a geometric, highly legible sans serif typeface. This is to maintain consistency across the FedUni site.

Museo Sans 300, 500 and 700

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()

Symbols

The font chosen for all FedUni website symbols is Font Awesome.

For designers and developers it was originally designed for Bootstrap and works great with all frameworks. It is completely free for commercial use and gives you scalable vector icons that can instantly be customised — size, color, drop shadow, and anything that can be done with the power of CSS. Use the standard colour scheme when colouring icons.

Heading levels

Headings should describe the content underneath and for someone using specialised software (because they cannot see the page) correctly used headings help them understand how the page is structured.

Headings provide structure to a web page. So, 'heading 2' indicates a subsection of 'heading 1', 'heading 4' indicates a subsection of 'heading 3' and so on. They should not be used for font or presentation effects. Misusing heading styles - eg. to make text appear a certain size - makes it difficult for users with special software to understand how the page is organised and to navigate it.

Our WYSIWYG editor allows coordinators and publishers to select heading styles from 1 - 6.

Because the title of your page will always be heading 1, all subsequent sub-headings should follow accordingly from there. That is,

Page title (heading 1) [specified by CMS template]
Sub title (heading 2) [specified by content publisher] and so on down the page.

Heading styles should only be applied to text that is a heading.

Heading 1 (28px, #555555)

Heading 2 (22px, #005596)

Heading 3 (19px, #555555)

Heading 4 (16px, #005596)

Body text (15px, #000000)