4growers Style Guide

En esta guía encontrarás todo lo requerido en términos de estilos del sitio web de 4Growers

Colors

Gradientes

gradiante

#7102cb

#70f98a

Color Primario

Primario 1

#70f98a

Color Secundario

Secundario 1

#EAF1EC

Secundario 2

#112B24

Secundario 3

#7102cb

Secundario 4

#759758

Secundario 5

#7102cb

Secundario 6

#FF75A8

Colores Neutrales

Neutral 700

#0B252E

Neutral 600

#203446

Neutral 500

#55656A

Neutral 400

#7E8C9A

Neutral 300

#BDCFD4

Neutral 200

#E5EAEF

Neutral 100

#F7FCF8

Blanco

#FFFFFF

Tipografía

Textos

Display 1 Text

Display 1 - 80px/94px

Display 2 Text

Display 2 - 68px/76px

Display 3 Text

Display 3 - 32px/36px

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 50px/58px

Heading H2 - Aa Bb Cc Dd

Heading 2 - 36px/40px

Heading H3 - Aa Bb Cc Dd

Heading 3 - 26px/30px

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/25px

Heading H5 - Aa Bb Cc Dd

Heading 5 - 18px/20px

Heading H6 - Aa Bb Cc Dd

Heading 6 - 18px/20px

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.

Paragraph Default - 18px/30px

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.

Paragraph Large - 24px/36px

Link - Lorem ipsum dolor sit amet

Links

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text

Título imagen

Figure and Figure Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam.

Bullet List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam.

Numbered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam. Amet a ac ut pharetra. Amet, accumsan, nisl in elementum volutpat integer. Cursus est elementum maecenas ut.

Block Quote

ICONS

Diseñado por:

Síguenos en:

Botones

Botón Primario - Pequeño

Botón Primario - Normal

Botón Primario - Grande

Botón Secundario - Pequeño

Botón Secundario - Normal

Botón Secundario - Grande

Botón Terciario - Pequeño

Botón Terciario - Normal

Botón Terciario - Grande