Design System

Introduction

Why use a design system?

A design system is a great way to centralise and standardise your visual identity across your platforms.

What are the benefits of using a design system?

The key benefits of using a design system are:

This document should be updated regularly in order to remain effective.

Brand

About

The term 'brand' has come to mean a strategic personality for a product or company so that 'brand' now suggests the values and promises that a consumer may perceive and buy into.

Guidelines

All QUT-branded promotional material is managed by our Visual Communication Services team. Promotional material must follow the standards outlined in our Corporate Identity Manual and requires approval before production and distribution.

More information on typography, colours and logo usage can be found on the Corporate identity and QUT logo page.

Additional resources:

Logos


Colours

About

Colour is a form of non verbal communication with both subjective and cultural qualities that we can harness when applying it to our projects. See colour psychology for more information.

Understanding the meaning of how people respond to colour can make your projects more personal, effective and engaging. The following outlines the basic meanings of each colour.

Red

The colour of energy, passion, action, ambition and determination. It is also the colour of anger and sexual passion.

Orange

The colour of social communication and optimism. From a negative colour meaning it is also a sign of pessimism and superficiality.

Yellow

The colour of the mind and the intellect. It is optimistic and cheerful. However it can also suggest impatience, criticism and cowardice.

Green

the colour of balance and growth. It can mean both self-reliance as a positive and possessiveness as a negative, among many other meanings.

Blue

The colour of trust and peace. It can suggest loyalty and integrity as well as conservatism and frigidity.

Indigo

The colour of intuition. In the meaning of colours it can mean idealism and structure as well as ritualistic and addictive.

Purple

The colour of the imagination. It can be creative and individual or immature and impractical.

Turquoise

The colour communication and clarity of mind. It can also be impractical and idealistic.

Pink

The colour of unconditional love and nurturing. Pink can also be immature, silly and girlish.

Magenta

The colour of universal harmony and emotional balance. It is spiritual yet practical, encouraging common sense and a balanced outlook on life.

Brown

A friendly yet serious, down-to-earth colour that relates to security, protection, comfort and material wealth.

Gray

The colour of compromise - being neither black nor white, it is the transition between two non-colours. It is unemotional and detached and can be indecisive.

Silver

The colour of feminine energy; it is related to the moon and the ebb and flow of the tides - it is fluid, emotional, sensitive and mysterious.

Gold

The colour of success, achievement and triumph. Associated with abundance and prosperity, luxury and quality, prestige and sophistication, value and elegance, the colour psychology of gold implies affluence, material wealth and extravagance.

White

The colour that is most complete and pure, the colour of perfection. The colour meaning of white is purity, innocence, wholeness and completion.

Black

The colour of the hidden, the secretive and the unknown, creating an air of mystery. It keeps things bottled up inside, hidden from the world.

QUT corporate

QUT corporate blue

hex

#0E487F

HiQ

HiQ: Orange

hex

#F37021

HiQ: Blue

hex

#003B71

HiQ: Mono: Black

hex

#000000

Faculty

QUT Business School

hex

#5090CC

Creative Industries Faculty

hex

#A9218E

Faculty of Education

hex

#006E51

Faculty of Health

hex

#F58427

Faculty of Law

hex

#959CA1

Science and Engineering Faculty

hex

#009290

Extended

Red

hex

#CC0000

Light red

hex

#FDF2F5

Green

hex

#0F7044

Light green

hex

#DFFBEE

Alternative green

hex

#8EA61B

Alternative light green

hex

#F2F9CF

Dark blue

hex

#4652A0

Light dark blue

hex

#E4E6F3

Blue

hex

#015999

Light blue

hex

#DCF0FF

Alternative blue

hex

#1755DD

Alternative light blue

hex

#E0E9FB

Purple

hex

#CCBADC

Aqua

hex

#EAFFFF

Yellow

hex

#B79A00

Light yellow

hex

#FFF3B2

Pink

hex

#DD1755

Light pink

hex

#FCE5EC

Orange

hex

#DD3D17

Light orange

hex

#FAE0D9

