UI implementation
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 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.
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.
Padding: 8, 28;
Font size: inherit – Body font.
Font weight: 700 bold.
Capitalize: lowercase.
Background-color: no-color.
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.
