Guía de estilos


Color


HEX #02234C

HEX #022C66

HEX #0466BF

HEX #039fda

HEX #078431

HEX #05C148

Tipografía


Poppins


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


Poppins, 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 

Muli 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

2%

Botón Secundario

Normal Hover Active

Botones de texto

Hipervínculo

Hipervínculo

Fotografías / Imagenes


Concepto: Estas deberán de presentar a los desarrollos, sus amenidades, ubicación y el interior de cada departamento.


Tratamiento: Rounded corners 2%

                         Shadow color HEX #000000 25%

Iconos







Los iconos deben de estar construidos sobre un grid de 64*64 en outline de 2px color #022C66

Spacing


Token

$spacing-01

$spacing-02

$spacing-03

$spacing-04

$spacing-05



$spacing-06

px

8

16

24

32

40



48

Ejemplo

Formulario / Campo


Formulario 1

Formulario 2

Contact Us