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.

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

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.

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

Navigations

As needs and requirements for the website’s header varies, examples below are not necessarily ready-to-use components. They are more like style examples on how the main navigation should look.

Always aim to build the navigation as intuitive and simple to use as possible. Avoid more than three level navigations. When necessary, use list navigations on subpages.

Consider accessibility

For accessibility, use aria-label or aria-labelledby attribute to label the menus and aria-expanded attribute on the navigation buttons.

Main navigation bar

The navigation bar should be designed to be as simple as possible for the user. For mobile menu see Mobile navigation.

HTML


<nav class="finui_nav_simple" role="navigation" aria-label="dropdown-menu">
	<div class="finui_nav_container">
		<div class="finui_menu_dropdown_btn">
			<button class="finui_menu_dropdown_trigger" aria-expanded="false" aria-label="main menu" role="button">
				<span class="finui_bar"></span>
				<span class="finui_bar"></span>
				<span class="finui_bar"></span>
			</button>
		</div>
		<div class="finui_brand_logo">
			<a href="#" title=""><img src="./Images/img/Fingrid_logo_red.svg" alt="logo"></a>
		</div>
		<div class="finui_dropdown_menu" aria-label="dropdown-menu" id="dropdown-navigation">
			<ul class="finui_nav_dropdown_list">
				<li class="finui_nav_dropdown_item">
					<a class="" href="#dropdown-navigation" title="" aria-expanded="false">Link 1
						<span class="finui_icon_down">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="20" viewBox="0 0 20 18">
								<path d="M16.797 11.5c0 0.125-0.063 0.266-0.156 0.359l-7.281 7.281c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-7.281-7.281c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l0.781-0.781c0.094-0.094 0.219-0.156 0.359-0.156 0.125 0 0.266 0.063 0.359 0.156l6.141 6.141 6.141-6.141c0.094-0.094 0.234-0.156 0.359-0.156s0.266 0.063 0.359 0.156l0.781 0.781c0.094 0.094 0.156 0.234 0.156 0.359z"></path>
							</svg>
						</span>
					</a>
					<ul class="finui_nav_dropdown" aria-label="dropdown-menu" aria-expanded="false">
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link A</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link B</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link C</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link D</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link E</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link F</a></li>
					</ul>
				</li>
				<li class="finui_nav_dropdown_item">
					<a class="" href="#dropdown-navigation" title="" aria-expanded="false">Link 2
						<span class="finui_icon_down">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="20" viewBox="0 0 20 18">
								<path d="M16.797 11.5c0 0.125-0.063 0.266-0.156 0.359l-7.281 7.281c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-7.281-7.281c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l0.781-0.781c0.094-0.094 0.219-0.156 0.359-0.156 0.125 0 0.266 0.063 0.359 0.156l6.141 6.141 6.141-6.141c0.094-0.094 0.234-0.156 0.359-0.156s0.266 0.063 0.359 0.156l0.781 0.781c0.094 0.094 0.156 0.234 0.156 0.359z"></path>
							</svg>
						</span>
					</a>
					<ul class="finui_nav_dropdown" aria-label="dropdown-menu" aria-expanded="false">
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link G</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link H</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link I</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link J</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link K</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link L</a></li>
					</ul>

				</li>
				<li class="finui_nav_dropdown_item">
					<a class="" href="#dropdown-navigation" title="" aria-expanded="false">Link 3
						<span class="finui_icon_down">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="20" viewBox="0 0 20 18">
								<path d="M16.797 11.5c0 0.125-0.063 0.266-0.156 0.359l-7.281 7.281c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-7.281-7.281c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l0.781-0.781c0.094-0.094 0.219-0.156 0.359-0.156 0.125 0 0.266 0.063 0.359 0.156l6.141 6.141 6.141-6.141c0.094-0.094 0.234-0.156 0.359-0.156s0.266 0.063 0.359 0.156l0.781 0.781c0.094 0.094 0.156 0.234 0.156 0.359z"></path>
							</svg>
						</span>
					</a>
					<ul class="finui_nav_dropdown" aria-label="dropdown-menu">
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link M</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link N</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link O</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link P</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link Q</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link R</a></li>
					</ul>
				</li>
				<li class="finui_nav_dropdown_item">
					<a class="" href="#dropdown-navigation" title="" aria-expanded="false">Link 4
						<span class="finui_icon_down">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="20" viewBox="0 0 20 18">
								<path d="M16.797 11.5c0 0.125-0.063 0.266-0.156 0.359l-7.281 7.281c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-7.281-7.281c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l0.781-0.781c0.094-0.094 0.219-0.156 0.359-0.156 0.125 0 0.266 0.063 0.359 0.156l6.141 6.141 6.141-6.141c0.094-0.094 0.234-0.156 0.359-0.156s0.266 0.063 0.359 0.156l0.781 0.781c0.094 0.094 0.156 0.234 0.156 0.359z"></path>
							</svg>
						</span>
					</a>
					<ul class="finui_nav_dropdown" aria-label="dropdown-menu">
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link S</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link T</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link U</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link V</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link W</a></li>
						<li class="finui_dropdown_item"><a href="#dropdown-navigation" title="">Link X</a></li>
					</ul>
				</li>
			</ul>
		</div>
    </div>
