Infusion icons are used to visually represent a wide range of actions made possible by the infusion components. In order to create a coherent family of icons, the following visual style guide has been prepared to guide designers in creating new infusion icons.
Design Principals: simple, direct, and reduced to minimal form.
The following grid has been developed to create a consistent yet flexible framework for designing infusion graphic elements. The proposed grid system results in a coherent visual language among icons that have various shapes and positioning.
Content Area
The graphic elements should remain within the boundaries defined by the content area that is limited to 512px x 512px. Otherwise, there is a risk of cutting off a portion of the icon from view.
Shapes
The following templates provide a flexible guide for creating graphic elements within the grid system. Using these templates helps to maintain visual proportion and unify the final designs.
Stroke
Consistent stroke weights are key to unifying the overall visual language. Maintain a 32px width for all stroke instances, including curves, angles, and both interior and exterior strokes. Do not round the corners or cap of the stroke.
Corners
Consistent corner radius are key to unifying the overall visual language. A 5px corner radius is used on the silhouette form of the icon. Interior corners should be square.
Fonts
If there is a need to include type in an icon, use ‘Open Sans’ typeface. Use semi bold, or bold font weight.