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 # Hover link #F08C00 and underlined Link text 12 px Rounded corners: Radius 5 px

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. 2 Default Hover Arial 12px, #529900Arial 12px, #F08C00, Underline Arial 11 px, #999999Arial 11 px, F08C00, Underline Arial 14 px, #f08C00Arial 14 px, #f08C00, Underline Link outside Fortum site (same function as the basic link)

Buttons 3 No 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. Primary button: Text: Arial, Regular, #ffffff Button color: # Rounded corners 4 px Hover: Button color: # DeviceText – primary buttonText – Secondary Wide desktop15 px12 px Tablet and desktop14 px? Px Phone14 px? px Secondary button: Text: Arial, Bold, #ffffff Border: 1px slid, #DDD Gradient: #000, #F0F0F0 Rounded corners 4 px Hover: Arial Bold, 12 px, #F08C00 Border: 1px solid #AAA Gradient: #F0F0F0, #000

Buttons in marketing oriented material 4 Buttons can also be page wide buttons: Text: Arial, Regular, #ffffff Text size: Button color: # Rounded corners 4 px