Pattern Library

In addition to highlighting text, adding info alert and buttons we have mapped specific key actions to specific CTAs (calls to action) with including iconography for:

• Download (visitors access a file or form to fill in);
• Contact (visitors reach someone’s email or phone);
• Read (visitors read a PDF that contains information, for example);
• Go to… and Report (visitors go to another website or external form);
• Question (visitors can answer a question to fast track their journey);

The iconography of these specific actions is simple, direct, with geometric shapes which avoids round edges as much as possible. The overall style is flat, non-skeuomorphic and yellow accents are included to invite ‘activation’ and interaction. In the future we can expand these, if needed be.

Each icon is accompanied with an action verb to reinforce action, which ideally would be the start of the sentence inside the inset. The icons have a 45px (width) by 50px (height) canvas with a 30px breathing space before the corresponding labelling text of the right hand side. For more details, please refer to the iconography section.

For reference, the construction of buttons includes 40px padding on the left and right to allow space for the text to breathe. The height of each button is 60px.

We can highlight text with a yellow accent on the side, if there’s something that needs to be flagged but doesn’t necessarily require a major call to action.