</nav>

CSS


.finui_nav_simple {
	height: 90px;
	width: 100%;
	background-color: #fff;
	padding: 0;
	margin: 0;
}
.finui_nav_container {
	display: block;
	height: 100%;
	width: 100%;
}
.finui_menu_dropdown_btn {
	border: 0;
	background-color: transparent;
	display: none;
	outline: 0;
}
.finui_menu_dropdown_trigger {
	border: 0;
	background-color: transparent;
	outline: 0;
}
.finui_bar {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background-color: #000;
}
.finui_brand_logo {
	float: left;
	width: 150px;
	height: 100%;
	margin-left: 10px;
}
.finui_brand_logo a {
	display: block;
}
.finui_brand_logo a img {
	padding: 31px 30px;
	box-sizing: border-box;
}
.finui_dropdown_menu {
	float: right;
}
.finui_nav_dropdown_list {
	display: inline-block;
	margin: 0;
	margin-right: 10px;
	padding: 0;
}
.finui_nav_dropdown_item {
	list-style-type: none;
	float: left;
	padding: 33px 0;
}
.finui_nav_dropdown_item a {
	text-decoration: none;
	color: #3E5660;
	font-size: 20px;
	padding: 33px 30px;
}
.finui_nav_dropdown {
	background-color: #3E5660;
	width:100%;
	height: 70px;
	left: 0;
	top:90px;
	padding-left: 10px;
	position: absolute;
	display: none;
}
.finui_dropdown_open {
	display: inline-block;
}
.finui_dropdown_item {
	float: left;
	list-style-type: none;
	padding: 23px 0;
	display: inline-block;
	left: 0;
}
.finui_dropdown_item a {
	padding: 23px 30px;
	color: #fff;
}
.item-active {
	background-color: #31454D;
	color: #fff!important;
}
.finui_nav_dropdown_item a.dropdown-active {
	color: #fff!important;
	background-color: #3E5660!important;
}