Violet

hex

#715B7B

Light violet

hex

#F1DAFB

Dark brown

hex

#7F5151

Light dark brown

hex

#EADFDF

Brown

hex

#B08012

Light brown

hex

#F9EBCB

Peach

hex

#FF6D71

Light peach

hex

#FFECED

Teal

hex

#406565

Light teal

hex

#DAE7E7

Turquoise

hex

#008B82

Light turquoise

hex

#DAE7E7

Grey

hex

#555555

Light grey

hex

#EDEDED

Red fill

hex

#CC3333

Orange fill

hex

#E87B23

Blue fill

hex

#17558D

Light blue fill

hex

#4B8BBF

Components

Buttons

There are three button sizes and styles: small, default, and large; regular, outline and bare.

Small
Default
Large

Regular
small
default
large


Small buttons should be used when space is at a premium, such as in a portlet list. Large buttons should be used when you want to draw attention, such as a book now button on an event page. Regular buttons should be used at all other times.

Default button

Add the class button to a <div> tag to render a default blue button.

HTML
<a href=""><div class="button">default button</div></a>
CSS
.button {
	/* shared styles*/
	border: none					!important;				
	display: inline-block			!important;
	font-weight: 700				!important;
	text-transform: uppercase		!important;
	text-decoration: none			!important;
	text-align: center				!important;
	border-radius: 3px				!important;

	/* regular styling */
	background-color: #095DA3;
	color: white;
	
	/* regular sizing */
	padding: 11px 15px				!important;	
	font-size: 14px					!important;
}
Result
default button

Small button

Adding the class name small to your button HTML will render a small button.

HTML
<a href=""><div class="button small">small button</div></a>
CSS
.button.small {
	/* small sizing*/
    padding: 6px 12px				!important;
	font-size: 12px					!important;
}
Result
small button

Large button

Adding the class name large to your button HTML will render a large button.

HTML
<a href=""><div class="button large">large button</div></a>
CSS
.button.large {
	/* large sizing*/
    padding: 14px 20px				!important;
	font-size: 16px					!important;
}
Result
large button

Outline

Adding the class name outline to your button HTML will render an outline button.

HTML
<a href=""><div class="button outline">outline button</div></a>
CSS
.outline {
	background-color: transparent	!important;
	color: #095DA3;
	border: 2px solid #095DA3		!important;
}

.outline:hover {
	background-color: #095DA3		!important;
	color: #fff;
}
Result
outline button

Bare

Adding the class name bare to your button HTML will render a bare button.

HTML
<a href=""><div class="button bare">outline button</div></a>
CSS
.bare {
	background-color: transparent	!important;
	color: #095DA3;
	padding: 0						!important;
	margin: 0						!important;
	border: none					!important;
}

.bare:hover {
	color: #085492;
}
Result
bare button

Adding colour

You can change the button colour to any colour from the extended colour palette simply by adding the extended-color class followed by the desired extended colour class name to your button HTML.

<a href=""><div class="button extended-color red">label</div></a>

Extended colours

Name
Example
Class name

Red

label
red

Light red

label
light-red

Green

label
green

Light green

label
light-green

Alternative green

label
alternative-green

Alternative light green

label
alternative-light-green

Dark blue

label
dark-blue

Light dark blue

label
light-dark-blue

Blue

label
blue

Light blue

label
light-blue

Alternative blue

label
alternative-blue

Alternative light blue

label
alternative-light-blue

Purple

label
purple

Aqua

label
aqua

Yellow

label
yellow

Light yellow

label
light-yellow

Pink

label
pink

Light pink

label
light-pink

Orange

label
orange

Light orange

label
light-orange

Violet

label
violet

Light violet

label
light-violet

Dark brown

label
dark-brown

Light dark brown

label
light-dark-brown

Brown

label
brown

Light brown

label
light-brown

Peach

label
peach

Light peach

label
light-peach

Teal

label
teal

Light teal

label
light-teal

Turquoise

label
turquoise

Light turquoise

label
light-turquoise

Grey

label
grey

