Colour - Grid System

Table of contents

Related accessibility topic

Background colours

Use background colours to highlight content and / or create information blocks that focus the user's attention. You can apply these background colours to a grid cell or to an HTML element for example, a heading. Do not overuse background colours or they will lose their effect.

Background colour options
Class Heading Paragraph Span Div
background-white

Lorem ipsum

Lorem ipsum

 Lorem ipsum
Lorem ipsum
background-light

Lorem ipsum

Lorem ipsum

 Lorem ipsum
Lorem ipsum
background-medium

Lorem ipsum

Lorem ipsum

 Lorem ipsum
Lorem ipsum
background-dark

Lorem ipsum

Lorem ipsum

 Lorem ipsum
Lorem ipsum
background-accent

Lorem ipsum

Lorem ipsum

 Lorem ipsum
Lorem ipsum
background-highlight

Lorem ipsum

Lorem ipsum

 Lorem ipsum
Lorem ipsum
View Code 
<div class="span-3 background-dark">
	<p>Background dark</p>
	</div>

Font colours

Use font colours to highlight content and / or create information blocks that focus the user's attention. Do not overuse font colours or they will lose their effect.

Font colour options
Class Details Example
color-medium A muted dark tone used for accent text. Resulting text colour
color-dark The default text colour. Resulting text colour
color-accent Match the font colour to colour theme. Resulting text colour
color-attention Draw attention to something extra important. Resulting text colour
View Code 
<p class="color-attention">Super important text</p>