{"id":500628,"date":"2026-10-28T11:40:21","date_gmt":"2026-10-28T08:40:21","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=500628"},"modified":"2026-10-28T11:40:21","modified_gmt":"2026-10-28T08:40:21","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=500628","title":{"rendered":"\u041a\u0430\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0439\u043b. \u0422\u043e\u043a\u0435\u043d\u044b \u0438\u0437 \u0441\u0442\u0438\u043b\u0435\u0439 Figma, \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u0438 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440 \u043a\u0430\u043a \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042f \u0434\u0435\u043b\u0430\u043b \u0434\u0438\u0437\u0430\u0439\u043d \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u043c\u0430\u0440\u043a\u0438 \u043a\u0443\u0440\u0438\u043d\u044b\u0445 \u044f\u0438\u0446. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043b\u0438\u043d\u043d\u0430\u044f, \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0434\u0438\u043d\u043d\u0430\u0434\u0446\u0430\u0442\u0438 \u0442\u044b\u0441\u044f\u0447 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435, \u0441 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440\u043e\u043c, \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u0441\u0446\u0435\u043d\u0430\u043c\u0438 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u0431\u043b\u043e\u043a\u0430\u043c\u0438. \u041c\u0430\u043a\u0435\u0442 \u044f \u0441\u0434\u0430\u0432\u0430\u043b \u0432 \u0434\u0432\u0443\u0445 \u0448\u0438\u0440\u0438\u043d\u0430\u0445, 1600 \u0438 390. \u0412\u0451\u0440\u0441\u0442\u043a\u0443 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432\u0435\u043b\u0430 \u0434\u0440\u0443\u0433\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043c\u043e\u044f \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043c\u0430\u043a\u0435\u0442\u0430.<\/p>\n<p>\u0421\u043b\u043e\u0451\u0432 \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u043f\u044f\u0442\u044c. \u0426\u0432\u0435\u0442, \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442, \u0441\u0435\u0442\u043a\u0430, \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440 \u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438. \u041f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u043e\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043b\u0435\u0436\u0430\u043b\u043e \u0432 Figma \u0438 \u043a\u0430\u043a \u044f \u0431\u044b \u0432\u044b\u0433\u0440\u0443\u0437\u0438\u043b \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0441\u0435\u0439\u0447\u0430\u0441, \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u043c\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u043c\u0438. \u041a\u043e\u0434 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u043e\u0439, \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438, \u0430 \u043d\u0435 \u0432\u0451\u0440\u0441\u0442\u043a\u0430 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/extt\/38\/86\/61\/388661bef5367c28d3fd6641e2fcfa30.jpg\" alt=\"\u042d\u043a\u0440\u0430\u043d \u043f\u043e\u043b\u044c\u0437\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435. \u0411\u0435\u0436\u0435\u0432\u044b\u0439 \u0444\u043e\u043d, \u0442\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0436\u0451\u043b\u0442\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430.\" title=\"\u042d\u043a\u0440\u0430\u043d \u043f\u043e\u043b\u044c\u0437\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435. \u0411\u0435\u0436\u0435\u0432\u044b\u0439 \u0444\u043e\u043d, \u0442\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0436\u0451\u043b\u0442\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430.\" width=\"1920\" height=\"1080\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/extt\/38\/86\/61\/388661bef5367c28d3fd6641e2fcfa30.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/extt\/38\/86\/61\/388661bef5367c28d3fd6641e2fcfa30.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u042d\u043a\u0440\u0430\u043d \u043f\u043e\u043b\u044c\u0437\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435. \u0411\u0435\u0436\u0435\u0432\u044b\u0439 \u0444\u043e\u043d, \u0442\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0436\u0451\u043b\u0442\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430.<\/figcaption><\/div>\n<\/figure>\n<h3>\u0423\u043f\u0430\u043a\u043e\u0432\u043a\u0430, \u0434\u0432\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0439\u043b<\/h3>\n<p>\u041e\u0442 \u0431\u0440\u0435\u043d\u0434\u0430 \u0431\u044b\u043b\u0430 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u0441 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u043e\u0439 \u043d\u0430\u0434\u043f\u0438\u0441\u044c\u044e \u0438 \u0442\u0440\u0435\u043c\u044f \u0446\u0432\u0435\u0442\u0430\u043c\u0438. \u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u0441\u0430\u0439\u0442\u0443 \u0434\u0432\u0430. \u0413\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0441 \u0433\u043e\u0440\u043e\u0434\u0441\u043a\u0438\u043c \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u0435\u043b\u0435\u043c, \u0445\u043e\u0442\u044f \u0432\u0441\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u0434\u0435\u0440\u0435\u0432\u043d\u0435, \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 Figma \u0432 \u0444\u0430\u0439\u043b\u0435 \u043d\u0435\u0442, \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043e\u0431\u0440\u0430\u043d\u0430 \u043d\u0430 \u0441\u0442\u0438\u043b\u044f\u0445. \u0421\u0442\u0438\u043b\u0435\u0439 \u0446\u0432\u0435\u0442\u0430 \u0447\u0435\u0442\u044b\u0440\u0435, \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u044f\u0442\u044c, \u0441\u0435\u0442\u043e\u043a \u0434\u0432\u0435. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0438\u0434\u0435\u043b\u0438 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u043e\u0431\u0449\u0430\u043b\u0438\u0441\u044c \u043c\u044b \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0439\u043b \u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u043a\u0443, \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u0451, \u0447\u0435\u0433\u043e \u043d\u0435\u0442 \u0432 \u0444\u0430\u0439\u043b\u0435, \u0438\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0440\u0435\u0448\u0430\u0442\u044c \u0441\u0430\u043c\u0438\u043c. \u0418 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0447\u0442\u0438 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0430, \u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u0438 \u043a\u043e\u043d\u0435\u0446 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u042f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438. \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u043f\u043e\u0434 CSS, \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439 \u0442\u0430\u0439\u043c\u0438\u043d\u0433\u043e\u0432 \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u0438 UI-\u043a\u0438\u0442 \u0432 Figma \u043f\u043b\u044e\u0441 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043c\u043e\u043a\u0430\u043f\u0430\u0445 \u0440\u043e\u043b\u0438\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412\u044b\u0431\u0440\u0430\u043b \u0432\u0442\u043e\u0440\u043e\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a, \u0441\u0440\u043e\u043a\u0438 \u0438 \u0440\u043e\u043b\u0438\u043a\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043b\u0443\u0447\u0448\u0435 \u0442\u0430\u0431\u043b\u0438\u0446. \u0421\u0435\u0439\u0447\u0430\u0441 \u044f \u0431\u044b \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u043e\u0431\u0430.<\/p>\n<h3>\u0426\u0432\u0435\u0442. \u0418\u0437 \u0441\u0442\u0438\u043b\u044f Figma \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e<\/h3>\n<p>\u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u0442\u0438\u043b\u044f \u0446\u0432\u0435\u0442\u0430. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043d\u044f\u0442\u044b \u0447\u0435\u0440\u0435\u0437 Plugin API, \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0440\u043e\u0431\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u0430\u043d\u0430\u043b\u043e\u0432.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p align=\"left\">\u0421\u0442\u0438\u043b\u044c<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u041a\u0430\u043d\u0430\u043b\u044b RGB \u0432 Figma (0\u2013255)<\/p>\n<\/th>\n<th>\n<p align=\"left\">Hex \u043f\u043e\u0441\u043b\u0435 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u044c<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Main\/1<\/p>\n<\/td>\n<td>\n<p align=\"left\">23; 58; 41<\/p>\n<\/td>\n<td>\n<p align=\"left\">#173A29<\/p>\n<\/td>\n<td>\n<p align=\"left\">3 719<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Main\/2<\/p>\n<\/td>\n<td>\n<p align=\"left\">255; 249; 231<\/p>\n<\/td>\n<td>\n<p align=\"left\">#FFF9E7<\/p>\n<\/td>\n<td>\n<p align=\"left\">945<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Accent\/1<\/p>\n<\/td>\n<td>\n<p align=\"left\">255; 192,882; 6,527<\/p>\n<\/td>\n<td>\n<p align=\"left\">#FFC107<\/p>\n<\/td>\n<td>\n<p align=\"left\">571<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Accent\/2<\/p>\n<\/td>\n<td>\n<p align=\"left\">110,196; 176,232; 77,757<\/p>\n<\/td>\n<td>\n<p align=\"left\">#6EB04E<\/p>\n<\/td>\n<td>\n<p align=\"left\">128<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Figma \u0445\u0440\u0430\u043d\u0438\u0442 \u0446\u0432\u0435\u0442 \u043a\u0430\u043a \u0442\u0440\u0438 \u0447\u0438\u0441\u043b\u0430 \u043e\u0442 0 \u0434\u043e 1. \u0423 \u0434\u0432\u0443\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0446\u0435\u043b\u044b\u0435 \u0431\u0430\u0439\u0442\u044b, \u0438 hex \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043e\u043a\u0440\u0443\u0433\u043b\u044f\u0435\u0448\u044c \u0442\u044b \u0438\u043b\u0438 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0448\u044c \u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c. 192,882 \u0434\u0430\u0451\u0442 C1 \u043f\u0440\u0438 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0438 \u0438 C0 \u043f\u0440\u0438 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u0438. \u042f \u0441\u0430\u043c \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u043e\u043f\u0438\u0441\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u0437\u0430\u043f\u0438\u0441\u0430\u043b \u0436\u0451\u043b\u0442\u044b\u0439 \u043a\u0430\u043a #FFC006 \u0438 \u0441\u0432\u0435\u0442\u043b\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u043a\u0430\u043a #6EB04D, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043b \u0434\u0440\u043e\u0431\u044c. \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Figma \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 hex \u0441 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u044e \u043e\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u043e\u0435, #FFC107. \u0415\u0441\u043b\u0438 \u0442\u043e\u043a\u0435\u043d\u044b \u0441\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c, \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043d\u0451\u043c \u044f\u0432\u043d\u043e.<\/p>\n<p>\u0427\u0435\u0442\u044b\u0440\u0451\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043c\u0430\u043b\u043e. \u0412 UI-\u043a\u0438\u0442\u0435 \u044f \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445, \u0438 \u0443 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438 \u0446\u0432\u0435\u0442\u0430, #FFD000 \u0443 \u0436\u0451\u043b\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 #194630 \u0443 \u0442\u0451\u043c\u043d\u043e\u0439. \u0421\u0442\u0438\u043b\u0435\u0439 \u0443 \u043d\u0438\u0445 \u043d\u0435\u0442, \u043e\u043d\u0438 \u0436\u0438\u0432\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u043b\u043e\u044f\u0445 \u043a\u0438\u0442\u0430. \u0420\u043e\u0437\u043e\u0432\u044b\u0439 #FA73BF \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 64 \u0440\u0430\u0437\u0430 \u0438 \u043d\u0438 \u0440\u0430\u0437\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u044c, \u044f \u0441\u0447\u0438\u0442\u0430\u043b \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c\u044e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439. \u041f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0431\u0435\u0436\u0435\u0432\u044b\u0439 \u0438 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0437\u0435\u043b\u0451\u043d\u044b\u0439, 50% \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432, \u0442\u043e\u0436\u0435 \u0437\u0430\u0434\u0430\u043d\u044b \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u0441\u043b\u043e\u044f\u0445. \u0412\u0441\u0451 \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0441\u043d\u0438\u043c\u0430\u0442\u044c \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a.<\/p>\n<p>\u0421 \u0431\u0435\u0436\u0435\u0432\u044b\u043c \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0430. \u0427\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u044c Main\/2 \u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u0451\u043d 945 \u0440\u0430\u0437, \u0430 \u0442\u0435\u043c \u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u044f \u0435\u0449\u0451 2 608 \u0440\u0430\u0437, \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0432 \u043a\u043e\u043f\u0438\u044f\u0445 \u043a\u0430\u0434\u0440\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041f\u043e \u0442\u0430\u043a\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0431\u0435\u0436\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0438 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0430\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0435, \u0430 \u043a\u0430\u043a\u0438\u0435 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u043b\u0438 \u043f\u043e \u0446\u0432\u0435\u0442\u0443.<\/p>\n<p>\u0426\u0432\u0435\u0442 \u044f \u0431\u044b \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u0442\u0430\u043a. \u041f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0441\u0442\u0438\u043b\u044f\u043c Figma, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0441\u0432\u043e\u0438 \u0438\u043c\u0435\u043d\u0430, \u0430 \u0440\u043e\u043b\u0438 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b.<\/p>\n<pre><code>\/* \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438, \u0438\u043c\u0435\u043d\u0430 \u043f\u043e \u0441\u0442\u0438\u043b\u044f\u043c Figma *\/:root {  \/* \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b *\/  --main-1: #173A29;          \/* Main\/1, \u0442\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 *\/  --main-2: #FFF9E7;          \/* Main\/2, \u0431\u0435\u0436\u0435\u0432\u044b\u0439 *\/  --accent-1: #FFC107;        \/* Accent\/1, \u0436\u0451\u043b\u0442\u044b\u0439 *\/  --accent-2: #6EB04E;        \/* Accent\/2, \u0441\u0432\u0435\u0442\u043b\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 *\/  --accent-1-hover: #FFD000;  \/* \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0436\u0451\u043b\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u0432 Figma \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u044f *\/  --main-1-hover: #194630;    \/* \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0442\u0451\u043c\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u0432 Figma \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u044f *\/  --illustration-pink: #FA73BF;  \/* \u0440\u043e\u043b\u0438 *\/  --color-bg: var(--main-2);  --color-text: var(--main-1);  --color-text-muted: color-mix(in srgb, var(--main-1) 50%, transparent);  --color-on-dark-muted: color-mix(in srgb, var(--main-2) 50%, transparent);  --color-button: var(--accent-1);  --color-button-hover: var(--accent-1-hover);}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper\"><\/span><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0431\u0440\u0430\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 <code>color-mix<\/code>, \u0431\u0435\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e hex \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0434\u043e\u043b\u044e. \u0422\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u0430\u0451\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, <code>rgb(from var(--main-2) r g b \/ 50%)<\/code>. \u041e\u0431\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 Chrome, Safari \u0438 Firefox. \u0417\u0430\u0442\u043e \u0443 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0433\u043e \u0431\u0435\u0436\u0435\u0432\u043e\u0433\u043e \u043d\u0430 \u0442\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u043e\u043c \u0444\u043e\u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043c\u044f. \u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u0440\u043e\u043b\u0435\u0439 \u0446\u0432\u0435\u0442\u0430, \u0430 \u0441\u0442\u0438\u043b\u044f \u0443 \u043d\u0435\u0451 \u043d\u0435 \u0431\u044b\u043b\u043e.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/extt\/38\/18\/d5\/3818d5669bc6f618798e4b60e2a3ad88.jpg\" alt=\"\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u043e\u0435 \u043c\u0435\u043d\u044e \u0438 \u043e\u0442\u0437\u044b\u0432\u044b \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435. \u0422\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0438 \u043d\u0430 \u0436\u0451\u043b\u0442\u043e\u043c \u0444\u043e\u043d\u0435.\" title=\"\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u043e\u0435 \u043c\u0435\u043d\u044e \u0438 \u043e\u0442\u0437\u044b\u0432\u044b \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435. \u0422\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0438 \u043d\u0430 \u0436\u0451\u043b\u0442\u043e\u043c \u0444\u043e\u043d\u0435.\" width=\"1600\" height=\"740\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/extt\/38\/18\/d5\/3818d5669bc6f618798e4b60e2a3ad88.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/extt\/38\/18\/d5\/3818d5669bc6f618798e4b60e2a3ad88.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u043e\u0435 \u043c\u0435\u043d\u044e \u0438 \u043e\u0442\u0437\u044b\u0432\u044b \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435. \u0422\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0438 \u043d\u0430 \u0436\u0451\u043b\u0442\u043e\u043c \u0444\u043e\u043d\u0435.<\/figcaption><\/div>\n<\/figure>\n<h3>Roboto Flex. \u041e\u0434\u043d\u0430 \u043e\u0441\u044c \u0448\u0438\u0440\u0438\u043d\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0437\u043a\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430<\/h3>\n<p>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043d\u0430\u0431\u0440\u0430\u043d\u044b \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u043c Roboto Flex. \u041c\u043d\u0435 \u0431\u044b\u043b \u043d\u0443\u0436\u0435\u043d \u0443\u0437\u043a\u0438\u0439 \u043f\u043b\u043e\u0442\u043d\u044b\u0439 \u0433\u0440\u043e\u0442\u0435\u0441\u043a \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435, \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e condensed-\u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f \u044f \u0432\u0437\u044f\u043b \u043e\u0434\u043d\u0443 \u043e\u0441\u044c. \u0412 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0441\u0442\u0438\u043b\u0435 Figma \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c \u043d\u0430\u0431\u043e\u0440 \u043e\u0441\u0435\u0439.<\/p>\n<pre><code>{  \"family\": \"Roboto Flex\", \"style\": \"Medium\",  \"variationSettings\": {    \"wght\": 500, \"wdth\": 30, \"slnt\": 0, \"GRAD\": 0,    \"XOPQ\": 96, \"XTRA\": 468, \"YOPQ\": 79, \"YTAS\": 750,    \"YTDE\": -203, \"YTFI\": 738, \"YTLC\": 514, \"YTUC\": 712  }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<p>\u0418\u0437 \u0434\u0432\u0435\u043d\u0430\u0434\u0446\u0430\u0442\u0438 \u043e\u0441\u0435\u0439 \u044f \u043c\u0435\u043d\u044f\u043b \u0434\u0432\u0435. \u0428\u0438\u0440\u0438\u043d\u0430 <code>wdth<\/code> \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 30 \u043f\u0440\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 \u043e\u0442 25 \u0434\u043e 151, \u0432\u0435\u0441 <code>wght<\/code> \u043d\u0430 500. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0441\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 XOPQ, XTRA, YOPQ \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0441 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0431\u0443\u043a\u0432\u044b, \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0412 UI-\u043a\u0438\u0442\u0435 \u044d\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u00ab\u0428\u0440\u0438\u0444\u0442 \u0434\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 roboto flex variable weight:500 width:30\u00bb. \u042d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0441\u0430\u043c\u043e\u0439 \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0447\u0438\u0441\u043b\u043e\u043c.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u044f \u0431\u044b \u043f\u0440\u043e\u0441\u0438\u043b \u0442\u0430\u043a. \u0415\u0441\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 Google Fonts, \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u0438 \u0441 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430\u043c\u0438, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0442\u0430\u043a \u0441\u0442\u043e\u044f\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<pre><code>\/* \u043f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a Google Fonts *\/family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c, \u0432 <code>@font-face<\/code> \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u044b \u043e\u0441\u0435\u0439, \u0430 \u0441\u0430\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438.<\/p>\n<pre><code>\/* \u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435 \u043a\u043e\u0434 \u0441\u0430\u0439\u0442\u0430 *\/@font-face {  font-family: \"Roboto Flex\";  src: url(\"\/fonts\/roboto-flex.woff2\") format(\"woff2\");  font-weight: 100 1000;  font-stretch: 25% 151%;  font-display: swap;}h1, h2 {  font-family: \"Roboto Flex\", sans-serif;  font-weight: 500;     \/* \u043e\u0441\u044c wght *\/  font-stretch: 30%;    \/* \u043e\u0441\u044c wdth, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 @font-face \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d 25% 151% *\/  text-transform: uppercase;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 <code>font-variation-settings<\/code>. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0437\u0430\u0434\u0430\u0451\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0441\u0435\u0439 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0438 \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043d\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435, \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u0430 \u043d\u0435 \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432 \u043d\u0435\u0433\u043e. \u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e \u043e\u0431\u0435 \u043e\u0441\u0438, \u0430 \u0433\u0434\u0435-\u0442\u043e \u043d\u0438\u0436\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f <code>font-variation-settings: \"wght\" 700<\/code>, \u043e\u0441\u044c \u0448\u0438\u0440\u0438\u043d\u044b \u0432\u044b\u043f\u0430\u0434\u0435\u0442 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u0438 \u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u043e\u0442 <code>font-stretch<\/code>, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 100, \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0430\u043d\u0435\u0442 \u0448\u0438\u0440\u043e\u043a\u0438\u043c. <code>font-weight<\/code> \u0438 <code>font-stretch<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e. <code>font-variation-settings<\/code> \u0441\u0442\u043e\u0438\u0442 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u043b\u044f \u043e\u0441\u0435\u0439, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \u0441\u0432\u043e\u0435\u0433\u043e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0432\u0440\u043e\u0434\u0435 XTRA \u0438\u043b\u0438 YTUC. \u0417\u0434\u0435\u0441\u044c \u0442\u0430\u043a\u0438\u0435 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c.<\/p>\n<p>\u0421 \u043e\u043f\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043e\u0441\u044c\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f. \u0412 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0441\u0442\u0438\u043b\u0435 Figma \u043e\u0441\u0438 <code>opsz<\/code> \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043d\u0435\u0442. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 <code>font-optical-sizing: auto<\/code>, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0451 \u043f\u043e \u043a\u0435\u0433\u043b\u044e, \u0438 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0432 160 px \u043e\u043d\u0430 \u0443\u043f\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0448\u0440\u0438\u0444\u0442\u0430, 144. \u041d\u0430 80 px opsz \u0440\u0430\u0432\u0435\u043d 80. \u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043e\u0441\u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u043b\u0438 \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0431\u0443\u043a\u0432 \u043d\u0430 160 px \u0432 Figma \u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u044f \u0442\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b. \u041d\u0430 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u0445 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0442\u0430\u043a\u0443\u044e \u0441\u0432\u0435\u0440\u043a\u0443 \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043e \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0435\u0451 \u0438\u0442\u043e\u0433 \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443.<\/p>\n<p>\u0418 \u0432\u0435\u0441 \u0444\u0430\u0439\u043b\u0430. \u041f\u043e\u043b\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 Roboto Flex \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u044f\u043c\u0438 \u0442\u044f\u0436\u0451\u043b\u044b\u0439, \u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0448\u0438\u0440\u0438\u043d\u0430 30 \u0438 \u0432\u0435\u0441 500. \u041e\u043f\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438\u0434\u0451\u0442 \u0437\u0430 \u043a\u0435\u0433\u043b\u0435\u043c, \u043d\u0430 160 px \u044d\u0442\u043e 144, \u043d\u0430 80 px \u044d\u0442\u043e 80, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u0434\u0432\u0430, \u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u043e\u043d\u0438 \u0432\u0435\u0441\u044f\u0442 \u0432 \u0440\u0430\u0437\u044b \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u0412\u044b\u0440\u0435\u0437\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c <code>instancer<\/code> \u0438\u0437 fontTools. \u0424\u043b\u0430\u0433 <code>--static<\/code> \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u043e\u0441\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u044b \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435, \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0441\u0438 \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435.<\/p>\n<pre><code># \u043f\u0440\u0438\u043c\u0435\u0440: \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043f\u043e\u0434 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438fonttools varLib.instancer RobotoFlex.ttf wdth=30 wght=500 opsz=144 --static -o RobotoFlex-160.ttffonttools varLib.instancer RobotoFlex.ttf wdth=30 wght=500 opsz=80 --static -o RobotoFlex-80.ttf<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<p>\u0412\u044b\u0431\u043e\u0440 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u0431\u044b\u043b \u043c\u043e\u0438\u043c, \u0437\u043d\u0430\u0447\u0438\u0442, \u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u043a \u0432\u0435\u0441\u0443 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u0442\u043e\u044f\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435.<\/p>\n<p>\u0420\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0439 Sunless Day \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435\u043c. \u0415\u0433\u043e \u043f\u0430\u0440\u0430 \u0441 Roboto Flex \u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u043b\u0438\u043d\u044c\u044f\u0436\u0435. \u0421\u0442\u0438\u043b\u044c \u00ab80 Subheader\u00bb \u0438\u043c\u0435\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u043b\u0438\u043d\u044c\u044f\u0436 50%, \u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u043e\u0433\u043e \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0433\u0440\u043e\u0442\u0435\u0441\u043a \u0431\u0435\u0437 \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u043e\u0434\u0433\u043e\u043d\u043a\u0438.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p align=\"left\">\u0421\u0442\u0438\u043b\u044c Figma<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u0428\u0440\u0438\u0444\u0442<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u041a\u0435\u0433\u043b\u044c<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u0418\u043d\u0442\u0435\u0440\u043b\u0438\u043d\u044c\u044f\u0436<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">160 H1<\/p>\n<\/td>\n<td>\n<p align=\"left\">Roboto Flex, wght 500, wdth 30<\/p>\n<\/td>\n<td>\n<p align=\"left\">160<\/p>\n<\/td>\n<td>\n<p align=\"left\">80%<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">80 H2<\/p>\n<\/td>\n<td>\n<p align=\"left\">Roboto Flex, wght 500, wdth 30<\/p>\n<\/td>\n<td>\n<p align=\"left\">80<\/p>\n<\/td>\n<td>\n<p align=\"left\">90%<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">160 Subheader<\/p>\n<\/td>\n<td>\n<p align=\"left\">Sunless Day<\/p>\n<\/td>\n<td>\n<p align=\"left\">160<\/p>\n<\/td>\n<td>\n<p align=\"left\">80%<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">80 Subheader<\/p>\n<\/td>\n<td>\n<p align=\"left\">Sunless Day<\/p>\n<\/td>\n<td>\n<p align=\"left\">80<\/p>\n<\/td>\n<td>\n<p align=\"left\">50%<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">20<\/p>\n<\/td>\n<td>\n<p align=\"left\">Inter Semi Bold, \u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u22122%<\/p>\n<\/td>\n<td>\n<p align=\"left\">20<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0430\u0432\u0442\u043e<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0448\u0438\u0440\u0438\u043d\u0430\u043c\u0438 \u043a\u0435\u0433\u043b\u0438 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u043a\u0430\u0447\u043a\u043e\u043c, 160 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u0438 80 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435. \u041f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0441\u0442\u0443\u043f\u0435\u043d\u0438 \u044f \u043d\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043b. \u0418\u0445 \u0441\u0442\u043e\u0438\u043b\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u0442\u043e\u043a\u0435\u043d\u0430\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 <code>clamp()<\/code>, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0438\u0445 \u0432\u044b\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c.<\/p>\n<pre><code>\/* \u043f\u0440\u0438\u043c\u0435\u0440: \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043e\u0442 80 px \u043d\u0430 390 \u0434\u043e 160 px \u043d\u0430 1600 *\/--text-h1-size: clamp(80px, 54.2px + 6.61vw, 160px);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<h3>\u0421\u0435\u0442\u043a\u0430 \u0438 \u043d\u0438\u0437\u043a\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b<\/h3>\n<p>\u0421\u0435\u0442\u043a\u0438 \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u0434\u0432\u0435, \u0438 \u043e\u0431\u0435 \u0431\u0435\u0437 \u043c\u0435\u0436\u043a\u043e\u043b\u043e\u043d\u043d\u0438\u043a\u0430.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p align=\"left\">\u0421\u0435\u0442\u043a\u0430<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u0428\u0438\u0440\u0438\u043d\u0430<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u041a\u043e\u043b\u043e\u043d\u043a\u0438<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u041c\u0435\u0436\u043a\u043e\u043b\u043e\u043d\u043d\u0438\u043a<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u041f\u043e\u043b\u044f<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Desktop<\/p>\n<\/td>\n<td>\n<p align=\"left\">1600<\/p>\n<\/td>\n<td>\n<p align=\"left\">4<\/p>\n<\/td>\n<td>\n<p align=\"left\">0<\/p>\n<\/td>\n<td>\n<p align=\"left\">50<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Phone<\/p>\n<\/td>\n<td>\n<p align=\"left\">390<\/p>\n<\/td>\n<td>\n<p align=\"left\">2<\/p>\n<\/td>\n<td>\n<p align=\"left\">0<\/p>\n<\/td>\n<td>\n<p align=\"left\">25<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>\u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u0431\u0435\u0437 \u043c\u0435\u0436\u043a\u043e\u043b\u043e\u043d\u043d\u0438\u043a\u0430 \u0437\u0430\u0434\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0440\u0430\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432, \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0438 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0441\u0435\u0442\u043a\u0430 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0434\u0432\u0443\u043c \u0447\u0438\u0441\u043b\u0430\u043c, \u043f\u043e\u043b\u044f\u043c \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435. \u0422\u043e\u0447\u043a\u0443 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044f\u043c\u0438 25 \u0438 50 \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u044f \u043d\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u043b, \u0430 \u0441\u0442\u043e\u0438\u043b\u043e.<\/p>\n<p>\u0423\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u0440\u0438\u043b\u0438\u043f\u0430\u0435\u0442 \u0438 \u0435\u0434\u0435\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u043f\u044f\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u043f\u043e\u0434\u0440\u044f\u0434, \u0438 \u0435\u0451 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u044b\u0441\u043e\u0442\u044b \u043e\u043a\u043d\u0430. \u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u0431\u044b\u043b\u043e \u0434\u0432\u0430 \u043a\u0430\u0434\u0440\u0430, 1600\u00d7900 \u0438 390\u00d7844. \u041d\u0438 \u043e\u0434\u0438\u043d \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 700 \u0438\u043b\u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435, \u043f\u043e\u0432\u0451\u0440\u043d\u0443\u0442\u043e\u043c \u0431\u043e\u043a\u043e\u043c. \u0415\u0441\u043b\u0438 \u0431\u044b \u044f \u0434\u0435\u043b\u0430\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0437\u0430\u043d\u043e\u0432\u043e, \u043a \u0434\u0432\u0443\u043c \u0448\u0438\u0440\u0438\u043d\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0431\u044b \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043d\u0438\u0437\u043a\u043e\u043c\u0443 \u043a\u0430\u0434\u0440\u0443 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e, 1440\u00d7700 \u0438 844\u00d7390.<\/p>\n<h3>\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440. \u041e\u043a\u043d\u043e \u0432 \u0444\u043e\u0440\u043c\u0435 \u044f\u0439\u0446\u0430<\/h3>\n<p>\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440 \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u0441\u043e\u0431\u0440\u0430\u043d \u0434\u0432\u0443\u043c\u044f \u043a\u0430\u0434\u0440\u0430\u043c\u0438, <code>1600\/01_Loader<\/code> \u0438 <code>390\/01_Loader<\/code>. \u0416\u0451\u043b\u0442\u044b\u0439 \u0444\u043e\u043d, \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0441\u0438\u043b\u0443\u044d\u0442 \u044f\u0439\u0446\u0430, \u0432\u043d\u0443\u0442\u0440\u0438 \u0437\u043d\u0430\u043a \u043c\u0430\u0440\u043a\u0438. \u041d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u044f\u0439\u0446\u043e 400\u00d7515, \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 340\u00d7438. \u0414\u0430\u043b\u044c\u0448\u0435 \u044f\u0439\u0446\u043e \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0438 \u044d\u0442\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 14 \u043a\u0430\u0434\u0440\u0430\u0445 \u043f\u0440\u0435\u0432\u044c\u044e \u0438 \u0432 \u0440\u043e\u043b\u0438\u043a\u0430\u0445 \u043d\u0430 \u043c\u043e\u043a\u0430\u043f\u0430\u0445.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/extt\/e9\/09\/ba\/e909ba6ad94df330dbebe450d15b1989.gif\" alt=\"\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440. \u042f\u0439\u0446\u043e \u0441\u043e \u0437\u043d\u0430\u043a\u043e\u043c \u043d\u0430 \u0436\u0451\u043b\u0442\u043e\u043c \u0444\u043e\u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d.\" title=\"\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440. \u042f\u0439\u0446\u043e \u0441\u043e \u0437\u043d\u0430\u043a\u043e\u043c \u043d\u0430 \u0436\u0451\u043b\u0442\u043e\u043c \u0444\u043e\u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d.\" width=\"800\" height=\"450\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/extt\/e9\/09\/ba\/e909ba6ad94df330dbebe450d15b1989.gif 780w,&#10;       https:\/\/habrastorage.org\/extt\/e9\/09\/ba\/e909ba6ad94df330dbebe450d15b1989.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440. \u042f\u0439\u0446\u043e \u0441\u043e \u0437\u043d\u0430\u043a\u043e\u043c \u043d\u0430 \u0436\u0451\u043b\u0442\u043e\u043c \u0444\u043e\u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d.<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u0434\u0440\u044b \u0438 \u0440\u043e\u043b\u0438\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0444\u043e\u0440\u043c\u0443 \u0438 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u043d\u0435 \u0434\u0430\u044e\u0442 \u0447\u0438\u0441\u0435\u043b. \u0420\u0430\u0437\u043c\u0435\u0440 \u044f\u0439\u0446\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u043a\u0430\u0434\u0440\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u043c \u043e\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043d\u0430 \u043e\u043a\u043d\u0435 1280\u00d7720 \u0438\u043b\u0438 414\u00d7896. \u041a \u0440\u043e\u043b\u0438\u043a\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430.<\/p>\n<pre><code># \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440\u0430, \u043a\u0430\u043a \u044f \u0437\u0430\u043f\u0438\u0441\u0430\u043b \u0431\u044b \u0435\u0451 \u0441\u0435\u0439\u0447\u0430\u0441preloader:  background: var(--accent-1)          # \u0436\u0451\u043b\u0442\u044b\u0439, Accent\/1  egg:    shape: \"\u0432\u0435\u043a\u0442\u043e\u0440 Egg 400\u00d7515 \u0438\u0437 \u043a\u0430\u0434\u0440\u0430 1600\/01_Loader, \u044d\u043a\u0441\u043f\u043e\u0440\u0442 SVG\"    width: { desktop: 25vw, phone: 87vw }   # 400 \u0438\u0437 1600 \u0438 340 \u0438\u0437 390    aspect: 400 \/ 515  sign: \"\u0437\u043d\u0430\u043a \u043c\u0430\u0440\u043a\u0438 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u044f\u0439\u0446\u0430, \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u0434\u043e\u043b\u044f\u0445 \u0448\u0438\u0440\u0438\u043d\u044b \u044f\u0439\u0446\u0430\"  sequence:                            # \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0448\u0430\u0433\u0443 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043a\u0440\u0438\u0432\u0430\u044f    - \"\u0436\u0451\u043b\u0442\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0441 \u043e\u043a\u043d\u043e\u043c-\u044f\u0439\u0446\u043e\u043c\"    - \"\u0437\u043d\u0430\u043a \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u044f\u0439\u0446\u0435\"    - \"\u043e\u043a\u043d\u043e \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d\"    - \"\u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0448\u0430\u043f\u043a\u0430 \u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d\"  scroll_lock: \"\u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u044f \u044f\u0439\u0446\u0430, \u043d\u0435 \u0434\u043e\u043b\u044c\u0448\u0435\"  reduced_motion: \"\u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0431\u0435\u0437 \u0437\u0430\u0441\u0442\u0430\u0432\u043a\u0438\"<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u0437\u0430\u043f\u0438\u0441\u0430\u043d \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u043e\u043a\u043d\u0430, \u0430 \u043d\u0435 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u043a\u0430\u0434\u0440\u0430. 25% \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u0438 87% \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u044d\u0442\u043e \u0442\u0435 \u0436\u0435 400 \u0438\u0437 1600 \u0438 340 \u0438\u0437 390, \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434 \u043b\u044e\u0431\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u043a\u043d\u0430. \u041d\u0430 \u043d\u0438\u0437\u043a\u043e\u043c \u043e\u043a\u043d\u0435 \u044f\u0439\u0446\u0443 \u043d\u0443\u0436\u0435\u043d \u0435\u0449\u0451 \u043f\u0440\u0435\u0434\u0435\u043b \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435. \u041d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u0431\u043e\u043a\u043e\u043c 87% \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u0442\u043e 734 px, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 390. \u041e\u043a\u043d\u043e \u0432 \u044f\u0439\u0446\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u043a\u043e\u0439 \u043f\u043e SVG-\u043f\u0443\u0442\u0438, CSS-\u043c\u0430\u0441\u043a\u043e\u0439 \u0438\u043b\u0438 \u0432\u044b\u0440\u0435\u0437\u043e\u043c \u043d\u0430 canvas, \u044d\u0442\u043e\u0442 \u0432\u044b\u0431\u043e\u0440 \u044f \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0431\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0438 \u0443\u043a\u0430\u0437\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u043e\u0440\u043c\u0443.<\/p>\n<p>\u0414\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0448\u0430\u0433\u043e\u0432 \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u044f\u0442 \u0442\u043e\u0436\u0435. \u0412 \u0440\u043e\u043b\u0438\u043a\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u0430\u044f \u043f\u0430\u0443\u0437\u0430, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0437\u043d\u0430\u043a. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0442\u0440\u0435\u0437\u043e\u043a \u0431\u0435\u0437 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0430 \u043a\u043e\u043b\u0435\u0441\u043e \u043e\u0449\u0443\u0449\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u043b\u044c\u0448\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u044f \u0431\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u043b \u043a\u043e\u043d\u0446\u043e\u043c \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u0438\u044f \u044f\u0439\u0446\u0430 \u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u043b \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u0421\u0442\u0440\u043e\u043a\u0430 <code>reduced_motion<\/code> \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u043a\u0430 \u0438 \u043f\u0440\u0438\u043b\u0438\u043f\u0430\u044e\u0449\u0438\u0435 \u0441\u0446\u0435\u043d\u044b \u0438\u043d\u0430\u0447\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435\u043c, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043b\u044e\u0434\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u0421\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u044f \u043d\u0435 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b, \u0430 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043d\u0435 \u043d\u0430 \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f.<\/p>\n<h3>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 \u043a\u0430\u043a \u0437\u0430\u043f\u0438\u0441\u044c<\/h3>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435, \u043d\u043e\u0432\u044b\u0435 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0440\u0435\u0448\u0430\u043b\u043e\u0441\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u043e\u0439 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u0435\u0439. \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0435, \u0444\u043e\u0442\u043e, \u043f\u0438\u0449\u0435\u0432\u0430\u044f \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u0441\u0440\u043e\u043a \u0433\u043e\u0434\u043d\u043e\u0441\u0442\u0438, \u0446\u0432\u0435\u0442 \u0438 \u0432\u0435\u0441 \u044f\u0439\u0446\u0430. \u041d\u043e\u0432\u0430\u044f \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u044d\u0442\u043e \u043d\u043e\u0432\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c, \u0441\u0435\u0442\u043a\u0430 \u0430\u0441\u0441\u043e\u0440\u0442\u0438\u043c\u0435\u043d\u0442\u0430 \u043e\u0442 \u043d\u0435\u0451 \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/extt\/13\/ef\/d7\/13efd756ca6473a38aa94789e8982fbb.jpg\" alt=\"\u041f\u044f\u0442\u044c \u0443\u043f\u0430\u043a\u043e\u0432\u043e\u043a, \u043e\u0434\u0438\u043d \u0448\u0430\u0431\u043b\u043e\u043d. \u041d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u0441\u0435\u0442\u043a\u0430 \u0432 \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u043b\u0435\u043d\u0442\u0430 \u043f\u043e \u043e\u0434\u043d\u043e\u0439.\" title=\"\u041f\u044f\u0442\u044c \u0443\u043f\u0430\u043a\u043e\u0432\u043e\u043a, \u043e\u0434\u0438\u043d \u0448\u0430\u0431\u043b\u043e\u043d. \u041d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u0441\u0435\u0442\u043a\u0430 \u0432 \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u043b\u0435\u043d\u0442\u0430 \u043f\u043e \u043e\u0434\u043d\u043e\u0439.\" width=\"1920\" height=\"1720\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/extt\/13\/ef\/d7\/13efd756ca6473a38aa94789e8982fbb.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/extt\/13\/ef\/d7\/13efd756ca6473a38aa94789e8982fbb.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u044f\u0442\u044c \u0443\u043f\u0430\u043a\u043e\u0432\u043e\u043a, \u043e\u0434\u0438\u043d \u0448\u0430\u0431\u043b\u043e\u043d. \u041d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u0441\u0435\u0442\u043a\u0430 \u0432 \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u043b\u0435\u043d\u0442\u0430 \u043f\u043e \u043e\u0434\u043d\u043e\u0439.<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e. \u0423 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430, \u0438 \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0435\u0451 \u0432 \u0446\u0432\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438. \u0426\u0432\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0443 \u0437\u0430\u043f\u0438\u0441\u0438 \u044f \u043d\u0435 \u0437\u0430\u0432\u0451\u043b, \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u0443\u043f\u0430\u043a\u043e\u0432\u043e\u043a \u0432 \u0444\u0430\u0439\u043b\u0435 \u043d\u0435\u0442. \u041c\u043e\u0434\u0435\u043b\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441 \u043d\u0438\u043c \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0431\u044b \u0442\u0430\u043a.<\/p>\n<pre><code>\/\/ \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0434\u0435\u043b\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u044c\u0438type Pack = {  category: string;  count: number;             \/\/ \u044f\u0438\u0446 \u0432 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0435  photo: string;  nutrition: { kcal: number; protein: number; fat: number; carbs: number };  shelfLifeDays: number;  eggColor: string;  eggWeight: string;  accent: string;            \/\/ \u0446\u0432\u0435\u0442 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438, \u043a\u0440\u0430\u0441\u0438\u0442 \u0438\u043a\u043e\u043d\u043a\u0443 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438};<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<pre><code>\/* \u043f\u0440\u0438\u043c\u0435\u0440: \u0446\u0432\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 *\/.pack { --pack-accent: var(--accent-1); }               \/* \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e *\/.pack:hover .pack__icon { color: var(--pack-accent); opacity: 1; }<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><span class=\"sc-logo-wrapper icon-only\"><\/span><\/a><\/div><\/pre>\n<p>\u041f\u043e\u043b\u0435 <code>accent<\/code> \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0435\u0451 \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u0430 \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043f\u0430\u0441\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443, \u0435\u0441\u043b\u0438 \u0446\u0432\u0435\u0442 \u0437\u0430\u0431\u044b\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/extt\/f6\/39\/ee\/f639eecd5de09bfed4955c06e9abf764.jpg\" alt=\"\u041e\u0442\u043a\u0440\u044b\u0442\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430. \u0424\u043e\u0442\u043e \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438, \u0447\u0435\u0442\u044b\u0440\u0435 \u0446\u0438\u0444\u0440\u044b \u043f\u0438\u0449\u0435\u0432\u043e\u0439 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0441\u0440\u043e\u043a, \u0446\u0432\u0435\u0442 \u0438 \u0432\u0435\u0441 \u044f\u0439\u0446\u0430.\" title=\"\u041e\u0442\u043a\u0440\u044b\u0442\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430. \u0424\u043e\u0442\u043e \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438, \u0447\u0435\u0442\u044b\u0440\u0435 \u0446\u0438\u0444\u0440\u044b \u043f\u0438\u0449\u0435\u0432\u043e\u0439 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0441\u0440\u043e\u043a, \u0446\u0432\u0435\u0442 \u0438 \u0432\u0435\u0441 \u044f\u0439\u0446\u0430.\" width=\"1920\" height=\"1080\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/extt\/f6\/39\/ee\/f639eecd5de09bfed4955c06e9abf764.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/extt\/f6\/39\/ee\/f639eecd5de09bfed4955c06e9abf764.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041e\u0442\u043a\u0440\u044b\u0442\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430. \u0424\u043e\u0442\u043e \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438, \u0447\u0435\u0442\u044b\u0440\u0435 \u0446\u0438\u0444\u0440\u044b \u043f\u0438\u0449\u0435\u0432\u043e\u0439 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0441\u0440\u043e\u043a, \u0446\u0432\u0435\u0442 \u0438 \u0432\u0435\u0441 \u044f\u0439\u0446\u0430.<\/figcaption><\/div>\n<\/figure>\n<h3>\u0427\u0442\u043e \u0431\u044b\u043b\u043e \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0438 \u0447\u0435\u0433\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u043b\u043e<\/h3>\n<p>\u0412 \u0441\u0435\u043a\u0446\u0438\u0438 UI Kit \u043c\u0430\u043a\u0435\u0442\u0430 \u043b\u0435\u0436\u0430\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445, \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043e\u043a (\u00abopacity 50% \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438\u00bb), \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u0440\u043e \u043e\u0441\u0438 Roboto Flex, \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u0440\u043e Inter Semi Bold \u0438 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u043e\u043b\u0438\u043a\u0438 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439. \u0420\u044f\u0434\u043e\u043c 14 \u043f\u0440\u0435\u0432\u044c\u044e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 \u0438 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0436\u0435 \u0434\u043b\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430.<\/p>\n<p>\u041d\u0430\u0434\u0451\u0436\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0447\u0438\u0441\u043b\u043e\u043c. \u041e\u0441\u0438 \u0448\u0440\u0438\u0444\u0442\u0430, \u043f\u043e\u043b\u044f \u0441\u0435\u0442\u043a\u0438, \u0438\u043d\u0442\u0435\u0440\u043b\u0438\u043d\u044c\u044f\u0436\u0438, \u0446\u0432\u0435\u0442\u0430 \u0441\u0442\u0438\u043b\u0435\u0439. \u0425\u0443\u0436\u0435 \u0432\u0441\u0435\u0433\u043e \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439 \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e. \u0426\u0432\u0435\u0442\u0430 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u043c\u0435\u0440 \u044f\u0439\u0446\u0430, \u0442\u0430\u0439\u043c\u0438\u043d\u0433\u0438, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435. \u042d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0442\u044c, \u0438 \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u0441\u0442\u044c \u0441 \u0437\u0430\u043c\u044b\u0441\u043b\u043e\u043c.<\/p>\n<h3>\u041e\u0442 \u0447\u0435\u0433\u043e \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0438 \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0431\u044b \u0438\u043d\u0430\u0447\u0435<\/h3>\n<p>\u041e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043e\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 Figma \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0441\u0442\u0438\u043b\u0435\u0439. \u0414\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0445\u0432\u0430\u0442\u0438\u043b\u043e, \u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043b\u0438 \u0431\u044b \u0440\u0435\u0436\u0438\u043c\u044b \u0438 \u0438\u043c\u0435\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432 CSS \u043e\u0434\u0438\u043d \u0432 \u043e\u0434\u0438\u043d. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u0447\u043d\u0443 \u0441 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0434\u043d\u0430.<\/p>\n<p>\u041e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043e\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0442\u0430\u0439\u043c\u0438\u043d\u0433\u043e\u0432 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u0440\u043e\u043b\u0438\u043a\u043e\u0432. \u0420\u043e\u043b\u0438\u043a \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u043d\u0435 \u0434\u0430\u0451\u0442 \u0447\u0438\u0441\u0435\u043b. \u0421\u0435\u0439\u0447\u0430\u0441 \u044f \u0431\u044b \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u043e\u0431\u0430, \u0440\u043e\u043b\u0438\u043a \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0441 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0432 \u0434\u043e\u043b\u044f\u0445 \u043e\u043a\u043d\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u0434\u043e \u0432\u0451\u0440\u0441\u0442\u043a\u0438.<\/p>\n<p>\u0412\u043e\u0442 \u0447\u0442\u043e \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0431\u044b \u0432 \u0444\u0430\u0439\u043b \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0434\u043d\u044f.<\/p>\n<ul>\n<li>\n<p>\u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0433\u043e \u0431\u0435\u0436\u0435\u0432\u043e\u0433\u043e, \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043f\u043e\u0434 \u0431\u0443\u0434\u0443\u0449\u0438\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u0434\u0440\u044b \u043d\u0438\u0437\u043a\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, 1440\u00d7700 \u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u0432 \u0430\u043b\u044c\u0431\u043e\u043c\u043d\u043e\u0439 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0434\u043b\u044f <code>prefers-reduced-motion<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u043a \u0432\u0435\u0441\u0443 \u0448\u0440\u0438\u0444\u0442\u0430 \u0438 \u043f\u0440\u043e\u0441\u044c\u0431\u0443 \u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445 \u043e\u0442 \u043e\u043a\u043d\u0430, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u043a\u0430\u0434\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0426\u0438\u0444\u0440 \u043f\u043e \u043f\u0440\u043e\u0434\u0430\u0436\u0430\u043c \u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0442. \u0421\u0430\u0439\u0442 \u043d\u0435 \u043f\u0440\u043e\u0434\u0430\u0451\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u0442\u0435\u0439 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0443 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044e \u044d\u0442\u0443 \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0435 \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u044e.<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1100462\/\">https:\/\/habr.com\/ru\/articles\/1100462\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u042f \u0434\u0435\u043b\u0430\u043b \u0434\u0438\u0437\u0430\u0439\u043d \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u043c\u0430\u0440\u043a\u0438 \u043a\u0443\u0440\u0438\u043d\u044b\u0445 \u044f\u0438\u0446. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043b\u0438\u043d\u043d\u0430\u044f, \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0434\u0438\u043d\u043d\u0430\u0434\u0446\u0430\u0442\u0438 \u0442\u044b\u0441\u044f\u0447 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435, \u0441 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440\u043e\u043c, \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u0441\u0446\u0435\u043d\u0430\u043c\u0438 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u0431\u043b\u043e\u043a\u0430\u043c\u0438. \u041c\u0430\u043a\u0435\u0442 \u044f \u0441\u0434\u0430\u0432\u0430\u043b \u0432 \u0434\u0432\u0443\u0445 \u0448\u0438\u0440\u0438\u043d\u0430\u0445, 1600 \u0438 390. \u0412\u0451\u0440\u0441\u0442\u043a\u0443 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432\u0435\u043b\u0430 \u0434\u0440\u0443\u0433\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043c\u043e\u044f \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043c\u0430\u043a\u0435\u0442\u0430.\u0421\u043b\u043e\u0451\u0432 \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u043f\u044f\u0442\u044c. \u0426\u0432\u0435\u0442, \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442, \u0441\u0435\u0442\u043a\u0430, \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440 \u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438. \u041f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u043e\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043b\u0435\u0436\u0430\u043b\u043e \u0432 Figma \u0438 \u043a\u0430\u043a \u044f \u0431\u044b \u0432\u044b\u0433\u0440\u0443\u0437\u0438\u043b \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0441\u0435\u0439\u0447\u0430\u0441, \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u043c\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u043c\u0438. \u041a\u043e\u0434 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u043e\u0439, \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438, \u0430 \u043d\u0435 \u0432\u0451\u0440\u0441\u0442\u043a\u0430 \u0441\u0430\u0439\u0442\u0430.\u042d\u043a\u0440\u0430\u043d \u043f\u043e\u043b\u044c\u0437\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435. \u0411\u0435\u0436\u0435\u0432\u044b\u0439 \u0444\u043e\u043d, \u0442\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0436\u0451\u043b\u0442\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430.\u0423\u043f\u0430\u043a\u043e\u0432\u043a\u0430, \u0434\u0432\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0439\u043b\u041e\u0442 \u0431\u0440\u0435\u043d\u0434\u0430 \u0431\u044b\u043b\u0430 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u0441 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u043e\u0439 \u043d\u0430\u0434\u043f\u0438\u0441\u044c\u044e \u0438 \u0442\u0440\u0435\u043c\u044f \u0446\u0432\u0435\u0442\u0430\u043c\u0438. \u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u0441\u0430\u0439\u0442\u0443 \u0434\u0432\u0430. \u0413\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0441 \u0433\u043e\u0440\u043e\u0434\u0441\u043a\u0438\u043c \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u0435\u043b\u0435\u043c, \u0445\u043e\u0442\u044f \u0432\u0441\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u0434\u0435\u0440\u0435\u0432\u043d\u0435, \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446.\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 Figma \u0432 \u0444\u0430\u0439\u043b\u0435 \u043d\u0435\u0442, \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043e\u0431\u0440\u0430\u043d\u0430 \u043d\u0430 \u0441\u0442\u0438\u043b\u044f\u0445. \u0421\u0442\u0438\u043b\u0435\u0439 \u0446\u0432\u0435\u0442\u0430 \u0447\u0435\u0442\u044b\u0440\u0435, \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u044f\u0442\u044c, \u0441\u0435\u0442\u043e\u043a \u0434\u0432\u0435. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0438\u0434\u0435\u043b\u0438 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u043e\u0431\u0449\u0430\u043b\u0438\u0441\u044c \u043c\u044b \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0439\u043b \u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u043a\u0443, \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u0451, \u0447\u0435\u0433\u043e \u043d\u0435\u0442 \u0432 \u0444\u0430\u0439\u043b\u0435, \u0438\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0440\u0435\u0448\u0430\u0442\u044c \u0441\u0430\u043c\u0438\u043c. \u0418 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0447\u0442\u0438 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0430, \u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u0438 \u043a\u043e\u043d\u0435\u0446 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f.\u042f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438. \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u043f\u043e\u0434 CSS, \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439 \u0442\u0430\u0439\u043c\u0438\u043d\u0433\u043e\u0432 \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u0438 UI-\u043a\u0438\u0442 \u0432 Figma \u043f\u043b\u044e\u0441 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043c\u043e\u043a\u0430\u043f\u0430\u0445 \u0440\u043e\u043b\u0438\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412\u044b\u0431\u0440\u0430\u043b \u0432\u0442\u043e\u0440\u043e\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a, \u0441\u0440\u043e\u043a\u0438 \u0438 \u0440\u043e\u043b\u0438\u043a\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043b\u0443\u0447\u0448\u0435 \u0442\u0430\u0431\u043b\u0438\u0446. \u0421\u0435\u0439\u0447\u0430\u0441 \u044f \u0431\u044b \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u043e\u0431\u0430.\u0426\u0432\u0435\u0442. \u0418\u0437 \u0441\u0442\u0438\u043b\u044f Figma \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e\u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u0442\u0438\u043b\u044f \u0446\u0432\u0435\u0442\u0430. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043d\u044f\u0442\u044b \u0447\u0435\u0440\u0435\u0437 Plugin API, \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0440\u043e\u0431\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u0430\u043d\u0430\u043b\u043e\u0432.\u0421\u0442\u0438\u043b\u044c\u041a\u0430\u043d\u0430\u043b\u044b RGB \u0432 Figma (0\u2013255)Hex \u043f\u043e\u0441\u043b\u0435 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u044cMain\/123; 58; 41#173A293 719Main\/2255; 249; 231#FFF9E7945Accent\/1255; 192,882; 6,527#FFC107571Accent\/2110,196; 176,232; 77,757#6EB04E128Figma \u0445\u0440\u0430\u043d\u0438\u0442 \u0446\u0432\u0435\u0442 \u043a\u0430\u043a \u0442\u0440\u0438 \u0447\u0438\u0441\u043b\u0430 \u043e\u0442 0 \u0434\u043e 1. \u0423 \u0434\u0432\u0443\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0446\u0435\u043b\u044b\u0435 \u0431\u0430\u0439\u0442\u044b, \u0438 hex \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043e\u043a\u0440\u0443\u0433\u043b\u044f\u0435\u0448\u044c \u0442\u044b \u0438\u043b\u0438 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0448\u044c \u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c. 192,882 \u0434\u0430\u0451\u0442 C1 \u043f\u0440\u0438 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0438 \u0438 C0 \u043f\u0440\u0438 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u0438. \u042f \u0441\u0430\u043c \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u043e\u043f\u0438\u0441\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u0437\u0430\u043f\u0438\u0441\u0430\u043b \u0436\u0451\u043b\u0442\u044b\u0439 \u043a\u0430\u043a #FFC006 \u0438 \u0441\u0432\u0435\u0442\u043b\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u043a\u0430\u043a #6EB04D, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043b \u0434\u0440\u043e\u0431\u044c. \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Figma \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 hex \u0441 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u044e \u043e\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u043e\u0435, #FFC107. \u0415\u0441\u043b\u0438 \u0442\u043e\u043a\u0435\u043d\u044b \u0441\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c, \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043d\u0451\u043c \u044f\u0432\u043d\u043e.\u0427\u0435\u0442\u044b\u0440\u0451\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043c\u0430\u043b\u043e. \u0412 UI-\u043a\u0438\u0442\u0435 \u044f \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445, \u0438 \u0443 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438 \u0446\u0432\u0435\u0442\u0430, #FFD000 \u0443 \u0436\u0451\u043b\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 #194630 \u0443 \u0442\u0451\u043c\u043d\u043e\u0439. \u0421\u0442\u0438\u043b\u0435\u0439 \u0443 \u043d\u0438\u0445 \u043d\u0435\u0442, \u043e\u043d\u0438 \u0436\u0438\u0432\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u043b\u043e\u044f\u0445 \u043a\u0438\u0442\u0430. \u0420\u043e\u0437\u043e\u0432\u044b\u0439 #FA73BF \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 64 \u0440\u0430\u0437\u0430 \u0438 \u043d\u0438 \u0440\u0430\u0437\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u044c, \u044f \u0441\u0447\u0438\u0442\u0430\u043b \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c\u044e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439. \u041f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0431\u0435\u0436\u0435\u0432\u044b\u0439 \u0438 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0437\u0435\u043b\u0451\u043d\u044b\u0439, 50% \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432, \u0442\u043e\u0436\u0435 \u0437\u0430\u0434\u0430\u043d\u044b \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u0441\u043b\u043e\u044f\u0445. \u0412\u0441\u0451 \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0441\u043d\u0438\u043c\u0430\u0442\u044c \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a.\u0421 \u0431\u0435\u0436\u0435\u0432\u044b\u043c \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0430. \u0427\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u044c Main\/2 \u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u0451\u043d 945 \u0440\u0430\u0437, \u0430 \u0442\u0435\u043c \u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u044f \u0435\u0449\u0451 2 608 \u0440\u0430\u0437, \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0432 \u043a\u043e\u043f\u0438\u044f\u0445 \u043a\u0430\u0434\u0440\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041f\u043e \u0442\u0430\u043a\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0431\u0435\u0436\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0438 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0430\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0435, \u0430 \u043a\u0430\u043a\u0438\u0435 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u043b\u0438 \u043f\u043e \u0446\u0432\u0435\u0442\u0443.\u0426\u0432\u0435\u0442 \u044f \u0431\u044b \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u0442\u0430\u043a. \u041f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0441\u0442\u0438\u043b\u044f\u043c Figma, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0441\u0432\u043e\u0438 \u0438\u043c\u0435\u043d\u0430, \u0430 \u0440\u043e\u043b\u0438 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b.\/* \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438, \u0438\u043c\u0435\u043d\u0430 \u043f\u043e \u0441\u0442\u0438\u043b\u044f\u043c Figma *\/:root {  \/* \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b *\/  &#8212;main-1: #173A29;          \/* Main\/1, \u0442\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 *\/  &#8212;main-2: #FFF9E7;          \/* Main\/2, \u0431\u0435\u0436\u0435\u0432\u044b\u0439 *\/  &#8212;accent-1: #FFC107;        \/* Accent\/1, \u0436\u0451\u043b\u0442\u044b\u0439 *\/  &#8212;accent-2: #6EB04E;        \/* Accent\/2, \u0441\u0432\u0435\u0442\u043b\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 *\/  &#8212;accent-1-hover: #FFD000;  \/* \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0436\u0451\u043b\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u0432 Figma \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u044f *\/  &#8212;main-1-hover: #194630;    \/* \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0442\u0451\u043c\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u0432 Figma \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u044f *\/  &#8212;illustration-pink: #FA73BF;  \/* \u0440\u043e\u043b\u0438 *\/  &#8212;color-bg: var(&#8212;main-2);  &#8212;color-text: var(&#8212;main-1);  &#8212;color-text-muted: color-mix(in srgb, var(&#8212;main-1) 50%, transparent);  &#8212;color-on-dark-muted: color-mix(in srgb, var(&#8212;main-2) 50%, transparent);  &#8212;color-button: var(&#8212;accent-1);  &#8212;color-button-hover: var(&#8212;accent-1-hover);}\u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0431\u0440\u0430\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 color-mix, \u0431\u0435\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e hex \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0434\u043e\u043b\u044e. \u0422\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u0430\u0451\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, rgb(from var(&#8212;main-2) r g b \/ 50%). \u041e\u0431\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 Chrome, Safari \u0438 Firefox. \u0417\u0430\u0442\u043e \u0443 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0433\u043e \u0431\u0435\u0436\u0435\u0432\u043e\u0433\u043e \u043d\u0430 \u0442\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u043e\u043c \u0444\u043e\u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043c\u044f. \u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u0440\u043e\u043b\u0435\u0439 \u0446\u0432\u0435\u0442\u0430, \u0430 \u0441\u0442\u0438\u043b\u044f \u0443 \u043d\u0435\u0451 \u043d\u0435 \u0431\u044b\u043b\u043e.\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u043e\u0435 \u043c\u0435\u043d\u044e \u0438 \u043e\u0442\u0437\u044b\u0432\u044b \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435. \u0422\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0438 \u043d\u0430 \u0436\u0451\u043b\u0442\u043e\u043c \u0444\u043e\u043d\u0435.Roboto Flex. \u041e\u0434\u043d\u0430 \u043e\u0441\u044c \u0448\u0438\u0440\u0438\u043d\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0437\u043a\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043d\u0430\u0431\u0440\u0430\u043d\u044b \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u043c Roboto Flex. \u041c\u043d\u0435 \u0431\u044b\u043b \u043d\u0443\u0436\u0435\u043d \u0443\u0437\u043a\u0438\u0439 \u043f\u043b\u043e\u0442\u043d\u044b\u0439 \u0433\u0440\u043e\u0442\u0435\u0441\u043a \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435, \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e condensed-\u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f \u044f \u0432\u0437\u044f\u043b \u043e\u0434\u043d\u0443 \u043e\u0441\u044c. \u0412 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0441\u0442\u0438\u043b\u0435 Figma \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c \u043d\u0430\u0431\u043e\u0440 \u043e\u0441\u0435\u0439.{  &#171;family&#187;: &#171;Roboto Flex&#187;, &#171;style&#187;: &#171;Medium&#187;,  &#171;variationSettings&#187;: {    &#171;wght&#187;: 500, &#171;wdth&#187;: 30, &#171;slnt&#187;: 0, &#171;GRAD&#187;: 0,    &#171;XOPQ&#187;: 96, &#171;XTRA&#187;: 468, &#171;YOPQ&#187;: 79, &#171;YTAS&#187;: 750,    &#171;YTDE&#187;: -203, &#171;YTFI&#187;: 738, &#171;YTLC&#187;: 514, &#171;YTUC&#187;: 712  }}\u0418\u0437 \u0434\u0432\u0435\u043d\u0430\u0434\u0446\u0430\u0442\u0438 \u043e\u0441\u0435\u0439 \u044f \u043c\u0435\u043d\u044f\u043b \u0434\u0432\u0435. \u0428\u0438\u0440\u0438\u043d\u0430 wdth \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 30 \u043f\u0440\u0438 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 \u043e\u0442 25 \u0434\u043e 151, \u0432\u0435\u0441 wght \u043d\u0430 500. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0441\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 XOPQ, XTRA, YOPQ \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0441 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0431\u0443\u043a\u0432\u044b, \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0412 UI-\u043a\u0438\u0442\u0435 \u044d\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u00ab\u0428\u0440\u0438\u0444\u0442 \u0434\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 roboto flex variable weight:500 width:30\u00bb. \u042d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0441\u0430\u043c\u043e\u0439 \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0447\u0438\u0441\u043b\u043e\u043c.\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u044f \u0431\u044b \u043f\u0440\u043e\u0441\u0438\u043b \u0442\u0430\u043a. \u0415\u0441\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 Google Fonts, \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u0438 \u0441 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430\u043c\u0438, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0442\u0430\u043a \u0441\u0442\u043e\u044f\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.\/* \u043f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a Google Fonts *\/family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000\u0415\u0441\u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c, \u0432 @font-face \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u044b \u043e\u0441\u0435\u0439, \u0430 \u0441\u0430\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438.\/* \u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435 \u043a\u043e\u0434 \u0441\u0430\u0439\u0442\u0430 *\/@font-face {  font-family: &#171;Roboto Flex&#187;;  src: url(&#171;\/fonts\/roboto-flex.woff2&#187;) format(&#171;woff2&#187;);  font-weight: 100 1000;  font-stretch: 25% 151%;  font-display: swap;}h1, h2 {  font-family: &#171;Roboto Flex&#187;, sans-serif;  font-weight: 500;     \/* \u043e\u0441\u044c wght *\/  font-stretch: 30%;    \/* \u043e\u0441\u044c wdth, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 @font-face \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d 25% 151% *\/  text-transform: uppercase;}\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 font-variation-settings. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0437\u0430\u0434\u0430\u0451\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0441\u0435\u0439 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0438 \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043d\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435, \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u0430 \u043d\u0435 \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432 \u043d\u0435\u0433\u043e. \u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e \u043e\u0431\u0435 \u043e\u0441\u0438, \u0430 \u0433\u0434\u0435-\u0442\u043e \u043d\u0438\u0436\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f font-variation-settings: &#171;wght&#187; 700, \u043e\u0441\u044c \u0448\u0438\u0440\u0438\u043d\u044b \u0432\u044b\u043f\u0430\u0434\u0435\u0442 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u0438 \u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u043e\u0442 font-stretch, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 100, \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0430\u043d\u0435\u0442 \u0448\u0438\u0440\u043e\u043a\u0438\u043c. font-weight \u0438 font-stretch \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e. font-variation-settings \u0441\u0442\u043e\u0438\u0442 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u043b\u044f \u043e\u0441\u0435\u0439, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \u0441\u0432\u043e\u0435\u0433\u043e CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0432\u0440\u043e\u0434\u0435 XTRA \u0438\u043b\u0438 YTUC. \u0417\u0434\u0435\u0441\u044c \u0442\u0430\u043a\u0438\u0435 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c.\u0421 \u043e\u043f\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043e\u0441\u044c\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f. \u0412 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0441\u0442\u0438\u043b\u0435 Figma \u043e\u0441\u0438 opsz \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043d\u0435\u0442. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 font-optical-sizing: auto, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0451 \u043f\u043e \u043a\u0435\u0433\u043b\u044e, \u0438 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0432 160 px \u043e\u043d\u0430 \u0443\u043f\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0448\u0440\u0438\u0444\u0442\u0430, 144. \u041d\u0430 80 px opsz \u0440\u0430\u0432\u0435\u043d 80. \u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043e\u0441\u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u043b\u0438 \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0431\u0443\u043a\u0432 \u043d\u0430 160 px \u0432 Figma \u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u044f \u0442\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b. \u041d\u0430 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u0445 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0442\u0430\u043a\u0443\u044e \u0441\u0432\u0435\u0440\u043a\u0443 \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043e \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0435\u0451 \u0438\u0442\u043e\u0433 \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443.\u0418 \u0432\u0435\u0441 \u0444\u0430\u0439\u043b\u0430. \u041f\u043e\u043b\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 Roboto Flex \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u044f\u043c\u0438 \u0442\u044f\u0436\u0451\u043b\u044b\u0439, \u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0448\u0438\u0440\u0438\u043d\u0430 30 \u0438 \u0432\u0435\u0441 500. \u041e\u043f\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438\u0434\u0451\u0442 \u0437\u0430 \u043a\u0435\u0433\u043b\u0435\u043c, \u043d\u0430 160 px \u044d\u0442\u043e 144, \u043d\u0430 80 px \u044d\u0442\u043e 80, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u0434\u0432\u0430, \u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u043e\u043d\u0438 \u0432\u0435\u0441\u044f\u0442 \u0432 \u0440\u0430\u0437\u044b \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u0412\u044b\u0440\u0435\u0437\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c instancer \u0438\u0437 fontTools. \u0424\u043b\u0430\u0433 &#8212;static \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u043e\u0441\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u044b \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435, \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0441\u0438 \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435.# \u043f\u0440\u0438\u043c\u0435\u0440: \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043f\u043e\u0434 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438fonttools varLib.instancer RobotoFlex.ttf wdth=30 wght=500 opsz=144 &#8212;static -o RobotoFlex-160.ttffonttools varLib.instancer RobotoFlex.ttf wdth=30 wght=500 opsz=80 &#8212;static -o RobotoFlex-80.ttf\u0412\u044b\u0431\u043e\u0440 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u0431\u044b\u043b \u043c\u043e\u0438\u043c, \u0437\u043d\u0430\u0447\u0438\u0442, \u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u043a \u0432\u0435\u0441\u0443 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u0442\u043e\u044f\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435.\u0420\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0439 Sunless Day \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435\u043c. \u0415\u0433\u043e \u043f\u0430\u0440\u0430 \u0441 Roboto Flex \u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u043b\u0438\u043d\u044c\u044f\u0436\u0435. \u0421\u0442\u0438\u043b\u044c \u00ab80 Subheader\u00bb \u0438\u043c\u0435\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u043b\u0438\u043d\u044c\u044f\u0436 50%, \u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u043e\u0433\u043e \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0433\u0440\u043e\u0442\u0435\u0441\u043a \u0431\u0435\u0437 \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u043e\u0434\u0433\u043e\u043d\u043a\u0438.\u0421\u0442\u0438\u043b\u044c Figma\u0428\u0440\u0438\u0444\u0442\u041a\u0435\u0433\u043b\u044c\u0418\u043d\u0442\u0435\u0440\u043b\u0438\u043d\u044c\u044f\u0436160 H1Roboto Flex, wght 500, wdth 3016080%80 H2Roboto Flex, wght 500, wdth 308090%160 SubheaderSunless Day16080%80 SubheaderSunless Day8050%20Inter Semi Bold, \u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u22122%20\u0430\u0432\u0442\u043e\u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0448\u0438\u0440\u0438\u043d\u0430\u043c\u0438 \u043a\u0435\u0433\u043b\u0438 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u043a\u0430\u0447\u043a\u043e\u043c, 160 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u0438 80 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435. \u041f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0441\u0442\u0443\u043f\u0435\u043d\u0438 \u044f \u043d\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043b. \u0418\u0445 \u0441\u0442\u043e\u0438\u043b\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u0442\u043e\u043a\u0435\u043d\u0430\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 clamp(), \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0438\u0445 \u0432\u044b\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c.\/* \u043f\u0440\u0438\u043c\u0435\u0440: \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043e\u0442 80 px \u043d\u0430 390 \u0434\u043e 160 px \u043d\u0430 1600 *\/&#8212;text-h1-size: clamp(80px, 54.2px + 6.61vw, 160px);\u0421\u0435\u0442\u043a\u0430 \u0438 \u043d\u0438\u0437\u043a\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b\u0421\u0435\u0442\u043a\u0438 \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u0434\u0432\u0435, \u0438 \u043e\u0431\u0435 \u0431\u0435\u0437 \u043c\u0435\u0436\u043a\u043e\u043b\u043e\u043d\u043d\u0438\u043a\u0430.\u0421\u0435\u0442\u043a\u0430\u0428\u0438\u0440\u0438\u043d\u0430\u041a\u043e\u043b\u043e\u043d\u043a\u0438\u041c\u0435\u0436\u043a\u043e\u043b\u043e\u043d\u043d\u0438\u043a\u041f\u043e\u043b\u044fDesktop16004050Phone3902025\u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u0431\u0435\u0437 \u043c\u0435\u0436\u043a\u043e\u043b\u043e\u043d\u043d\u0438\u043a\u0430 \u0437\u0430\u0434\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0440\u0430\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432, \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0438 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0441\u0435\u0442\u043a\u0430 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0434\u0432\u0443\u043c \u0447\u0438\u0441\u043b\u0430\u043c, \u043f\u043e\u043b\u044f\u043c \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435. \u0422\u043e\u0447\u043a\u0443 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044f\u043c\u0438 25 \u0438 50 \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u044f \u043d\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u043b, \u0430 \u0441\u0442\u043e\u0438\u043b\u043e.\u0423\u043f\u0430\u043a\u043e\u0432\u043a\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u0440\u0438\u043b\u0438\u043f\u0430\u0435\u0442 \u0438 \u0435\u0434\u0435\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u043f\u044f\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u043f\u043e\u0434\u0440\u044f\u0434, \u0438 \u0435\u0451 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u044b\u0441\u043e\u0442\u044b \u043e\u043a\u043d\u0430. \u0412 \u043c\u0430\u043a\u0435\u0442\u0435 \u0431\u044b\u043b\u043e \u0434\u0432\u0430 \u043a\u0430\u0434\u0440\u0430, 1600\u00d7900 \u0438 390\u00d7844. \u041d\u0438 \u043e\u0434\u0438\u043d \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 700 \u0438\u043b\u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435, \u043f\u043e\u0432\u0451\u0440\u043d\u0443\u0442\u043e\u043c \u0431\u043e\u043a\u043e\u043c. \u0415\u0441\u043b\u0438 \u0431\u044b \u044f \u0434\u0435\u043b\u0430\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0437\u0430\u043d\u043e\u0432\u043e, \u043a \u0434\u0432\u0443\u043c \u0448\u0438\u0440\u0438\u043d\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0431\u044b \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043d\u0438\u0437\u043a\u043e\u043c\u0443 \u043a\u0430\u0434\u0440\u0443 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e, 1440\u00d7700 \u0438 844\u00d7390.\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440. \u041e\u043a\u043d\u043e \u0432 \u0444\u043e\u0440\u043c\u0435 \u044f\u0439\u0446\u0430\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440 \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u0441\u043e\u0431\u0440\u0430\u043d \u0434\u0432\u0443\u043c\u044f \u043a\u0430\u0434\u0440\u0430\u043c\u0438, 1600\/01_Loader \u0438 390\/01_Loader. \u0416\u0451\u043b\u0442\u044b\u0439 \u0444\u043e\u043d, \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0441\u0438\u043b\u0443\u044d\u0442 \u044f\u0439\u0446\u0430, \u0432\u043d\u0443\u0442\u0440\u0438 \u0437\u043d\u0430\u043a \u043c\u0430\u0440\u043a\u0438. \u041d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u044f\u0439\u0446\u043e 400\u00d7515, \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 340\u00d7438. \u0414\u0430\u043b\u044c\u0448\u0435 \u044f\u0439\u0446\u043e \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0438 \u044d\u0442\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 14 \u043a\u0430\u0434\u0440\u0430\u0445 \u043f\u0440\u0435\u0432\u044c\u044e \u0438 \u0432 \u0440\u043e\u043b\u0438\u043a\u0430\u0445 \u043d\u0430 \u043c\u043e\u043a\u0430\u043f\u0430\u0445.\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440. \u042f\u0439\u0446\u043e \u0441\u043e \u0437\u043d\u0430\u043a\u043e\u043c \u043d\u0430 \u0436\u0451\u043b\u0442\u043e\u043c \u0444\u043e\u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0432\u044b\u0439&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-500628","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/500628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=500628"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/500628\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=500628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=500628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=500628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}