Guía de estilos

Color

HEX #e0bbb0

HEX #c4c6a7

HEX #b6ced0

HEX #fbf0c3

HEX #f1bf96

Tipografía

Poppins


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()

Títulos / Encabezados

Heading 1 - Bold, 48px

/ 1.5 / #e0bbb0

Heading 2 - Bold, 4

0px / 1.5 / #e0bbb0

Heading 3 - Bold, 36px / 1.5

/ #3f3f3f

Heading 4 - Bold, 30px / 1.5 / #3f3f3f

Heading 5, 24px / 1.5 / #b6ced0
Heading 6, 20px / 1.5 / #b6ced0

Tipografía / Párrafos

Poppins, 16px / 1.2 / #000000


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 

Poppins Bold, 16px / 1.2 / #000000


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

6%

Botón Secundario

Normal Hover Active

Botones de texto

Hipervínculo

Hipervínculo

Fotografías / Imagenes

Concepto: Estas deberán de representar los servicios que ofrece la agencia al igual que imágenes del portafolio.


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 #e0bbb0

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