Style Guide


Color


HEX #2c2c2c

HEX #484b53

HEX #f8f8f7

HEX #fce632

Typography


Side


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()


ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

abcdefghijklmnñopqrstuvwxyz

1234567890 ¿?¡!@_*()

Titles / Headings


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

Typography / Paragraphs


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. That's why, for the years all will I come, who shall nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip out of her the advantage of the recipe. Homework or to the Bureau dolor sit amet

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.

Buttons


Primary Button

Normal Active Hover

Rounded corners

50%

Text buttons

Hyperlink

Hyperlink

Hyperlink

Photographs / Images


Concept: Photographs of the projects in size no better than 1920 px. Use a 20% Ovarlay in tone # 484b53 on banners to create contrast with white text.

Icons





The icons must have a circular white background, they must be worked in a HEX color line # 484b53

Spacing


Token

$spacing-01

$spacing-02

$spacing-03

$spacing-04

$spacing-05



$spacing-06

px

5

15

30

50

70



100

Form / Field


Lorem Ipsum:

New Paragraph

Lorem Ipsum:

Lorem Ipsum