menu

Typography

All fonts can be downloaded or linked from Google Fonts.

Header H1

font
Sora
weight
regular
size
65 px
kerning
-1.5 px

Header H2

font
Sora
weight
regular
size
45 px
kerning
-0.5 px

Header H3

font
Sora
weight
regular
size
30 px
kerning
0 px

Header H4

font
Sora
weight
regular
size
24 px
kerning
0.25 px
Header H5
font
Sora
weight
regular
size
20 px
kerning
0 px
Header H6
font
Sora
weight
regular
size
18 px
kerning
.15 px

Body text or button

font
Work Sans
weight
normal
size
18 px
kerning
0.5 px
Responsive font adjustment should be done on the web framework.

Color

This is the color palette defined to be used at pages, sites or any web elements for Utel developments.

Primary color

hex
06B706
rgb
6 183 6

Secondary color

hex
EFB614
rgb
239 182 20

Body font

hex
4e4e4e
rgb
78 78 78

Primary tones

hex
06b706
rgb
6 183 6
hex
00c41c
rgb
0 196 28
hex
00ce53
rgb
0 203 86

Contrast

hex
4000BC
rgb
064 00 188
hex
2A0091
rgb
042 00 145
hex
330075
rgb
051 00 117

Grayscale

hex
4E4E4E
rgb
78 78 78
hex
898989
rgb
137 137 137
hex
D9D9D9
rgb
217 217 217
hex
F8F8F8
rgb
248 248 248

Buttons

Use the following button styles for your UI implementation. Consider the content of your development so that the right style is always chosen.

Button

Styles
Padding: 10, 28;
Font size: inherit – Body font.
Font weight: 700 bold.
Capitalize: lowercase.
Background-color: secondary color.

Secondary button

Styles
Padding: 8, 28;
Font size: inherit – Body font.
Font weight: 700 bold.
Capitalize: lowercase.
Background-color: no-color.

Text button

Styles
Display: inline
Font size: inherit – Body font.

Prototype

Below you will find a web prototype that you can navigate to see how the UI elements have been used in a real environment. Look how the buttons, typography, colors and graphic assets were defined for this test.