diff --git a/Вложения/Colors.svg b/Вложения/Colors.svg
new file mode 100644
index 0000000..62f831f
--- /dev/null
+++ b/Вложения/Colors.svg
@@ -0,0 +1,46 @@
+<svg width="438" xmlns="http://www.w3.org/2000/svg" height="449" id="screenshot-f221660d-9d22-8076-8005-347c1a9bbf7f" viewBox="-0 -0 438 449" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><style>/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w0aXpsog.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w9aXpsog.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w2aXpsog.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w3aXpsog.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w5aXo.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+</style><g id="shape-f221660d-9d22-8076-8005-347c1a9bbf7f" data-testid="Colors"><defs><clipPath id="frame-clip-f221660d-9d22-8076-8005-347c1a9bbf7f-render-1" class="frame-clip frame-clip-def"><rect rx="10" ry="10" x="0" y="0" width="437.9999999999996" height="448.9999999999999" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g clip-path="url(#frame-clip-f221660d-9d22-8076-8005-347c1a9bbf7f-render-1)" fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347c1a9bbf7f"><rect width="437.9999999999996" height="448.9999999999999" class="frame-background" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(255, 255, 255); fill-opacity: 0.2;" ry="10" rx="10" y="0"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347d6d56502f" data-testid="Primary"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347d6d56502f"><rect rx="0" ry="0" x="19.999999999999943" y="19.999999999999773" width="125.99999999999994" height="409.0000000000001" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347d67666522" data-testid="Primary"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347d67666522"><rect rx="0" ry="0" x="34.99999999999983" y="19.999999999999545" width="96.00000000000011" height="122.99999999999989" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347d67666524" data-testid="Primary"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="53.999999999999886" y="19.99999999999966" width="58" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="53.999999999999886" y="19.99999999999966" width="57.234375" height="18" id="fill-0-render-4-0"><g><rect width="57.234375" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347d67666524"><text x="53.999999999999886" y="36.99999999999966" dominant-baseline="ideographic" textLength="57.234375" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Primary</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347d67666523" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347d67666523"><rect rx="5" ry="5" x="34.999999999999886" y="46.99999999999966" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96" height="96" style="fill: rgb(27, 105, 91); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347d67666523" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-5-f221660d-9d22-8076-8005-347d67666523-0"><use href="#stroke-shape-render-5-f221660d-9d22-8076-8005-347d67666523-0"/></clipPath><rect rx="5" ry="5" x="34.999999999999886" y="46.99999999999966" width="96" height="96" id="stroke-shape-render-5-f221660d-9d22-8076-8005-347d67666523-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-5-f221660d-9d22-8076-8005-347d67666523-0" clip-path="url('#inner-stroke-render-5-f221660d-9d22-8076-8005-347d67666523-0')"/></g></g></g></g></g></g><g id="shape-f221660d-9d22-8076-8005-347d685e0d0e" data-testid="PrimaryShade"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347d685e0d0e"><rect rx="0" ry="0" x="24.499999999999943" y="162.99999999999966" width="116.99999999999994" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347d685e0d10" data-testid="Primary (Shade)"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="24.499999999999943" y="162.99999999999966" width="117" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="24.499999999999943" y="162.99999999999966" width="116.078125" height="18" id="fill-0-render-7-0"><g><rect width="116.078125" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347d685e0d10"><text x="24.499999999999943" y="179.99999999999966" dominant-baseline="ideographic" textLength="116.078125" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Primary (Shade)</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347d685e0d0f" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347d685e0d0f"><rect rx="5" ry="5" x="34.99999999999994" y="189.99999999999966" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96" height="96" style="fill: rgb(47, 126, 111); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347d685e0d0f" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-8-f221660d-9d22-8076-8005-347d685e0d0f-0"><use href="#stroke-shape-render-8-f221660d-9d22-8076-8005-347d685e0d0f-0"/></clipPath><rect rx="5" ry="5" x="34.99999999999994" y="189.99999999999966" width="96" height="96" id="stroke-shape-render-8-f221660d-9d22-8076-8005-347d685e0d0f-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-8-f221660d-9d22-8076-8005-347d685e0d0f-0" clip-path="url('#inner-stroke-render-8-f221660d-9d22-8076-8005-347d685e0d0f-0')"/></g></g></g></g></g></g><g id="shape-f221660d-9d22-8076-8005-347c5333b114" data-testid="PrimaryGradient"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347c5333b114"><rect rx="0" ry="0" x="19.999999999999943" y="305.99999999999966" width="126.00000000000006" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347c5333b116" data-testid="Primary (Grdient)"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="19.999999999999943" y="305.99999999999966" width="125.99999999999994" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="19.999999999999943" y="305.99999999999966" width="125.28125" height="18" id="fill-0-render-10-0"><g><rect width="125.28125" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347c5333b116"><text x="19.999999999999943" y="322.99999999999966" dominant-baseline="ideographic" textLength="125.28125" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Primary (Grdient)</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347c5333b115" data-testid="Color"><defs><linearGradient id="fill-color-gradient-render-11-0" x1="-0.006244059796203534" y1="-0.039694957424105816" x2="1.027101456908029" y2="1.0126691884219217" gradientTransform=""><stop offset="0" stop-color="#1B695B" stop-opacity="1"/><stop offset="1" stop-color="#2f7e6f" stop-opacity="1"/></linearGradient><pattern patternUnits="userSpaceOnUse" x="34.99999999999983" y="332.99999999999966" width="96" height="96" id="fill-0-render-11"><g><rect width="96" height="96" style="fill: url(&quot;#fill-color-gradient-render-11-0&quot;);"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347c5333b115"><rect rx="5" ry="5" x="34.99999999999983" y="332.99999999999966" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96" height="96" fill="url(#fill-0-render-11)"/></g><g id="strokes-f221660d-9d22-8076-8005-347c5333b115" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-11-f221660d-9d22-8076-8005-347c5333b115-0"><use href="#stroke-shape-render-11-f221660d-9d22-8076-8005-347c5333b115-0"/></clipPath><rect rx="5" ry="5" x="34.99999999999983" y="332.99999999999966" width="96" height="96" id="stroke-shape-render-11-f221660d-9d22-8076-8005-347c5333b115-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-11-f221660d-9d22-8076-8005-347c5333b115-0" clip-path="url('#inner-stroke-render-11-f221660d-9d22-8076-8005-347c5333b115-0')"/></g></g></g></g></g></g></g></g></g><g id="shape-f221660d-9d22-8076-8005-347e1e2c234d" data-testid="Secondary"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347e1e2c234d"><rect rx="0" ry="0" x="165.99999999999983" y="19.999999999999886" width="136" height="266" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347e153eff64" data-testid="Secondary"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347e153eff64"><rect rx="0" ry="0" x="185.99999999999983" y="19.999999999999886" width="96.00000000000011" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347e153eff66" data-testid="Secondary"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="195.49999999999983" y="19.999999999999886" width="77" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="195.49999999999983" y="19.999999999999886" width="76.484375" height="18" id="fill-0-render-14-0"><g><rect width="76.484375" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347e153eff66"><text x="195.49999999999983" y="36.999999999999886" dominant-baseline="ideographic" textLength="76.484375" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Secondary</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347e153eff65" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347e153eff65"><rect rx="5" ry="5" x="185.99999999999972" y="46.999999999999886" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96.00000000000034" height="96" style="fill: rgb(78, 177, 137); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347e153eff65" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-15-f221660d-9d22-8076-8005-347e153eff65-0"><use href="#stroke-shape-render-15-f221660d-9d22-8076-8005-347e153eff65-0"/></clipPath><rect rx="5" ry="5" x="185.99999999999972" y="46.999999999999886" width="96.00000000000034" height="96" id="stroke-shape-render-15-f221660d-9d22-8076-8005-347e153eff65-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-15-f221660d-9d22-8076-8005-347e153eff65-0" clip-path="url('#inner-stroke-render-15-f221660d-9d22-8076-8005-347e153eff65-0')"/></g></g></g></g></g></g><g id="shape-f221660d-9d22-8076-8005-347c5d6431d5" data-testid="SecondaryShade"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347c5d6431d5"><rect rx="0" ry="0" x="165.99999999999983" y="162.9999999999999" width="136" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347c5d6431d7" data-testid="Secondary (Shade)"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="165.99999999999983" y="162.9999999999999" width="136" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="165.99999999999983" y="162.9999999999999" width="135.3125" height="18" id="fill-0-render-17-0"><g><rect width="135.3125" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347c5d6431d7"><text x="165.99999999999983" y="179.9999999999999" dominant-baseline="ideographic" textLength="135.3125" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Secondary (Shade)</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347c5d6431d6" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347c5d6431d6"><rect rx="5" ry="5" x="185.9999999999996" y="189.9999999999999" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96.00000000000034" height="96" style="fill: rgb(111, 198, 163); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347c5d6431d6" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-18-f221660d-9d22-8076-8005-347c5d6431d6-0"><use href="#stroke-shape-render-18-f221660d-9d22-8076-8005-347c5d6431d6-0"/></clipPath><rect rx="5" ry="5" x="185.9999999999996" y="189.9999999999999" width="96.00000000000034" height="96" id="stroke-shape-render-18-f221660d-9d22-8076-8005-347c5d6431d6-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-18-f221660d-9d22-8076-8005-347c5d6431d6-0" clip-path="url('#inner-stroke-render-18-f221660d-9d22-8076-8005-347c5d6431d6-0')"/></g></g></g></g></g></g></g></g></g><g id="shape-f221660d-9d22-8076-8005-347c1a9bbf81" data-testid="Accent"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347c1a9bbf81"><rect rx="0" ry="0" x="321.99999999999983" y="19.999999999999886" width="95.99999999999977" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347c1a9bbf85" data-testid="Accent"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="344.4999999999997" y="19.999999999999886" width="51" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="344.4999999999997" y="19.999999999999886" width="50.71875" height="18" id="fill-0-render-20-0"><g><rect width="50.71875" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347c1a9bbf85"><text x="344.4999999999997" y="36.999999999999886" dominant-baseline="ideographic" textLength="50.71875" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Accent</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347c1a9bbf84" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347c1a9bbf84"><rect rx="5" ry="5" x="321.9999999999996" y="46.999999999999886" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96.00000000000023" height="96" style="fill: rgb(36, 123, 89); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347c1a9bbf84" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-21-f221660d-9d22-8076-8005-347c1a9bbf84-0"><use href="#stroke-shape-render-21-f221660d-9d22-8076-8005-347c1a9bbf84-0"/></clipPath><rect rx="5" ry="5" x="321.9999999999996" y="46.999999999999886" width="96.00000000000023" height="96" id="stroke-shape-render-21-f221660d-9d22-8076-8005-347c1a9bbf84-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-21-f221660d-9d22-8076-8005-347c1a9bbf84-0" clip-path="url('#inner-stroke-render-21-f221660d-9d22-8076-8005-347c1a9bbf84-0')"/></g></g></g></g></g></g></g></g><g id="strokes-f221660d-9d22-8076-8005-347c1a9bbf7f" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><radialGradient id="stroke-color-gradient-render-1-0" cx="-0.0994304341340643" cy="-0.10559127248869538" r="1.6607133582927045" gradientTransform="matrix(-0.714307, 0.699833, -0.699833, -0.714307, -0.244350, -0.111431)"><stop offset="0" stop-color="#dadada" stop-opacity="0.505"/><stop offset="1" stop-color="#dadada" stop-opacity="0.675"/></radialGradient><clipPath id="inner-stroke-render-1-f221660d-9d22-8076-8005-347c1a9bbf7f-0"><use href="#stroke-shape-render-1-f221660d-9d22-8076-8005-347c1a9bbf7f-0"/></clipPath><rect width="437.9999999999996" height="448.9999999999999" class="frame-background" x="0" id="stroke-shape-render-1-f221660d-9d22-8076-8005-347c1a9bbf7f-0" style="fill: none; stroke-width: 4; stroke: url(&quot;#stroke-color-gradient-render-1-0&quot;);" ry="10" rx="10" y="0"/></defs><use href="#stroke-shape-render-1-f221660d-9d22-8076-8005-347c1a9bbf7f-0" clip-path="url('#inner-stroke-render-1-f221660d-9d22-8076-8005-347c1a9bbf7f-0')"/></g></g></g></svg>
\ No newline at end of file
diff --git a/Вложения/Colors_Background.svg b/Вложения/Colors_Background.svg
new file mode 100644
index 0000000..57f3bf8
--- /dev/null
+++ b/Вложения/Colors_Background.svg
@@ -0,0 +1,46 @@
+<svg width="339" xmlns="http://www.w3.org/2000/svg" height="163" id="screenshot-f221660d-9d22-8076-8005-3478b2b1f2fc" viewBox="0 0 339 163" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><style>/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w0aXpsog.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w9aXpsog.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w2aXpsog.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w3aXpsog.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w5aXo.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+</style><g id="shape-f221660d-9d22-8076-8005-3478b2b1f2fc" data-testid="Background"><defs><clipPath id="frame-clip-f221660d-9d22-8076-8005-3478b2b1f2fc-render-37" class="frame-clip frame-clip-def"><rect rx="10" ry="10" x="0" y="0" width="339" height="163" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g clip-path="url(#frame-clip-f221660d-9d22-8076-8005-3478b2b1f2fc-render-37)" fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-3478b2b1f2fc"><rect width="339" height="163" class="frame-background" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(255, 255, 255); fill-opacity: 0.2;" ry="10" rx="10" y="0"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347a19ad04bc" data-testid="Background Light"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347a19ad04bc"><rect rx="0" ry="0" x="20" y="20" width="141" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347a19ad04be" data-testid="Background (Light)"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="20" y="20" width="141" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="20" y="20" width="140.34375" height="18" id="fill-0-render-39-0"><g><rect width="140.34375" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347a19ad04be"><text x="20" y="37" dominant-baseline="ideographic" textLength="140.34375" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Background (Light)</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347a19ad04bd" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347a19ad04bd"><rect rx="5" ry="5" x="42.5" y="47" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96" height="96" style="fill: rgb(236, 239, 244); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347a19ad04bd" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-40-f221660d-9d22-8076-8005-347a19ad04bd-0"><use href="#stroke-shape-render-40-f221660d-9d22-8076-8005-347a19ad04bd-0"/></clipPath><rect rx="5" ry="5" x="42.5" y="47" width="96" height="96" id="stroke-shape-render-40-f221660d-9d22-8076-8005-347a19ad04bd-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-40-f221660d-9d22-8076-8005-347a19ad04bd-0" clip-path="url('#inner-stroke-render-40-f221660d-9d22-8076-8005-347a19ad04bd-0')"/></g></g></g></g></g></g><g id="shape-f221660d-9d22-8076-8005-34798919c61f" data-testid="Background Dark"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-34798919c61f"><rect rx="0" ry="0" x="181" y="20" width="138" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-3479891a3390" data-testid="Background (Dark)"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="181" y="20" width="138" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="181" y="20" width="137.4375" height="18" id="fill-0-render-42-0"><g><rect width="137.4375" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-3479891a3390"><text x="181" y="37" dominant-baseline="ideographic" textLength="137.4375" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Background (Dark)</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-34798919c620" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-34798919c620"><rect rx="5" ry="5" x="202" y="47" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96" height="96" style="fill: rgb(46, 52, 64); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-34798919c620" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-43-f221660d-9d22-8076-8005-34798919c620-0"><use href="#stroke-shape-render-43-f221660d-9d22-8076-8005-34798919c620-0"/></clipPath><rect rx="5" ry="5" x="202" y="47" width="96" height="96" id="stroke-shape-render-43-f221660d-9d22-8076-8005-34798919c620-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-43-f221660d-9d22-8076-8005-34798919c620-0" clip-path="url('#inner-stroke-render-43-f221660d-9d22-8076-8005-34798919c620-0')"/></g></g></g></g></g></g></g></g><g id="strokes-f221660d-9d22-8076-8005-3478b2b1f2fc" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><radialGradient id="stroke-color-gradient-render-37-0" cx="-0.0994304341340643" cy="-0.10559127248869538" r="1.6607133582927045" gradientTransform="matrix(-0.714307, 0.699833, -0.699833, -0.714307, -0.244350, -0.111431)"><stop offset="0" stop-color="#dadada" stop-opacity="0.505"/><stop offset="1" stop-color="#dadada" stop-opacity="0.675"/></radialGradient><clipPath id="inner-stroke-render-37-f221660d-9d22-8076-8005-3478b2b1f2fc-0"><use href="#stroke-shape-render-37-f221660d-9d22-8076-8005-3478b2b1f2fc-0"/></clipPath><rect width="339" height="163" class="frame-background" x="0" id="stroke-shape-render-37-f221660d-9d22-8076-8005-3478b2b1f2fc-0" style="fill: none; stroke-width: 4; stroke: url(&quot;#stroke-color-gradient-render-37-0&quot;);" ry="10" rx="10" y="0"/></defs><use href="#stroke-shape-render-37-f221660d-9d22-8076-8005-3478b2b1f2fc-0" clip-path="url('#inner-stroke-render-37-f221660d-9d22-8076-8005-3478b2b1f2fc-0')"/></g></g></g></svg>
\ No newline at end of file
diff --git a/Вложения/Colors_Text.svg b/Вложения/Colors_Text.svg
new file mode 100644
index 0000000..fdbc0c2
--- /dev/null
+++ b/Вложения/Colors_Text.svg
@@ -0,0 +1,46 @@
+<svg width="281" xmlns="http://www.w3.org/2000/svg" height="306" id="screenshot-f221660d-9d22-8076-8005-347a49bb2123" viewBox="0 0 281 306" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><style>/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w0aXpsog.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w9aXpsog.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w2aXpsog.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w3aXpsog.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url(http://penpot-frontend/internal/gfonts/font/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w5aXo.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+</style><g id="shape-f221660d-9d22-8076-8005-347a49bb2123" data-testid="Text"><defs><clipPath id="frame-clip-f221660d-9d22-8076-8005-347a49bb2123-render-22" class="frame-clip frame-clip-def"><rect rx="10" ry="10" x="0" y="0" width="280.9999999999999" height="306" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g clip-path="url(#frame-clip-f221660d-9d22-8076-8005-347a49bb2123-render-22)" fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347a49bb2123"><rect width="280.9999999999999" height="306" class="frame-background" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(255, 255, 255); fill-opacity: 0.2;" ry="10" rx="10" y="0"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347d01b14127" data-testid="Light"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347d01b14127"><rect rx="0" ry="0" x="20" y="20" width="111.99999999999989" height="266" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347aea28996f" data-testid="Text Light"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347aea28996f"><rect rx="0" ry="0" x="27.999999999999943" y="20" width="96" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347aea289971" data-testid="Text (Light)"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="34.99999999999994" y="20" width="82" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="34.99999999999994" y="20" width="81.390625" height="18" id="fill-0-render-25-0"><g><rect width="81.390625" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347aea289971"><text x="34.99999999999994" y="37" dominant-baseline="ideographic" textLength="81.390625" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Text (Light)</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347aea289970" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347aea289970"><rect rx="5" ry="5" x="27.999999999999943" y="47" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96" height="96" style="fill: rgb(9, 47, 39); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347aea289970" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-26-f221660d-9d22-8076-8005-347aea289970-0"><use href="#stroke-shape-render-26-f221660d-9d22-8076-8005-347aea289970-0"/></clipPath><rect rx="5" ry="5" x="27.999999999999943" y="47" width="96" height="96" id="stroke-shape-render-26-f221660d-9d22-8076-8005-347aea289970-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-26-f221660d-9d22-8076-8005-347aea289970-0" clip-path="url('#inner-stroke-render-26-f221660d-9d22-8076-8005-347aea289970-0')"/></g></g></g></g></g></g><g id="shape-f221660d-9d22-8076-8005-347aea28996c" data-testid="Text Dim Light"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347aea28996c"><rect rx="0" ry="0" x="20" y="163" width="111.99999999999989" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347aea28996e" data-testid="TextDim (Light)"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="19.999999999999943" y="163" width="112" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="19.999999999999943" y="163" width="111.734375" height="18" id="fill-0-render-28-0"><g><rect width="111.734375" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347aea28996e"><text x="19.999999999999943" y="180" dominant-baseline="ideographic" textLength="111.734375" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">TextDim (Light)</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347aea28996d" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347aea28996d"><rect rx="5" ry="5" x="27.999999999999943" y="190" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96" height="96" style="fill: rgb(6, 35, 29); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347aea28996d" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-29-f221660d-9d22-8076-8005-347aea28996d-0"><use href="#stroke-shape-render-29-f221660d-9d22-8076-8005-347aea28996d-0"/></clipPath><rect rx="5" ry="5" x="27.999999999999943" y="190" width="96" height="96" id="stroke-shape-render-29-f221660d-9d22-8076-8005-347aea28996d-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-29-f221660d-9d22-8076-8005-347aea28996d-0" clip-path="url('#inner-stroke-render-29-f221660d-9d22-8076-8005-347aea28996d-0')"/></g></g></g></g></g></g></g></g></g><g id="shape-f221660d-9d22-8076-8005-347d125b104d" data-testid="Dark"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347d125b104d"><rect rx="0" ry="0" x="151.9999999999999" y="20" width="109" height="266" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347aca4a7840" data-testid="Text Dark"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347aca4a7840"><rect rx="0" ry="0" x="158.4999999999999" y="20" width="96" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347aca4a7842" data-testid="Text (Dark)"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="166.9999999999999" y="20" width="79" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="166.9999999999999" y="20" width="78.484375" height="18" id="fill-0-render-32-0"><g><rect width="78.484375" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347aca4a7842"><text x="166.9999999999999" y="37" dominant-baseline="ideographic" textLength="78.484375" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">Text (Dark)</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347aca4a7841" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347aca4a7841"><rect rx="5" ry="5" x="158.4999999999999" y="47" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96" height="96" style="fill: rgb(236, 239, 244); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347aca4a7841" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-33-f221660d-9d22-8076-8005-347aca4a7841-0"><use href="#stroke-shape-render-33-f221660d-9d22-8076-8005-347aca4a7841-0"/></clipPath><rect rx="5" ry="5" x="158.4999999999999" y="47" width="96" height="96" id="stroke-shape-render-33-f221660d-9d22-8076-8005-347aca4a7841-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-33-f221660d-9d22-8076-8005-347aca4a7841-0" clip-path="url('#inner-stroke-render-33-f221660d-9d22-8076-8005-347aca4a7841-0')"/></g></g></g></g></g></g><g id="shape-f221660d-9d22-8076-8005-347a49bb2125" data-testid="Text Dim Dark"><g fill="none"><g class="fills" id="fills-f221660d-9d22-8076-8005-347a49bb2125"><rect rx="0" ry="0" x="151.9999999999999" y="163" width="109" height="123" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-f221660d-9d22-8076-8005-347a49bb2129" data-testid="TextDim (Dark)"><g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="151.9999999999999" y="163" width="109" height="17" rx="0" ry="0"><defs><pattern patternUnits="userSpaceOnUse" x="151.9999999999999" y="163" width="108.84375" height="18" id="fill-0-render-35-0"><g><rect width="108.84375" height="18" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></pattern></defs><g class="fills" id="fills-f221660d-9d22-8076-8005-347a49bb2129"><text x="151.9999999999999" y="180" dominant-baseline="ideographic" textLength="108.84375" lengthAdjust="spacingAndGlyphs" style="text-transform: none; font-family: Montserrat; letter-spacing: normal; font-style: normal; font-weight: 600; white-space: pre; font-size: 14px; text-decoration: none solid rgb(255, 255, 255); direction: ltr; fill: rgb(255, 255, 255); fill-opacity: 1;">TextDim (Dark)</text></g></g></g><g id="shape-f221660d-9d22-8076-8005-347a49bb2128" data-testid="Color"><g class="fills" id="fills-f221660d-9d22-8076-8005-347a49bb2128"><rect rx="5" ry="5" x="158.4999999999999" y="190" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="96" height="96" style="fill: rgb(216, 222, 233); fill-opacity: 1;"/></g><g id="strokes-f221660d-9d22-8076-8005-347a49bb2128" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-36-f221660d-9d22-8076-8005-347a49bb2128-0"><use href="#stroke-shape-render-36-f221660d-9d22-8076-8005-347a49bb2128-0"/></clipPath><rect rx="5" ry="5" x="158.4999999999999" y="190" width="96" height="96" id="stroke-shape-render-36-f221660d-9d22-8076-8005-347a49bb2128-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 0.3;"/></defs><use href="#stroke-shape-render-36-f221660d-9d22-8076-8005-347a49bb2128-0" clip-path="url('#inner-stroke-render-36-f221660d-9d22-8076-8005-347a49bb2128-0')"/></g></g></g></g></g></g></g></g></g></g></g><g id="strokes-f221660d-9d22-8076-8005-347a49bb2123" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><radialGradient id="stroke-color-gradient-render-22-0" cx="-0.0994304341340643" cy="-0.10559127248869538" r="1.6607133582927045" gradientTransform="matrix(-0.714307, 0.699833, -0.699833, -0.714307, -0.244350, -0.111431)"><stop offset="0" stop-color="#dadada" stop-opacity="0.505"/><stop offset="1" stop-color="#dadada" stop-opacity="0.675"/></radialGradient><clipPath id="inner-stroke-render-22-f221660d-9d22-8076-8005-347a49bb2123-0"><use href="#stroke-shape-render-22-f221660d-9d22-8076-8005-347a49bb2123-0"/></clipPath><rect width="280.9999999999999" height="306" class="frame-background" x="0" id="stroke-shape-render-22-f221660d-9d22-8076-8005-347a49bb2123-0" style="fill: none; stroke-width: 4; stroke: url(&quot;#stroke-color-gradient-render-22-0&quot;);" ry="10" rx="10" y="0"/></defs><use href="#stroke-shape-render-22-f221660d-9d22-8076-8005-347a49bb2123-0" clip-path="url('#inner-stroke-render-22-f221660d-9d22-8076-8005-347a49bb2123-0')"/></g></g></g></svg>
\ No newline at end of file
diff --git a/Вложения/MarkupDraft.png b/Вложения/MarkupDraft.png
new file mode 100644
index 0000000..d95dd83
Binary files /dev/null and b/Вложения/MarkupDraft.png differ
diff --git a/Дизайн/Дизайн-система.md b/Дизайн/Дизайн-система.md
index f02d075..64c66c8 100644
--- a/Дизайн/Дизайн-система.md
+++ b/Дизайн/Дизайн-система.md
@@ -1,3 +1,45 @@
 # Дизайн-система [ORUDO.RU](https://orudo.ru)
 ***
-`тут будет описание дизайн-системы сайта`
\ No newline at end of file
+## Шрифт
+---
+`Описание шрифтов для сайта`
+## Цвета
+---
+
+| Тип                      | HEX                  | Превью                                                                                                                                      |
+| ------------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Background** *(Light)* | \#ECEFF4             | <div style="width: 50px; height: 50px; background-color: #ECEFF4;"></div>                                                                   |
+| **Text** *(Light)*       | \#092F27             | <div style="width: 50px; height: 50px; background-color: #092f27;"></div>                                                                   |
+| **Text (Dim)** *(Light)* | \#06231D             | <div style="width: 50px; height: 50px; background-color: #06231d;"></div>                                                                   |
+| **Background** *(Dark)*  | \#2E3440             | <div style="width: 50px; height: 50px; background-color: #2e3440;"></div>                                                                   |
+| **Text** *(Dark)*        | \#ECEFF4             | <div style="width: 50px; height: 50px; background-color: #FFFFFF;"></div>                                                                   |
+| **Text (Dim)** *(Dark)*  | \#D8DEE9             | <div style="width: 50px; height: 50px; background-color: #d8dee9;"></div>                                                                   |
+| **Primary**              | \#1B695B             | <div style="width: 50px; height: 50px; background-color: #1b695b;"></div>                                                                   |
+| **Primary** *(Shade)*    | \#2F7E6F             | <div style="width: 50px; height: 50px; background-color: #2f7e6f;"></div>                                                                   |
+| **Primary** *(Gradient)* | \#1B695B<br>\#2F7E6F | <div style="width: 50px; height: 50px; background: linear-gradient(to bottom, rgba(27, 105, 91, 1) 0%, rgba(47, 126, 111, 1) 100%);"></div> |
+| **Secondary**            | \#4EB189             | <div style="width: 50px; height: 50px; background-color: #4eb189;"></div>                                                                   |
+| **Secondary** *(Shade)*  | \#6FC6A3             | <div style="width: 50px; height: 50px; background-color: #6fc6a3;"></div>                                                                   |
+| **Accent**               | \#247B59             | <div style="width: 50px; height: 50px; background-color: #247b59;"></div>                                                                   |
+
+![[Colors_Background.svg]]
+
+![[Colors_Text.svg]]
+
+![[Colors.svg]]
+## Компоненты:
+---
+### Primary Button
+---
+`Прикрепить макет`
+### Secondary Button
+---
+`Прикрепить макет`
+### Tertiary Button
+---
+`Прикрепить макет`
+### Site Widget
+---
+`Прикрепить макет`
+### Social Widget
+---
+`Прикрепить макет`
\ No newline at end of file
diff --git a/Дизайн/Макеты.md b/Дизайн/Макеты.md
new file mode 100644
index 0000000..7b8c704
--- /dev/null
+++ b/Дизайн/Макеты.md
@@ -0,0 +1,5 @@
+# Макеты
+***
+## Черновой макет
+---
+![[MarkupDraft.png]]
\ No newline at end of file