Colour and state

Pulsar uses a standardised colour palette which incorporates the colours defined in Jadu’s brand styleguide.

note

Some colours may deviate from the Jadu Brand Guidelines where necessary to meet WCAG 2.1 AA colour contrast requirements

Colour

When designing your user interface you must ensure that the colour of any text against it’s background must meet the minimum contrast ratio of 4.5:1 as defined by the Web Content Accessibility Guidelines 2.1 at AA level. This is especially important given that our main typeface (Proxima Nova) is rather thin.

Fetching palette colours

CSS colour variables are defined in the _vars.palette-base.scss file and can be used anywhere. You should aim to use the CSS variables rather than hardcoded values where possible.

.example {
  background-color: var(--color-bg);
  color: var(--color-text);
}

Colour palettes

State colours

Name	Base	Light	Dark
Primary	--color-primary	--color-primary-light	--color-primary-dark
Info	--color-info	--color-info-light	--color-info-dark
Success	--color-success	--color-success-light	--color-success-dark
Warning	--color-warning	--color-warning-light	--color-warning-dark
Danger	--color-danger	--color-danger-light	--color-danger-dark
Inverse	--color-inverse	--color-inverse-light	--color-inverse-dark

Base state colours have an alt variation that provides an accessible text colour which will ensure compatibility with WCAG 2.1 AA contrast ratios, other text colour choices can be made with the pick_best_color() function.

.element {
  background-color: var(--color-primary);
  color: var(--color-primary-alt);
}

Monochromes

Name	Base
Black	--color-black
Darker gray	--color-gray-darker
Dark gray	--color-gray-dark
Dull gray	--color-gray-dull
Gray	--color-gray
Light gray	--color-gray-light
Lighter gray	--color-gray-lighter
Lightest gray	--color-gray-lightest
Off white	color(gray, off-white)
White	var(--color-white)

Text and links

Name	Base
Text	--color-text
Help text	--color-text-help
Light text	--color-text-light
Disabled text	--color-text-disabled
Placeholder text	--color-text-placeholder
Link	--color-link
Dark link	--color-link-dark
Hover link	--color-link-hover
Focus link	--color-link-focus
Inverse link	--color-link-inverse
Inverse hover link	--color-link- inverse-hover
Disabled link	--color-link-disabled

Borders and backgrounds

Name	Base
Border	--color-border
Focus border	--color-border-focus
Background	--color-bg
Dark background Dark	--color-bg-dark
Light background	--color-bg-light
Selected background	--color-bg-selected
Focus background	--color-bg-focus

Background levels

These variables are designed to help you create a visually appealing and accessible design by gradually increasing contrast through different levels of background surfaces. This approach ensures a smooth transition between different UI elements, enhancing both usability and aesthetic appeal.

Name	Base
Surface 0	--color-bg-surface-0
Surface 1	--color-bg-surface-1
Surface 2	--color-bg-surface-2
Surface 3	--color-bg-surface-3

State

Use the correct colour and language combinations to properly communicate the state of a component to the user.

Accessibility tip

Never rely on colour alone, the language you use is more important than the colour when communicating state

Colour

Colour should be used where possible to visually reinforce the action or state that you are presenting to the user.

Example	Description
grey	indicates benign or neutral actions/states
blue	indicates the primary action for a given screen and should be used sparingly, ideally once per UI
green	indicates positive or successful actions/states
red	indicates negative or destructive actions/states
black	indicates blocking or restrictive actions/states

Language

The state of a ‘thing’ can be indicated by textual labels, and modified by interactive controls. You should carefully chose appropriate terms that make the most sense to non-technical people, providing clear information in as few words as possible.

Interactive controls which modify a state should, in most cases, use a verb:

Labels which indicate the current state should use past-participles or adjectives:

locked unlocked

visiblehidden

published offline

Note the careful choice of terms in the examples above for the ‘unpublish’ action, ‘offline’ is a better label adjective to use than ‘unpublished’.

Icons

When using iconography there may be the opportunity to use different icons to reflect the state and action and they may often appear together in the same interface.

State:

locked

Action:

State classes

Pulsar has a collection of common state classes that you can use in your markup, many components (link buttons, labels, badges, etc) cater for these states, eg: .btn--primary .label--success etc.

• primary
• success
• warning
• danger
• info
• inverse

The actual presentation of these state classes will differ depending on the component it is applied to so a danger button bay differ to a danger text input field. You should refer to the individual component documentaiton for state examples.

Switching state

When your styles need to switch based on state there are common .is-* or .has-* namespaced classes. When writing your own components you should stick to this convention to modify or communicate state.

note

Avoid hooking javascript behaviour to these selectors, use your own .js-* namespaced classes instead. It's OK to have multiple classes, one for style and one for behaviour, e.g. class="is-open js-open"

• .is-open

• .is-closed

• .is-active

• .is-disabled

• .has-success

• .has-warning

• .has-error

• .has-changed

As a general rule, the .has-* classes will apply a lighter version of the related state colour as hte background colour of the element, depending on the UI component, although it may have other effects too.

Regular text can also use the main state classes, using the colours defined in the palette. You can also extend these with the sass % placeholder.

• .text--primary
• .text--success
• .text--warning
• .text--danger
• .text--info
• .text--inverse
• .text--white
• .text--new

State variable Sass map

There is a sass map defined in _palette.base.scss which contains the state colours along with their text colour alternatives. You can use this in your own Sass components to loop over the state colouts to output repetitive rulesets to cover all states.

@each $state, $state-color, $state-color-alt in $state-colors {
  .myComponent--#{$state} {
    background-color: $state-color;
    color: $state-color-alt;
  }
}