Introduction

Fingrid's web design components include web design elements, guidelines and recommendations for designers and front-end developers to utilize in Fingrid's various digital applications.

Components and examples construct more like a web style guide, not a full front-end web framework. Depending on each project with their different goals and technical requirements, it is up to developers to choose what digital components they may utilize in their projects for Fingrid.

Grid

12-Column Grid System

Fingrid’s web design components do not include a responsive grid system. You may use the grid system of your choice together with Fingrid’s components.

In the example web pages, the grid that is available in the Bootstrap framework has been used. Whenever possible, make your site fully responsive and use the grid of your choice fluently over different breakpoints.

Typography

Below you will find the specifications for Fingrid’s web typography. Fingrid’s brand font, Lab Grotesque, is the font that we use on our web pages and in web applications.


All CSS styles are fully responsive with customizable breakpoints, paddings and margins. Do not change the fonts to any other fonts than mentioned in these guidelines.

Heading styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraph styles

This is the primary paragraph style, class="p1". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus urna quis dui accumsan eleifend. Nullam nulla libero, cursus ac tincidunt eget, finibus sit amet augue. Nam non lectus et nisi blandit gravida. Duis lobortis, est id euismod ultrices, velit mi dignissim est, vitae semper ipsum sem sagittis diam. Pellentesque ullamcorper vulputate luctus.

This is alternative paragraph style, class="p2". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus urna quis dui accumsan eleifend. Nullam nulla libero, cursus ac tincidunt eget, finibus sit amet augue. Nam non lectus et nisi blandit gravida. Duis lobortis, est id euismod ultrices, velit mi dignissim est, vitae semper ipsum sem sagittis diam. Pellentesque ullamcorper vulputate luctus.

This is alternative paragraph style, class="p3". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus urna quis dui accumsan eleifend. Nullam nulla libero, cursus ac tincidunt eget, finibus sit amet augue. Nam non lectus et nisi blandit gravida. Duis lobortis, est id euismod ultrices, velit mi dignissim est, vitae semper ipsum sem sagittis diam. Pellentesque ullamcorper vulputate luctus.

CSS Typography

h1 {	
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 70px;	
	font-weight: bold;	
	line-height: 80px;
}
h2 {		
	color: #3E5660;
	font-family: "Lab Grotesque";	
	font-size: 46px;	
	font-weight: bold;	
	line-height: 55px;
}
h3 {
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 38px;	
	font-weight: bold;	
	line-height: 48px;
}
h4 {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 30px;	
	font-weight: bold;	
	line-height: 40px;
}
h5 {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 24px;	
	font-weight: bold;	
	line-height: 33px;
}
h6 {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 20px;	
	font-weight: bold;	
	line-height: 27px;
}
p {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 18px;	
	line-height: 26px;
}
.p1 {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 16px;	
	line-height: 23px;
}
.p2 {	
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 14px;	
	line-height: 20px;
}
	@media and screen (min-width:768px) {
		h1 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 60px;	
			font-weight: bold;	
			line-height: 71px;
		}
		h2 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 46px;	
			font-weight: bold;	
			line-height: 55px;
		}
		h3 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 38px;	
			font-weight: bold;	
			line-height: 48px;
		}
		h4 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 30px;	
			font-weight: bold;	
			line-height: 40px;
		}
		h5 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 24px;	
			font-weight: bold;	
			line-height: 33px;
		}
		h6 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 20px;	
			font-weight: bold;	
			line-height: 27px;
		}
		.p1 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 18px;	
			line-height: 26px;
		}
		.p2 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 16px;	
			line-height: 23px;
		}
		.p3 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 15px;	
			line-height: 21px;
		}
	}
		@media and screen(max-width: 767px) {
				h1 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 30px;	
				font-weight: bold;	
				line-height: 35px;
			}
			h2 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 26px;	
				font-weight: bold;	
				line-height: 31px;
			}
			h3 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 22px;	
				font-weight: bold;	
				line-height: 28px;
			}
			h4 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 22px;	
				font-weight: bold;	
				line-height: 28px;
			}
			h5 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 20px;	
				font-weight: bold;	
				line-height: 26px;
			}
			h6 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 17px;	
				font-weight: bold;	
				line-height: 22px;
			}
			.p1 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 18px;	
				line-height: 26px;
			}
			.p2 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 16px;	
				line-height: 23px;
			}
			.p3 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 16px;	
				line-height: 23px;
			}
		}

								