@media screen and (max-width: 768px) {
	.finui_menu_dropdown_btn {
		display: block!important;
		float: right;
		margin: 31px;
	}
	.finui_menu_dropdown_trigger {
		-webkit-transform: rotate(0deg);
	    -moz-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	  	transform: rotate(0deg);
	    -webkit-transition: .5s ease-in-out;
	    -moz-transition: .5s ease-in-out;
	    -o-transition: .5s ease-in-out;
	    transition: .5s ease-in-out;
	    cursor: pointer;
	}
	span.finui_bar {
	    width: 33px;
	    height: 4px;
	    margin-top: 3px;
	    background-color: #3E5660;
	    -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	    transform: rotate(0deg);
	    -webkit-transition: .25s ease-in-out;
	    -moz-transition: .25s ease-in-out;
	    -o-transition: .25s ease-in-out;
	    transition: .25s ease-in-out;
	}
	span.finui_bar:nth-child(1) {
	    top: 0px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}
	span.finui_bar:nth-child(2)  {
	    -webkit-transform-origin: left center;
	    -moz-transform-origin: left center;
	    -o-transform-origin: left center;
	    transform-origin: left center;
  	}
	span.finui_bar:nth-child(3)  {

	    -webkit-transform-origin: left center;
	    -moz-transform-origin: left center;
	    -o-transform-origin: left center;
	    transform-origin: left center;
	}
	.finui_menu_dropdown_trigger.close-btn span.finui_bar:nth-child(1) {
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    transform: rotate(45deg);
	    top: -5px;
	    left:3px;
	}
	.finui_menu_dropdown_trigger.close-btn span.finui_bar:nth-child(2) {
	  	width: 0%;
	  	opacity: 0;
	}
	.finui_menu_dropdown_trigger.close-btn span.finui_bar:nth-child(3) {
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    left:3px;
	}

	.finui_dropdown_menu {
		max-height: 0;
    	overflow: hidden;
		width: 100%;
	}
	.finui_nav_dropdown_list {
	    display: block;
	    margin: 0;
	    margin-right: 0;
	    padding: 0;
	    width: 100%;
	}
	.finui_dropdown_menu_open {
		max-height: 1000px;
		background-color: #3E5660;
		margin-top: -8px;
	}
	.finui_nav_dropdown_item {
		display: block;
    	width: 100%;
    	padding: 20px 0;
	}
	.finui_nav_dropdown_item:nth-of-type(1) {
		margin-top: 20px;

	}
	.finui_nav_dropdown_item:last-of-type {
		margin-bottom: 20px;
	}
	.finui_nav_dropdown_item a {
		padding: 20px 30px;
        color: #fff;
	}
	.finui_nav_dropdown_item a.dropdown-active {
		 background-color: #31454D!important;
		 min-width: 320px;
		 width: 100%;
	}
	.finui_nav_dropdown {
	    width: 100%;
	    height: 70px;
	    top: 0;
	    padding-left: 0;
	    position: static;
	    display: none;
	    height: auto;
	    background-color: #31454D;
	}
	.finui_dropdown_item {
		float: none;
		display: block;
		padding: 12px 0;
	}
	.finui_dropdown_item a {
		float: none;
		display: block;
		padding: 0 30px;
	}
	.finui_dropdown_item:nth-of-type(1) {
		padding-top: 24px;
	}
	.finui_dropdown_item:last-of-type {
		padding-bottom: 24px;
	}
}


$('.finui_nav_dropdown_list .finui_nav_dropdown_item').on({
    mouseenter: function() {
        $(this).children('a').addClass('dropdown-active');
        $(this).children('a .finui_icon_down svg').css('fill', '#fff');
        $(this).children('.finui_nav_dropdown').addClass('dropdown-open');
        $(this).children('a').attr('aria-expanded', 'true');

    },
    mouseleave: function() {
        $(this).children('a').removeClass('dropdown-active');
        $(this).children('.finui_nav_dropdown').removeClass('dropdown-open');
        $(this).children().find('.finui_nav_dropdown').removeClass('dropdown-open');
        $(this).children('a').attr('aria-expanded', 'false');
    }
});

$('.finui_nav_dropdown_item a').hover( function() {
    $(this).toggleClass('item-active');
});

$(".finui_menu_dropdown_trigger").on('click', function(e) {
    $('.finui_dropdown_menu').toggleClass('finui_dropdown_menu_open');
});

Mobile navigation

The mobile navigation bar should be of full width of the device. The logo can be placed in the middle or on the left side of the navigation bar. Effects can be used when opening and closing the navigation, such as slide in and slide out.

HTML


