Styleguide

Design foundations for the theme — colours, typography, spacing, buttons, forms and the grid.

Colours

Brand Colours

The palette. Everything else on this page is built from these, so changing one here recolours the site.

Brand

$color-brand-primary #0d234c
$color-brand-secondary #0cb7eb
$color-brand-tertiary #fbca41
$color-brand-quaternary #01399a

Soft tints

$color-tint-blue #e6f6fd
$color-cream #f7f5ee

Neutrals

$color-black #000000
$color-grey-xdark #3a3a3a
$color-grey-dark #6e6e6e
$color-grey #8a8a8a
$color-grey-light #d4d4d4
$color-grey-xlight #f5f5f5
$color-white #ffffff

Feedback

$color-validation-error #c00000
$color-validation-success #008000

Buttons

One row per style, each as its resting colour, text, then hover. Primary is the default button; a module's button Style setting picks the others.

Primary

$color-btn-bg $color-brand-primary #0d234c
$color-btn-text $color-white #ffffff
$color-btn-hover-bg $color-grey-dark #6e6e6e
$color-btn-hover-text $color-white #ffffff

Secondary

$color-btn-secondary-bg $color-brand-secondary #0cb7eb
$color-btn-secondary-text $color-white #ffffff
$color-btn-secondary-hover-bg $color-grey-dark #6e6e6e
$color-btn-secondary-hover-text $color-white #ffffff

Tertiary

$color-btn-tertiary-bg $color-brand-tertiary #fbca41
$color-btn-tertiary-text $color-brand-primary #0d234c
$color-btn-tertiary-hover-bg $color-grey-dark #6e6e6e
$color-btn-tertiary-hover-text $color-white #ffffff

Quaternary

$color-btn-quaternary-bg $color-brand-quaternary #01399a
$color-btn-quaternary-text $color-white #ffffff
$color-btn-quaternary-hover-bg $color-grey-dark #6e6e6e
$color-btn-quaternary-hover-text $color-white #ffffff

Outline

$color-btn-outline-border $color-btn-bg #0d234c
$color-btn-outline-text $color-btn-bg #0d234c
$color-btn-outline-hover-bg $color-btn-bg #0d234c
$color-btn-outline-hover-text $color-btn-text #ffffff

Other

$color-btn-text-underline $color-brand-secondary #0cb7eb

Forms

Text fields first, then the checks and radio buttons built on them, then the messages around a field.

Inputs

$color-form-input-bg $color-white #ffffff
$color-form-input-text $color-brand-primary #0d234c
$color-form-input-placeholder $color-grey-dark #6e6e6e
$color-form-input-border $color-grey #8a8a8a
$color-form-input-underline $color-grey #8a8a8a
$color-form-input-focus $color-brand-secondary #0cb7eb

Checkboxes and radios

$color-form-check-checked-bg $color-brand-secondary #0cb7eb

Radio buttons

$color-form-radio-btn-bg $color-form-input-bg #ffffff
$color-form-radio-btn-text $color-form-input-text #0d234c
$color-form-radio-btn-border $color-form-input-border #8a8a8a
$color-form-radio-btn-hover-border $color-form-input-focus #0cb7eb
$color-form-radio-btn-checked-bg $color-btn-bg #0d234c
$color-form-radio-btn-checked-text $color-btn-text #ffffff

Messages

$color-form-required-text $color-validation-error #c00000
$color-form-validation-error $color-validation-error #c00000
$color-form-validation-success $color-validation-success #008000

Backgrounds

Module backgrounds

Modules with a Background setting can sit on any of these, and their headings, text, links and buttons switch to suit. Set the colours per brand in the Surfaces section of _settings.colors.scss; the build warns when a pair falls below WCAG AA.

Light grey

A heading here

Body copy with a link in it.

Button

Pale blue

A heading here

Body copy with a link in it.

Button

Cream

A heading here

Body copy with a link in it.

Button

Primary brand colour

A heading here

Body copy with a link in it.

Button

Secondary brand colour

A heading here

Body copy with a link in it.

Button

Typography

Fonts

Webfonts loaded by the theme (templates/layouts/base.html) — every sample below renders the actual loaded cut. Set them with $global-font-family-heading and $global-font-family.

neue-haas-grotesk-display

Headings — h1 to h6 and every heading style, in medium (600). Loaded from Adobe Fonts.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

neue-haas-grotesk-text