Links

Lorem ipsum link dolor sit amet

CSS Typography
 

.link {	
	color: #D5121E;	
	font-family: "Lab Grotesque";	
	font-size: 14px;	
	line-height: 22px;
	text-decoration: none;
}
.link:hover {
	text-decoration: underline;
}

								

Colours

Primary colour palette

Use these colours on all web pages and in web applications. More detailed recommended usage listed below.

Red

Usage in buttons, links and highlights

RGB: 213R 18G 30B
HEX: #D5121E
Bluish grey 1

Primary text colour

RGB: 62R 86G 96B
HEX: #3E5660
Bluish grey 2

Usage in buttons and background elements

RGB: 109R 131G 143B
HEX: #6D838F
Bluish grey 3

Usage in disabled elements, outlines and strokes

RGB: 213R 221G 227B
HEX: #D5DDE3
Bluish grey 4

Usage in background elements

RGB: 233R 238G 242B
HEX: #E9EEF2
Secondary colour palette

To be used as a non-dominant colour, never for example as website background. Can be used for example in infographics and graphs.

Yellow
RGB: 109R 131G 143B
HEX: #DDC720
Green
RGB: 213R 221G 227B
HEX: #009A96
Violet
RGB: 233R 238G 242B
HEX: #A15885

Buttons

Primary buttons

Buttons can be used in different widths.

Small

Recommended use with small type size and mobile applications

Medium

Recommended use with medium type size and tablet applications

Large

Recommended use with large type size and websites that are optimised for desktop

Button states

Active

Hover

Pressed

Disabled

Secondary button

Outlined

HTML

<button class="finui_small_btn" type="button">Button</button>
<button class="finui_medium_btn" type="button">Button</button>
<button class="finui_large_btn" type="button">Button</button>
<button class="finui_medium_btn_outlined" type="button">Button</button>
CSS

.finui_small_btn {
	padding: 10px 20px;
	background-color: #D5121E;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	outline: none;
}
.finui_medium_btn {
	padding: 11px 23px;
	background-color: #D5121E;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 15px;
	outline: none;
}
.finui_large_btn {
	padding: 13px 24px;
	background-color: #D5121E;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 17px;
	outline: none;
}
.finui_medium_btn_outlined {
	padding: 11px 23px;
	background-color: transparent;
	color: #D5121E;
	border: 2px solid #D5121E;
	border-radius: 0;
	font-size: 15px;
	outline: none;
}
button:disabled {
	padding: 11px 23px;
	background-color: #C8C8C8;
	color: #E6E6E6;
	border: 0;
	font-size: 15px;
}	
button:active {
	background-color: #D5121E;
	color: #fff;
	border: 0;
}	
button:hover {
	background-color: #6D848F;
	color: #fff;
	border: 0;
}
button:focus {
	background-color: #3E5660;
	color: #fff;
	border: 0;
}

								

Forms

Text fields
HTML

<input class="finui_form_grey" type="text" name="" placeholder="">
<br>
<input class="finui_form_green" type="text" name="" placeholder="">
<br>
<input class="finui_form_red" type="text" name="" placeholder="">
<br>
<textarea class="finui_textarea" placeholder=""></textarea>
CSS

.finui_form_grey {
	width: 360px;
	color: #3E5660;
	font-size: 20px;
	padding: 14px 20px;
	border: 1px solid #6D848F;	
	background-color: #fff;
	outline: none;
	box-sizing: border-box;
}
.finui_form_green {
	width: 360px;
	color: #3E5660;
	font-size: 20px;
	padding: 14px 20px;
	border: 2px solid #3E5660;
	background-color: #fff;
	outline: none;
	box-sizing: border-box;
}
.finui_form_red {
	width: 360px;
	color: #3E5660;
	font-size: 20px;
	padding: 14px 20px;
	border: 2px solid #D5121E;
	background-color: #fff;
	outline: none;
	box-sizing: border-box;
}
.finui_textarea {
	width: 360px;
	height: 273px;
	color: #3E5660;
	font-size: 20px;
	padding: 11px 20px;
	border: 1px solid #6D848F;
	background-color: #fff;
	outline: none;
	resize: none;
	box-sizing: border-box;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #6D848F;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #6D848F;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #6D848F;
}
:-moz-placeholder { /* Firefox 18- */
  color: #6D848F;
}

								
Select field
HTML