<nav class="finui_nav_mobile" role="navigation" aria-label="mobile-menu">
    <div class="finui_nav_container_mobile">
        <div class="finui_menu_mobile_btn">
            <button class="finui_menu_mobile_trigger btn-active" aria-expanded="false" aria-label="main menu" role="button">
                <span class="finui_bar"></span>
                <span class="finui_bar"></span>
                <span class="finui_bar"></span>
            </button>
            <button class="finui_mobile_nav_close" type="button" role="button">
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 20.8 20.8" style="enable-background:new 0 0 20.8 20.8;" xml:space="preserve">
                     <line class="st0" x1="1.4" y1="1.4" x2="19.3" y2="19.3"/>
                     <line class="st0" x1="19.3" y1="1.4" x2="1.4" y2="19.3"/>
                </svg>
            </button>
        </div>
        <div class="finui_brand_logo">
            <a href="#" title=""><img src="./Images/img/Fingrid_logo_red.svg" alt="Fingrid"></a>
        </div>
        <div class="finui_mobile_menu" aria-label="main menu" id="mobile-navigation">
            <ul class="finui_nav_mobile_list">
                <li class="finui_nav_mobile_item">
                    <span>
                        <a class="#" href="#dropdown-navigation" title="" aria-expanded="false">Link 1</a>
                        <button type="button" role="button" class="menu-icon">
                            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                <g fill="none" fill-rule="evenodd" stroke="#3d5560" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)">
                                    <path d="m8 16c4.4380025 0 8-3.5262833 8-7.96428571 0-4.43800246-3.5619975-8.03571429-8-8.03571429-4.43800245 0-8 3.59771183-8 8.03571429 0 4.43800241 3.56199755 7.96428571 8 7.96428571z"/>
                                    <path d="m4 8h8"/>
                                    <path d="m8 12.0563492v-8.0563492z"/>
                                </g>
                            </svg>
                        </button>

                    </span>
                    <ul class="finui_nav_mobile" aria-label="mobile-menu" aria-expanded="false">
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link A</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link B</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link C</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link D</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link E</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link F</a></li>
                    </ul>
                </li>
                <li class="finui_nav_mobile_item">
                    <span>
                        <a class="#" href="#dropdown-navigation" title="" aria-expanded="false">Link 2</a>
                        <button type="button" role="button" class="menu-icon">
                            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                <g fill="none" fill-rule="evenodd" stroke="#3d5560" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)">
                                    <path d="m8 16c4.4380025 0 8-3.5262833 8-7.96428571 0-4.43800246-3.5619975-8.03571429-8-8.03571429-4.43800245 0-8 3.59771183-8 8.03571429 0 4.43800241 3.56199755 7.96428571 8 7.96428571z"/>
                                    <path d="m4 8h8"/>
                                    <path d="m8 12.0563492v-8.0563492z"/>
                                </g>
                            </svg>
                        </button>

                    </span>
                    <ul class="finui_nav_mobile" aria-label="mobile-menu" aria-expanded="false">
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link G</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link H</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link I</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link J</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link K</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link L</a></li>
                    </ul>

                </li>
                <li class="finui_nav_mobile_item">
                    <span>
                        <a class="#" href="#dropdown-navigation" title="" aria-expanded="false">Link 3</a>
                        <button type="button" role="button" class="menu-icon">
                            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                <g fill="none" fill-rule="evenodd" stroke="#3d5560" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)">
                                    <path d="m8 16c4.4380025 0 8-3.5262833 8-7.96428571 0-4.43800246-3.5619975-8.03571429-8-8.03571429-4.43800245 0-8 3.59771183-8 8.03571429 0 4.43800241 3.56199755 7.96428571 8 7.96428571z"/>
                                    <path d="m4 8h8"/>
                                    <path d="m8 12.0563492v-8.0563492z"/>
                                </g>
                            </svg>
                        </button>

                    </span>
                    <ul class="finui_nav_mobile" aria-label="mobile-menu">
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link M</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link N</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link O</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link P</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link Q</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link R</a></li>
                    </ul>
                </li>
                <li class="finui_nav_mobile_item">
                    <span>
                        <a class="#" href="#dropdown-navigation" title="" aria-expanded="false">Link 4</a>
                        <button type="button" role="button" class="menu-icon">
                            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                <g fill="none" fill-rule="evenodd" stroke="#3d5560" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)">
                                    <path d="m8 16c4.4380025 0 8-3.5262833 8-7.96428571 0-4.43800246-3.5619975-8.03571429-8-8.03571429-4.43800245 0-8 3.59771183-8 8.03571429 0 4.43800241 3.56199755 7.96428571 8 7.96428571z"/>
                                    <path d="m4 8h8"/>
                                    <path d="m8 12.0563492v-8.0563492z"/>
                                </g>
                            </svg>
                        </button>

                    </span>
                    <ul class="finui_nav_mobile" aria-label="mobile-menu">
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link S</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link T</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link U</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link V</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link W</a></li>
                        <li class="finui_mobile_item"><a href="#mobile-navigation" title="">Link X</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS


