Guía de estilos


Color


HEX #598f99

HEX #bf9484

HEX #262626

HEX #8c8c8c

Tipografía


Cinzel



ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()



ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()



ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()

Noto Serif



ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()



ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()



ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()

Títulos / Encabezados


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

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

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

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

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

Tipografía / Párrafos


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

Montserrat 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

Nuevo botón

Botón Secundario

Nuevo botón

Botón Auxiliar

Nuevo botón

Botones de texto

Hipervínculo

Hipervínculo

Hipervínculo

Fotografías / Imagenes


Concepto: Lorem Ipsum

Tratamiento: Lorem Ipsum

Iconos












Los iconos deben de estar construidos sobre un grid de 64*64 con un relleno solido de color HEX #262626

Spacing


Token

$spacing-01

$spacing-02

$spacing-03

$spacing-04

$spacing-05



$spacing-06

px

10

20

30

40

50



60


Ejemplo

Formulario / Campo


Lorem ipsum:

New Paragraph

Lorem ipsum:

Lorem Ipsum