01.2 Colors
We divided colors into different categories for ease of use and systematization. We have assigned a self-name to each individual colot for proper understanding withing the team during discussion.
Primary colors
Secondary colors
Service colors
01.3 Typography
Typography is the most important medium of communication between interface and users. 2 different fonts are most suitable for the project.
Almarai Light
This font is chosen for small size text and long paragraphs.
Almarai Bold
This font is chosen for titles and big text.
DIN Pro Regular
This font is chosen for numbers.
01.4 Icons
We are using personal designed icons. In whole project we used two sizes of icon: 24px and 32px.
24px
32px
Verification services icons
Size exceptions
02.1 Buttons
02.1.1 Primary buttons
Primary button used for pay user's attention to main action on the page. Place this button only once per screen or logic action.
02.1.2 Primary buttons with icons
Optional usage of the primary buttons.
02.1.3 Secondary buttons
Secondary button used for other actions that not included in primary actions. Can be used several times per screen.
02.1.4 Text buttons
Text button used for other actions that are not included in the basic actions, but should be highlighted, e.g. with a different color. It can be used several times on the screen.
It should behave in the same way as the secondary button.
02.1.5 States
02.2 Inputs & Textfields
02.2.1 Simple inputs
Intended for all types of data. Most often used in all forms.
Width: min 300px
02.2.2 Combined inputs
Optional usage for verification services.
REGULAR
FOCUS
FILLED
SUCCESS
ALERT
WARNING
ICON
DISABLED
02.2.3 Text field
In case of entering longer descriptions or open questions.
REGULAR
FOCUS
FILLED
02.3 Selectors & options
02.3.1 Radiobuttons
Radiobuttons used for single-choice available options.
REGULAR
DISABLED
Option
Option
02.3.2 Checkboxes
Radiobuttons used for single-choice available options.
REGULAR
DISABLED
Option
Option
02.3.3 Selectors
The dropdown menu used for sorting or to apply some filters.
REGULAR
OPENED
FILLED
Label
Label
Label