Guía de estilos


Color


HEX #2c2c2c

HEX #484b53

HEX #f8f8f7

HEX #fce632

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


Roboto, 14px / 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 

Roboto Bold, 14px / 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 Active Hover

Rounded corners

50%

Botón Secundario

Normal Active Hover

Botones de texto

Hipervínculo

Hipervínculo

Hipervínculo

Fotografías / Imágenes


Concepto: Fotografías de los proyectos en tamaño no mejor a 1920 px. Utilizar un Ovarlay del 20% en tono #484b53 en los banners para generar contraste con texto blanco.

Iconos





Los iconos deben tener un fondo circular color blanco, deben ser trabajados en línea de color HEX #484b53

Spacing


Token

$spacing-01

$spacing-02

$spacing-03

$spacing-04

$spacing-05



$spacing-06

px

5

15

30

50

70



100

Formulario / Campo


Lorem ipsum:

New Paragraph

Lorem ipsum:

Lorem Ipsum