Settings

This is where you will find global Sass variables such as colors, fonts and typesetting, and breakpoint variables used within media queries.

Breakpoints

Number variables corresponding to generic viewport measurements, and used within media query mixins. These values can be updated and new variables added as required for your project's needs.

The $text-measure variable is used to limit the maximum line length of text content for improved readability.

Colors

A limited range of prototyping colors, a custom color palette specific to your project, and common social media brand colors.

Color contrast

Make sure that the contrast ratio of text and interactive elements on your site meets the requirements of WCAG 2.1 as paraphrased in the following sections. The ideal contrast range to meet all requirements is 7:1 - 15:1. Higher contrast ratios can be triggering for some people.

1.4.3 Contrast (Minimum) (AA)

Text (including images of text) has a contrast ratio of at least 4.5:1 for 'regular' text and at least 3:1 for large text (at least 18pt / 24px, or bold and at least 14pt / 18.5px), unless the text is purely decorative.

1.4.6 Contrast (Enhanced) (AAA)

Text (including images of text) has a contrast ratio of at least 7:1 for 'regular' text and at least 4.5:1 for large text (at least 18pt / 24px, or bold and at least 14pt / 18.5px), unless the text is purely decorative.

1.4.11 Non-text Contrast (AA)

The visual presentation of UI components (their states - including focus indication - and boundaries) and graphical objects has a contrast ratio of at least 3:1 against adjacent colour(s).

Tools for checking colour contrast

Choose whichever you prefer from the following list:

Color palette

We advise you to use the Sass variables provided, rather than copying the hexadecimal (hex) color values. This will ensure that, in the event of a CSS update, your site will continue to use the most recent color palette.

Only use the variables in the context they’re designed for. In all other cases, you should reference the colour palette directly. For example, $blue is used as the default link color; if you want to use it for an additional purpose you should use $blue rather than $link-color.

Table of colors and notes on their usage

Text

$off-black #111111 Default text color

Links

$link-color $blue #005797 Link default color
$link-color--hover $deep-blue #024488 Link hover color
$link-color--visited $purple #920ba6 Link visited color

Borders

$border-color $twiki-gray #bdbdbd
$input-border-color $storm-gray #545454 Use for form input borders

Focus state

$focus-color $yellow #f9dc4a

Notifications

$info-color $w3c-blue #005a9c Border color for 'info' messages
$success-color #046704 Use for 'success' messages
$warning-color #c28605 Border color for 'warning' messages
$error-color #a82615 Use for 'error' messages

All theme colors

$red #e93737
$light-red #ec7070
$coral #fc7750
$light-coral #fea78d
$deep-yellow #f9c818
$yellow #f9dc4a
$deep-green #0a4343
$teal-green #237978
$aqua #1bc0d7
$light-blue #cbe0fb
$sky-blue #6bc8fe
$azure #0075ff
$w3c-blue #005a9c Main brand color
$blue #005797
$deep-blue #024488
$purple #920ba6
$pink #ddb0c8
$light-pink #eeccdc
$black #000000
$off-black #111111
$storm-gray #545454
$twiki-gray #bdbdbd
$mist-gray #f8f8fb
$off-white #fafafa
$white #ffffff

Debug

$pesticide is a useful variable which, when enabled, can help you debug your CSS layouts.

Fonts

Custom fonts are defined here using the @font-face CSS at-rule.

Paths

Variables for commonly used paths to asset directories.

Typesetting

Variables for font families and weights.

Avoiding flash of invisible text (FOIT)

The design system uses Bram Stein's Font Face Observer web font loader to optimise font loading and prevent a flash of invisible text (FOIT).

The default font stack is limited to a choice of system fonts similar to the desired web font. Use CSS Font Stack and Font Style Matcher to help pick suitable system fonts. This will minimise the flash of un-styled content (FOUC).

Font Face Observer detects when the @font-face files are loaded and adds the .fonts-loaded class to the html root element, at which point the web font will be used.