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.

Accessibility

Consider accessibility

There must be sufficient contrast between the text and the background. Use Bluish Grey or Red as primary colour for text. As a body text prefer using Bluish grey. When the text is very large or decorative, lighter brand colours can also be used as colours for text.


When developing web applications, keep in mind that the text should be at least 200% scalable, the letter spacing at most 0.12 times, and the line spacing at least 1.5 times. Content should not convey meaning by color alone. If you need to emphasise some part of the body text, use a second method such as bold text. Avoid using underline, which is a visual markup of a link. Indicate the text hierarchy consistently using semantic HTML elements.

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: 1rem;
	line-height: 1.5rem;
}
.p1 {
	color: #3E5660;
	font-family: "Lab Grotesque";
	font-size: 18px;
	line-height: 27px;
}
.p1 {
	color: #3E5660;
	font-family: "Lab Grotesque";
	font-size: 16px;
	line-height: 24px;
}
.p2 {
	color: #3E5660;
	font-family: "Lab Grotesque";
	font-size: 14px;
	line-height: 21px;
}




								
Links
Accessibility

Consider accessibility

The link is indicated as clearly and unambiguously as possible, using either an underline or other strong indication such as an icon in front of the link. Exceptions to this are navigations as well as situations in the user interface where the occurrence of a link is very obvious.

Example:

Lorem ipsum link dolor sit amet


A link that opens in a new tab or points outside the website are marked with a icon.


Link to another website
CSS Typography
 

.link {
    color: #3E5660;
	font-family: "Lab Grotesque";
	font-size: 1rem;
	line-height: 1.5rem;
	text-decoration: underline;
}
.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.

Accessibility

Consider accessibility

When using colours, pay attention to users with impaired vision or who have difficulties with colour perception. Be especially careful when using Red and Dark green or Green as a colour pair.

Red

Usage in buttons, links and highlights

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

Primary text colour

RGB: 62R 86G 96B
HEX: #3E5660
Light bluish grey 1

Usage in buttons and background elements

RGB: 109R 131G 143B
HEX: #6D838F
Light bluish grey 2

Usage in disabled elements, outlines and strokes

RGB: 213R 221G 227B
HEX: #D5DDE3
Ligh bluish grey 3

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, illustrations and graphs.

Dark green
RGB: 39R 113G 88B
HEX: #277158
Green
RGB: 77R 157G 136B
HEX: #4d9d88
Pink
RGB: 229R 178G 187B
HEX: #e5b2bb
Violet
RGB: 233R 238G 242B
HEX: #A15885
Yellow
RGB: 248R 244G 63B
HEX: #f8f43f

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

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;
}
.finui_medium_btn {
	padding: 11px 23px;
	background-color: #D5121E;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 15px;
}
.finui_large_btn {
	padding: 13px 24px;
	background-color: #D5121E;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 17px;
}
.finui_medium_btn_outlined {
	padding: 11px 23px;
	background-color: transparent;
	color: #D5121E;
	border: 2px solid #D5121E;
	border-radius: 0;
	font-size: 15px;
    -webkit-transition: background-color 400ms linear, color .3s linear;
    -moz-transition: background-color 400ms linear, color .3s linear;
    -o-transition: background-color 400ms linear, color .3s linear;
    -ms-transition: background-color 400ms linear, color .3s linear;
    transition: background-color 400ms linear, color .3s linear;
}
.finui_medium_btn_outlined:hover {
    color: #fff;
    background-color: #D5121E;
    font-family: 'LabGrotesquelight';
}


button:disabled {
	padding: 11px 23px;
	background-color: #C8C8C8;
	color: #fff;
	border: 0;
	font-size: 15px;
}
button:active {
	background-color: #D5121E;
	color: #fff;
	border: 0;
}
button:hover {
	background-color: #3E5660;
	color: #fff;
	border: 0;
}
button:focus {
	background-color: #3E5660;
	color: #fff;
	border: 0;
}

								

Forms

Text fields


HTML

<from class="" action="" method="">
    <label for="first-name">First name: *</label><br />
    <input class="finui_form_grey" type="text" id="first-name" name="first name" placeholder="">
<label for="message">Message: *</label><br /> <textarea class="finui_textarea" id="message" placeholder="Message"></textarea> <from>
CSS

label {
    color: #3E5660;
    font-family: "LabGrotesquebold", Arial;
    font-size: 16px;
}
.finui_form_grey {
    max-width: 360px;
    width: 100%;
    border-radius: 0;
    color: #3E5660;
    font-size: 16px;
    padding: 13px 20px;
    border: 2px solid #eaeef1;
    background-color: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color .3s ease-in-out;
}
.finui_form_grey:hover {
    border: 2px solid #d4dde2;
}
.finui_form_grey:focus {
    color: #3E5660;
    border: 2px solid #3E5660;
}