.finui_nav_mobile {
    height: 90px;
    background-color: #fff;
    padding: 0 24px;
    margin: 0;
    position: relative;
}
.finui_nav_container_mobile {
    display: flex;
    align-items: center;
    height: 100%;
}
.finui_menu_mobile_btn {
    display: block;
    width: 20%;
}
.finui_menu_mobile_trigger {
    background: #fff;
    height: 24px;
    width: 80px;
    border: 0;
    float: left;
    display: none;
}
.finui_menu_mobile_trigger:focus {
    outline: transparent;
}
.finui_bar {
    display: block;
    color: #3d5560;
    background-color: #3d5560;
    height: 2px;
    width: 22px;
    margin: 6px auto 0;
}
.finui_bar:first-of-type {
    margin-top: 0;
}
.finui_mobile_nav_close {
    background: transparent;
    height: 24px;
    width: 80px;
    display: none;
}
.finui_mobile_nav_close svg {
    width: 22px;
    height: 22px;
}
.finui_mobile_nav_close svg line {
    stroke:#3d5560;
    stroke-width: 3px;
}
.btn-active {
    display: block;
}
.finui_brand_logo {
    display: inline-block;
    width: 60%;
}
.finui_brand_logo a {
    display: block;
}
.finui_brand_logo a img {
    display: block;
    margin: 0 auto;
    width: 150px;
}