<div class="finui_select_form_container">
<!--[if gte IE 9]><label for="favcity" class="ie9"><![endif]-->
<!--[if !IE]><!--><label for="option"><!--<![endif]-->
<span class="finui_caret"></span>
<select id="option" name="select">
<option value="" hidden>Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</label>
</div>
CSS

select::-ms-expand {
    display: none;
}
select {
	-webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
.finui_select_form_container {
	width: 100%;
	height: 100%;
	font-size: 20px;
  	position: relative;
  	display: inline-block;
}
.finui_select_form_container select {
	outline: none;
    -webkit-appearance: none!important;
    -moz-appearance: none !important;
  	display: block;
  	width: 360px;
  	padding: 13px 20px 13px 20px;
  	margin: 0;
	border: 1px solid #6D848F;  	
	border-radius: 0;
  	background: #fff;
  	color: #6D848F;
  	font-size: 20px;
}
.finui_select_form_container .finui_caret {
    background: #fff;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 3px;
    width: 50px;
    height: 10%;
    background: transparent; 
    pointer-events: none;
}

.finui_select_form_container .finui_caret:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    margin-top: -5px;
    pointer-events: none;
    border-top: 10px solid #6D848F;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.finui_select_form_container .finui_caret:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 28px;
    margin-top: -5px;
    pointer-events: none;
    border-top: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
label[for=finui_option] select::-ms-expand {
    display: none;
}


label[for=finui_option].ie9 select {
    width: 100%;
}


						
Radio buttons
HTML

<label for="radio-one" class="finui_radiobuttons_label">
<input type="radio" id="radio-one" name="radio"> <span id="finui_radiobtn"></span>Radio button
</label>
<label for="radio-two" class="finui_radiobuttons_label">
<input type="radio" id="radio-two" name="radio"> <span id="finui_radiobtn"></span>Radio button checked
</label>
<label for="radio-three" class="finui_radiobuttons_label">
<input type="radio" id="radio-two" name="radio"> <span id="finui_radiobtn_disabled"></span>Radio button disabled
</label>
CSS

[type="radio"] {
  	border: 0;
  	height: 1px; 
  	margin: -1px;
  	padding: 0;
  	position: absolute;
  	width: 1px;
  	visibility: hidden;
}
.finui_radiobuttons_label {
  	display: block;
  	cursor: pointer;
  	line-height: 40px;
  	font-size: 14px;
  	margin: 8px;
}
span#finui_radiobtn {
    font-size: 20px;
    line-height: 20px;
}
span#finui_radiobtn_disabled {
    font-size: 20px;
    line-height: 20px;
}
[type="radio"] + span#finui_radiobtn:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: #D5DDE3;
  vertical-align: -0.25em;
  border-radius: 1em;           
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.1em #3E5660;  
  margin-right: 0.75em;
  transition: 0.5s ease all;   
}
[type="radio"] + span#finui_radiobtn_disabled:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: #D5DDE3;
  vertical-align: -0.25em;
  border-radius: 1em;
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.1em #E9EEF2;
  margin-right: 0.75em;
  transition: 0.5s ease all;
}
[type="radio"]:checked + span#finui_radiobtn:before {
    background-color: #3E5660!important;
    box-shadow: 0 0 0 0.1em #3E5660;
}

								
Checkboxes
HTML

<ul class="finui_checkbox_list">
<li>
<input class="finui_checkbox" id="checkbox-1" type="checkbox" value="value1">
<label for="checkbox-1">Checkbox</label>
</li>
<li>
<input class="finui_checkbox" id="checkbox-2" type="checkbox" value="value2" checked>
<label for="checkbox-2">Checked</label>
</li>
<li>
<input class="finui_checkbox finui_checkbox_invalid" id="checkbox-3" type="checkbox" value="value3">
<label for="checkbox-3">Invalid checkbox</label>
</li>
<li>
<input class="finui_checkbox" id="checkbox-4" type="checkbox" value="value4" disabled>
<label for="checkbox-4">Disabled checkbox</label>
</li>
</ul>
CSS