Light grey

label
light-grey

Red fill

label
red-fill

Orange fill

label
orange-fill

Blue fill

label
blue-fill

Light blue fill

label
light-blue-fill


Profile menu

Adreene Williams

  • Personal profile
  • Preferences
  • Change password
  • Help
HTML
<div class="profile-menu">
	<div class="avatar"></div>	
	<div class="profile-menu-content">	
		<p class="username">Adreene Williams</p>		
		<span class="dd-arrow">		
			<i class="fas fa-sort-down"></i>			
		</span>	
	</div>	
	<div class="profile-menu-list">	
		<ul>
			<li>Personal profile</li>
			<li>Preferences</li>
			<li>Change password</li>
			<li>Help</li>
		</ul>	
	</div>		
</div>
CSS
.profile-menu {
	position: absolute;
	background-color: #125C89;
	color: white;
	text-align: left;
	border-radius: 3px;
	min-width: 210px;

	/* hover out */
	-webkit-transition: box-shadow 0.15s ease-out;
	transition: box-shadow 0.15s ease-out;

	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;
}

.profile-menu:hover {
	background-color: #E87B23;
	box-shadow: 0 0 6px rgba(0,0,0,.1);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	cursor: pointer;

	-webkit-transition: box-shadow 0.15s ease-out;
	transition: box-shadow 0.15s ease-out;

	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;
}

.profile-menu-content {
    display: inline-block;
    padding-right: 30px;
}

