Brand guidelines
Web design Components

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.
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 30BHEX: #D5121E
Bluish grey 1
Primary text colour
RGB: 62R 86G 96BHEX: #3E5660
Bluish grey 2
Usage in buttons and background elements
RGB: 109R 131G 143BHEX: #6D838F
Bluish grey 3
Usage in disabled elements, outlines and strokes
RGB: 213R 221G 227BHEX: #D5DDE3
Bluish grey 4
Usage in background elements
RGB: 233R 238G 242BHEX: #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 143BHEX: #DDC720
Green
RGB: 213R 221G 227BHEX: #009A96
Violet
RGB: 233R 238G 242BHEX: #A15885
Buttons
Forms
Text fields
Select field
Radio buttons
Checkboxes
Toggle
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.