Pattern Library

The overall style is flat, non-skeuomorphic and new yellow accents are included on a small part to suggest ‘activation’ and interaction alongside medium grey colour. The exception to yellow accent use is in place on the information icon, which doesn’t require interaction from users.

Whenever possible each CTA icon would be accompanied by an action label, which should be at the start of the call to action text (i.e Contact, Download, Read, Go to, Question, Form and Search). In this way, by combining an icon with label, we are facilitating clear communication and inviting interaction. At the moment, we have mapped seven actions, but in the future we can expand these icons, if needed be.

The iconography of these specific actions is simple, direct, with geometric shapes avoiding round edges as much as possible.

So far, we have created icons for: ‘Contact’, ‘Download’, ‘Read’, ‘Go to’ and 'Report', ‘Question’, ‘Form’ and ‘Search’. The information icon is also included below.

The construction of these icons requires, for consistency, a canvas of 45px (width) x 50px (height). The icons have 4px line weight in grey #666666 and any yellow accent would use #fed100, therefore using two of our colours in the main colour palette.

More consideration is required for iconography on mobile, to balance the hierarchy of priority, with main nav to be proportionally larger when displayed on users’ small viewport screens.