.profile-menu .avatar {
	width: 45px;
	height: 45px;
	background-repeat: no-repeat;
	background-image: url(../img/avatar.png);
	background-position: 50% 50%;
	float: left;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.profile-menu p.username {
	white-space: nowrap;
	display: inline-block;
	padding: 0 20px;
	margin: 0;
	height: 45px;
	line-height: 45px;
}

.profile-menu .dd-arrow {
    color: #6C9EB7;
    position: absolute;
    top: 10px;
    right: 20px;
}

.profile-menu:hover .dd-arrow {
	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;
	color: white;
}

/* profile menu drop-down */
.profile-menu .profile-menu-list {
	position: relative;
	z-index: 99;
	visibility: hidden;
	max-height: 0;
    overflow: hidden;
	
	/* hover out */
    -webkit-transition: max-height 0.25s ease-out;
	transition: max-height .25s ease-out;

	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;	
}

.profile-menu:hover .profile-menu-list {
	visibility: visible;
	max-height: 1000px;

	-webkit-transition: max-height 0.25s ease-out;
	transition: max-height 0.25s ease-out;
}

.profile-menu .profile-menu-list ul {
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
	background-color: white;
	color: #333;
	margin-top: 0;
	box-sizing: border-box;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	box-shadow: 0 3px 6px rgba(0,0,0,.1);
}

.profile-menu .profile-menu-list ul li {
	list-style: none;
	height: 50px;
	line-height: 50px;
	padding-left: 25px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;

	/* hover out */
	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;
}

.profile-menu .profile-menu-list ul li:hover {
	background-color: #095DA3;
	color: white;
	border-left: none;
	border-right: none;
	
	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;
}

.profile-menu .profile-menu-list ul li:last-child {
	border-bottom: 1px solid #ddd;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

Icon bar

HTML
<ul class="icon-bar">					
	<li><i class="fas fa-users fa-lg"></i></li>
	<li><i class="far fa-calendar-alt fa-lg"></i></li>
	<li><i class="fas fa-inbox fa-lg"></i></li>
	<li><i class="fas fa-th fa-lg"></i></li>	
</ul>
CSS
ul.icon-bar {
	margin: 0;
	padding: 0;
}

ul.icon-bar li {
	color: #477896;
	background-color: transparent;
	display: inline-block			!important;
	list-style: none				!important;
	width: 45px						!important;
	height: 45px					!important;
	line-height: 45px				!important;
	border-radius: 3px				!important;
	text-align: center				!important;
	padding: 0						!important;
	margin: 0						!important;
	margin-right: 10px				!important;
	
	/* hover out */
	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;

	-webkit-transition: color 0.15s ease-out;
	transition: color 0.15s ease-out;
}

ul.icon-bar li:hover {
	background-color: #E87B23; /* extended colour: orange-fill */
	color: white;
	cursor: pointer;

	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;

	-webkit-transition: color 0.15s ease-out;
	transition: color 0.15s ease-out;
}

Arrow tabs

HTML
<ul class="arrow-tabs">
	<!-- break up the closing li tags to prevent the browser adding non-breaking spaces between items -->
	<li class="active">Item 1</li
	><li><a href="">Item 2</a></li
	><li><a href="">Item 3</a></li
	><li><a href="">Item 4</a></li>
</ul>
CSS
ul.arrow-tabs {
	margin: 0;
	padding: 0;
	display: inline-block;
	margin-bottom: 10px					!important;
	height: 47px						!important;
}

ul.arrow-tabs li {
	list-style: none;
	display: inline-block;
	font-weight: 700;
	margin: 0							!important;
	margin-right: 2px					!important;
	vertical-align: top					!important;
	padding: 0							!important;
}

ul.arrow-tabs li a {
	display: inline-block;
	background-color: #707070;
	padding: 0 20px;
	line-height:47px;
	text-decoration: none;
	font-size: 14px;
	color: #fff;
}

ul.arrow-tabs li a:hover {
	background-color: #559a00;
}

ul.arrow-tabs li.active {
	position: relative					!important;
    background: #0E487F;
    color: white;
    line-height: 47px					!important;
    padding: 0 20px						!important;
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}

ul.arrow-tabs li.active:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-top-color: #0E487F;
	border-width: 7px;
	margin-left: -7px;
}

Main menu

HTML
<nav class="main-menu">			
	<ul>
		<!-- break up the closing li tags to prevent the browser adding non-breaking spaces between items -->
		<li><a href="javascript:;">Item 1</a></li
		><li><a href="javascript:;">Item 2</a></li
		><li><a href="javascript:;">Item 3</a></li
		><li><a href="javascript:;">Item 4</a></li
		><li class="active">active item</li>						
	</ul>				
</nav>
CSS
.main-menu {
	background-color: #414141;
	text-align: left;
	color: #fff;
	font-size: 14px;
}

.main-menu ul {
	margin: 0;
	padding: 0;
}

.main-menu ul li {
	list-style: none;
	display: inline-block				!important;
	margin: 0							!important;
	padding: 0							!important;
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}

.main-menu ul li a {
	display: inline-block				!important;
    padding: 0 20px						!important;
    line-height: 47px					!important;
    text-decoration: none				!important;
    color: white;
	
	/* hover out */
	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;
}

.main-menu ul li a:hover {
	background-color: #5B5B5B;

	-webkit-transition: background-color 0.15s ease-out;
	transition: background-color 0.15s ease-out;	
}

.main-menu ul li.active {
	background-color: #5B5B5B;
	display: inline-block				!important;
    padding: 0 20px						!important;
    line-height: 47px					!important;
    text-decoration: none				!important;
    color: white;
}

Detail menu

HTML
<nav class="detail-menu">
				
	<ul>
		
		<li class="active">All</li>
		
		<li><a href="javascript:;">Popular</a></li>
		
		<li><a href="javascript:;">Latest</a></li>
		
		<li><a href="javascript:;">Recommended</a></li>
		
		<li><a href="javascript:;">Category</a></li>
	
	</ul>

</nav>
CSS
nav.detail-menu ul {
	margin: 0 							!important;
	padding: 20px						!important;
	background-color: #004477;
}

nav.detail-menu ul li {
	display: block						!important;
	padding: 0							!important;
	margin: 0 							!important;
	color: #fff							!important;
	background-color: transparent;
	border-bottom: 1px solid #045688;
}

nav.detail-menu ul li:hover {
	background-color: rgba(3,82,130,.5);
}

nav.detail-menu ul li a {
	display: block						!important;
	text-decoration: none				!important;
	padding: 10px 20px					!important;
	height: 40px						!important;
	line-height: 40px					!important;
	color: #fff;
	font-weight: 400;
}

nav.detail-menu ul li:last-child {
	border-bottom: none;
}

nav.detail-menu ul li.active {
	background-color: #035282;
}

nav.detail-menu ul li.active {
	text-decoration: none				!important;
	padding: 10px 20px					!important;
	height: 40px						!important;
	line-height: 40px					!important;
	font-weight: 700					!important;
}

Tree menu

Example

Tree menu heading

HTML
<nav class="tree-menu">
	<ul>							
		<li><div class="tree-item"></div>
			<ul>								
				<li><div class="tree-item"></div>
					<ul>											
						<li><div class="tree-item"></div>
							<ul>												
								<li><div class="tree-item"></div></li>
								<li><div class="tree-item"></div></li>												
							</ul>												
						</li>											
					</ul>										
				</li>								
				<li><div class="tree-item"></div>
					<ul>										
						<li><div class="tree-item"></div></li>											
						<li><div class="tree-item"></div></li>											
					</ul>	
				</li>									
				<li><div class="tree-item"></div></li>									
			</ul>								
		</li>							
		<li><div class="tree-item"></div></li>
		<li><div class="tree-item"></div></li>
		<li><div class="tree-item"></div></li>
	</ul>
</nav>
CSS
nav.tree-menu {
	padding: 20px;
	border: 1px solid #DDD8D4;
	border-top: none
}

h3.tree-menu-heading {
	padding: 20px 						!important;
	background-color: #004477 			!important;
	color: #fff 						!important;
	height: auto 						!important;
	margin-bottom: 0 					!important;
}

nav.tree-menu ul {
	margin: 0							!important;
	padding: 0							!important;
	list-style: none					!important;
}

nav.tree-menu li {
	padding-left: 0						!important;
	display: block;
}

nav.tree-menu li div.tree-item {
	border-bottom: 1px dashed #ddd;
	height: 60px;
	line-height: 60px;
}

nav.tree-menu li div.tree-item .tree-toggle {
	padding: 10px 12px;
	border-radius: 4px;
}

nav.tree-menu li div.tree-item .link-text {
	margin-left: 10px;
}

nav.tree-menu li div.tree-item .tree-toggle {
	/* hover out */
	-webkit-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
}

nav.tree-menu li  div.tree-item .tree-toggle:hover {
	background-color: rgba(9, 93, 163, .05);

	-webkit-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
}

nav.tree-menu ul li  {
	text-indent: 0;
}

nav.tree-menu ul li ul li {
	text-indent: 30px;
}

nav.tree-menu ul li ul li ul li {
	text-indent: 60px;
}

nav.tree-menu ul li ul li ul li ul li {
	text-indent: 90px;
}

nav.tree-menu ul li ul li ul li ul li ul li {
	text-indent: 120px;
}
JavaScript
var linkText = "Example link text";
var linkTarget = "javascript:;";

$('nav.tree-menu li').each(function() {
	// Prepend a toggle icon to span tags inside li tags with a nested ul
	$(this).find('> div').append('<a href="' + linkTarget + '" class="link-text">' + linkText + '</a>');
});	

$('nav.tree-menu li:has("ul")').each(function() {
	// Prepend a toggle icon to span tags inside li tags with a nested ul
	// href value: javascript:; returns undefined and doesn't add to the browser history
	$(this).find("> div").prepend('<a href="javascript:;" class="tree-toggle"><i class="far fa-plus-square fa-lg"></i></a>');
});

// Hide all main menu nested UL lists
$('nav.tree-menu li ul').slideToggle(250);

$('nav.tree-menu li:has("ul") > div > .tree-toggle').click(function(){
	
	// Swap plus/minus icons
	$(this).find('svg').toggleClass('fa-plus-square fa-minus-square');
	
	// find parent li then show/hide its nested ul
	$(this).closest('li').find('> ul').slideToggle(250);

});

Mega Menu

HTML
<nav class="main-menu">
	<ul>
		<li><a href="javascript:">Home</a></li>
		<li><a href="javascript:">Enrolment</a>
			<div class="mega-menu">
				<div class="row">
					<div class="col detail-bg">
						<nav class="detail-menu">
							<ul>
								<li><a href="javascript:;">Item</a></li>
								<li><a href="javascript:;">Item</a></li>
								<li><a href="javascript:;">Item</a></li>
								<li><a href="javascript:;">Item</a></li>
								<li><a href="javascript:;">Item</a></li>
								<li><a href="javascript:;">Item</a></li>
								<li><a href="javascript:;">Item</a></li>
								<li><a href="javascript:;">Item</a></li>
								<li><a href="javascript:;">A much longer than normal item</a></li>
							</ul>
						</nav>
					</div>
					<div class="col">
						<ul class="mm-list">
							<li><h3>More</h3></li>
							<li><a href="javascript:;">Link</a></li>
							<li><a href="javascript:;">Link</a></li>
							<li><a href="javascript:;">Link</a></li>
							<li><a href="javascript:;">Link</a></li>
							<li><a href="javascript:;">Link</a></li>
							<li><a href="javascript:;">Link</a></li>
							<li><a href="javascript:;">Link</a></li>
							<li><a href="javascript:;">Link</a></li>
							<li><a href="javascript:;">A much longer than normal link</a></li>
						</ul>
					<div>
				</div>
			</div>
		</li>
	</ul>
</nav>
CSS
nav.main-menu ul > li .mega-menu {
	display: none;
	position: absolute;
	left: 0;
	background-color: white;
	border: 2px solid #004477;
	margin-top: -2px;

}

nav.main-menu ul > li:hover .mega-menu {
	display: block;
}

.row {
	padding: 0							!important;
	margin: 0							!important;
	display: table						!important;
}

.col {
	display: table-cell					!important;
	vertical-align: top;
}

.col.detail-bg {
	background-color: #004477;	
}

.mega-menu ul.mm-list {
	color: #333;
	padding: 20px 40px;
}

.mega-menu ul.mm-list h3 {
	margin-top: 0 						!important;
	font-size: 18px 					!important;
	font-weight: 700 					!important;
	border-bottom: 2px solid #333;
	padding-bottom: 10px;
}

.mega-menu ul.mm-list h3::before {
	margin-top: 0						!important;
	height: 0							!important;
}


.mega-menu ul.mm-list li {
	display: block						!important;
}

.mega-menu ul.mm-list li a {
	padding: 0 							!important;
	color: #095DA3						!important;
	text-decoration: none;
	font-size: 16px;
}

.mega-menu ul.mm-list li a:hover {
	background-color: transparent		!important;
	text-decoration: underline			!important;
}

Toast

Toast come in two flavours; specifically, with and without an action.

The action completed successfully
The action completed successfully
HTML - Without action
<span class="toast">The action completed successfully</span>
HTML - With action
<span class="toast">
			
	The action completed successfully
	
	<div class="button bare"><a href="javascript:;" class="toast-action">undo</a></div>
	
</span>
CSS
/* Regular toast */
.toast {
	display: inline-block;
	background-color: #333;
	padding: 15px 25px;
	border-radius: 3px;
	color: #EDEDED;
}

.toast .toast-action {
	margin-left:50px;
	color: #229bff;
}

.toast .toast-action:hover {
	color: #41a9ff;
}

Breadcrumbs

HTML
<ul class="breadcrumbs">
			
	<li><a href="javascript:;">Home</a></li>
	
	<li><i class="fas fa-angle-right"></i></li>
	
	<li><a href="javascript:;">Breadcrumb</a></li>
	
	<li><i class="fas fa-angle-right"></i></li>
	
	<li>Breadcrumbs</li>
	
</ul>
CSS
ul.breadcrumbs {
	margin: 0					!important;
	padding: 0 					!important;
	font-size: 13px				!important;
	font-weight: 700			!important;
}

ul.breadcrumbs li {
	list-style: none			!important;
	display: inline-block		!important;
	margin: 0					!important;
	padding: 0					!important;
	margin-right: 10px			!important;
	list-style-type: none		!important;
}

ul.breadcrumbs li a {
	font-size: 13px				!important;
}

ul.breadcrumbs li .fa-angle-right {
	color: #ccc					!important;
}

Icons

The Font Awesome icon library is used extensively throughout QUT's online services. Please see Font Awesome's 'Getting Started' guide for more information.

Typography

Helvetica Neue Light, Medium and Bold typefaces are the University standard and should be used for all signage, advertising and texts in stationery. Arial (a PC standard system font) may be used as an alternative if Helvetica Neue is not available.

For texts such as letters, reports or other lengthy documents, the following alternative text fonts may be used:

The consistent use of these typefaces is important to the overall identification of QUT.

Font family

font-family: Segoe UI, Arial, Helvetica, sans-serif;

Body font

font-size: 16px;
line-height: 24px;
color: #333;

Headings

All headings share a common weight with all margins set to zero.

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
	margin: 0;
}

