Icons, links and buttons • We have a unique icon design principle. Our icons are based on the same irregular circle shape with a clear graphic pictogram inside the circle. Other types of icons should be avoided. The icons should be used when specific functionality or headers must be emphasized. • Examples of icons – Size: 37*35px => large – Size: 21*20px => small – Note: When creating new icons the icon must have transparent background Icon colour #3e6b1c Link colour #529900 Hover link #F08C00 and underlined Link text 12 px Rounded corners: Radius 5 px
4
Embed
Icons, links and buttons We have a unique icon design principle. Our icons are based on the same irregular circle shape with a clear graphic pictogram.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Icons, links and buttons
• We have a unique icon design principle. Our icons are based on the same irregular circle shape with a clear graphic pictogram inside the circle. Other types of icons should be avoided. The icons should be used when specific functionality or headers must be emphasized.
• Examples of icons– Size: 37*35px => large
– Size: 21*20px => small
– Note: When creating new icons the icon must have transparent background
Icon colour #3e6b1cLink colour #529900Hover link #F08C00 and underlinedLink text 12 pxRounded corners: Radius 5 px
2
Links
• A consistent treatment of links and buttons is critical to enable high usability. If the link is part of the body text place the link with arrow icon to own row. Links as a part of the sentence are not visible enough. For links that point to a web page outside Fortum a specific link icon is used.
• An alternative link treatment is grey underlined text. This should only be used in specific cases for links that have a lower priority, such as in the header and footer. Default Hover
Link outside Fortum site (same function as the basic link)
3
ButtonsNo other style for buttons than the buttons described on this page should be used. Depending on the browser the mouse cursor will either be shown as a hand icon or as a normal cursor.