UI implementation
Typography
All fonts can be downloaded or linked from Google Fonts.
Header H1
Header H2
Header H3
Header H4
Header H5
Header H6
Body text or button
Color
This is the color palette defined to be used at pages, sites or any web elements for Utel developments.
Primary tones
Contrast
Grayscale
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
Padding: 10, 28;
Font size: inherit – Body font.
Font weight: 700 bold.
Capitalize: lowercase.
Background-color: secondary color.
Secondary button
Padding: 8, 28;
Font size: inherit – Body font.
Font weight: 700 bold.
Capitalize: lowercase.
Background-color: no-color.
Navigation
Below you will find the different types of navigation to be implemented in Utel's web developments. Consider content volume so the user can scroll correctly, as well as elements relevance in order to define style or hierarchy.
Secondary navigation
Fixed scroll navigation
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.