Heading 1

h1 {
	font-size: 36px;
}

Heading 2

h2 {
	font-size: 30px;
}

Heading 3

h3 {
	font-size: 24px;
}

Heading 4

h4 {
	font-size: 18px;
	color: #004a94;
}

Heading 5
h5 {
	font-size: 14px;
}

Heading 6
h6 {
	font-size: 12px;
}

Lists


  1. Nunc facilisis vestibulum
  2. Vel viverra magna elementum
  3. Nam quis ultricies nunc
  4. Praesent congue dolor neque
  5. Interdum pharetra mi congue
HTML
<ul>
	<li>Nunc facilisis vestibulum</li>
	<li>Vel viverra magna elementum</li>
	<li>Nam quis ultricies nunc</li>
	<li>Praesent congue dolor neque</li>
	<li>Interdum pharetra mi congue</li>
</ul>

<ol>
	<li>Nunc facilisis vestibulum</li>
	<li>Vel viverra magna elementum</li>
	<li>Nam quis ultricies nunc</li>
	<li>Praesent congue dolor neque</li>
	<li>Interdum pharetra mi congue</li>
</ol>
CSS
ul, ol {
	margin: 0;
	padding: 0;
	list-style-position: outside;
	padding-left: 1em;
}

ul li, ol li {
	line-height: 1.5em;
	padding-left: 1em;
}

