Guía de estilos


Color


HEX #6d6e70

HEX #b4b4b4

HEX #00a7e0

HEX #42c0c6

HEX #f26b3e

HEX #b4be34

Tipografía


Lato


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()

Títulos / Encabezados


Heading 1 - Bold, 40px / 1.5 / #213f62

Heading 2 - Bold, 30px / 1.5 / #213f62

Heading 3 - Bold, 24px / 1.5 / #213f62

Heading 4 - Bold, 18px / 1.5 / #213f62

Heading 5, 16px / 1.5 / #213f62
Heading 6, 14px / 1.5 / #213f62

Tipografía / Párrafos


Lato, 16px / 1.2 / #213f62


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 

Lato Bold, 16px / 1.2 / #213f62


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

Normal Hover Active

Botones de texto

Hipervínculo

Hipervínculo

Hipervínculo

Fotografías / Imagenes


Concepto: Tecnología / Seguridad Digital.


Tratamiento: Overlay con tonos de la marca en el caso de los banners y  los fondos para secciones informativas tendrán opacidad sobre fondo blanco de 50% a 15%

Iconos


Los iconos deben de estar diseñados en outline de 2px color HEX #42c0c6


En el caso de los iconos para categorías y productos de la tienda, deberán llevar el escudo de la marca degradado con los tonos correspondientes a su categoría y el icono central color HEX #6d6e70

Spacing


Token

$spacing-01

$spacing-02

$spacing-03

$spacing-04

$spacing-05



$spacing-06

px

10

20

25

30

40



70

Ejemplo

Formulario / Campo


Lorem ipsum:

New Paragraph

Lorem ipsum:

Lorem Ipsum