Colour and gradients
Minimise colour usage to tints of Choral Red and
a supporting grey swatch. The strokes on Product benefit icons use a gradient trail, the same as on
our moving points. Remember to apply the rules for
using gradients.
Trailing stroke
The trailing strokes on product benefit icons utilise the gradient trail found on our moving points. To keep consistency always use an 8px stroke weight with
an 8px point. Larger points should move without a trailing stroke.
Composition
When creating product benefit icons always use points and trails as the main elements. Use large shapes as background elements only. Feel free to use different sized points. Just make sure to stick
to the rule of four and don’t use too many sizes in
one composition.
Use large shapes only as background elements
Always use the trails to indicate movement
Try to use two ‘Points’ sizes at most
Overview
These are visual symbols used to represent the product benefits and features of our loans. These
are more expressive, utilising motion and colour. They help to illustrate and reinforce ideas at a
glance for users. Like our UI icons these are also
built on the 40px grid.
Expressive motion illustrations help
to reinforce our product benefits.