Look and feel

This is an example of a hyperlink

Hyperlink blue

hex

#095DA3

CSS
a {
	color: #095DA3;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

Portlets

The following describes the styling of a portlet in its most basic form which can be used, for example, as a guide for styling a border-less web content display.

Heading

Mauris consectetur sem at felis vestibulum, ut dignissim nunc maximus. Sed eget dictum enim. Praesent id justo est. Duis hendrerit aliquet elit, sagittis tincidunt odio. Praesent felis erat, faucibus vestibulum ipsum sit amet, tristique.

HTML
<div class="portlet">					
	<div class="portlet-menu">
		<i class="fas fa-ellipsis-v"></i>	
	</div>
	<h3>Heading</h3>	
	<div class="portlet-content-wrapper">	
		<p>Mauris consectetur sem at felis vestibulum, ut dignissim nunc maximus. Sed eget dictum enim. Praesent id justo est. Duis hendrerit aliquet elit, sagittis tincidunt odio. Praesent felis erat, faucibus vestibulum ipsum sit amet, tristique.</p>							
	</div>	
	<div class="portlet-links">	
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
		</ul>	
	</div>	
</div>
CSS
.portlet {
	padding: 30px 20px 20px;
	border: 1px solid rgba(0,0,0,.1);
	box-sizing: border-box;
	margin-bottom: 1em;
	background-color: white;
	position: relative;
}

.portlet h3 {
	margin: 0;
	padding: 0 0 15px 0;
	border-bottom: 1px solid #DDD8D4;
	color: #333;
	font-size: 21px;
}

.portlet .portlet-menu {
    position: absolute;
    color: #aaa;
    padding: 10px 20px;
    border-radius: 4px;
    right: 20px;
    top: 17px;
}

.portlet .portlet-menu:hover {
	background-color: #095DA3;
	color: white;
}

.portlet .portlet-content-wrapper {
	padding: 0;
}

.portlet .portlet-links {
	border-top: 1px solid #ccc;
	padding-top: 20px;
}

.portlet .portlet-links ul {
	padding: 0;
	margin: 0;
}

.portlet .portlet-links ul li {
    display: inline;
    list-style: none;
    padding-left: 18px;
    background-repeat: no-repeat;
    background-image: url(../img/link-arrow.svg);
    background-size: 11px 12px;
    background-position: 0 center;
    margin-right: 20px;
}

Alerts

Example markup
<span class="portlet-msg-info">Class name: portlet-msg-info</span>
Information alert
Class name: portlet-msg-info
Status alert
Class name: portlet-msg-status
Success alert
Class name: portlet-msg-success
Warning alert
Class name: portlet-msg-alert
Error alert
Class name: portlet-msg-info
CSS
.portlet-msg-info p,
.alert-info p,
.portlet-msg-status p,
.portlet-msg-error p,
.alert-error p,
.portlet-msg-alert p,
.alert-warning p,
.portlet-msg-success p,
.alert-success p {
    padding: 0 								!important;
}

/* Help messages, general additional information, etc. */
.portlet-msg-info, .alert-info {
    background-color: #E4F0F9 				!important;
    border: 1px solid #bce8f1 				!important;
    border-radius: 0;
    color: #31708f 							!important;
    display: block;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 10px;
	padding: 15px 20px 						!important;
    clear: both;
}

.portlet-msg-info:before, 
.alert-info:before {
    font-family: FontAwesome;
	content:"\f05a";
	color: #31708f;
	font-size: 1.5em;
	margin-right: 15px;
	vertical-align: middle;
	opacity: .85;
}

.portlet-msg-info.pending:before,
.msg-info.pending:before {
    font-family: FontAwesome;
    content:"\f017";
}

/* Status messages */
.portlet-msg-status {
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
    color: #31708f;
    display: block;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 10px;
	padding: 15px 20px 						!important;
}

.portlet-msg-status:before {
    font-family: FontAwesome;
	content:"\f10e";
	color: #31708f;
	font-size: 1.5em;
	margin-right: 15px;
	vertical-align: middle;
	opacity: .85;
}

/* Success messages */
.portlet-msg-success,
.alert-success {
    background-color: #dff0d8 				!important;
    border: 1px solid #d6e9c6 				!important;
    color: #3c763d 							!important;
    display: block;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 10px;
	padding: 15px 20px 						!important;
}

.portlet-msg-success:before,
.alert-success:before {
    font-family: FontAwesome;
	content:"\f058";
	font-size: 1.5em;
	color: #3c763d;
	margin-right: 15px;
	vertical-align: middle;
	opacity: .85;
}

/* Warning messages */
.portlet-msg-alert,
.alert-warning {
    background-color: #fcf8e3 				!important;
    border: 1px solid #faebcc 				!important;
    color: #8a6d3b 							!important;
    display: block;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 10px;
	padding: 15px 20px 						!important;
}

.portlet-msg-alert:before,
.alert-warning:before {
    font-family: FontAwesome;
	content:"\f071";
	color: #BA9352;
	font-size: 1.5em;
	margin-right: 15px;
	vertical-align: middle;
	opacity: .85;
}

/*  Error messages */
.portlet-msg-error,
.alert-error {
	background-color: rgba(169, 68, 66, 0.1)!important;
	border: 1px solid #ebccd1 				!important;
	color: #a94442 							!important;
	display: block;
	font-size: 16px;
	margin-bottom: 20px;
	margin-top: 10px;
	padding: 15px 20px 						!important;
}

.portlet-msg-error:before,
.alert-error:before {
	font-family: FontAwesome;
	content: "\f06a";
	color: #a94442;
	font-size: 1.5em;
	margin-right: 15px;
	vertical-align: middle;
	opacity: .85;
}