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.

This is the Heading H1

text-h1

This is the Heading H2

text-h2

This is the Heading H3

text-h3

This is the Heading H4

text-h4

This is the Heading H5

text-h5

This is the Heading H6

text-h6

This is the base paragraph

text-xxl

This is the base paragraph

text-xl

This is the base paragraph

text-l

This is the base paragraph

text-m

This is the base paragraph

text-s

This is the base paragraph

text-xs

Typography Weight

Below weights for this site.

Sonono uno spesso font-weight:900

f-w9

Sonono uno spesso font-weight:800

f-w8

Sonono uno spesso font-weight:700

f-w7

Sonono uno spesso font-weight:600

f-w6

Sonono uno spesso font-weight:500

f-w5

Sonono uno spesso font-weight:400

f-w4

Sonono uno spesso font-weight:300

f-w3

Sonono uno spesso font-weight:200

f-w2

Sonono uno spesso font-weight:100

f-w1

Colors

Una vista dei colori scelti per il brand (ogni colore è modificabile di massa)

abbiamo due 3 usi per i colori: testo, background, pulsante

bg-

colore

text-

colore

btn-

colore

Primary

Uso:

bg-primary
text-primary

Secondary

Uso:

bg-secondary
text-secondary

Grey

Uso:

bg-grey
text-grey

Grey light

Uso:

bg-grey-light
text-grey-light

Black

Uso:

bg-black
text-black

White

Uso:

bg-white
text-white

Button

Uso:

bg-button
text-button

Primary

Uso:

btn-gut-prrimary

Secondary

Uso:

btn-gut-secondary

Secondary Outline

Uso:

btn-gut-secondary-outline

Grey

Uso:

btn-gut-grey

Black

Uso:

btn-gut-black

White

Uso:

btn-gut-white

Button

Uso:

btn-gut-button

Space

Abbiamo sei valori di space per gestire elementi dinamici. Questi sono alla base di tutte le spaziature del sito.

Come le usiamo?

Usiamo la sintassi m direzione e grandezza per i margini

Usiamo la sintassi p direzione e grandezza per i padding

Vai all'utilizzo

--space-xs

--space-s

--space-m

--space-l

--space-xl

--space-xxl

Margin

Sintassi per l'uso dei margini

Come le usiamo?

mt-
per indicare margin-top

mb-
per indicare margin-bottom

mt-xs

mb-xs

mt-s

mb-s

mt-m

mb-m

mt-l

mb-l

mt-xl

mb-xl

mt-xxl

mb-xxl

Elemento Boxed

per gestire questo gruppo abbiamo usato

gut-fw-box

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.

Contattaci

gut-fw-box

Contattaci

Elemento Full

per gestire questo gruppo abbiamo usato

gut-fw

Contattaci

gut-fw

Grid & Gap System

Gli stili vanno dato all’elemento colonne (il genitore), no alle singole colonne che sono interne

grid-“numero” ci dice come dividerà il nostro contenuto

gap–“numero” ci dice quanto spazio avremo tra un elemento e l\’altro

NOTA BENE gap è l’unico elemento che usa doppio —

colonna

grid-2 gap–s

colonna

grid-2 gap–m

colonna

grid-2 gap–l

colonna

grid-2 gap–xl

colonna

grid-3 gap–m

colonna

grid-4 gap–m

colonna

grid-5 gap–m

colonna

grid-6 gap–m