Guía de estilos


Color


HEX #78a22f

HEX #8dc6e8

HEX #ff511c

HEX #3a3d3e

Tipografía


Lato


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()

Títulos / Encabezados


Heading 1 - Bold, 80px / 1 / #3a3d3e

Heading 2 - Light, 60px / 1.5 / #707070

Heading 3 - Normal, 36px / 1.5 / #3a3d3e

Heading 4 - Bold, 18px / 1.5 / #3a3d3e

Heading 5, 16px / 1.5 / #3a3d3e
Heading 6, 12px / 1.5 / #3a3d3e

Tipografía / Párrafos


Lato, 18px / 1.2 / #3a3d3e


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 

Montserrat Bold, 18px / 1.2 / #3a3d3e


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Botones


Botón Primario

Normal Hover Active

Rounded corners

50%

Botón Secundario

Botón Auxiliar

Botones de texto

Hipervínculo

Hipervínculo

Fotografías / Imagenes


Concepto: Estas deberán ser ilustraciones en su mayoría, representando acciones alusivas al tema, en ocaciones podrán ser acompañadas por fotografías.



Tratamiento: Sin tratamiento

Iconos







Los iconos deben de estar construidos sobre un grid de 64*64 en outline de 2px

Spacing


Token

$spacing-01

$spacing-02

$spacing-03

$spacing-04

$spacing-05



$spacing-06

px

8

16

24

32

40



48

Ejemplo

Dirección

Juan Escutia 29 , Colonia Condesa, CDMX

CP 06140

México

Teléfono

Email

info@posicionamiento.mx

Formulario / Campo


Lorem ipsum:

New Paragraph

Lorem ipsum:

Lorem Ipsum