Styleguide

Breakpoints

sm: 360px
md: 768px
lg: 1024px
xl: 1440px
Remove

Colori

--dark__brand_


            
            
              brand-1


            
            
              brand-2


            
            
              brand-3


            
            
              brand-4


            
            
              brand-5


            
            
              primary


            
            
              secondary


            
            
              tertiary

--dark__button_link_


            
            
              background


            
            
              background-hover


            
            
              border


            
            
              border-hover


            
            
              focus-ring


            
            
              icon


            
            
              icon-hover


            
            
              label


            
            
              label-hover


            
            
              line


            
            
              line-hover

--dark__button_primary_


            
            
              background


            
            
              background-hover


            
            
              border


            
            
              border-hover


            
            
              focus-ring


            
            
              icon


            
            
              icon-hover


            
            
              label


            
            
              label-hover


            
            
              line


            
            
              line-hover

--dark__button_secondary_


            
            
              background


            
            
              background-hover


            
            
              border


            
            
              border-hover


            
            
              focus-ring


            
            
              icon


            
            
              icon-hover


            
            
              label


            
            
              label-hover


            
            
              line


            
            
              line-hover

--dark__button_tertiary_


            
            
              background


            
            
              background-hover


            
            
              border


            
            
              border-hover


            
            
              focus-ring


            
            
              icon


            
            
              icon-hover


            
            
              label


            
            
              label-hover


            
            
              line


            
            
              line-hover

--dark__grey_

--dark__mask_


            
            
              cover


            
            
              gradient-1


            
            
              gradient-2

--dark__state_


            
            
              error


            
            
              error-bg


            
            
              success


            
            
              success-bg


            
            
              warning


            
            
              warning-bg

--dark__text_


            
            
              accent


            
            
              dark-grey


            
            
              disabled


            
            
              grey


            
            
              light-grey


            
            
              sale


            
            
              text


            
            
              text-invert

--dark__ui_


            
            
              background


            
            
              background-1


            
            
              background-2


            
            
              background-footer


            
            
              black


            
            
              element


            
            
              element-invert


            
            
              form


            
            
              transparent


            
            
              white

--light__brand_


            
            
              brand-1


            
            
              brand-2


            
            
              brand-3


            
            
              brand-4


            
            
              brand-5


            
            
              primary


            
            
              secondary


            
            
              tertiary

--light__button_link_


            
            
              background


            
            
              background-hover


            
            
              border


            
            
              border-hover


            
            
              focus-ring


            
            
              icon


            
            
              icon-hover


            
            
              label


            
            
              label-hover


            
            
              line


            
            
              line-hover

--light__button_primary_


            
            
              background


            
            
              background-hover


            
            
              border


            
            
              border-hover


            
            
              focus-ring


            
            
              icon


            
            
              icon-hover


            
            
              label


            
            
              label-hover


            
            
              line


            
            
              line-hover

--light__button_secondary_


            
            
              background


            
            
              background-hover


            
            
              border


            
            
              border-hover


            
            
              focus-ring


            
            
              icon


            
            
              icon-hover


            
            
              label


            
            
              label-hover


            
            
              line


            
            
              line-hover

--light__button_tertiary_


            
            
              background


            
            
              background-hover


            
            
              border


            
            
              border-hover


            
            
              focus-ring


            
            
              icon


            
            
              icon-hover


            
            
              label


            
            
              label-hover


            
            
              line


            
            
              line-hover

--light__grey_

--light__mask_


            
            
              cover


            
            
              gradient-1


            
            
              gradient-2

--light__state_


            
            
              error


            
            
              error-bg


            
            
              success


            
            
              success-bg


            
            
              warning


            
            
              warning-bg

--light__text_


            
            
              accent


            
            
              dark-grey


            
            
              disabled


            
            
              grey


            
            
              light-grey


            
            
              sale


            
            
              text


            
            
              text-invert

--light__ui_


            
            
              background


            
            
              background-1


            
            
              background-2


            
            
              background-footer


            
            
              black


            
            
              element


            
            
              element-invert


            
            
              form


            
            
              transparent


            
            
              white

Tipografia

overline

Overline 3

.overline-3 or %overline-3

Overline 2

.overline-2 or %overline-2

Overline 1

.overline-1 or %overline-1

display

Display 1

.display-1 or %display-1

Display 2

.display-2 or %display-2

Display 3

.display-3 or %display-3

Display 4

.display-4 or %display-4

Display 5

.display-5 or %display-5

Display 6

.display-6 or %display-6

heading

Heading h1

.heading-h1 or %heading-h1

Heading h2

.heading-h2 or %heading-h2

Heading h3

.heading-h3 or %heading-h3

Heading h4

.heading-h4 or %heading-h4

Heading h5

.heading-h5 or %heading-h5

Heading h6

.heading-h6 or %heading-h6

paragraph

Paragraph 3xl

.paragraph-3xl or %paragraph-3xl

Paragraph 2xl

.paragraph-2xl or %paragraph-2xl

Paragraph xl

.paragraph-xl or %paragraph-xl

Paragraph l

.paragraph-l or %paragraph-l

Paragraph m

.paragraph-m or %paragraph-m

Paragraph s

.paragraph-s or %paragraph-s

Paragraph xs

.paragraph-xs or %paragraph-xs

Paragraph 2xs

.paragraph-2xs or %paragraph-2xs

Paragraph 3xs

.paragraph-3xs or %paragraph-3xs

text

Text 3xl

.text-3xl or %text-3xl

Text 2xl

.text-2xl or %text-2xl

Text xl

.text-xl or %text-xl

Text l

.text-l or %text-l

Text m

.text-m or %text-m

Text s

.text-s or %text-s

Text xs

.text-xs or %text-xs

Text 2xs

.text-2xs or %text-2xs

Text 3xs

.text-3xs or %text-3xs

caption

Caption 3

.caption-3 or %caption-3

Caption 2

.caption-2 or %caption-2

Caption 1

.caption-1 or %caption-1

quote

Quote 3

.quote-3 or %quote-3

Quote 2

.quote-2 or %quote-2

Quote 1

.quote-1 or %quote-1

button

Button xl

.button-xl or %button-xl

Button l

.button-l or %button-l

Button s

.button-s or %button-s

Button m

.button-m or %button-m

Button link

.button-link or %button-link

form

Form label

.form-label or %form-label

Form input

.form-input or %form-input

Form desc

.form-desc or %form-desc

nav

Nav level 1

.nav-level-1 or %nav-level-1

Nav level 2

.nav-level-2 or %nav-level-2

Nav level 3

.nav-level-3 or %nav-level-3

Nav level 3 emphasis

.nav-level-3-emphasis or %nav-level-3-emphasis

Nav title

.nav-title or %nav-title

Nav service

.nav-service or %nav-service

Ui annotation

.ui-annotation or %ui-annotation

custom

Custom product name

.custom-product-name or %custom-product-name

Bottoni

Left arrow
Right arrow
Text
Interactible
Full width

.btn-light .btn-primary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s

.btn-light .btn-secondary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s

.btn-light .btn-tertiary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s

.btn-light .btn-link[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s

.btn-dark .btn-primary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s

.btn-dark .btn-secondary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s

.btn-dark .btn-tertiary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s

.btn-dark .btn-link[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s

Text groups

overline

Headline