Guía de estilos


Color


HEX #ffcb05

HEX #231f20

HEX #000000

Tipografía


Nunito


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()



ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()



ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()

Títulos / Encabezados


Heading 1 - Regular, 40px /

1.5 / #00000

Heading 2 - Regular, 36px / 1.5 / #d2d2d2

Heading 3 - Regular, 30px / 1.5 / #ffffff

Heading 4 - Bold, 24px / 1.5 / #ffffff

Heading 5, 20px / 1.5 / #ffcb05
Heading 6, 18px / 1.5 / #ffcb05

Tipografía / Párrafos


Nunito, 16px / 1.2 / #231f20


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 

Nunito Bold, 16px / 1.2 / #231f20


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

5%

Botón Secundario

Normal Hover Active

Botones de texto

Hipervínculo

Hipervínculo

Hipervínculo

Fotografías / Imagenes


Concepto: Estas deberán de presentar a los proyectos terminados y en construcción de VIDAHAUS.


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 HEX #ffcb05 y HEX #ffffff

Spacing


Token

$spacing-01

$spacing-02

$spacing-03

$spacing-04

$spacing-05



$spacing-06

px

8

16

24

32

40



48

Ejemplo

Formulario / Campo


Lorem ipsum:

New Paragraph

Lorem ipsum:

Lorem Ipsum