Skip to main content

Pattern Library

Welcome to the pattern library for WorldSkills Member Countries and Regions. These elements are like Lego blocks which you can use to build a high-performance, accessible website using the WorldSkills brand. You can find out more about the WorldSkills brand as well as take a look at the pattern library for worldskills.org for more details on implementation.  

Colour palette

Determine this colour palette in collaboration with WorldSkills.

  • First #005670
  • Second #48A9C5
  • Mute #6FA287
  • Grey #D0D3D4
  • Accent 1 #009639
  • Accent 2 #FF6A13
  • Accent 3 #CE0F69

Banner with image

Manually colourized image with optional call to action.  

Title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

Banner cyan

$second colour for background and $first pattern.

Title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ligula convallis, consequat diam at.

Find out more

Banner purple

$mute colour for background and $first pattern.

Title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at ligula convallis, consequat diam at.

Find out more

Banner with text only

Title goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Subhead goes here.

Find out more

Banner for quote

Quote with optional call to action.  

Quote goes here. It can't be very long but there is some space.

— Citation for the quote

Card dark blue

Feature box

Card cyan

$second colour for background and $grey pattern.

Card orange

$accent2 colour for background and $grey pattern.

Card purple

$first colour for background and $accent1 pattern.

Card pink

$accent3 colour for background and $grey pattern.

Card with image

Title goes here

More