Cogniteq website
Cogniteq website
SERVICES
Design system
Client
Cogniteq
2023
2023
SERVICES
Design system
Client
Cogniteq
2023
Basis and Scales
Basis and Scales
In the beginning, the basics and scales were established. For this purpose, it was necessary to review all pages and decide which of the elements that carry the same meaning but have slightly different properties should be kept, and which to eliminate.
In the beginning, the basics and scales were established. For this purpose, it was necessary to review all pages and decide which of the elements that carry the same meaning but have slightly different properties should be kept, and which to eliminate.
In the beginning, the basics and scales were established. For this purpose, it was necessary to review all pages and decide which of the elements that carry the same meaning but have slightly different properties should be kept, and which to eliminate.
Font and color tokens
Font and color tokens
For quick development and future changes, tokens have been added that are assigned to each element on the site. Fonts were divided into two sections: for the mobile and desktop versions of the website. At first, a palette of all used primary colors on the website was created, and after that, semantic colors were created.
For quick development and future changes, tokens have been added that are assigned to each element on the site. Fonts were divided into two sections: for the mobile and desktop versions of the website. At first, a palette of all used primary colors on the website was created, and after that, semantic colors were created.
Modules
Modules
Further, based on created tokens all necessary components of modules were created, which will be reused in the future: Buttons, text fields, links, menus, pagination, etc.
Further, based on created tokens all necessary components of modules were created, which will be reused in the future: Buttons, text fields, links, menus, pagination, etc.
Patterns
Patterns
The modules were used to create patterns - blocks of pages that are reused or potentially will be reused on the website. Some patterns that are difficult to adapt were made separately for mobile and desktop versions. Using patterns in the future will help to build new pages quickly.
The modules were used to create patterns - blocks of pages that are reused or potentially will be reused on the website. Some patterns that are difficult to adapt were made separately for mobile and desktop versions. Using patterns in the future will help to build new pages quickly.
Design system for Cogniteq's corporate website
Design system for Cogniteq's corporate website
Because new pages were being added to the website and old pages were being redesigned, it was necessary to bring everything to a single system to create a source to which both developers and designers could refer.
Because new pages were being added to the website and old pages were being redesigned, it was necessary to bring everything to a single system to create a source to which both developers and designers could refer.