Body copy, eyebrows, buttons and forms — regular (400) with bold (700) for emphasis; a medium (500) cut is loaded too. Fallback stack: sans-serif. Loaded from Adobe Fonts.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Regular · 400 The quick brown fox jumps over the lazy dog.
Italic · 400 The quick brown fox jumps over the lazy dog.
Medium · 500 The quick brown fox jumps over the lazy dog.
Medium Italic · 500 The quick brown fox jumps over the lazy dog.
Bold · 700 The quick brown fox jumps over the lazy dog.
Bold Italic · 700 The quick brown fox jumps over the lazy dog.

Type scale

Sizes are fluid — each readout shows font · computed size / line height · weight at the current viewport width.

Heading H0
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
Eyebrow heading
Paragraph large — the quick brown fox jumps over the lazy dog.
Paragraph — the quick brown fox jumps over the lazy dog.
Paragraph small — the quick brown fox jumps over the lazy dog.
Paragraph extra small — the quick brown fox jumps over the lazy dog.

Buttons

Primary

The default button — what a module's button Style setting gives you unless you pick another.

c-btn

Button

Icon right

Icon left
c-btn c-btn--small

Button

Icon right

Icon left

Outline

No fill, a border in the button colour; hover fills it. On the primary and secondary backgrounds it turns white with the solid button.

c-btn c-btn--outline

Button

Icon right

Icon left
c-btn c-btn--small c-btn--outline

Button

Icon right

Icon left

Secondary

The secondary brand colour (cyan). For a second call to action or an accent button.

c-btn c-btn--secondary

Button

Icon right

Icon left
c-btn c-btn--small c-btn--secondary

Button

Icon right

Icon left

Tertiary

The tertiary brand colour (yellow). For the highlight call to action on a dark or busy background.

c-btn c-btn--tertiary

Button

Icon right

Icon left
c-btn c-btn--small c-btn--tertiary

Button

Icon right

Icon left

Text

Underlined text only, like the links in the CMS content. For a quiet link-style action next to a button. The small version sits inline with text, e.g. the links in the masthead's breadcrumb.

c-btn c-btn--text

Button

Icon right

Icon left
c-btn c-btn--text c-btn--small

Button

Icon right

Icon left

Form

Submit buttons — HubSpot form buttons (.hs-button, .hsfc-Button) extend c-btn--form.

c-btn c-btn--form
c-btn c-btn--form-small

Status pills

c-status

A small pill naming a state, traffic-light style: a pale tint of the status colour behind a deep shade of it. Pick the variant by what the state means, and always keep the label, as colour is never the only signal. The text and tint of each pair are set by the Status tokens in the settings, and keep 4.5:1 contrast, on white and on a table row's hover colour.

c-status c-status--success
Completed
c-status c-status--warning
In Progress
c-status c-status--error
Time's nearly up
c-status c-status--info
Ready to Retake
c-status
Not Started

Small

c-status--small at the extra small text size, for a count or a tag inside other content, such as "2 selected" in a filter group's header. It works with every variant and with an icon.

c-status c-status--info c-status--small
2 selected Completed Not started

With an icon

An optional icon to the left of the label, from the same icon set as the buttons. It is decorative (aria-hidden), so the label still names the state.

c-status--success
Completed
c-status--warning
In Progress
c-status--error
Time's nearly up
c-status--info
Ready to Retake
c-status
Not Started
Timer
00:29:27 00:04:59 00:00:59

Alert modal

c-modal

A short question over the page, in place of the browser's own alert or confirm box: an icon, a title, a message and two buttons (the action, then a way out). It is a native <dialog class="c-modal"> opened with showModal(), so focus is trapped inside, Esc closes it and the page behind is inert. A click on the overlay closes it too, so keep the message answerable by Cancel. Use the primary button for the action and the outline button to back out.

Open the real thing:

Form

This is a form Input field Textarea field Select field

Radio field Radio 1 Radio 2

Radio button field

A radio that looks and acts like a button, for choices picked at a glance (e.g. an exam's answers): outlined until chosen, then filled like the primary button. c-form__radio-btn on the input, followed by a span.

Option one Option two A longer option that runs onto more than one line

Checkbox field Checkbox 1 Checkbox 2

Space

Spacing scale

Fluid values scale with the viewport — the px readout is live at the current size.

$unit-2xs --space-2xs
$unit-xs --space-xs
$unit-s --space-s
$unit-m --space-m
$unit-l --space-l
$unit-xl --space-xl
$unit-2xl --space-2xl
$unit-3xl --space-3xl
$unit-4xl --space-4xl
$unit-5xl --space-5xl
$unit 10px

Grid

Placeholder images

No placeholder library

This portal has no placeholder_images HubDB table, or it has no images, so every empty image field shows the loud placeholder below. Run npm run init:site to create the table with a default set, then curate it in Content → HubDB.