.finui_checkbox_list {
  margin: 0;
  padding: 0;
  list-style-type: none; 
}
.finui_checkbox {
    position: absolute!important;
    opacity: 0; 
}
.finui_checkbox + label {
    position: relative;
    cursor: pointer;
    padding: 0;
    line-height: 24px; 
}
.finui_checkbox + label:before {
    content: '';
    margin-top: -1px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background: white;
    border: 1px solid #3E5660; 
}
.finui_checkbox + label:after {
    line-height: 24px;
}
.finui_checkbox:disabled + label {
    color: #b8b8b8;
    cursor: auto; 
    font-size: 14px;    
}
.finui_checkbox:disabled + label:before {
    box-shadow: none;
    border: 1px solid #D5DDE3;
}
.finui_checkbox:checked + label:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 12px;
    line-height: 24px;
    background: #3E5660;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 #3E5660, 4px 0 0 #3E5660, 4px -2px 0 #3E5660, 4px -4px 0 #3E5660, 4px -6px 0 #3E5660, 4px -8px 0 #3E5660, 4px -10px 0 #3E5660;
    transform: rotate(45deg); 
}
.finui_checkbox_invalid + label:before {
    border: 1px solid #D5121E; 
}

								
Toggle
Toggle button off
Toggle button on
Toggle button disabled
HTML

<div class="finui_toggle_btn_container">
<label class="finui_toggle_switch_container">
<input type="checkbox" checked>
<span class="finui_toggle_btn"></span>
</label><div class="finui_toggle_text">Toggle button text</div>
</div>
<div class="finui_toggle_btn_container">
<label class="finui_toggle_switch_container">
<input type="checkbox" disabled>
<span class="finui_toggle_btn finui_toggle_btn_disabled"></span>
</label><div class="finui_toggle_text">Toggle button disabled</div>
</div>
CSS

.finui_toggle_switch_container {
  	position: relative;
  	width: 48px;
  	height: 24px;
  	display: inline-block;
  	vertical-align: middle;
  	margin: 10px 0;
}
.finui_toggle_switch_container input {
  	display:none;
}
.finui_toggle_btn {
  	position: absolute;
  	cursor: pointer;
  	border: 1px solid #3E5660;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	background-color: #fff;
    -webkit-transition: .4s;
  	transition: .4s;
  	border-radius: 34px;
}
.finui_toggle_btn_disabled {
  	border: 1px solid #D5DDE3;
}
.finui_toggle_btn:before {
  	position: absolute;
  	content: "";
  	height: 10px;
  	width: 10px;
  	left: 8px;
  	right: 8px;
  	bottom: 6px;
  	background-color: #D5DDE3;
    -webkit-transition: .4s;
  	transition: .4s;
  	border-radius: 50%;
}
.finui_toggle_switch_container input:checked + .finui_toggle_btn {
  	background-color: #fff;
  
}
.finui_toggle_switch_container input:focus + .finui_toggle_btn {
  	box-shadow: 0 0 1px #2196F3;
}
.finui_toggle_switch_container input:checked + .finui_toggle_btn:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
  	transform: translateX(26px);
  	right: 8px!important;
  	height: 14px;
  	width: 14px;
  	top: 4px;
  	left: 0px;
  	background-color: #3E5660;
}
.finui_toggle_btn:after {
 	width: 14px;
  	height: 14px;
}
.finui_toggle_text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px;
}

								

Effects

Effects used in digital applications are, in this context, related to hovering and animating of elements, as well as page scrolling.

The starting point for effects is to create a modern look & feel and to subtly emphasize the choices made by the user. Prefer using effects like fading, parallax scrolling and subtle sliding. Avoid using effects like bouncing, rotating, wobbling or flipping.

Examples of recommended effects can be found from this brand guidelines.

UI icons

Red UI icons (social media, arrows, etc.)

ZIP package includes SVG and PNG files in RGB colours

.zip

0.1 Mb

White UI icons (social media, arrows, etc.)

ZIP package includes SVG and PNG files in RGB colours

.zip

0.1 Mb

Contextual icons

Contextual icons refer to certain subject matters that relate to Fingrid and its operations. Distinct from small icons, contextual icons can also be used in bigger sizes as illustrative visual elements.

Red contextual icons for web

ZIP package includes SVG and PNG vector files in RGB colours

.zip

0.1 Mb

White contextual icons for web

ZIP package includes SVG and PNG vector files in RGB colours

.zip

0.1 Mb