STYLE GUIDE

The style guide defines the basic design elements. Here we will find colors, fonts and text styles.

Modify the elements that already exist to adapt them to your own design. You can also add and / or remove any element you need.

Colors
Mirage #F8F5F0
walnut #67565F
Pine green #67565F
Lavendar #A58998

The main colors are defined as swatches within the Webflow colors panel. Modify them to define your own color palette. For the different shades you will have to modify them manually: they correspond to different opacity values ​​of the main color.

Typography Scale
Display / Beast
This is a typographic scale
Display / Huge
This is a typographic scale
Display / Big
This is a typographic scale
Headers / L
This is a typographic scale
Headers / m
This is a typographic scale
Labels / M
This is a typographic scale
Labels / S
This is a typographic scale
Labels / xs caps
This is a typographic scale
Para / M
This is a typographic scale
Para / s
This is a typographic scale
Para / xs
This is a typographic scale
Tipografías

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

copy Arial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

copyemphasis Arial Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

alt copy Georgia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

alt copyitalics Georgia Italic

Añade todas las tipografías que vayas a utilizar en el proyecto. En este ejemplo, tipografías negrita e itálica se consiguen con las clases globales definidas en "Formatos de texto".