.finui_textarea {
    max-width: 360px;
    width: 100%;
    border-radius: 0;
    height: 273px;
    color: #3E5660;
    font-size: 20px;
    padding: 11px 20px;
    border: 2px solid #eaeef1;
    background-color: #fff;
    outline: none;
    resize: none;
    box-sizing: border-box;
    transition: border-color .3s ease-in-out;
}
.finui_textarea:hover {
    border: 2px solid #d4dde2;
}
.finui_textarea:focus {
    color: #3E5660;
    border: 2px solid #3E5660;
}
::-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">
<label for="select">Select
<span class="finui_caret"></span>
<select id="select" 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: 16px;
  	position: relative;
  	display: inline-block;
}
.finui_select_form_container label {
    color: #3E5660;
    font-family: "LabGrotesquebold", Arial;
}
.finui_select_form_container select {
	outline: none;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
  	display: block;
  	width: 360px;
  	padding: 13px 20px 13px 20px;
	border: 2px solid #eaeef1;
	border-radius: 0;
  	background: #fff;
  	color: #3E5660;
  	font-size: 16px;
    margin-top: 5px;
    font-family: "LabGrotesquelight", Arial;
}
.finui_select_form_container select:hover {
    border: 2px solid #d4dde2;
}
.finui_select_form_container select:focus,
.finui_select_form_container select:active {
    color: #3E5660;
    border: 2px solid #3E5660;
}
.finui_select_form_container .finui_caret {
    background: #fff;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 52px;
    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

<fieldset>
<legend>
<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-three" name="radio"> <span id="finui_radiobtn_disabled"></span>Radio button disabled
</label>
</legend>
</fieldset>
CSS

legend {
    border-bottom: 0;
}
[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: 25px;
  	font-size: 16px;
  	margin: 8px;
}
span#finui_radiobtn {
    font-size: 15px;
    line-height: 20px;
}
span#finui_radiobtn_disabled {
    font-size: 15px;
    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.135em 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.135em 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

<fieldset class="finui_checkbox_list">
<legend class="finui_checkbox_list_item">
<input class="finui_checkbox" id="checkbox-1" type="checkbox" value="value1">
<label for="checkbox-1">Checkbox</label>
<input class="finui_checkbox" id="checkbox-2" type="checkbox" value="value4" disabled>
<label for="checkbox-2">Disabled checkbox</label>
</legend>
</fieldset>
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;
    margin-bottom: 20px;
}
.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);
}


								
Toggle
Toggle button
Toggle button disabled
HTML

<div class="finui_toggle_btn_container">
<label class="finui_toggle_switch_container">
<button class="toggle-button" type="button" aria-pressed="false">
<span></span>
</button>
</label><div class="finui_toggle_text">Toggle button text</div>
</div>
<div class="finui_toggle_btn_container">
<label class="finui_toggle_switch_container">
<button class="toggle-button" type="button" aria-pressed="false" disabled>
<span></span>
</button>
</label><div class="finui_toggle_text">Toggle button text</div>
</div>
CSS

.finui_toggle_switch_container {
  	position: relative;
  	width: 48px;
  	height: 24px;
  	display: inline-block;
  	vertical-align: middle;
  	margin: 10px 0;
}


.toggle-button {
    width: 48px;
    height: 24px;
    color: white;
    border: 1px solid #3E5660;
    position: relative;
    border-radius: 34px;
    background: #fff;
    outline: 0;
}
.toggle-button[aria-pressed] {
    position: relative;
}
.toggle-button[aria-pressed] span {
    position: absolute;
    cursor: pointer;
    width: 10px;
    height: 10px;
    left: 6px;
    top: 5px;
    margin: 1px;
    background-color: #6D838F;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
}
.toggle-button[aria-pressed="true"] span {
    transform: translateX(26px);
    right: 8px !important;
    height: 14px;
    width: 14px;
    top: 3px;
    left: 0px;
    background-color: #3E5660!important;
}
.toggle-button:disabled {
    border: 1px solid #D5DDE3;
}

								
JS

const toggle = document.querySelector('[aria-pressed]');

toggle.addEventListener('click', (e) => {
  let pressed = e.target.getAttribute('aria-pressed') === 'true';
  e.target.setAttribute('aria-pressed', String(!pressed));
});

                            

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