Colour

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

Particular care should be taken to ensure that the colour of any text against it's background must meet the WCAG AA ratio for visual contrast (4.5:1), which is especially important given that our main typeface (Proxima Nova) is rather thin. While there's no specific accessibility requirement that requires UI elements to meet the same contrast ratio, Pulsar requires that interactive elements like form control outlines also meet AA compliance.

Simply put, if you need to make sure an element is completely visible, whether that's for visually impaired users, or when displaying your UI on a cheap projector in a brightly lit room, use AA compliant colours.

Colour variables are defined in the _palette.base.scss file and can be used anywhere. You should aim to use the sass variables rather than the hex/rgb values where possible.

Fetching colour values

Use the color() function to fetch a colour from the palette.

color(jadu-blue);

Pass the optional 'tone' argument to fetch a variation of a colour if available in the palette.

color(jadu-blue, light);

Use these in your Sass in place of regular colour values.

.my-element {
    background-color: color(gray, light);
    color: color(text);
}

Palettes

State colours

This palette helps to communicate state, and the effect of a particular action.

See the Pen docs - colour by Paul Stanton (@stanton) on CodePen.

Each of the state variables has an alternate version which is used to define the colour of any overlaid text or icons. Eg: color(success, alt).

Monochromes

Used for colouring UI elements and providing contrast

See the Pen docs - colour - monochromes by Paul Stanton (@stanton) on CodePen.

Text and links

See the Pen docs - colour - text & links by Paul Stanton (@stanton) on CodePen.

Jadu principle colours

Our colours are what give us our personality. We’re bright, bold and confident. We’re clever but clear.

See the Pen docs - colour - jadu branding by Paul Stanton (@stanton) on CodePen.

Each of the principle colours has its individual palette. These can be used as combinations but with care and good reason. If in doubt, stick to the palette.

Jadu red

Associated with CONTINUUM.

See the Pen docs - color - jadu red by Paul Stanton (@stanton) on CodePen.

Jadu blue

Associated with CMS.

See the Pen epQEoL by Paul Stanton (@stanton) on CodePen.

Jadu green

Associated with XFP.

See the Pen docs - colour - jadu green by Paul Stanton (@stanton) on CodePen.

Jadu teal

Associated with CXM.

See the Pen docs - colour - teal by Paul Stanton (@stanton) on CodePen.

Jadu pink

Associated with CP.

See the Pen docs - colour - pink by Paul Stanton (@stanton) on CodePen.