Frontiere Style Guide

This page outlines the current styles and standards for the Frontiere website.

Logo

Clean versions without payoff. SVG, PNG and JPG formats are available. 
NO PAYOFF SVG's

download SVG pack

NO PAYOFF PNG's

download PNG pack

NO PAYOFF JPG's

download JPG pack

Payoff versions. SVG, PNG and JPG formats are available. 
NO PAYOFF SVG's

download SVG pack

NO PAYOFF PNG's

download PNG pack

NO PAYOFF JPG's

download JPG pack

download all logo versions

Colors

An overview of this site's brand colors.
action
Action
#06d6b2
Ultra Light
#f6fdfc
Light
#bef4eb
Medium
#26d9bb
Dark
#136c5e
Ultra Dark
#082b25
Comp
#d60528
primary
Primary
#030c0f
Ultra Light
#e9f7fb
Light
#bee6f4
Medium
#26acd9
Dark
#13566c
Ultra Dark
#08222b
Comp
#110703
secondary
Secondary
#e6fc40
Ultra Light
#f4f4f0
Light
#dddfd3
Medium
#8f946b
Dark
#484a36
Ultra Dark
#1d1e15
Comp
#5640fc
accent
Accent
#ea5178
Ultra Light
#fbe9ee
Light
#f3becc
Medium
#d72854
Dark
#6c142a
Ultra Dark
#2b0811
Comp
#53eac4
base
Base
#084255
Ultra Light
#e8f8fd
Light
#b9e9f8
Dark
#0b5a75
Ultra Dark
#04242f
Comp
#541b08
shade
Shade
#030c0f
Ultra Light
#f2f2f2
Light
#d9d9d9
Medium
#808080
Dark
#404040
Ultra Dark
#1a1a1a
primary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
secondary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
accent
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
shade
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.

Font Families

Roboto mono

download font

Headings
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading  Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading  Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body Text
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Examples

Heading 1 (H1)

This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Buttons

Solid and outline buttons are available across all color sets including black and white.
BUTTON SCALE
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl

Widths

There are six values you can use to control element width. They're automatically responsive.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.
None
XS
S
M
L
XL
XXL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Element Padding

Here are the six levels of spacing visualized as padding.

Card

This is a card with XS padding. Its content is pretty close to the edges.

Card

This is a card with S padding. It has a little bit tighter padding.

Card

This is a card with M padding. It has standard breathing room.

Card

This is a card with L padding. It has extra breathing room.

Card

This is a card with XL padding. It has significant breathing room.

Card

This is a card with XXL padding. Avoid using this in a confined space.

Shadows

There are three multi-layer box shadows to choose from.
Box shadow M
Box shadow L
Box shadow XL

Border radius

There are six border radius values calculated from a base size and a mathematical scale.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL
logo-frontiere
LinkedinInstagramYoutubeFacebookTwitter
Privacy policy
Copyright 2023 Frontiere
FRONTIERE - Contratto di rete dotato di soggettività giuridica
Sede legale in Via Oslavia, 6 - 00195 Roma, RM | C.F. 16942231008 | P.IVA 16942231008
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram