Style Guide - claudiocalautti.cc

Table of contents

UI Color Palette

Primary Colors

Hex Value: #e4f4f3
Hex Value: #01a093
Hex Value: #005f63

Accent Colors

Hex Value: #b0ffee
Hex Value: #20ecbe
Hex Value: #01c6ae

Gradient Colors

Hex Value: #effffc
Hex Value: #aee4df
Hex Value: #99dcd5
Hex Value: #2cb0a6
Hex Value: #16a99d
Hex Value: #007574
Hex Value: #006b6c

Typography Colors

Primary Text:
Black 87%
Secondary Text:
Black 54%
Hint Text:
Black 25%
Dividers:
Black 12%

Icons

Buttons

Shapes

Regular Polygon Formulas

Calculator

r = 1;
R = 1.1547;

R = 1;
r = 0.866025;

Font Stacks

"Lato", Helvetica, Arial, sans-serif;

"Proxima Nova", Helvetica, Arial, sans-serif;

Headings

Heading 1 with small text and a link

Heading 2 with small text and a link

Heading 3 with small text and a link

Heading 4 with small text and a link

Heading 5 with small text and a link
Heading 6 with small text and a link

Content Block

Hello World lorem ipsum dolor sit occaecat cupidatat non proident.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • In voluptate velit esse cillum
  • In voluptate velit esse cillum
  • In voluptate velit esse cillum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Media

Screenshot Phone Screenshot Tablet Screenshot Desktop

Form

E-mail sent! I'll get back to you soon.

Oops, something went wrong. Please try again.