Colours

This is where the designer selects the pre-set background, font and border colours for the website. These colours are connected to classes that are already present throughout the Component System and should be the first colours set for a project. If the designer requires more colours than provided below, new swatches can be created, with new unique names to be defined by the designer. Any unused colour swatches can be left untouched for potential future use (recommended), or deleted if required.

Background colours

Apply background colours to the swatches to define primary, secondary and neutral background colours. The labels are the class names the designer can apply to any element to apply the given background colour to the element. The designer can add more swatches as needed, and will need to assign a new label (class name) to each.

Implementation tip
Apply these classes as combo classes to existing sections and containers for quick background style application.

Neutral

.bg-white

.bg-lightest

.bg-light

.bg-neutral

.bg-dark

.bg-darkest

.bg-black

Text colours

Text colours are useful when overriding default text colour styling. It is a good idea to assign these text styles to the design's appropriate text colour styles. In most instances basic text will have pre-defined colours associated with them (see Typography to define these). Neutral and Primary are the pre-set classes, however the designer can choose to add more as required.

Implementation tip
.t-white, as an example, is useful to apply to text that is placed on a dark background that defaulted to a dark text colour.

Neutral

.t-white

.t-light

.t-neutral

.t-dark

.t-darkest

.t-black

Border colours

Apply border colours to the border top (.bt) and border bottom (.bb) elements to define light, neutral and dark border colours. Select the border itself to change colour values, not the label. These classes are not restricted to colour-only. However styles such as thickness, dashes etc. may be best created as separate custom styles to avoid accidental use.

.bb-light

.bt-light

.br-light

.bl-light

.bb-neutral

.bt-neutral

.bb-dark

.bt-dark