Styleguide

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

Colours

Brand Colours

Brand

$color-brand-primary #0776df
$color-brand-secondary #c2410c

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

Default

$color-btn-bg $color-brand-primary #0776df
$color-btn-text $color-white #ffffff

Hover

$color-btn-hover-bg $color-brand-secondary #c2410c
$color-btn-hover-text $color-white #ffffff

Forms

Inputs

$color-form-check-checked-bg $color-brand-secondary #c2410c
$color-form-input-bg $color-white #ffffff
$color-form-input-border $color-grey #8a8a8a
$color-form-input-focus $color-brand-secondary #c2410c
$color-form-input-placeholder $color-grey-dark #6e6e6e
$color-form-input-text $color-brand-primary #0776df

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

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

Dark grey

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.

Inter

Headings — h1 to h6 and every heading style. Self-hosted by the theme.

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

Inter

Body copy, eyebrows, buttons and forms — regular (400) and bold (700). Fallback stack: sans-serif. Self-hosted by the theme.

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.
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

Regular button

Regular icon right button

Regular icon left button

Small button

Small icon right button

Small icon left button

Form

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

From HubDB

Any image field left empty shows one of these. Add, remove or replace them in the placeholder_images HubDB table, then publish the table.