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:
- Accessible Colors
- Color Contrast Analyser Download
- Contrast Ratio
- Link Contrast Checker
- Who Can Use
- Text on background image a11y check
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.
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.