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.

Colors & Shades

Transparencies

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

Medium

#16b4e9

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

DM Serif

download font

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.

BUTTONS ON LIGHT BACKGROUND

Action
Action Outline
Primary
Primary Outline
Secondary Secondary Outline
Accent
Accent Outline Base
Base Outline

BUTTONS ON DARK BACKGROUND

Action
Action Outline
Primary
Primary Outline
Secondary Secondary Outline
Accent
Accent Outline White
White Outline

BUTTON SCALE

btn--primary / btn--xs

btn--primary / btn--s

btn--primary / btn--m

btn--primary / btn--l

btn--primary / btn--xl

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

Instagram

Youtube

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