.finui_mobile_menu {
    left: -100%;
    position: absolute;
    top: 90px;
    background-color: #fff;
    overflow-y: auto;
    border-top: 2px solid #f3f6f8;
    box-shadow: inset 0 10px 10px -10px rgba(0,0,0,.05);
    border-right: 2px solid #f3f6f8;
    z-index: 2000;
    min-height: 320px;
}
.finui_mobile_menu.mobile-menu-open {
    position: absolute;
    top: 90px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 320px;
    height: 100%;
}
.finui_nav_mobile_list {
    list-style: none;
    padding-left: 0;
}
.finui_nav_mobile_item {
    position: relative;
}
.finui_nav_mobile_item span {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.finui_nav_mobile_item span a {
    color: #3d5560;
    font-size: 16px;
    font-family: 'LabGrotesquelight';
    text-decoration: none;
    padding: 25px 70px 25px 25px;
    display: inline-block;
}
.finui_nav_mobile_item span.active {
    color: #d5121e;
}
.finui_nav_mobile_item span .menu-icon {
    background: transparent;
    border: 0;
    width: 90px;
}
.finui_nav_mobile_item span .menu-icon:focus {
    outline: transparent;
}
.finui_nav_mobile_item span .menu-icon svg {
    height: 30px;
    width: 30px;
}
.finui_nav_mobile_item span .menu-icon svg g path {
    stroke: #3d5560;
    stroke-width: 1.5px;
}
.finui_nav_mobile_item span .menu-icon.extended svg g path:last-of-type {
    stroke-width: 0;
}
.finui_nav_mobile {
    display: none;
    padding-left: 25px;
    list-style: none;
}
.finui_nav_mobile.nav-extended {
    display: block;
    height: 100%;
}
.finui_mobile_item {
    width: 100%;
    height: 100%;
}
.finui_mobile_item a {
    text-decoration: none;
    display: block;
    padding: 25px 70px 25px 25px;
    color: #3d5560;
    font-family: 'LabGrotesquelight';
}


$('.finui_menu_mobile_btn .finui_menu_mobile_trigger').on('click', function(e) {
    e.preventDefault();
    $('.finui_mobile_menu').toggleClass('mobile-menu-open');
    $(this).toggleClass('btn-active');
    $(this).siblings('.finui_mobile_nav_close').toggleClass('btn-active');

})
$('.finui_menu_mobile_btn .finui_mobile_nav_close').on('click', function(e) {
    e.preventDefault();
    $('.finui_mobile_menu').toggleClass('mobile-menu-open');
    $(this).toggleClass('btn-active');
    $(this).siblings('.finui_menu_mobile_trigger').toggleClass('btn-active');

})
$('.finui_nav_mobile_item span .menu-icon').on('click', function() {
    $(this).toggleClass('extended');
    $(this).parents('span').siblings('.finui_nav_mobile').toggleClass('nav-extended');
    $(this).siblings('a').toggleClass('active');
})

List navigation

The list navigation can be used as a navigation aid in the content area and as mobile navigation. The navigation items should be separated from each other by line.

The type weight and size can vary depending on the content. Icons can also be used with the text links.

HTML


<nav class="finui_list_navigation">

	<ul class="finui_list_nav">

		<li class="finui_list_nav_item"><a href="#">Link C1</a></li>

		<li class="finui_list_nav_item"><a href="#">Link C2</a></li>

		<li class="finui_list_nav_item"><a href="#">Link C3</a></li>

		<li class="finui_list_nav_item"><a href="#">Link C4</a></li>

		<li class="finui_list_nav_item"><a href="#">Link C5</a></li>

	</ul>

</nav>

CSS


.finui_list_navigation {
	width: 280px;
}
.finui_list_nav_item {
	list-style-type: none;
	height: 50px;
	border-top: 1px solid #D5DDE3;
}
.finui_list_nav_item:last-of-type {
	border-top: 1px solid #D5DDE3;
	border-bottom: 1px solid #D5DDE3;
}
.finui_list_nav_item a {
	text-decoration: none;
	color: #3E5660;
	margin-left: 30px;
	padding: 16px 0;
	display: block;
	font-size: 16px;
}
.finui_list_nav_item a:hover {
    color:#d5121e;
    text-decoration: underline;
}
.finui_list_nav_item.selected {
    background-color: #d5121e;
}
.finui_list_nav_item.selected a {
    color: #fff;
}
.finui_list_nav_item.selected a:hover {
    text-decoration: underline;
}


$('.finui_list_navigation .finui_list_nav .finui_list_nav_item').on('click', function() {
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
})

Breadcrumb navigation

Breadcrumb navigation should be used on pages with several navigation levels.

HTML


<ul class="finui_breadcrumb_list">

  	<li class="finui_breadcrumb_item"><a href="#">Frontpage</a></li>

	<li class="finui_breadcrumb_item"><a href="#">Link 1</a></li>

	<li class="finui_breadcrumb_item"><a href="#">Link B</a></li>

	<li class="finui_breadcrumb_item">Link B3</li>

</ul>

CSS


.finui_breadcrumb_list {
	width: auto;
}
.finui_breadcrumb_item {
	list-style-type: none;
	display: inline;
}
.finui_breadcrumb_item+li:before {
	content: "/\00a0";
	padding: 0 4px;
}

.finui_breadcrumb_item a {
	text-decoration: underline;
	color: #3E5660;
}
.finui_breadcrumb_item:last-of-type {
    font-family: "LabGrotesquebold", Arial;
    font-weight: bold;
    color: #3E5660;
    text-decoration: none;
}
.finui_breadcrumb_item:last-of-type:before  {
    font-family: "LabGrotesquelight", Arial;
}

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

First name: *

Message: *

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

Select

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

Radio button Radio button checked Radio button disabled

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

Checkbox
Checkbox disabled

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;
}


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

Brand guidelines

Introduction

Grid

12-Column Grid System

Typography

Heading styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph styles

Links

Colours

Primary colour palette

Red

Bluish grey

Light bluish grey 1

Light bluish grey 2

Ligh bluish grey 3

Secondary colour palette

Dark green

Green

Pink

Violet

Yellow

Navigations

Main navigation bar

Mobile navigation

List navigation

Breadcrumb navigation

Buttons

Primary buttons

Button states

Secondary button

Forms

Text fields

Select field

Radio buttons

Checkboxes

Toggle

Effects

UI icons

Contextual icons